From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
UNPUBLISHED
  • Overview
  • Why This Fork
  • Examples
Walkthroughs
  • Installing Plite
  • Adding Event Handlers
  • Defining Custom Elements
  • Applying Custom Formatting
  • Executing Commands
  • Saving to a Database
  • Canonical Change Substrate
  • Improving Performance
Concepts
  • Interfaces
  • Nodes
  • Locations
  • Transforms
  • Document Changes
  • Commands
  • Editor
  • Extensions
  • Rendering
  • Serializing
  • Normalizing
  • Using TypeScript
  • Roots
  • Document State
  • Editing Behavior
  • Selection And DOM
  • Clipboard And Paste
  • Projection And Overlays
  • Schema
API
  • 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
Libraries
  • Plite DOM
  • History Editor API
  • History Extension Setup
  • History
  • Plite History
  • Plite Hyperscript
  • Plite Layout
  • Annotations
  • DOM Coverage Boundaries
  • Editable Component
  • Plite React Event Handling
  • Virtualized Rendering
  • Plite React Hooks
  • React Editor Setup
  • React Editor
  • Plite React
  • Plite Component
  • Plite Yjs
  • Plite
General
  • Migration
  • Contributing
  • Docs Proof Map
  • FAQ
  • Resources

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

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.dom.clipboard.insertTextData(dataTransfer);
editor.api.react.isComposing();
editor.api.dom.focus();
editor.api.dom.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({ dom }) extension only when composing extensions through createEditor. Pass the exact DOM descriptor that React installs as a dependency.

react

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

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.

Plite React HooksReact Editor

On This Page

usePliteEditorcreateReactEditorreact
Build your editor
Production-ready AI template and reusable components.
Get all-access
MyEditor
=
()
=>
{
const editor = usePliteEditor({
initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});
return <Plite editor={editor}>...</Plite>;
};
{ createEditor }
from
"@platejs/plite"
;
import { dom } from "@platejs/plite-dom";
import { react } from "@platejs/plite-react";
const DOMExtension = dom();
const editor = createEditor({
extensions: [react({ dom: DOMExtension })],
initialValue: [{ type: "paragraph", children: [{ text: "" }] }],
});