Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Overview
    • Why This Fork
    • Examples
    • Installing Plite
    • Adding Event Handlers
    • Defining Custom Elements
    • Applying Custom Formatting
    • Executing Commands
    • Saving to a Database
    • Canonical Change Substrate
    • Improving Performance
    • Interfaces
    • Nodes
    • Locations
    • Transforms
    • Document Changes
    • Commands
    • Editor
    • Plugins
    • Rendering
    • Serializing
    • Normalizing
    • Using TypeScript
    • Roots
    • Document State
    • Editing Behavior
    • Selection And DOM
    • Clipboard And Paste
    • Decorations, annotations, and widgets
    • Schema
    • Anchor API
    • Location API
    • Path API
    • PointEntry API
    • Point API
    • Range API
    • Selection API
    • Location Types APIs
    • Span API
    • Editor
    • Element API
    • NodeEntry API
    • Node API
    • Node Types APIs
    • Text API
    • Debug Value Scrubbing
    • Transforms API
    • Plite DOM
    • History Editor API
    • History Plugin Setup
    • History
    • Plite History
    • Plite Hyperscript
    • Plite PaginationExperimental
    • Annotations
    • DOM Coverage Boundaries
    • Editable Component
    • External Text Views
    • Plite React Event Handling
    • Virtualized Rendering
    • Plite React Hooks
    • React Editor Setup
    • React Editor
    • Plite React
    • Plite Component
    • Plite Yjs
    • Plite
    • Migration
    • Contributing
    • FAQ
    • Resources

React Editor Setup

PreviousNext

Create React-backed editors with useEditor, createEditor, or the react plugin.

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

useEditor

import { EditorRoot, useEditor } from "plitejs/react";
 
const MyEditor = () => {
  const editor = useEditor({
    initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
  });
 
  return <EditorRoot editor={editor}>...</EditorRoot>;
};
import { EditorRoot, useEditor } from "plitejs/react";

useEditor creates one editor for the component lifetime and installs React, DOM, and clipboard capabilities. Install the history() plugin when undo and redo are needed. The editor exposes host APIs through editor.api.

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

Its plugins take outside resources, such as a Yjs document, when React commits the component, and give them back when it unmounts or its deps replace the editor.

Use createEditor when the editor is created outside a component. It is live when it returns, and editor.destroy() ends it.

createEditor

import { createEditor } from "plitejs/react";
 
const editor = createEditor({
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});
import { createEditor } from "plitejs/react";
 
const editor = createEditor({
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});

Use the lower-level react({ dom }) plugin only when composing plugins through createEditor. Pass the exact DOM descriptor that React installs as a dependency.

react

import { createEditor as createCoreEditor } from "plitejs";
import { dom } from "plitejs/dom";
import { react } from "plitejs/react";
 
const DOMPlugin = dom();
 
const editor = createCoreEditor({
  plugins: [react({ dom: DOMPlugin })],
  initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});

Configure the internal Plite clipboard payload with clipboardFormatKey.

import { createEditor } from "plitejs/react";
 
const editor = createEditor({
  clipboardFormatKey: "x-acme-editor-fragment",
  initialValue,
});
import { createEditor } from "plitejs/react";
 
const editor = createEditor({
  clipboardFormatKey: "x-acme-editor-fragment",
  initialValue,
});

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

Plite React HooksReact Editor

On This Page

useEditorcreateEditorreact
Build your editor
Production-ready AI template and reusable components.
Get all-access
const
MyEditor
=
()
=>
{
const editor = useEditor({
initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});
return <EditorRoot editor={editor}>...</EditorRoot>;
};
import { createEditor as createCoreEditor } from "plitejs";
import { dom } from "plitejs/dom";
import { react } from "plitejs/react";
const DOMPlugin = dom();
const editor = createCoreEditor({
plugins: [react({ dom: DOMPlugin })],
initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});