Add node replacement system to core (#3367)

* Add node replacement system to core * Add test * Fix missing logic * Fix prettier * Update flow types
facebook · Nov 18, 2022 · 102b01d · 102b01d · vercel · Nov 18, 2022
1 parent 7fc77ad
commit 102b01d
Show file tree

Hide file tree

Showing 27 changed files with 207 additions and 57 deletions.
diff --git a/packages/lexical-code/src/CodeHighlightNode.ts b/packages/lexical-code/src/CodeHighlightNode.ts
@@ -8,13 +8,14 @@
 
 // eslint-disable-next-line simple-import-sort/imports
 import {
+  $applyNodeReplacement,
   $isLineBreakNode,
-  EditorConfig,
-  EditorThemeClasses,
-  LexicalNode,
-  NodeKey,
-  SerializedTextNode,
-  Spread,
+  type EditorConfig,
+  type EditorThemeClasses,
+  type LexicalNode,
+  type NodeKey,
+  type SerializedTextNode,
+  type Spread,
   TextNode,
 } from 'lexical';
 
@@ -203,7 +204,7 @@ export function $createCodeHighlightNode(
   text: string,
   highlightType?: string | null | undefined,
 ): CodeHighlightNode {
-  return new CodeHighlightNode(text, highlightType);
+  return $applyNodeReplacement(new CodeHighlightNode(text, highlightType));
 }
 
 export function $isCodeHighlightNode(

diff --git a/packages/lexical-code/src/CodeNode.ts b/packages/lexical-code/src/CodeNode.ts
@@ -34,6 +34,7 @@ import 'prismjs/components/prism-swift';
 
 import {addClassNamesToElement} from '@lexical/utils';
 import {
+  $applyNodeReplacement,
   $createLineBreakNode,
   $createParagraphNode,
   $getSelection,
@@ -291,7 +292,7 @@ export class CodeNode extends ElementNode {
 export function $createCodeNode(
   language?: string | null | undefined,
 ): CodeNode {
-  return new CodeNode(language);
+  return $applyNodeReplacement(new CodeNode(language));
 }
 
 export function $isCodeNode(

diff --git a/packages/lexical-hashtag/src/LexicalHashtagNode.ts b/packages/lexical-hashtag/src/LexicalHashtagNode.ts
@@ -14,7 +14,7 @@ import type {
 } from 'lexical';
 
 import {addClassNamesToElement} from '@lexical/utils';
-import {TextNode} from 'lexical';
+import {$applyNodeReplacement, TextNode} from 'lexical';
 
 /** @noInheritDoc */
 export class HashtagNode extends TextNode {
@@ -62,7 +62,7 @@ export class HashtagNode extends TextNode {
 }
 
 export function $createHashtagNode(text = ''): HashtagNode {
-  return new HashtagNode(text);
+  return $applyNodeReplacement(new HashtagNode(text));
 }
 
 export function $isHashtagNode(

diff --git a/packages/lexical-list/src/LexicalListItemNode.ts b/packages/lexical-list/src/LexicalListItemNode.ts
@@ -27,6 +27,7 @@ import {
   removeClassNamesFromElement,
 } from '@lexical/utils';
 import {
+  $applyNodeReplacement,
   $createParagraphNode,
   $isElementNode,
   $isParagraphNode,
@@ -509,7 +510,7 @@ function convertListItemElement(domNode: Node): DOMConversionOutput {
 }
 
 export function $createListItemNode(checked?: boolean): ListItemNode {
-  return new ListItemNode(undefined, checked);
+  return $applyNodeReplacement(new ListItemNode(undefined, checked));
 }
 
 export function $isListItemNode(

diff --git a/packages/lexical-list/src/LexicalListNode.ts b/packages/lexical-list/src/LexicalListNode.ts
@@ -11,6 +11,7 @@ import {
   removeClassNamesFromElement,
 } from '@lexical/utils';
 import {
+  $applyNodeReplacement,
   $createTextNode,
   $isElementNode,
   DOMConversionMap,
@@ -282,7 +283,7 @@ const TAG_TO_LIST_TYPE: Record<string, ListType> = {
 };
 
 export function $createListNode(listType: ListType, start = 1): ListNode {
-  return new ListNode(listType, start);
+  return $applyNodeReplacement(new ListNode(listType, start));
 }
 
 export function $isListNode(

diff --git a/packages/lexical-mark/src/MarkNode.ts b/packages/lexical-mark/src/MarkNode.ts
@@ -21,7 +21,12 @@ import {
   addClassNamesToElement,
   removeClassNamesFromElement,
 } from '@lexical/utils';
-import {$isElementNode, $isRangeSelection, ElementNode} from 'lexical';
+import {
+  $applyNodeReplacement,
+  $isElementNode,
+  $isRangeSelection,
+  ElementNode,
+} from 'lexical';
 
 export type SerializedMarkNode = Spread<
   {
@@ -200,7 +205,7 @@ export class MarkNode extends ElementNode {
 }
 
 export function $createMarkNode(ids: Array<string>): MarkNode {
-  return new MarkNode(ids);
+  return $applyNodeReplacement(new MarkNode(ids));
 }
 
 export function $isMarkNode(node: LexicalNode | null): node is MarkNode {

diff --git a/packages/lexical-playground/src/nodes/EmojiNode.tsx b/packages/lexical-playground/src/nodes/EmojiNode.tsx
@@ -14,7 +14,7 @@ import type {
   Spread,
 } from 'lexical';
 
-import {TextNode} from 'lexical';
+import {$applyNodeReplacement, TextNode} from 'lexical';
 
 export type SerializedEmojiNode = Spread<
   {
@@ -98,5 +98,6 @@ export function $createEmojiNode(
   className: string,
   emojiText: string,
 ): EmojiNode {
-  return new EmojiNode(className, emojiText).setMode('token');
+  const node = new EmojiNode(className, emojiText).setMode('token');
+  return $applyNodeReplacement(node);
 }
diff --git a/packages/lexical-playground/src/nodes/EquationNode.tsx b/packages/lexical-playground/src/nodes/EquationNode.tsx
@@ -14,7 +14,7 @@ import type {
   Spread,
 } from 'lexical';
 
-import {DecoratorNode} from 'lexical';
+import {$applyNodeReplacement, DecoratorNode} from 'lexical';
 import * as React from 'react';
 import {Suspense} from 'react';
 
@@ -103,7 +103,7 @@ export function $createEquationNode(
   inline = false,
 ): EquationNode {
   const equationNode = new EquationNode(equation, inline);
-  return equationNode;
+  return $applyNodeReplacement(equationNode);
 }
 
 export function $isEquationNode(

diff --git a/packages/lexical-playground/src/nodes/ImageNode.tsx b/packages/lexical-playground/src/nodes/ImageNode.tsx
@@ -19,7 +19,7 @@ import type {
   Spread,
 } from 'lexical';
 
-import {createEditor, DecoratorNode} from 'lexical';
+import {$applyNodeReplacement, createEditor, DecoratorNode} from 'lexical';
 import * as React from 'react';
 import {Suspense} from 'react';
 
@@ -233,16 +233,18 @@ export function $createImageNode({
   caption,
   key,
 }: ImagePayload): ImageNode {
-  return new ImageNode(
-    src,
-    altText,
-    maxWidth,
-    width,
-    height,
-    showCaption,
-    caption,
-    captionsEnabled,
-    key,
+  return $applyNodeReplacement(
+    new ImageNode(
+      src,
+      altText,
+      maxWidth,
+      width,
+      height,
+      showCaption,
+      caption,
+      captionsEnabled,
+      key,
+    ),
   );
 }
 

diff --git a/packages/lexical-playground/src/nodes/MentionNode.ts b/packages/lexical-playground/src/nodes/MentionNode.ts
@@ -9,13 +9,14 @@
 import type {Spread} from 'lexical';
 
 import {
-  DOMConversionMap,
-  DOMConversionOutput,
-  DOMExportOutput,
-  EditorConfig,
-  LexicalNode,
-  NodeKey,
-  SerializedTextNode,
+  type DOMConversionMap,
+  type DOMConversionOutput,
+  type DOMExportOutput,
+  type EditorConfig,
+  type LexicalNode,
+  type NodeKey,
+  type SerializedTextNode,
+  $applyNodeReplacement,
   TextNode,
 } from 'lexical';
 
@@ -114,7 +115,7 @@ export class MentionNode extends TextNode {
 export function $createMentionNode(mentionName: string): MentionNode {
   const mentionNode = new MentionNode(mentionName);
   mentionNode.setMode('segmented').toggleDirectionless();
-  return mentionNode;
+  return $applyNodeReplacement(mentionNode);
 }
 
 export function $isMentionNode(

diff --git a/packages/lexical-react/flow/LexicalComposer.js.flow b/packages/lexical-react/flow/LexicalComposer.js.flow
@@ -25,7 +25,10 @@ type Props = {
     editor__DEPRECATED?: LexicalEditor | null,
     editable?: boolean,
     namespace: string,
-    nodes?: $ReadOnlyArray<Class<LexicalNode>>,
+    nodes?: $ReadOnlyArray<
+      | Class<LexicalNode>
+      | {replace: Class<LexicalNode>, with: (node: LexicalNode) => LexicalNode},
+    >,
     theme?: EditorThemeClasses,
     editorState?: InitialEditorStateType,
     onError: (error: Error, editor: LexicalEditor) => void,

diff --git a/packages/lexical-react/src/LexicalComposer.tsx b/packages/lexical-react/src/LexicalComposer.tsx
@@ -40,7 +40,16 @@ type Props = {
   initialConfig: Readonly<{
     editor__DEPRECATED?: LexicalEditor | null;
     namespace: string;
-    nodes?: ReadonlyArray<Klass<LexicalNode>>;
+    nodes?: ReadonlyArray<
+      | Klass<LexicalNode>
+      | {
+          replace: Klass<LexicalNode>;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          with: <T extends {new (...args: any): any}>(
+            node: InstanceType<T>,
+          ) => LexicalNode;
+        }
+    >;
     onError: (error: Error, editor: LexicalEditor) => void;
     editable?: boolean;
     theme?: EditorThemeClasses;

diff --git a/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx b/packages/lexical-react/src/LexicalHorizontalRuleNode.tsx
@@ -20,6 +20,7 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';
 import {mergeRegister} from '@lexical/utils';
 import {
+  $applyNodeReplacement,
   $getNodeByKey,
   $getSelection,
   $isNodeSelection,
@@ -161,7 +162,7 @@ function convertHorizontalRuleElement(): DOMConversionOutput {
 }
 
 export function $createHorizontalRuleNode(): HorizontalRuleNode {
-  return new HorizontalRuleNode();
+  return $applyNodeReplacement(new HorizontalRuleNode());
 }
 
 export function $isHorizontalRuleNode(

diff --git a/packages/lexical-react/src/LexicalNestedComposer.tsx b/packages/lexical-react/src/LexicalNestedComposer.tsx
@@ -67,6 +67,7 @@ export function LexicalNestedComposer({
         for (const [type, entry] of parentNodes) {
           initialEditor._nodes.set(type, {
             klass: entry.klass,
+            replace: entry.replace,
             transforms: new Set(),
           });
         }
@@ -75,6 +76,7 @@ export function LexicalNestedComposer({
           const type = klass.getType();
           initialEditor._nodes.set(type, {
             klass,
+            replace: null,
             transforms: new Set(),
           });
         }

diff --git a/packages/lexical-rich-text/src/index.ts b/packages/lexical-rich-text/src/index.ts
@@ -38,6 +38,7 @@ import {
   mergeRegister,
 } from '@lexical/utils';
 import {
+  $applyNodeReplacement,
   $createParagraphNode,
   $createRangeSelection,
   $getNearestNodeFromDOMNode,
@@ -174,7 +175,7 @@ export class QuoteNode extends ElementNode {
 }
 
 export function $createQuoteNode(): QuoteNode {
-  return new QuoteNode();
+  return $applyNodeReplacement(new QuoteNode());
 }
 
 export function $isQuoteNode(
@@ -347,7 +348,7 @@ function convertBlockquoteElement(): DOMConversionOutput {
 }
 
 export function $createHeadingNode(headingTag: HeadingTagType): HeadingNode {
-  return new HeadingNode(headingTag);
+  return $applyNodeReplacement(new HeadingNode(headingTag));
 }
 
 export function $isHeadingNode(

diff --git a/packages/lexical-table/src/LexicalTableCellNode.ts b/packages/lexical-table/src/LexicalTableCellNode.ts
@@ -20,6 +20,7 @@ import type {
 
 import {addClassNamesToElement} from '@lexical/utils';
 import {
+  $applyNodeReplacement,
   $createParagraphNode,
   $isElementNode,
   $isLineBreakNode,
@@ -251,7 +252,7 @@ export function $createTableCellNode(
   colSpan = 1,
   width?: number,
 ): TableCellNode {
-  return new TableCellNode(headerState, colSpan, width);
+  return $applyNodeReplacement(new TableCellNode(headerState, colSpan, width));
 }
 
 export function $isTableCellNode(

diff --git a/packages/lexical-table/src/LexicalTableNode.ts b/packages/lexical-table/src/LexicalTableNode.ts
@@ -21,7 +21,11 @@ import type {
 } from 'lexical';
 
 import {addClassNamesToElement} from '@lexical/utils';
-import {$getNearestNodeFromDOMNode, DEPRECATED_GridNode} from 'lexical';
+import {
+  $applyNodeReplacement,
+  $getNearestNodeFromDOMNode,
+  DEPRECATED_GridNode,
+} from 'lexical';
 
 import {$isTableCellNode} from './LexicalTableCellNode';
 import {$isTableRowNode, TableRowNode} from './LexicalTableRowNode';
@@ -234,7 +238,7 @@ export function convertTableElement(_domNode: Node): DOMConversionOutput {
 }
 
 export function $createTableNode(): TableNode {
-  return new TableNode();
+  return $applyNodeReplacement(new TableNode());
 }
 
 export function $isTableNode(

diff --git a/packages/lexical-table/src/LexicalTableRowNode.ts b/packages/lexical-table/src/LexicalTableRowNode.ts
@@ -10,6 +10,7 @@ import type {Spread} from 'lexical';
 
 import {addClassNamesToElement} from '@lexical/utils';
 import {
+  $applyNodeReplacement,
   DEPRECATED_GridRowNode,
   DOMConversionMap,
   DOMConversionOutput,
@@ -111,7 +112,7 @@ export function convertTableRowElement(domNode: Node): DOMConversionOutput {
 }
 
 export function $createTableRowNode(height?: number): TableRowNode {
-  return new TableRowNode(height);
+  return $applyNodeReplacement(new TableRowNode(height));
 }
 
 export function $isTableRowNode(

diff --git a/packages/lexical/flow/Lexical.js.flow b/packages/lexical/flow/Lexical.js.flow
@@ -266,7 +266,10 @@ declare export function createEditor(editorConfig?: {
   namespace: string,
   theme?: EditorThemeClasses,
   parentEditor?: LexicalEditor,
-  nodes?: $ReadOnlyArray<Class<LexicalNode>>,
+  nodes?: $ReadOnlyArray<
+    | Class<LexicalNode>
+    | {replace: Class<LexicalNode>, with: (node: LexicalNode) => LexicalNode},
+  >,
   onError: (error: Error) => void,
   disableEvents?: boolean,
   editable?: boolean,
@@ -849,6 +852,10 @@ declare export function $parseSerializedNode(
   serializedNode: InternalSerializedNode,
 ): LexicalNode;
 
+declare export function $applyNodeReplacement<N: LexicalNode>(
+  node: LexicalNode,
+): N;
+
 export type SerializedLexicalNode = {
   type: string,
   version: number,