Avoid marking the whole state as dirty when registering a node transform

facebook · Dec 13, 2024 · cd6cce1 · cd6cce1
1 parent 503894f
commit cd6cce1
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 31 deletions.
diff --git a/packages/lexical-playground/src/nodes/AutocompleteNode.tsx b/packages/lexical-playground/src/nodes/AutocompleteNode.tsx
@@ -81,12 +81,16 @@ export class AutocompleteNode extends TextNode {
     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;
   }
 }
@@ -95,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/src/LexicalEditor.ts b/packages/lexical/src/LexicalEditor.ts
@@ -37,7 +37,7 @@ import {
   getCachedTypeToNodeMap,
   getDefaultView,
   getDOMSelection,
-  markAllNodesAsDirty,
+  markNodesWithTypesAsDirty,
 } from './LexicalUtils';
 import {ArtificialNode__DO_NOT_USE} from './nodes/ArtificialNode';
 import {DecoratorNode} from './nodes/LexicalDecoratorNode';
@@ -970,7 +970,10 @@ export class LexicalEditor {
       registeredNodes.push(registeredReplaceWithNode);
     }
 
-    markAllNodesAsDirty(this, klass.getType());
+    markNodesWithTypesAsDirty(
+      this,
+      registeredNodes.map((node) => node.klass.getType()),
+    );
     return () => {
       registeredNodes.forEach((node) =>
         node.transforms.delete(listener as Transform<LexicalNode>),

diff --git a/packages/lexical/src/LexicalUtils.ts b/packages/lexical/src/LexicalUtils.ts
@@ -72,7 +72,6 @@ import {
   internalGetActiveEditorState,
   isCurrentlyReadOnlyMode,
   triggerCommandListeners,
-  updateEditor,
 } from './LexicalUpdates';
 
 export const emptyFunction = () => {
@@ -498,22 +497,31 @@ export function getEditorStateTextContent(editorState: EditorState): string {
   return editorState.read(() => $getRoot().getTextContent());
 }
 
-export function markAllNodesAsDirty(editor: LexicalEditor, type: string): void {
-  // Mark all existing text nodes as dirty
-  updateEditor(
-    editor,
+export function markNodesWithTypesAsDirty(
+  editor: LexicalEditor,
+  types: string[],
+): void {
+  // We only need to mark nodes dirty if they were in the previous state.
+  // If they aren't, then they are by definition dirty already.
+  const cachedMap = getCachedTypeToNodeMap(editor.getEditorState());
+  const dirtyNodeMaps: NodeMap[] = [];
+  for (const type of types) {
+    const nodeMap = cachedMap.get(type);
+    if (nodeMap) {
+      // By construction these are non-empty
+      dirtyNodeMaps.push(nodeMap);
+    }
+  }
+  // Nothing to mark dirty, no update necessary
+  if (dirtyNodeMaps.length === 0) {
+    return;
+  }
+  editor.update(
     () => {
-      const editorState = getActiveEditorState();
-      if (editorState.isEmpty()) {
-        return;
-      }
-      if (type === 'root') {
-        $getRoot().markDirty();
-        return;
-      }
-      const nodeMap = editorState._nodeMap;
-      for (const [, node] of nodeMap) {
-        node.markDirty();
+      for (const nodeMap of dirtyNodeMaps) {
+        for (const node of nodeMap.values()) {
+          node.markDirty();
+        }
       }
     },
     editor._pendingEditorState === null
@@ -1825,17 +1833,26 @@ export function getCachedTypeToNodeMap(
   );
   let typeToNodeMap = cachedNodeMaps.get(editorState);
   if (!typeToNodeMap) {
-    typeToNodeMap = new Map();
+    typeToNodeMap = computeTypeToNodeMap(editorState);
     cachedNodeMaps.set(editorState, typeToNodeMap);
-    for (const [nodeKey, node] of editorState._nodeMap) {
-      const nodeType = node.__type;
-      let nodeMap = typeToNodeMap.get(nodeType);
-      if (!nodeMap) {
-        nodeMap = new Map();
-        typeToNodeMap.set(nodeType, nodeMap);
-      }
-      nodeMap.set(nodeKey, node);
+  }
+  return typeToNodeMap;
+}
+
+/**
+ * @internal
+ * Compute a Map of node type to nodes for an EditorState
+ */
+function computeTypeToNodeMap(editorState: EditorState): TypeToNodeMap {
+  const typeToNodeMap = new Map();
+  for (const [nodeKey, node] of editorState._nodeMap) {
+    const nodeType = node.__type;
+    let nodeMap = typeToNodeMap.get(nodeType);
+    if (!nodeMap) {
+      nodeMap = new Map();
+      typeToNodeMap.set(nodeType, nodeMap);
     }
+    nodeMap.set(nodeKey, node);
   }
   return typeToNodeMap;
 }

diff --git a/packages/lexical/src/index.ts b/packages/lexical/src/index.ts
@@ -29,6 +29,7 @@ export type {
   SerializedEditor,
   Spread,
   Transform,
+  UpdateListener,
 } from './LexicalEditor';
 export type {
   EditorState,