Change default skipInitialization to be true for transitional backwar…

…ds compatibility

packages/lexical-code/src/CodeHighlighter.ts

@@ -818,18 +818,22 @@ export function registerCodeHighlighting(
   }
 
   return mergeRegister(
-    editor.registerMutationListener(CodeNode, (mutations) => {
-      editor.update(() => {
-        for (const [key, type] of mutations) {
-          if (type !== 'destroyed') {
-            const node = $getNodeByKey(key);
-            if (node !== null) {
-              updateCodeGutter(node as CodeNode, editor);
+    editor.registerMutationListener(
+      CodeNode,
+      (mutations) => {
+        editor.update(() => {
+          for (const [key, type] of mutations) {
+            if (type !== 'destroyed') {
+              const node = $getNodeByKey(key);
+              if (node !== null) {
+                updateCodeGutter(node as CodeNode, editor);
+              }
             }
           }
-        }
-      });
-    }),
+        });
+      },
+      {skipInitialization: false},
+    ),
     editor.registerNodeTransform(CodeNode, (node) =>
       codeNodeTransform(node, editor, tokenizer as Tokenizer),
     ),

packages/lexical-playground/src/plugins/CodeActionMenuPlugin/index.tsx

@@ -110,25 +110,29 @@ function CodeActionMenuContainer({
   }, [shouldListenMouseMove, debouncedOnMouseMove]);
 
   useEffect(() => {
-    return editor.registerMutationListener(CodeNode, (mutations) => {
-      editor.getEditorState().read(() => {
-        for (const [key, type] of mutations) {
-          switch (type) {
-            case 'created':
-              codeSetRef.current.add(key);
-              break;
-
-            case 'destroyed':
-              codeSetRef.current.delete(key);
-              break;
-
-            default:
-              break;
+    return editor.registerMutationListener(
+      CodeNode,
+      (mutations) => {
+        editor.getEditorState().read(() => {
+          for (const [key, type] of mutations) {
+            switch (type) {
+              case 'created':
+                codeSetRef.current.add(key);
+                break;
+
+              case 'destroyed':
+                codeSetRef.current.delete(key);
+                break;
+
+              default:
+                break;
+            }
           }
-        }
-      });
-      setShouldListenMouseMove(codeSetRef.current.size > 0);
-    });
+        });
+        setShouldListenMouseMove(codeSetRef.current.size > 0);
+      },
+      {skipInitialization: false},
+    );
   }, [editor]);
 
   const normalizedLang = normalizeCodeLang(lang);

packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx

@@ -183,17 +183,21 @@ function TableActionMenu({
   );
 
   useEffect(() => {
-    return editor.registerMutationListener(TableCellNode, (nodeMutations) => {
-      const nodeUpdated =
-        nodeMutations.get(tableCellNode.getKey()) === 'updated';
-
-      if (nodeUpdated) {
-        editor.getEditorState().read(() => {
-          updateTableCellNode(tableCellNode.getLatest());
-        });
-        setBackgroundColor(currentCellBackgroundColor(editor) || '');
-      }
-    });
+    return editor.registerMutationListener(
+      TableCellNode,
+      (nodeMutations) => {
+        const nodeUpdated =
+          nodeMutations.get(tableCellNode.getKey()) === 'updated';
+
+        if (nodeUpdated) {
+          editor.getEditorState().read(() => {
+            updateTableCellNode(tableCellNode.getLatest());
+          });
+          setBackgroundColor(currentCellBackgroundColor(editor) || '');
+        }
+      },
+      {skipInitialization: true},
+    );
   }, [editor, tableCellNode]);
 
   useEffect(() => {

packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx

@@ -105,24 +105,23 @@ export function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>({
   }, []);
 
   const checkIfLinkNodeIsEmbeddable = useCallback(
-    (key: NodeKey) => {
-      editor.getEditorState().read(async function () {
+    async (key: NodeKey) => {
+      const url = editor.getEditorState().read(function () {
         const linkNode = $getNodeByKey(key);
         if ($isLinkNode(linkNode)) {
-          for (let i = 0; i < embedConfigs.length; i++) {
-            const embedConfig = embedConfigs[i];
-
-            const urlMatch = await Promise.resolve(
-              embedConfig.parseUrl(linkNode.__url),
-            );
-
-            if (urlMatch != null) {
-              setActiveEmbedConfig(embedConfig);
-              setNodeKey(linkNode.getKey());
-            }
-          }
+          return linkNode.getURL();
         }
       });
+      if (url === undefined) {
+        return;
+      }
+      for (const embedConfig of embedConfigs) {
+        const urlMatch = await Promise.resolve(embedConfig.parseUrl(url));
+        if (urlMatch != null) {
+          setActiveEmbedConfig(embedConfig);
+          setNodeKey(key);
+        }
+      }
     },
     [editor, embedConfigs],
   );
@@ -146,7 +145,9 @@ export function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>({
     };
     return mergeRegister(
       ...[LinkNode, AutoLinkNode].map((Klass) =>
-        editor.registerMutationListener(Klass, (...args) => listener(...args)),
+        editor.registerMutationListener(Klass, (...args) => listener(...args), {
+          skipInitialization: true,
+        }),
       ),
     );
   }, [checkIfLinkNodeIsEmbeddable, editor, embedConfigs, nodeKey, reset]);

packages/lexical-react/src/LexicalTablePlugin.ts

@@ -149,6 +149,7 @@ export function TablePlugin({
           }
         }
       },
+      {skipInitialization: false},
     );
 
     return () => {

packages/lexical-website/docs/concepts/listeners.md

@@ -81,9 +81,10 @@ Get notified when a specific type of Lexical node has been mutated. There are th
 Mutation listeners are great for tracking the lifecycle of specific types of node. They can be used to
 handle external UI state and UI features relating to specific types of node.
 
-If any existing nodes are in the DOM, the listener will be called immediately with
-an updateTag of 'registerMutationListener' where all nodes have the 'created' NodeMutation.
-This behavior can be disabled with the skipInitialization option.
+If any existing nodes are in the DOM, and skipInitialization is not true, the listener
+will be called immediately with an updateTag of 'registerMutationListener' where all
+nodes have the 'created' NodeMutation. This can be controlled with the skipInitialization option
+(default is currently true for backwards compatibility in 0.16.x but will change to false in 0.17.0).
 
 ```js
 const removeMutationListener = editor.registerMutationListener(
@@ -94,6 +95,7 @@ const removeMutationListener = editor.registerMutationListener(
       console.log(nodeKey, mutation)
     }
   },
+  {skipInitialization: false}
 );
 
 // Do not forget to unregister the listener when no longer needed!

packages/lexical/src/LexicalEditor.ts

@@ -215,11 +215,15 @@ export type NodeMutation = 'created' | 'updated' | 'destroyed';
 export interface MutationListenerOptions {
   /**
    * Skip the initial call of the listener with pre-existing DOM nodes.
-   * Default is false.
+   *
+   * The default is currently true for backwards compatibility with <= 0.16.1
+   * but this default is expected to change to false in 0.17.0.
    */
   skipInitialization?: boolean;
 }
 
+const DEFAULT_SKIP_INITIALIZATION = true;
+
 export type UpdateListener = (arg0: {
   dirtyElements: Map<NodeKey, IntentionallyMarkedAsDirtyElement>;
   dirtyLeaves: Set<NodeKey>;
@@ -834,9 +838,10 @@ export class LexicalEditor {
    * One common use case for this is to attach DOM event listeners to the underlying DOM nodes as Lexical nodes are created.
    * {@link LexicalEditor.getElementByKey} can be used for this.
    *
-   * If any existing nodes are in the DOM, the listener will be called immediately with
-   * an updateTag of 'registerMutationListener' where all nodes have the 'created' NodeMutation.
-   * This behavior can be disabled with the skipInitialization option.
+   * If any existing nodes are in the DOM, and skipInitialization is not true, the listener
+   * will be called immediately with an updateTag of 'registerMutationListener' where all
+   * nodes have the 'created' NodeMutation. This can be controlled with the skipInitialization option
+   * (default is currently true for backwards compatibility in 0.16.x but will change to false in 0.17.0).
    *
    * @param klass - The class of the node that you want to listen to mutations on.
    * @param listener - The logic you want to run when the node is mutated.
@@ -853,7 +858,12 @@ export class LexicalEditor {
     ).klass;
     const mutations = this._listeners.mutation;
     mutations.set(listener, klassToMutate);
-    if (!(options && options.skipInitialization)) {
+    const skipInitialization = options && options.skipInitialization;
+    if (
+      !(skipInitialization === undefined
+        ? DEFAULT_SKIP_INITIALIZATION
+        : skipInitialization)
+    ) {
       this.initializeMutationListener(listener, klassToMutate);
     }