Lexical
Lexical Editor Binding for DocNode.
1. Installation
npm i @docukit/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.
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { DocNodePlugin } from "@docukit/lexical/react";
function Editor({ doc, presence, setPresence }) {
return (
<LexicalComposer initialConfig={initialConfig}>
<DocNodePlugin
doc={doc}
presence={presence}
setPresence={setPresence}
user={{ name: "John Doe", color: "#ff0000" }}
/>
{/* ... The rest of your Lexical Plugins ... */}
</LexicalComposer>
);
}Props
Prop
Type
3. With DocSync (recommended)
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { DocNodePlugin } from "@docukit/lexical/react";
// see the DocSync docs for more info on how to generate these hooks
import { useDoc, usePresence } from "../docsync/client";
function Editor() {
const { doc, docId } = useDoc({ type: "lexical", createIfMissing: true });
const [presence, setPresence] = usePresence({ docId });
return (
<LexicalComposer initialConfig={initialConfig}>
<DocNodePlugin
doc={doc}
presence={presence}
setPresence={setPresence}
user={{ name: "John Doe", color: "#ff0000" }}
/>
{/* ... The rest of your Lexical Plugins ... */}
</LexicalComposer>
);
}