React Editor Setup

PreviousNext

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

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

useSlateEditor

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

useSlateEditor 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/slate";
import { react } from "@platejs/slate-react";
 
const editor = createEditor({
  extensions: [react()],
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});
import { createEditor } from "@platejs/slate";
import { react } from "@platejs/slate-react";
 
const editor = createEditor({
  extensions: [react()],
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});

Configure the internal Slate 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.