From 6dd94ec58678cbb001b4653e261743c472cba80e Mon Sep 17 00:00:00 2001 From: Miroslav Petrov Date: Sun, 26 Nov 2023 11:18:52 +0200 Subject: [PATCH] docs: improve DecoratorNode docs Add description for DecoratorNode.prototype.decorate method, add description to the docs website "Extending DecoratorNode" section. --- packages/lexical-website/docs/concepts/nodes.md | 10 +++++++--- packages/lexical/src/nodes/LexicalDecoratorNode.ts | 3 +++ 2 files changed, 10 insertions(+), 3 deletions(-) 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'); }