diff --git a/packages/lexical-website/docs/concepts/nodes.md b/packages/lexical-website/docs/concepts/nodes.md index c3ef009955b..70050732a45 100644 --- a/packages/lexical-website/docs/concepts/nodes.md +++ b/packages/lexical-website/docs/concepts/nodes.md @@ -1,5 +1,3 @@ - - # Nodes ## Base Nodes @@ -271,7 +269,13 @@ export function $createVideoNode(id: string): VideoNode { return new VideoNode(id); } -export function $isVideoNode(node: LexicalNode | null | undefined): node is VideoNode { +export function $isVideoNode( + node: LexicalNode | null | undefined, +): node is VideoNode { return node instanceof VideoNode; } ``` + +Using `useDecorators`, `PlainTextPlugin` and `RichTextPlugin` execute `React.createPortal(reactDecorator, element)` for each `DecoratorNode`, +where the `reactDecorator` is what is returned by `DecoratorNode.prototype.decorate`, +and the `element` is an `HTMLElement` returned by `DecoratorNode.prototype.createDOM`. diff --git a/packages/lexical/src/nodes/LexicalDecoratorNode.ts b/packages/lexical/src/nodes/LexicalDecoratorNode.ts index a03e9144155..2883f01af1e 100644 --- a/packages/lexical/src/nodes/LexicalDecoratorNode.ts +++ b/packages/lexical/src/nodes/LexicalDecoratorNode.ts @@ -20,6 +20,9 @@ export class DecoratorNode extends LexicalNode { super(key); } + /** + * The returned value is added to the LexicalEditor.prototype._decorators + */ decorate(editor: LexicalEditor, config: EditorConfig): T { invariant(false, 'decorate: base method not extended'); }