Lexical
Lexical Editor Binding for DocNode.
1. Installation
npm i @docukit/docnode @docukit/docnode-lexical2. Usage
DocNodePlugin receives a DocNode Doc and syncs it with the Lexical editor. It is unopinionated about
how you should sync that Doc across different clients. We recommend using DocSync as explained
in the next section.
Presence is opt-in. If you do not pass setPresence, DocNodePlugin will not send local presence.
When you do pass setPresence, user is optional. Missing user fields are filled with
name: "Anonymous" and a random curated color.
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { DocNodePlugin } from "@docukit/docnode-lexical/react";
function Editor({ doc, presence, setPresence }) {
return (
<LexicalComposer initialConfig={initialConfig}>
<DocNodePlugin
doc={doc}
presence={presence}
setPresence={setPresence}
user={{ name: "John Doe", color: "#ff0000" }} // optional color override
/>
{/* ... The rest of your Lexical Plugins ... */}
{/* ... Don't include <HistoryPlugin /> here ... */}
</LexicalComposer>
);
}Configure undo history on the Doc, and don't mount Lexical's
HistoryPlugin together with DocNodePlugin.
import { Doc } from "@docukit/docnode";
import { createLexicalDocNodeConfig } from "@docukit/docnode-lexical";
const doc = new Doc(
createLexicalDocNodeConfig({ undoManager: { maxUndoSteps: 100 } }),
);Props
Prop
Type
3. With DocSync (recommended)
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { DocNodePlugin } from "@docukit/docnode-lexical/react";
// see the DocSync docs for more info on how to generate these hooks
import { useDoc, usePresence } from "../docsync/client";
function Editor({ id }: { id: string }) {
const { doc, docId } = useDoc({ type: "lexical", id, createIfMissing: true });
const [presence, setPresence] = usePresence({ docId });
return (
<LexicalComposer initialConfig={initialConfig}>
<DocNodePlugin
doc={doc}
presence={presence}
setPresence={setPresence}
user={{ name: "John Doe" }}
/>
{/* ... The rest of your Lexical Plugins ... */}
</LexicalComposer>
);
}