Plite Hyperscript

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

JSX Fixtures

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

/** @jsx jsx */
import { jsx } from "@platejs/plite-hyperscript"

The built-in tags create normal Plite objects:

• <editor> creates an editor seeded with document and selection state.
• <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/plite-hyperscript";
 
const h = createHyperscript({
  elements: {
    paragraph: { type: "paragraph" },
  },
});
 
const paragraph = h("paragraph", {}, "hello");Copy

import { createHyperscript } from "@platejs/plite-hyperscript";
 
const h = createHyperscript({
  elements: {

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 Plite node values.