React Editor Setup

PreviousNext

Create React-backed editors with usePliteEditor, createReactEditor, or the react extension.

Create React-backed editors with usePliteEditor when a React component owns the editor lifetime.

usePliteEditor

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

usePliteEditor creates one editor for the component lifetime and installs React, DOM, clipboard, and default history capabilities. The editor exposes host APIs through editor.api.

editor.api.dom.focus();
editor.api.clipboard.insertTextData(dataTransfer);
editor.api.react.isComposing();
editor.api.dom.focus();
editor.api.clipboard.insertTextData(dataTransfer);
editor.api.react.isComposing();

Use createReactEditor when the editor is created outside a component or inside a custom hook that owns the same one-shot lifetime.

createReactEditor

const editor = createReactEditor({
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});
const editor = createReactEditor({
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});

Use the lower-level react() extension only when composing extensions through createEditor.

react

import { createEditor } from "@platejs/plite";
import { react } from "@platejs/plite-react";
 
const editor = createEditor({
  extensions: [react()],
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});
import { createEditor } from "@platejs/plite";
import { react } from "@platejs/plite-react";
 
const editor = createEditor({
  extensions: [react()],
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});

Configure the internal Plite clipboard payload with clipboardFormatKey.

const editor = createReactEditor({
  clipboardFormatKey: "x-acme-editor-fragment",
  initialValue,
});
const editor = createReactEditor({
  clipboardFormatKey: "x-acme-editor-fragment",
  initialValue,
});

See React Editor for DOM, focus, selection, and clipboard APIs.