@depup/lexical__react 0.41.0-depup.0

package/LexicalNodeContextMenuPlugin.dev.js

@@ -0,0 +1,257 @@
+/**
+ * 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.
+ *
+ */
+
+'use strict';
+
+var react$1 = require('@floating-ui/react');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * 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.
+ *
+ */
+
+class MenuOption {
+  key;
+  ref;
+  constructor(key) {
+    this.key = key;
+    this.ref = {
+      current: null
+    };
+    this.setRefElement = this.setRefElement.bind(this);
+  }
+  setRefElement(element) {
+    this.ref = {
+      current: element
+    };
+  }
+}
+class NodeContextMenuOption extends MenuOption {
+  type;
+  title;
+  icon;
+  disabled;
+  $onSelect;
+  $showOn;
+  constructor(title, options) {
+    super(title);
+    this.type = 'item';
+    this.title = title;
+    this.disabled = options.disabled ?? false;
+    this.icon = options.icon ?? null;
+    this.$onSelect = options.$onSelect;
+    if (options.$showOn) {
+      this.$showOn = options.$showOn;
+    }
+  }
+}
+class NodeContextMenuSeparator extends MenuOption {
+  type;
+  $showOn;
+  constructor(options) {
+    super('_separator');
+    this.type = 'separator';
+    if (options && options.$showOn) {
+      this.$showOn = options.$showOn;
+    }
+  }
+}
+const ContextMenuSeparatorItem = /*#__PURE__*/react.forwardRef(({
+  className,
+  disabled,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx("hr", {
+    className: className
+  });
+});
+const ContextMenuItem = /*#__PURE__*/react.forwardRef(({
+  className,
+  label,
+  disabled,
+  icon,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    ...props,
+    className: className,
+    ref: ref,
+    role: "menuitem",
+    disabled: disabled,
+    children: [icon, label]
+  });
+});
+const NodeContextMenuPlugin = /*#__PURE__*/react.forwardRef(({
+  items,
+  className,
+  itemClassName,
+  separatorClassName
+}, forwardedRef) => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [activeIndex, setActiveIndex] = react.useState(null);
+  const [isOpen, setIsOpen] = react.useState(false);
+  const listItemsRef = react.useRef([]);
+  const listContentRef = react.useRef([]);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = react$1.useFloating({
+    middleware: [react$1.offset({
+      alignmentAxis: 4,
+      mainAxis: 5
+    }), react$1.flip({
+      fallbackPlacements: ['left-start']
+    }), react$1.shift({
+      padding: 10
+    })],
+    onOpenChange: setIsOpen,
+    open: isOpen,
+    placement: 'right-start',
+    strategy: 'fixed',
+    whileElementsMounted: react$1.autoUpdate
+  });
+  const role = react$1.useRole(context, {
+    role: 'menu'
+  });
+  const dismiss = react$1.useDismiss(context);
+  const listNavigation = react$1.useListNavigation(context, {
+    activeIndex,
+    listRef: listItemsRef,
+    onNavigate: setActiveIndex
+  });
+  const typeahead = react$1.useTypeahead(context, {
+    activeIndex,
+    enabled: isOpen,
+    listRef: listContentRef,
+    onMatch: setActiveIndex
+  });
+  const {
+    getFloatingProps,
+    getItemProps
+  } = react$1.useInteractions([role, dismiss, listNavigation, typeahead]);
+  const [renderItems, setRenderItems] = react.useState([]);
+  react.useEffect(() => {
+    function onContextMenu(e) {
+      e.preventDefault();
+      refs.setPositionReference({
+        getBoundingClientRect() {
+          return {
+            bottom: e.clientY,
+            height: 0,
+            left: e.clientX,
+            right: e.clientX,
+            top: e.clientY,
+            width: 0,
+            x: e.clientX,
+            y: e.clientY
+          };
+        }
+      });
+      let visibleItems = [];
+      if (items) {
+        editor.read(() => {
+          const node = lexical.$getNearestNodeFromDOMNode(e.target);
+          if (node) {
+            visibleItems = items.filter(option => option.$showOn ? option.$showOn(node) : true);
+          }
+        });
+      }
+      const renderableItems = visibleItems.map((option, index) => {
+        if (option.type === 'separator') {
+          return {
+            className: separatorClassName,
+            key: option.key + '-' + index,
+            type: option.type
+          };
+        } else {
+          return {
+            className: itemClassName,
+            disabled: option.disabled,
+            icon: option.icon,
+            key: option.key,
+            label: option.title,
+            onClick: () => editor.update(() => option.$onSelect()),
+            title: option.title,
+            type: option.type
+          };
+        }
+      });
+      listContentRef.current = renderableItems.map(item => item.key);
+      setRenderItems(renderableItems);
+      setIsOpen(true);
+    }
+    return editor.registerRootListener((rootElement, prevRootElement) => {
+      if (prevRootElement !== null) {
+        prevRootElement.removeEventListener('contextmenu', onContextMenu);
+      }
+      if (rootElement !== null) {
+        rootElement.addEventListener('contextmenu', onContextMenu);
+      }
+    });
+  }, [items, itemClassName, separatorClassName, refs, editor]);
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+    children: isOpen && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingOverlay, {
+      lockScroll: true,
+      children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+        context: context,
+        initialFocus: refs.floating,
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: className,
+          ref: refs.setFloating,
+          style: floatingStyles,
+          ...getFloatingProps(),
+          children: renderItems.map((item, index) => {
+            if (item.type === 'item') {
+              return /*#__PURE__*/react.createElement(ContextMenuItem, {
+                ...getItemProps({
+                  ...item,
+                  onClick() {
+                    item.onClick();
+                    setIsOpen(false);
+                  },
+                  onMouseUp() {
+                    item.onClick();
+                    setIsOpen(false);
+                  },
+                  ref(node) {
+                    listItemsRef.current[index] = node;
+                  },
+                  tabIndex: activeIndex === index ? 0 : -1
+                }),
+                key: item.key
+              });
+            } else if (item.type === 'separator') {
+              return /*#__PURE__*/react.createElement(ContextMenuSeparatorItem, {
+                ...getItemProps({
+                  ...item,
+                  ref(node) {
+                    listItemsRef.current[index] = node;
+                  },
+                  tabIndex: activeIndex === index ? 0 : -1
+                }),
+                key: item.key
+              });
+            }
+          })
+        })
+      })
+    })
+  });
+});
+
+exports.NodeContextMenuOption = NodeContextMenuOption;
+exports.NodeContextMenuPlugin = NodeContextMenuPlugin;
+exports.NodeContextMenuSeparator = NodeContextMenuSeparator;

