Slate Hyperscript

@platejs/slate-hyperscript creates Slate test fixtures with JSX. Use it when nested editor state is easier to read as markup than as raw JSON.

/** @jsx jsx */
import { jsx } from '@platejs/slate-hyperscript'
 
const editor = (
  <editor>
    <element type="paragraph">
      alpha
      <cursor />
    </element>
  </editor>
)Copy

/** @jsx jsx */
import { jsx } from '@platejs/slate-hyperscript'
 
const editor = (
  <editor>
    <element type="paragraph">
      alpha
      <cursor />
    </element>
  </editor>
)Copy

The built-in tags create normal Slate objects:

• <editor> creates an editor with children, selection, and marks.
• <fragment> creates a Descendant[].
• <element> creates an element with resolved children.
• <text> creates one text node.
• <cursor /> creates a collapsed selection point.
• <anchor /> and <focus /> create an expanded selection.
• <selection> creates a standalone Range from child anchor/focus tags.

Define domain tags with createHyperscript.

import { createHyperscript } from '@platejs/slate-hyperscript'
 
const h = createHyperscript({
  elements: {
    paragraph: { type: 'paragraph' },
  },
})
 
const paragraph = h('paragraph', {}, 'hello')Copy

import { createHyperscript } from '@platejs/slate-hyperscript'
 
const h = createHyperscript({
  elements: {
    paragraph: { type: 'paragraph' },
  },
})
 
const paragraph = h('paragraph', {}, 'hello')Copy

Creator Helpers

jsx is the default fixture factory. createHyperscript builds a custom factory. createEditor and createText are low-level creators for custom factories and fixture helpers. HyperscriptCreators and HyperscriptShorthands are TypeScript helper types for custom factories.

Keep hyperscript in tests and fixtures. Runtime editor code should use normal Slate node values.