Add LexicalNodeEventPlugin to @lexical/react

.flowconfig

@@ -83,6 +83,7 @@ module.name_mapper='^@lexical/react/LexicalTablePlugin' -> '<PROJECT_ROOT>/packa
 module.name_mapper='^@lexical/react/LexicalLinkPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalLinkPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalAutoLinkPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalAutoLinkPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalAutoEmbedPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalAutoEmbedPlugin.js.flow'
+module.name_mapper='^@lexical/react/LexicalNodeEventPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalNodeEventPlugin.js.flow'
 
 module.name_mapper='^@lexical/react/LexicalListPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalListPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalCheckListPlugin' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalCheckListPlugin.js.flow'

packages/lexical-playground/src/ui/Modal.tsx

@@ -48,10 +48,11 @@ function PortalImpl({
         onClose();
       }
     };
-    if (modalRef.current !== null) {
-      modalOverlayElement = modalRef.current?.parentElement;
+    const modelElement = modalRef.current;
+    if (modelElement !== null) {
+      modalOverlayElement = modelElement.parentElement;
       if (modalOverlayElement !== null) {
-        modalOverlayElement?.addEventListener('click', clickOutsideHandler);
+        modalOverlayElement.addEventListener('click', clickOutsideHandler);
       }
     }
 

packages/lexical-playground/vite.config.js

@@ -141,6 +141,7 @@ const moduleResolution = [
   'LexicalAutoLinkPlugin',
   'LexicalAutoEmbedPlugin',
   'LexicalOnChangePlugin',
+  'LexicalNodeEventPlugin',
 ].forEach((module) => {
   let resolvedPath = path.resolve(`../lexical-react/src/${module}.ts`);
 

packages/lexical-playground/vite.prod.config.js

@@ -141,6 +141,7 @@ const moduleResolution = [
   'LexicalAutoLinkPlugin',
   'LexicalAutoEmbedPlugin',
   'LexicalOnChangePlugin',
+  'LexicalNodeEventPlugin',
 ].forEach((module) => {
   let resolvedPath = path.resolve(`../lexical-react/dist/${module}.js`);
   moduleResolution.push({

packages/lexical-react/src/LexicalNodeEventPlugin.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {type Klass, type LexicalNode, type NodeKey} from 'lexical';
+import {useRef} from 'react';
+import useLayoutEffect from 'shared/useLayoutEffect';
+
+export function NodeEventPlugin({
+  nodeType,
+  eventType,
+  eventListener,
+}: {
+  nodeType: Klass<LexicalNode>;
+  eventType: string;
+  eventListener: (event: Event, nodeKey: NodeKey) => void;
+}): null {
+  const [editor] = useLexicalComposerContext();
+  const listenerRef = useRef(eventListener);
+
+  listenerRef.current = eventListener;
+
+  useLayoutEffect(() => {
+    return editor.registerMutationListener(nodeType, (mutations) => {
+      editor.getEditorState().read(() => {
+        for (const [key, mutation] of mutations) {
+          const element: null | HTMLElement = editor.getElementByKey(key);
+
+          if (mutation === 'created' && element !== null) {
+            element.addEventListener(eventType, (event: Event) => {
+              listenerRef.current(event, key);
+            });
+          }
+        }
+      });
+    });
+    // wW intentionally don't respect changes to eventType.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, nodeType]);
+
+  return null;
+}

tsconfig.json

@@ -114,6 +114,9 @@
       "@lexical/react/LexicalOnChangePlugin": [
         "./packages/lexical-react/src/LexicalOnChangePlugin.ts"
       ],
+      "@lexical/react/LexicalNodeEventPlugin": [
+        "./packages/lexical-react/src/LexicalNodeEventPlugin.ts"
+      ],
       "@lexical/react/LexicalHashtagPlugin": [
         "./packages/lexical-react/src/LexicalHashtagPlugin.ts"
       ],