package/LexicalNodeContextMenuPlugin.dev.mjs

@@ -0,0 +1,253 @@
+/**
+ * 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 { useFloating, autoUpdate, offset, flip, shift, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNearestNodeFromDOMNode } from 'lexical';
+import { forwardRef, useState, useRef, useEffect, createElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+/**
+ * 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.
+ *
+ */
+
+class MenuOption {
+  key;
+  ref;
+  constructor(key) {
+    this.key = key;
+    this.ref = {
+      current: null
+    };
+    this.setRefElement = this.setRefElement.bind(this);
+  }
+  setRefElement(element) {
+    this.ref = {
+      current: element
+    };
+  }
+}
+class NodeContextMenuOption extends MenuOption {
+  type;
+  title;
+  icon;
+  disabled;
+  $onSelect;
+  $showOn;
+  constructor(title, options) {
+    super(title);
+    this.type = 'item';
+    this.title = title;
+    this.disabled = options.disabled ?? false;
+    this.icon = options.icon ?? null;
+    this.$onSelect = options.$onSelect;
+    if (options.$showOn) {
+      this.$showOn = options.$showOn;
+    }
+  }
+}
+class NodeContextMenuSeparator extends MenuOption {
+  type;
+  $showOn;
+  constructor(options) {
+    super('_separator');
+    this.type = 'separator';
+    if (options && options.$showOn) {
+      this.$showOn = options.$showOn;
+    }
+  }
+}
+const ContextMenuSeparatorItem = /*#__PURE__*/forwardRef(({
+  className,
+  disabled,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx("hr", {
+    className: className
+  });
+});
+const ContextMenuItem = /*#__PURE__*/forwardRef(({
+  className,
+  label,
+  disabled,
+  icon,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxs("button", {
+    ...props,
+    className: className,
+    ref: ref,
+    role: "menuitem",
+    disabled: disabled,
+    children: [icon, label]
+  });
+});
+const NodeContextMenuPlugin = /*#__PURE__*/forwardRef(({
+  items,
+  className,
+  itemClassName,
+  separatorClassName
+}, forwardedRef) => {
+  const [editor] = useLexicalComposerContext();
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const listItemsRef = useRef([]);
+  const listContentRef = useRef([]);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = useFloating({
+    middleware: [offset({
+      alignmentAxis: 4,
+      mainAxis: 5
+    }), flip({
+      fallbackPlacements: ['left-start']
+    }), shift({
+      padding: 10
+    })],
+    onOpenChange: setIsOpen,
+    open: isOpen,
+    placement: 'right-start',
+    strategy: 'fixed',
+    whileElementsMounted: autoUpdate
+  });
+  const role = useRole(context, {
+    role: 'menu'
+  });
+  const dismiss = useDismiss(context);
+  const listNavigation = useListNavigation(context, {
+    activeIndex,
+    listRef: listItemsRef,
+    onNavigate: setActiveIndex
+  });
+  const typeahead = useTypeahead(context, {
+    activeIndex,
+    enabled: isOpen,
+    listRef: listContentRef,
+    onMatch: setActiveIndex
+  });
+  const {
+    getFloatingProps,
+    getItemProps
+  } = useInteractions([role, dismiss, listNavigation, typeahead]);
+  const [renderItems, setRenderItems] = useState([]);
+  useEffect(() => {
+    function onContextMenu(e) {
+      e.preventDefault();
+      refs.setPositionReference({
+        getBoundingClientRect() {
+          return {
+            bottom: e.clientY,
+            height: 0,
+            left: e.clientX,
+            right: e.clientX,
+            top: e.clientY,
+            width: 0,
+            x: e.clientX,
+            y: e.clientY
+          };
+        }
+      });
+      let visibleItems = [];
+      if (items) {
+        editor.read(() => {
+          const node = $getNearestNodeFromDOMNode(e.target);
+          if (node) {
+            visibleItems = items.filter(option => option.$showOn ? option.$showOn(node) : true);
+          }
+        });
+      }
+      const renderableItems = visibleItems.map((option, index) => {
+        if (option.type === 'separator') {
+          return {
+            className: separatorClassName,
+            key: option.key + '-' + index,
+            type: option.type
+          };
+        } else {
+          return {
+            className: itemClassName,
+            disabled: option.disabled,
+            icon: option.icon,
+            key: option.key,
+            label: option.title,
+            onClick: () => editor.update(() => option.$onSelect()),
+            title: option.title,
+            type: option.type
+          };
+        }
+      });
+      listContentRef.current = renderableItems.map(item => item.key);
+      setRenderItems(renderableItems);
+      setIsOpen(true);
+    }
+    return editor.registerRootListener((rootElement, prevRootElement) => {
+      if (prevRootElement !== null) {
+        prevRootElement.removeEventListener('contextmenu', onContextMenu);
+      }
+      if (rootElement !== null) {
+        rootElement.addEventListener('contextmenu', onContextMenu);
+      }
+    });
+  }, [items, itemClassName, separatorClassName, refs, editor]);
+  return /*#__PURE__*/jsx(FloatingPortal, {
+    children: isOpen && /*#__PURE__*/jsx(FloatingOverlay, {
+      lockScroll: true,
+      children: /*#__PURE__*/jsx(FloatingFocusManager, {
+        context: context,
+        initialFocus: refs.floating,
+        children: /*#__PURE__*/jsx("div", {
+          className: className,
+          ref: refs.setFloating,
+          style: floatingStyles,
+          ...getFloatingProps(),
+          children: renderItems.map((item, index) => {
+            if (item.type === 'item') {
+              return /*#__PURE__*/createElement(ContextMenuItem, {
+                ...getItemProps({
+                  ...item,
+                  onClick() {
+                    item.onClick();
+                    setIsOpen(false);
+                  },
+                  onMouseUp() {
+                    item.onClick();
+                    setIsOpen(false);
+                  },
+                  ref(node) {
+                    listItemsRef.current[index] = node;
+                  },
+                  tabIndex: activeIndex === index ? 0 : -1
+                }),
+                key: item.key
+              });
+            } else if (item.type === 'separator') {
+              return /*#__PURE__*/createElement(ContextMenuSeparatorItem, {
+                ...getItemProps({
+                  ...item,
+                  ref(node) {
+                    listItemsRef.current[index] = node;
+                  },
+                  tabIndex: activeIndex === index ? 0 : -1
+                }),
+                key: item.key
+              });
+            }
+          })
+        })
+      })
+    })
+  });
+});
+
+export { NodeContextMenuOption, NodeContextMenuPlugin, NodeContextMenuSeparator };

package/LexicalNodeContextMenuPlugin.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
+'use strict'
+const LexicalNodeContextMenuPlugin = process.env.NODE_ENV !== 'production' ? require('./LexicalNodeContextMenuPlugin.dev.js') : require('./LexicalNodeContextMenuPlugin.prod.js');
+module.exports = LexicalNodeContextMenuPlugin;

package/LexicalNodeContextMenuPlugin.js.flow

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+/**
+ * LexicalNodeContextMenuPlugin
+ */

package/LexicalNodeContextMenuPlugin.mjs

@@ -0,0 +1,14 @@
+/**
+ * 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 * as modDev from './LexicalNodeContextMenuPlugin.dev.mjs';
+import * as modProd from './LexicalNodeContextMenuPlugin.prod.mjs';
+const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
+export const NodeContextMenuOption = mod.NodeContextMenuOption;
+export const NodeContextMenuPlugin = mod.NodeContextMenuPlugin;
+export const NodeContextMenuSeparator = mod.NodeContextMenuSeparator;

package/LexicalNodeContextMenuPlugin.node.mjs

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+
+const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalNodeContextMenuPlugin.dev.mjs') : import('./LexicalNodeContextMenuPlugin.prod.mjs'));
+export const NodeContextMenuOption = mod.NodeContextMenuOption;
+export const NodeContextMenuPlugin = mod.NodeContextMenuPlugin;
+export const NodeContextMenuSeparator = mod.NodeContextMenuSeparator;

package/LexicalNodeContextMenuPlugin.prod.js

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+"use strict";var e=require("@floating-ui/react"),t=require("@lexical/react/LexicalComposerContext"),s=require("lexical"),n=require("react"),i=require("react/jsx-runtime");class a{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}}const l=n.forwardRef(({className:e,disabled:t,...s},n)=>i.jsx("hr",{className:e})),o=n.forwardRef(({className:e,label:t,disabled:s,icon:n,...a},l)=>i.jsxs("button",{...a,className:e,ref:l,role:"menuitem",disabled:s,children:[n,t]})),r=n.forwardRef(({items:a,className:r,itemClassName:c,separatorClassName:u},d)=>{const[m]=t.useLexicalComposerContext(),[p,h]=n.useState(null),[f,x]=n.useState(!1),y=n.useRef([]),g=n.useRef([]),{refs:N,floatingStyles:b,context:k}=e.useFloating({middleware:[e.offset({alignmentAxis:4,mainAxis:5}),e.flip({fallbackPlacements:["left-start"]}),e.shift({padding:10})],onOpenChange:x,open:f,placement:"right-start",strategy:"fixed",whileElementsMounted:e.autoUpdate}),w=e.useRole(k,{role:"menu"}),C=e.useDismiss(k),$=e.useListNavigation(k,{activeIndex:p,listRef:y,onNavigate:h}),O=e.useTypeahead(k,{activeIndex:p,enabled:f,listRef:g,onMatch:h}),{getFloatingProps:R,getItemProps:v}=e.useInteractions([w,C,$,O]),[S,E]=n.useState([]);return n.useEffect(()=>{function e(e){e.preventDefault(),N.setPositionReference({getBoundingClientRect:()=>({bottom:e.clientY,height:0,left:e.clientX,right:e.clientX,top:e.clientY,width:0,x:e.clientX,y:e.clientY})});let t=[];a&&m.read(()=>{const n=s.$getNearestNodeFromDOMNode(e.target);n&&(t=a.filter(e=>!e.$showOn||e.$showOn(n)))});const n=t.map((e,t)=>"separator"===e.type?{className:u,key:e.key+"-"+t,type:e.type}:{className:c,disabled:e.disabled,icon:e.icon,key:e.key,label:e.title,onClick:()=>m.update(()=>e.$onSelect()),title:e.title,type:e.type});g.current=n.map(e=>e.key),E(n),x(!0)}return m.registerRootListener((t,s)=>{null!==s&&s.removeEventListener("contextmenu",e),null!==t&&t.addEventListener("contextmenu",e)})},[a,c,u,N,m]),i.jsx(e.FloatingPortal,{children:f&&i.jsx(e.FloatingOverlay,{lockScroll:!0,children:i.jsx(e.FloatingFocusManager,{context:k,initialFocus:N.floating,children:i.jsx("div",{className:r,ref:N.setFloating,style:b,...R(),children:S.map((e,t)=>"item"===e.type?n.createElement(o,{...v({...e,onClick(){e.onClick(),x(!1)},onMouseUp(){e.onClick(),x(!1)},ref(e){y.current[t]=e},tabIndex:p===t?0:-1}),key:e.key}):"separator"===e.type?n.createElement(l,{...v({...e,ref(e){y.current[t]=e},tabIndex:p===t?0:-1}),key:e.key}):void 0)})})})})});exports.NodeContextMenuOption=class extends a{type;title;icon;disabled;$onSelect;$showOn;constructor(e,t){super(e),this.type="item",this.title=e,this.disabled=t.disabled??!1,this.icon=t.icon??null,this.$onSelect=t.$onSelect,t.$showOn&&(this.$showOn=t.$showOn)}},exports.NodeContextMenuPlugin=r,exports.NodeContextMenuSeparator=class extends a{type;$showOn;constructor(e){super("_separator"),this.type="separator",e&&e.$showOn&&(this.$showOn=e.$showOn)}};

package/LexicalNodeContextMenuPlugin.prod.mjs

@@ -0,0 +1,9 @@
+/**
+ * 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{useFloating as e,autoUpdate as t,offset as n,flip as s,shift as i,useRole as l,useDismiss as o,useListNavigation as r,useTypeahead as a,useInteractions as c,FloatingPortal as m,FloatingOverlay as d,FloatingFocusManager as h}from"@floating-ui/react";import{useLexicalComposerContext as p}from"@lexical/react/LexicalComposerContext";import{$getNearestNodeFromDOMNode as u}from"lexical";import{forwardRef as f,useState as y,useRef as x,useEffect as g,createElement as b}from"react";import{jsx as k,jsxs as $}from"react/jsx-runtime";class w{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}}class N extends w{type;title;icon;disabled;$onSelect;$showOn;constructor(e,t){super(e),this.type="item",this.title=e,this.disabled=t.disabled??!1,this.icon=t.icon??null,this.$onSelect=t.$onSelect,t.$showOn&&(this.$showOn=t.$showOn)}}class O extends w{type;$showOn;constructor(e){super("_separator"),this.type="separator",e&&e.$showOn&&(this.$showOn=e.$showOn)}}const C=f(({className:e,disabled:t,...n},s)=>k("hr",{className:e})),v=f(({className:e,label:t,disabled:n,icon:s,...i},l)=>$("button",{...i,className:e,ref:l,role:"menuitem",disabled:n,children:[s,t]})),R=f(({items:f,className:$,itemClassName:w,separatorClassName:N},O)=>{const[R]=p(),[E,S]=y(null),[I,L]=y(!1),P=x([]),F=x([]),{refs:M,floatingStyles:X,context:Y}=e({middleware:[n({alignmentAxis:4,mainAxis:5}),s({fallbackPlacements:["left-start"]}),i({padding:10})],onOpenChange:L,open:I,placement:"right-start",strategy:"fixed",whileElementsMounted:t}),A=l(Y,{role:"menu"}),j=o(Y),B=r(Y,{activeIndex:E,listRef:P,onNavigate:S}),D=a(Y,{activeIndex:E,enabled:I,listRef:F,onMatch:S}),{getFloatingProps:U,getItemProps:_}=c([A,j,B,D]),[q,z]=y([]);return g(()=>{function e(e){e.preventDefault(),M.setPositionReference({getBoundingClientRect:()=>({bottom:e.clientY,height:0,left:e.clientX,right:e.clientX,top:e.clientY,width:0,x:e.clientX,y:e.clientY})});let t=[];f&&R.read(()=>{const n=u(e.target);n&&(t=f.filter(e=>!e.$showOn||e.$showOn(n)))});const n=t.map((e,t)=>"separator"===e.type?{className:N,key:e.key+"-"+t,type:e.type}:{className:w,disabled:e.disabled,icon:e.icon,key:e.key,label:e.title,onClick:()=>R.update(()=>e.$onSelect()),title:e.title,type:e.type});F.current=n.map(e=>e.key),z(n),L(!0)}return R.registerRootListener((t,n)=>{null!==n&&n.removeEventListener("contextmenu",e),null!==t&&t.addEventListener("contextmenu",e)})},[f,w,N,M,R]),k(m,{children:I&&k(d,{lockScroll:!0,children:k(h,{context:Y,initialFocus:M.floating,children:k("div",{className:$,ref:M.setFloating,style:X,...U(),children:q.map((e,t)=>"item"===e.type?b(v,{..._({...e,onClick(){e.onClick(),L(!1)},onMouseUp(){e.onClick(),L(!1)},ref(e){P.current[t]=e},tabIndex:E===t?0:-1}),key:e.key}):"separator"===e.type?b(C,{..._({...e,ref(e){P.current[t]=e},tabIndex:E===t?0:-1}),key:e.key}):void 0)})})})})});export{N as NodeContextMenuOption,R as NodeContextMenuPlugin,O as NodeContextMenuSeparator};

package/LexicalNodeEventPlugin.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 type { Klass, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
+export declare function NodeEventPlugin({ nodeType, eventType, eventListener, }: {
+    nodeType: Klass<LexicalNode>;
+    eventType: string;
+    eventListener: (event: Event, editor: LexicalEditor, nodeKey: NodeKey) => void;
+}): null;

package/LexicalNodeEventPlugin.dev.js

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ *
+ */
+
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var utils = require('@lexical/utils');
+var lexical = require('lexical');
+var react = require('react');
+
+/**
+ * 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.
+ *
+ */
+
+const capturedEvents = new Set(['mouseenter', 'mouseleave']);
+function NodeEventPlugin({
+  nodeType,
+  eventType,
+  eventListener
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const listenerRef = react.useRef(eventListener);
+  listenerRef.current = eventListener;
+  react.useEffect(() => {
+    const isCaptured = capturedEvents.has(eventType);
+    const onEvent = event => {
+      editor.update(() => {
+        const nearestNode = lexical.$getNearestNodeFromDOMNode(event.target);
+        if (nearestNode !== null) {
+          const targetNode = isCaptured ? nearestNode instanceof nodeType ? nearestNode : null : utils.$findMatchingParent(nearestNode, node => node instanceof nodeType);
+          if (targetNode !== null) {
+            listenerRef.current(event, editor, targetNode.getKey());
+            return;
+          }
+        }
+      });
+    };
+    return editor.registerRootListener((rootElement, prevRootElement) => {
+      if (rootElement) {
+        rootElement.addEventListener(eventType, onEvent, isCaptured);
+      }
+      if (prevRootElement) {
+        prevRootElement.removeEventListener(eventType, onEvent, isCaptured);
+      }
+    });
+    // We intentionally don't respect changes to eventType.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, nodeType]);
+  return null;
+}
+
+exports.NodeEventPlugin = NodeEventPlugin;