Plite React

@platejs/plite-react owns the React editor runtime: editor creation, the Plite provider, the Editable surface, browser event handling, native selection sync, void shells, hidden DOM coverage, decoration sources, annotations, widgets, and large-document DOM strategies.

Start with usePliteEditor, Plite, and Editable.

Minimal Usage

import { Plite, Editable, usePliteEditor } from "@platejs/plite-react";
 
const Editor = () => {
  const editor = usePliteEditor({
    initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
  });
 
  return (
    <Plite editor={editor}>
      <Editable placeholder="Start typing..." />
    </Plite>
  );
};Copy

import { Plite, Editable, usePliteEditor } from "@platejs/plite-react";
 
const Editor = () => {
  const editor = usePliteEditor({
    initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
  });
 
  return (
    <Plite editor={editor}>
      <Editable placeholder="Start typing..." />
    </Plite>
  );
};Copy

Stable Runtime Path

• React Editor Setup: create an editor and install the React, DOM, clipboard, and history extensions.
• Plite Component: provide the editor, value changes, decoration sources, annotation stores, and widget stores.
• Editable Component: render content, marks, voids, placeholders, DOM strategies, and editor event handlers.
• Event Handling: customize copy, paste, drop, keyboard, input, selection, focus, and drag behavior without replacing Plite's runtime.
• Hooks: subscribe to editor state, runtime state, roots, mounted nodes, decorations, annotations, widgets, focus, read-only state, and selection.

Runtime Boundaries

• React Editor: DOM, focus, selection, clipboard, and React-specific editor APIs.
• Rendering primitives PliteElement, PliteText, PliteLeaf, and PlitePlaceholder carry Plite's DOM attributes when custom renderers need to keep the native editing contract intact.
• DOM Coverage Boundaries: represent hidden or summarized DOM regions for selection, copy, find, and materialization.
• Annotations: durable anchored ranges for comments, suggestions, diagnostics, and review markers.
• Hooks: runtime/root hooks and widget hooks for external chrome and overlay UI anchored to roots, nodes, selections, and annotations. Advanced hooks include usePliteNodeRef, useDOMStrategyVirtualOffset, and usePliteRangeDecorationSource.

Advanced Lanes

• Virtualized Rendering: large-document stress and DOM-budget work. Keep production use behind explicit product proof.