[Breaking Change][lexical] Feature: New update tag: skip-dom-selectio…

…n, $onUpdate now always called (#6894)
facebook · Dec 13, 2024 · 66f805c · 66f805c
1 parent 0f3ff15
commit 66f805c
Show file tree

Hide file tree

Showing 40 changed files with 327 additions and 151 deletions.
diff --git a/packages/lexical-code/flow/LexicalCode.js.flow b/packages/lexical-code/flow/LexicalCode.js.flow
@@ -77,12 +77,6 @@ declare export class CodeHighlightNode extends TextNode {
   // $FlowFixMe
   static clone(node: CodeHighlightNode): CodeHighlightNode;
   createDOM(config: EditorConfig): HTMLElement;
-  updateDOM(
-    // $FlowFixMe
-    prevNode: CodeHighlightNode,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): boolean;
   setFormat(format: number): this;
 }
 
@@ -125,7 +119,6 @@ declare export class CodeNode extends ElementNode {
   static clone(node: CodeNode): CodeNode;
   constructor(language: ?string, key?: NodeKey): void;
   createDOM(config: EditorConfig): HTMLElement;
-  updateDOM(prevNode: CodeNode, dom: HTMLElement): boolean;
   insertNewAfter(
     selection: RangeSelection,
     restoreSelection?: boolean,

diff --git a/packages/lexical-code/src/CodeHighlightNode.ts b/packages/lexical-code/src/CodeHighlightNode.ts
@@ -136,11 +136,7 @@ export class CodeHighlightNode extends TextNode {
     return element;
   }
 
-  updateDOM(
-    prevNode: CodeHighlightNode,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {
     const update = super.updateDOM(prevNode, dom, config);
     const prevClassName = getHighlightThemeClass(
       config.theme,

diff --git a/packages/lexical-code/src/CodeNode.ts b/packages/lexical-code/src/CodeNode.ts
@@ -107,11 +107,7 @@ export class CodeNode extends ElementNode {
     }
     return element;
   }
-  updateDOM(
-    prevNode: CodeNode,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {
     const language = this.__language;
     const prevLanguage = prevNode.__language;
 

diff --git a/packages/lexical-link/flow/LexicalLink.js.flow b/packages/lexical-link/flow/LexicalLink.js.flow
@@ -39,11 +39,6 @@ declare export class LinkNode extends ElementNode {
   static clone(node: LinkNode): LinkNode;
   constructor(url: string, attributes?: LinkAttributes, key?: NodeKey): void;
   createDOM(config: EditorConfig): HTMLElement;
-  updateDOM(
-    prevNode: LinkNode,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): boolean;
   static importDOM(): DOMConversionMap | null;
   exportJSON(): SerializedLinkNode;
   getURL(): string;

diff --git a/packages/lexical-link/src/index.ts b/packages/lexical-link/src/index.ts
@@ -113,7 +113,7 @@ export class LinkNode extends ElementNode {
   }
 
   updateDOM(
-    prevNode: LinkNode,
+    prevNode: this,
     anchor: LinkHTMLElementType,
     config: EditorConfig,
   ): boolean {
@@ -393,7 +393,7 @@ export class AutoLinkNode extends LinkNode {
   }
 
   updateDOM(
-    prevNode: AutoLinkNode,
+    prevNode: this,
     anchor: LinkHTMLElementType,
     config: EditorConfig,
   ): boolean {

diff --git a/packages/lexical-list/src/LexicalListNode.ts b/packages/lexical-list/src/LexicalListNode.ts
@@ -111,11 +111,7 @@ export class ListNode extends ElementNode {
     return dom;
   }
 
-  updateDOM(
-    prevNode: ListNode,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {
     if (prevNode.__tag !== this.__tag) {
       return true;
     }

diff --git a/packages/lexical-mark/src/MarkNode.ts b/packages/lexical-mark/src/MarkNode.ts
@@ -78,7 +78,7 @@ export class MarkNode extends ElementNode {
   }
 
   updateDOM(
-    prevNode: MarkNode,
+    prevNode: this,
     element: HTMLElement,
     config: EditorConfig,
   ): boolean {

diff --git a/packages/lexical-overflow/flow/LexicalOverflow.js.flow b/packages/lexical-overflow/flow/LexicalOverflow.js.flow
@@ -19,7 +19,6 @@ declare export class OverflowNode extends ElementNode {
   static clone(node: OverflowNode): OverflowNode;
   constructor(key?: NodeKey): void;
   createDOM(config: EditorConfig): HTMLElement;
-  updateDOM(prevNode: OverflowNode, dom: HTMLElement): boolean;
   insertNewAfter(selection: RangeSelection): null | LexicalNode;
   excludeFromCopy(): boolean;
   static importJSON(serializedNode: SerializedOverflowNode): OverflowNode;

diff --git a/packages/lexical-overflow/src/index.ts b/packages/lexical-overflow/src/index.ts
@@ -58,7 +58,7 @@ export class OverflowNode extends ElementNode {
     return div;
   }
 
-  updateDOM(prevNode: OverflowNode, dom: HTMLElement): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement): boolean {
     return false;
   }
 

diff --git a/packages/lexical-playground/__tests__/e2e/Autocomplete.spec.mjs b/packages/lexical-playground/__tests__/e2e/Autocomplete.spec.mjs
@@ -52,7 +52,12 @@ test.describe('Autocomplete', () => {
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
           <span data-lexical-text="true">Sort by alpha</span>
-          <span data-lexical-text="true"></span>
+          <span
+            class="PlaygroundEditorTheme__autocomplete"
+            style="font-size: 15px; display: none"
+            data-lexical-text="true">
+            betical (TAB)
+          </span>
         </p>
       `,
     );
@@ -118,7 +123,12 @@ test.describe('Autocomplete', () => {
             data-lexical-text="true">
             Test
           </strong>
-          <span data-lexical-text="true"></span>
+          <strong
+            class="PlaygroundEditorTheme__textUnderlineStrikethrough PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__autocomplete"
+            style="font-size: 17px; display: none"
+            data-lexical-text="true">
+            imonials (TAB)
+          </strong>
         </p>
       `,
     );
@@ -204,7 +214,12 @@ test.describe('Autocomplete', () => {
             data-lexical-text="true">
             Test
           </strong>
-          <span data-lexical-text="true"></span>
+          <strong
+            class="PlaygroundEditorTheme__textUnderlineStrikethrough PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__autocomplete"
+            style="font-size: 17px; display: none"
+            data-lexical-text="true">
+            imonials (TAB)
+          </strong>
         </p>
       `,
     );
@@ -241,7 +256,12 @@ test.describe('Autocomplete', () => {
             data-lexical-text="true">
             Test
           </strong>
-          <span data-lexical-text="true"></span>
+          <strong
+            class="PlaygroundEditorTheme__textUnderlineStrikethrough PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic"
+            style="font-size: 17px; display: none"
+            data-lexical-text="true">
+            imonials
+          </strong>
         </p>
       `,
     );
@@ -278,7 +298,12 @@ test.describe('Autocomplete', () => {
             data-lexical-text="true">
             Test
           </strong>
-          <span data-lexical-text="true"></span>
+          <strong
+            class="PlaygroundEditorTheme__textUnderlineStrikethrough PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__autocomplete"
+            style="font-size: 17px; display: none"
+            data-lexical-text="true">
+            imonials (TAB)
+          </strong>
         </p>
       `,
     );

diff --git a/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs b/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
@@ -1657,7 +1657,7 @@ test.describe.parallel('Tables', () => {
   });
 
   test(
-    'Grid selection: can select multiple cells and insert an image',
+    'Table selection: can select multiple cells and insert an image',
     {
       tag: '@flaky',
     },
@@ -1741,7 +1741,7 @@ test.describe.parallel('Tables', () => {
     },
   );
 
-  test('Grid selection: can backspace lines, backspacing empty cell does not destroy it #3278', async ({
+  test('Table selection: can backspace lines, backspacing empty cell does not destroy it #3278', async ({
     page,
     isPlainText,
     isCollab,

diff --git a/packages/lexical-playground/src/nodes/AutocompleteNode.tsx b/packages/lexical-playground/src/nodes/AutocompleteNode.tsx
@@ -73,24 +73,24 @@ export class AutocompleteNode extends TextNode {
     this.__uuid = uuid;
   }
 
-  updateDOM(
-    prevNode: unknown,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {
     return false;
   }
 
   exportDOM(_: LexicalEditor): DOMExportOutput {
     return {element: null};
   }
 
+  excludeFromCopy() {
+    return true;
+  }
+
   createDOM(config: EditorConfig): HTMLElement {
-    if (this.__uuid !== UUID) {
-      return document.createElement('span');
-    }
     const dom = super.createDOM(config);
     dom.classList.add(config.theme.autocomplete);
+    if (this.__uuid !== UUID) {
+      dom.style.display = 'none';
+    }
     return dom;
   }
 }
@@ -99,5 +99,5 @@ export function $createAutocompleteNode(
   text: string,
   uuid: string,
 ): AutocompleteNode {
-  return new AutocompleteNode(text, uuid);
+  return new AutocompleteNode(text, uuid).setMode('token');
 }
diff --git a/packages/lexical-playground/src/nodes/EmojiNode.tsx b/packages/lexical-playground/src/nodes/EmojiNode.tsx
@@ -48,11 +48,7 @@ export class EmojiNode extends TextNode {
     return dom;
   }
 
-  updateDOM(
-    prevNode: TextNode,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {
     const inner = dom.firstChild;
     if (inner === null) {
       return true;

diff --git a/packages/lexical-playground/src/nodes/EquationNode.tsx b/packages/lexical-playground/src/nodes/EquationNode.tsx
@@ -128,7 +128,7 @@ export class EquationNode extends DecoratorNode<JSX.Element> {
     };
   }
 
-  updateDOM(prevNode: EquationNode): boolean {
+  updateDOM(prevNode: this): boolean {
     // If the inline property changes, replace the element
     return this.__inline !== prevNode.__inline;
   }

diff --git a/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageNode.tsx b/packages/lexical-playground/src/nodes/InlineImageNode/InlineImageNode.tsx
@@ -230,11 +230,7 @@ export class InlineImageNode extends DecoratorNode<JSX.Element> {
     return span;
   }
 
-  updateDOM(
-    prevNode: InlineImageNode,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): false {
+  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): false {
     const position = this.__position;
     if (position !== prevNode.__position) {
       const className = `${config.theme.inlineImage} position-${position}`;

diff --git a/packages/lexical-playground/src/nodes/LayoutContainerNode.ts b/packages/lexical-playground/src/nodes/LayoutContainerNode.ts
@@ -73,7 +73,7 @@ export class LayoutContainerNode extends ElementNode {
     return {element};
   }
 
-  updateDOM(prevNode: LayoutContainerNode, dom: HTMLElement): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement): boolean {
     if (prevNode.__templateColumns !== this.__templateColumns) {
       dom.style.gridTemplateColumns = this.__templateColumns;
     }

diff --git a/packages/lexical-playground/src/nodes/SpecialTextNode.tsx b/packages/lexical-playground/src/nodes/SpecialTextNode.tsx
@@ -37,11 +37,7 @@ export class SpecialTextNode extends TextNode {
     return dom;
   }
 
-  updateDOM(
-    prevNode: TextNode,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {
     if (prevNode.__text.startsWith('[') && prevNode.__text.endsWith(']')) {
       const strippedText = this.__text.substring(1, this.__text.length - 1); // Strip brackets again
       dom.textContent = strippedText; // Update the text content

diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContainerNode.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContainerNode.ts
@@ -79,10 +79,7 @@ export class CollapsibleContainerNode extends ElementNode {
     return dom;
   }
 
-  updateDOM(
-    prevNode: CollapsibleContainerNode,
-    dom: HTMLDetailsElement,
-  ): boolean {
+  updateDOM(prevNode: this, dom: HTMLDetailsElement): boolean {
     const currentOpen = this.__open;
     if (prevNode.__open !== currentOpen) {
       // details is not well supported in Chrome #5582

diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContentNode.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContentNode.ts
@@ -72,7 +72,7 @@ export class CollapsibleContentNode extends ElementNode {
     return dom;
   }
 
-  updateDOM(prevNode: CollapsibleContentNode, dom: HTMLElement): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement): boolean {
     return false;
   }
 

diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts
@@ -62,7 +62,7 @@ export class CollapsibleTitleNode extends ElementNode {
     return dom;
   }
 
-  updateDOM(prevNode: CollapsibleTitleNode, dom: HTMLElement): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement): boolean {
     return false;
   }
 

diff --git a/packages/lexical-rich-text/flow/LexicalRichText.js.flow b/packages/lexical-rich-text/flow/LexicalRichText.js.flow
@@ -25,7 +25,6 @@ declare export class QuoteNode extends ElementNode {
   static clone(node: QuoteNode): QuoteNode;
   constructor(key?: NodeKey): void;
   createDOM(config: EditorConfig): HTMLElement;
-  updateDOM(prevNode: QuoteNode, dom: HTMLElement): boolean;
   insertNewAfter(
     selection: RangeSelection,
     restoreSelection?: boolean,
@@ -44,7 +43,6 @@ declare export class HeadingNode extends ElementNode {
   constructor(tag: HeadingTagType, key?: NodeKey): void;
   getTag(): HeadingTagType;
   createDOM(config: EditorConfig): HTMLElement;
-  updateDOM(prevNode: HeadingNode, dom: HTMLElement): boolean;
   static importDOM(): DOMConversionMap | null;
   insertNewAfter(
     selection: RangeSelection,

diff --git a/packages/lexical-rich-text/src/index.ts b/packages/lexical-rich-text/src/index.ts
@@ -136,7 +136,7 @@ export class QuoteNode extends ElementNode {
     addClassNamesToElement(element, config.theme.quote);
     return element;
   }
-  updateDOM(prevNode: QuoteNode, dom: HTMLElement): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement): boolean {
     return false;
   }
 
@@ -257,7 +257,7 @@ export class HeadingNode extends ElementNode {
     return element;
   }
 
-  updateDOM(prevNode: HeadingNode, dom: HTMLElement): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement): boolean {
     return false;
   }
 

diff --git a/packages/lexical-table/flow/LexicalTable.js.flow b/packages/lexical-table/flow/LexicalTable.js.flow
@@ -52,7 +52,6 @@ declare export class TableCellNode extends ElementNode {
     key?: NodeKey,
   ): void;
   createDOM(config: EditorConfig): HTMLElement;
-  updateDOM(prevNode: TableCellNode, dom: HTMLElement): boolean;
   insertNewAfter(
     selection: RangeSelection,
   ): null | ParagraphNode | TableCellNode;
@@ -70,7 +69,6 @@ declare export class TableCellNode extends ElementNode {
   setBackgroundColor(newBackgroundColor: null | string): TableCellNode;
   toggleHeaderStyle(headerState: TableCellHeaderState): TableCellNode;
   hasHeader(): boolean;
-  updateDOM(prevNode: TableCellNode): boolean;
   collapseAtStart(): true;
   canBeEmpty(): false;
 }
@@ -99,7 +97,6 @@ declare export class TableNode extends ElementNode {
   static clone(node: TableNode): TableNode;
   constructor(key?: NodeKey): void;
   createDOM(config: EditorConfig): HTMLElement;
-  updateDOM(prevNode: TableNode, dom: HTMLElement): boolean;
   insertNewAfter(selection: RangeSelection): null | ParagraphNode | TableNode;
   collapseAtStart(): true;
   getCordsFromCellNode(
@@ -126,7 +123,6 @@ declare export class TableRowNode extends ElementNode {
   static clone(node: TableRowNode): TableRowNode;
   constructor(height?: ?number, key?: NodeKey): void;
   createDOM(config: EditorConfig): HTMLElement;
-  updateDOM(prevNode: TableRowNode, dom: HTMLElement): boolean;
   setHeight(height: number): ?number;
   getHeight(): ?number;
   insertNewAfter(