docs: improve DecoratorNode docs

Add description for DecoratorNode.prototype.decorate method, add description to the docs website "Extending DecoratorNode" section.
facebook · Nov 26, 2023 · 6dd94ec · 6dd94ec
1 parent 0f7c78b
commit 6dd94ec
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -20,6 +20,9 @@ export class DecoratorNode<T> 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');
   }