Custom Editor Factory Integration

Overview { .overview }

Create a custom hyperscript helper that integrates with a custom editor factory. The factory should add metadata to editor instances and validate their structure. You'll also define element shortcuts to simplify creating common element types.

Requirements { .requirements }

Custom Editor Factory

Implement a custom editor factory function that:

1. Adds an id property (use a simple counter starting at 1, incrementing with each editor created)
2. Adds a createdAt property with the current timestamp
3. Validates that the editor has at least one child element
4. Throws an error with message "Editor must have at least one child" if validation fails
5. Returns an editor object with all standard properties plus the custom ones

Custom Hyperscript Helper

Create a custom hyperscript helper that:

1. Uses your custom editor factory for <editor> tags
2. Defines element shortcuts:
   • <paragraph> creates elements with type: 'paragraph'
   • <heading> creates elements with type: 'heading' and level: 1

Test Suite

Write tests in editor-factory.test.js that verify:

1. Editors created through JSX have the custom id and createdAt properties
2. The id counter increments correctly across multiple editors
3. Custom element shortcuts work correctly (paragraph and heading types)
4. An error is thrown when creating an editor without children

Dependencies { .dependencies }

slate-hyperscript { .dependency }

Provides JSX-based syntax for creating Slate data structures.

slate { .dependency }

Core Slate editor framework (peer dependency).

Test Cases { .test-cases }

Test 1: Basic Editor Creation { .test-case }

@test

// In: editor-factory.test.js
// Create an editor using the custom hyperscript
const editor = (
  <editor>
    <paragraph>Hello world</paragraph>
  </editor>
)

// Verify custom properties exist
expect(editor.id).toBeDefined()
expect(editor.createdAt).toBeDefined()
expect(editor.children).toHaveLength(1)

Test 2: Custom Element Shortcuts { .test-case }

@test

// In: editor-factory.test.js
// Use custom element shortcuts
const editor = (
  <editor>
    <heading>Title</heading>
    <paragraph>Content</paragraph>
  </editor>
)

expect(editor.children[0].type).toBe('heading')
expect(editor.children[0].level).toBe(1)
expect(editor.children[1].type).toBe('paragraph')

Test 3: ID Counter Increment { .test-case }

@test

// In: editor-factory.test.js
// Create multiple editors and verify IDs increment
const editor1 = (
  <editor>
    <paragraph>First</paragraph>
  </editor>
)
const editor2 = (
  <editor>
    <paragraph>Second</paragraph>
  </editor>
)

expect(editor2.id).toBe(editor1.id + 1)

Test 4: Validation Error { .test-case }

@test

// In: editor-factory.test.js
// Creating an editor without children should throw
expect(() => {
  const editor = <editor></editor>
}).toThrow('Editor must have at least one child')

Constraints { .constraints }

• You must use the createHyperscript function from slate-hyperscript
• Pass your custom editor factory via the creators option
• Define element shortcuts using the elements option
• Export your custom hyperscript as jsx so it can be used with JSX syntax