@lexical/react 0.10.0 → 0.11.1

package/LexicalContextMenuPlugin.dev.js

@@ -0,0 +1,508 @@
+/**
+ * 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 React = require('react');
+var utils = require('@lexical/utils');
+var lexical = require('lexical');
+
+/**
+ * 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 CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * 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 useLayoutEffectImpl = CAN_USE_DOM ? React.useLayoutEffect : React.useEffect;
+var useLayoutEffect = useLayoutEffectImpl;
+
+/**
+ * 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 {
+  constructor(key) {
+    this.key = key;
+    this.ref = {
+      current: null
+    };
+    this.setRefElement = this.setRefElement.bind(this);
+  }
+
+  setRefElement(element) {
+    this.ref = {
+      current: element
+    };
+  }
+
+}
+
+const scrollIntoViewIfNeeded = target => {
+  const typeaheadContainerNode = document.getElementById('typeahead-menu');
+  if (!typeaheadContainerNode) return;
+  const typeaheadRect = typeaheadContainerNode.getBoundingClientRect();
+
+  if (typeaheadRect.top + typeaheadRect.height > window.innerHeight) {
+    typeaheadContainerNode.scrollIntoView({
+      block: 'center'
+    });
+  }
+
+  if (typeaheadRect.top < 0) {
+    typeaheadContainerNode.scrollIntoView({
+      block: 'center'
+    });
+  }
+
+  target.scrollIntoView({
+    block: 'nearest'
+  });
+};
+/**
+ * Walk backwards along user input and forward through entity title to try
+ * and replace more of the user's text with entity.
+ */
+
+
+function getFullMatchOffset(documentText, entryText, offset) {
+  let triggerOffset = offset;
+
+  for (let i = triggerOffset; i <= entryText.length; i++) {
+    if (documentText.substr(-i) === entryText.substr(0, i)) {
+      triggerOffset = i;
+    }
+  }
+
+  return triggerOffset;
+}
+/**
+ * Split Lexical TextNode and return a new TextNode only containing matched text.
+ * Common use cases include: removing the node, replacing with a new node.
+ */
+
+
+function $splitNodeContainingQuery(match) {
+  const selection = lexical.$getSelection();
+
+  if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed()) {
+    return null;
+  }
+
+  const anchor = selection.anchor;
+
+  if (anchor.type !== 'text') {
+    return null;
+  }
+
+  const anchorNode = anchor.getNode();
+
+  if (!anchorNode.isSimpleText()) {
+    return null;
+  }
+
+  const selectionOffset = anchor.offset;
+  const textContent = anchorNode.getTextContent().slice(0, selectionOffset);
+  const characterOffset = match.replaceableString.length;
+  const queryOffset = getFullMatchOffset(textContent, match.matchingString, characterOffset);
+  const startOffset = selectionOffset - queryOffset;
+
+  if (startOffset < 0) {
+    return null;
+  }
+
+  let newNode;
+
+  if (startOffset === 0) {
+    [newNode] = anchorNode.splitText(selectionOffset);
+  } else {
+    [, newNode] = anchorNode.splitText(startOffset, selectionOffset);
+  }
+
+  return newNode;
+} // Got from https://stackoverflow.com/a/42543908/2013580
+
+
+function getScrollParent(element, includeHidden) {
+  let style = getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+
+  if (style.position === 'fixed') {
+    return document.body;
+  }
+
+  for (let parent = element; parent = parent.parentElement;) {
+    style = getComputedStyle(parent);
+
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
+      return parent;
+    }
+  }
+
+  return document.body;
+}
+
+function isTriggerVisibleInNearestScrollContainer(targetElement, containerElement) {
+  const tRect = targetElement.getBoundingClientRect();
+  const cRect = containerElement.getBoundingClientRect();
+  return tRect.top > cRect.top && tRect.top < cRect.bottom;
+} // Reposition the menu on scroll, window resize, and element resize.
+
+
+function useDynamicPositioning(resolution, targetElement, onReposition, onVisibilityChange) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React.useEffect(() => {
+    if (targetElement != null && resolution != null) {
+      const rootElement = editor.getRootElement();
+      const rootScrollParent = rootElement != null ? getScrollParent(rootElement, false) : document.body;
+      let ticking = false;
+      let previousIsInView = isTriggerVisibleInNearestScrollContainer(targetElement, rootScrollParent);
+
+      const handleScroll = function () {
+        if (!ticking) {
+          window.requestAnimationFrame(function () {
+            onReposition();
+            ticking = false;
+          });
+          ticking = true;
+        }
+
+        const isInView = isTriggerVisibleInNearestScrollContainer(targetElement, rootScrollParent);
+
+        if (isInView !== previousIsInView) {
+          previousIsInView = isInView;
+
+          if (onVisibilityChange != null) {
+            onVisibilityChange(isInView);
+          }
+        }
+      };
+
+      const resizeObserver = new ResizeObserver(onReposition);
+      window.addEventListener('resize', onReposition);
+      document.addEventListener('scroll', handleScroll, {
+        capture: true,
+        passive: true
+      });
+      resizeObserver.observe(targetElement);
+      return () => {
+        resizeObserver.unobserve(targetElement);
+        window.removeEventListener('resize', onReposition);
+        document.removeEventListener('scroll', handleScroll);
+      };
+    }
+  }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
+}
+const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = lexical.createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
+function LexicalMenu({
+  close,
+  editor,
+  anchorElementRef,
+  resolution,
+  options,
+  menuRenderFn,
+  onSelectOption,
+  shouldSplitNodeWithQuery = false
+}) {
+  const [selectedIndex, setHighlightedIndex] = React.useState(null);
+  const matchingString = resolution.match && resolution.match.matchingString;
+  React.useEffect(() => {
+    setHighlightedIndex(0);
+  }, [matchingString]);
+  const selectOptionAndCleanUp = React.useCallback(selectedEntry => {
+    editor.update(() => {
+      const textNodeContainingQuery = resolution.match != null && shouldSplitNodeWithQuery ? $splitNodeContainingQuery(resolution.match) : null;
+      onSelectOption(selectedEntry, textNodeContainingQuery, close, resolution.match ? resolution.match.matchingString : '');
+    });
+  }, [editor, shouldSplitNodeWithQuery, resolution.match, onSelectOption, close]);
+  const updateSelectedIndex = React.useCallback(index => {
+    const rootElem = editor.getRootElement();
+
+    if (rootElem !== null) {
+      rootElem.setAttribute('aria-activedescendant', 'typeahead-item-' + index);
+      setHighlightedIndex(index);
+    }
+  }, [editor]);
+  React.useEffect(() => {
+    return () => {
+      const rootElem = editor.getRootElement();
+
+      if (rootElem !== null) {
+        rootElem.removeAttribute('aria-activedescendant');
+      }
+    };
+  }, [editor]);
+  useLayoutEffect(() => {
+    if (options === null) {
+      setHighlightedIndex(null);
+    } else if (selectedIndex === null) {
+      updateSelectedIndex(0);
+    }
+  }, [options, selectedIndex, updateSelectedIndex]);
+  React.useEffect(() => {
+    return utils.mergeRegister(editor.registerCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, ({
+      option
+    }) => {
+      if (option.ref && option.ref.current != null) {
+        scrollIntoViewIfNeeded(option.ref.current);
+        return true;
+      }
+
+      return false;
+    }, lexical.COMMAND_PRIORITY_LOW));
+  }, [editor, updateSelectedIndex]);
+  React.useEffect(() => {
+    return utils.mergeRegister(editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, payload => {
+      const event = payload;
+
+      if (options !== null && options.length && selectedIndex !== null) {
+        const newSelectedIndex = selectedIndex !== options.length - 1 ? selectedIndex + 1 : 0;
+        updateSelectedIndex(newSelectedIndex);
+        const option = options[newSelectedIndex];
+
+        if (option.ref != null && option.ref.current) {
+          editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
+            index: newSelectedIndex,
+            option
+          });
+        }
+
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+
+      return true;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => {
+      const event = payload;
+
+      if (options !== null && options.length && selectedIndex !== null) {
+        const newSelectedIndex = selectedIndex !== 0 ? selectedIndex - 1 : options.length - 1;
+        updateSelectedIndex(newSelectedIndex);
+        const option = options[newSelectedIndex];
+
+        if (option.ref != null && option.ref.current) {
+          scrollIntoViewIfNeeded(option.ref.current);
+        }
+
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+
+      return true;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, payload => {
+      const event = payload;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      close();
+      return true;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_TAB_COMMAND, payload => {
+      const event = payload;
+
+      if (options === null || selectedIndex === null || options[selectedIndex] == null) {
+        return false;
+      }
+
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      selectOptionAndCleanUp(options[selectedIndex]);
+      return true;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
+      if (options === null || selectedIndex === null || options[selectedIndex] == null) {
+        return false;
+      }
+
+      if (event !== null) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+
+      selectOptionAndCleanUp(options[selectedIndex]);
+      return true;
+    }, lexical.COMMAND_PRIORITY_LOW));
+  }, [selectOptionAndCleanUp, close, editor, options, selectedIndex, updateSelectedIndex]);
+  const listItemProps = React.useMemo(() => ({
+    options,
+    selectOptionAndCleanUp,
+    selectedIndex,
+    setHighlightedIndex
+  }), [selectOptionAndCleanUp, selectedIndex, options]);
+  return menuRenderFn(anchorElementRef, listItemProps, resolution.match ? resolution.match.matchingString : '');
+}
+function useMenuAnchorRef(resolution, setResolution, className) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const anchorElementRef = React.useRef(document.createElement('div'));
+  const positionMenu = React.useCallback(() => {
+    const rootElement = editor.getRootElement();
+    const containerDiv = anchorElementRef.current;
+    const menuEle = containerDiv.firstChild;
+
+    if (rootElement !== null && resolution !== null) {
+      const {
+        left,
+        top,
+        width,
+        height
+      } = resolution.getRect();
+      containerDiv.style.top = `${top + window.pageYOffset}px`;
+      containerDiv.style.left = `${left + window.pageXOffset}px`;
+      containerDiv.style.height = `${height}px`;
+      containerDiv.style.width = `${width}px`;
+
+      if (menuEle !== null) {
+        const menuRect = menuEle.getBoundingClientRect();
+        const menuHeight = menuRect.height;
+        const menuWidth = menuRect.width;
+        const rootElementRect = rootElement.getBoundingClientRect();
+
+        if (left + menuWidth > rootElementRect.right) {
+          containerDiv.style.left = `${left - menuWidth + window.pageXOffset}px`;
+        }
+
+        const margin = 10;
+
+        if ((top + menuHeight > window.innerHeight || top + menuHeight > rootElementRect.bottom) && top - rootElementRect.top > menuHeight) {
+          containerDiv.style.top = `${top - menuHeight + window.pageYOffset - (height + margin)}px`;
+        }
+      }
+
+      if (!containerDiv.isConnected) {
+        if (className != null) {
+          containerDiv.className = className;
+        }
+
+        containerDiv.setAttribute('aria-label', 'Typeahead menu');
+        containerDiv.setAttribute('id', 'typeahead-menu');
+        containerDiv.setAttribute('role', 'listbox');
+        containerDiv.style.display = 'block';
+        containerDiv.style.position = 'absolute';
+        document.body.append(containerDiv);
+      }
+
+      anchorElementRef.current = containerDiv;
+      rootElement.setAttribute('aria-controls', 'typeahead-menu');
+    }
+  }, [editor, resolution, className]);
+  React.useEffect(() => {
+    const rootElement = editor.getRootElement();
+
+    if (resolution !== null) {
+      positionMenu();
+      return () => {
+        if (rootElement !== null) {
+          rootElement.removeAttribute('aria-controls');
+        }
+
+        const containerDiv = anchorElementRef.current;
+
+        if (containerDiv !== null && containerDiv.isConnected) {
+          containerDiv.remove();
+        }
+      };
+    }
+  }, [editor, positionMenu, resolution]);
+  const onVisibilityChange = React.useCallback(isInView => {
+    if (resolution !== null) {
+      if (!isInView) {
+        setResolution(null);
+      }
+    }
+  }, [resolution, setResolution]);
+  useDynamicPositioning(resolution, anchorElementRef.current, positionMenu, onVisibilityChange);
+  return anchorElementRef;
+}
+
+/**
+ * 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 PRE_PORTAL_DIV_SIZE = 1;
+function LexicalContextMenuPlugin({
+  options,
+  onClose,
+  onOpen,
+  onSelectOption,
+  menuRenderFn: contextMenuRenderFn,
+  anchorClassName
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [resolution, setResolution] = React.useState(null);
+  const menuRef = React.useRef(null);
+  const anchorElementRef = useMenuAnchorRef(resolution, setResolution, anchorClassName);
+  const closeNodeMenu = React.useCallback(() => {
+    setResolution(null);
+
+    if (onClose != null && resolution !== null) {
+      onClose();
+    }
+  }, [onClose, resolution]);
+  const openNodeMenu = React.useCallback(res => {
+    setResolution(res);
+
+    if (onOpen != null && resolution === null) {
+      onOpen(res);
+    }
+  }, [onOpen, resolution]);
+  const handleContextMenu = React.useCallback(event => {
+    event.preventDefault();
+    openNodeMenu({
+      getRect: () => new DOMRect(event.clientX, event.clientY, PRE_PORTAL_DIV_SIZE, PRE_PORTAL_DIV_SIZE)
+    });
+  }, [openNodeMenu]);
+  const handleClick = React.useCallback(event => {
+    if (resolution !== null && menuRef.current != null && event.target != null && !menuRef.current.contains(event.target)) {
+      closeNodeMenu();
+    }
+  }, [closeNodeMenu, resolution]);
+  React.useEffect(() => {
+    const editorElement = editor.getRootElement();
+
+    if (editorElement) {
+      editorElement.addEventListener('contextmenu', handleContextMenu);
+      return () => editorElement.removeEventListener('contextmenu', handleContextMenu);
+    }
+  }, [editor, handleContextMenu]);
+  React.useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, [editor, handleClick]);
+  return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalMenu, {
+    close: closeNodeMenu,
+    resolution: resolution,
+    editor: editor,
+    anchorElementRef: anchorElementRef,
+    options: options,
+    menuRenderFn: (anchorRef, itemProps) => contextMenuRenderFn(anchorRef, itemProps, {
+      setMenuRef: ref => {
+        menuRef.current = ref;
+      }
+    }),
+    onSelectOption: onSelectOption
+  });
+}
+
+exports.LexicalContextMenuPlugin = LexicalContextMenuPlugin;
+exports.MenuOption = MenuOption;

package/LexicalContextMenuPlugin.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'
+const LexicalContextMenuPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalContextMenuPlugin.dev.js') : require('./LexicalContextMenuPlugin.prod.js')
+module.exports = LexicalContextMenuPlugin;

package/LexicalContextMenuPlugin.prod.js

@@ -0,0 +1,21 @@
+/**
+ * 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 k=require("@lexical/react/LexicalComposerContext"),t=require("react"),w=require("@lexical/utils"),x=require("lexical"),y="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?t.useLayoutEffect:t.useEffect;class z{constructor(b){this.key=b;this.ref={current:null};this.setRefElement=this.setRefElement.bind(this)}setRefElement(b){this.ref={current:b}}}
+let A=b=>{const a=document.getElementById("typeahead-menu");if(a){var d=a.getBoundingClientRect();d.top+d.height>window.innerHeight&&a.scrollIntoView({block:"center"});0>d.top&&a.scrollIntoView({block:"center"});b.scrollIntoView({block:"nearest"})}};
+function B(b){var a=x.$getSelection();if(!x.$isRangeSelection(a)||!a.isCollapsed())return null;var d=a.anchor;if("text"!==d.type)return null;a=d.getNode();if(!a.isSimpleText())return null;d=d.offset;let l=a.getTextContent().slice(0,d);var f=b.matchingString;b=b.replaceableString.length;for(let m=b;m<=f.length;m++)l.substr(-m)===f.substr(0,m)&&(b=m);b=d-b;if(0>b)return null;let r;0===b?[r]=a.splitText(d):[,r]=a.splitText(b,d);return r}
+function C(b,a){let d=getComputedStyle(b),l="absolute"===d.position;a=a?/(auto|scroll|hidden)/:/(auto|scroll)/;if("fixed"===d.position)return document.body;for(;b=b.parentElement;)if(d=getComputedStyle(b),(!l||"static"!==d.position)&&a.test(d.overflow+d.overflowY+d.overflowX))return b;return document.body}function D(b,a){b=b.getBoundingClientRect();a=a.getBoundingClientRect();return b.top>a.top&&b.top<a.bottom}
+function E(b,a,d,l){let [f]=k.useLexicalComposerContext();t.useEffect(()=>{if(null!=a&&null!=b){let r=f.getRootElement(),m=null!=r?C(r,!1):document.body,h=!1,c=D(a,m),n=function(){h||(window.requestAnimationFrame(function(){d();h=!1}),h=!0);const q=D(a,m);q!==c&&(c=q,null!=l&&l(q))},p=new ResizeObserver(d);window.addEventListener("resize",d);document.addEventListener("scroll",n,{capture:!0,passive:!0});p.observe(a);return()=>{p.unobserve(a);window.removeEventListener("resize",d);document.removeEventListener("scroll",
+n)}}},[a,f,l,d,b])}let F=x.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");
+function G({close:b,editor:a,anchorElementRef:d,resolution:l,options:f,menuRenderFn:r,onSelectOption:m,shouldSplitNodeWithQuery:h=!1}){let [c,n]=t.useState(null);t.useEffect(()=>{n(0)},[l.match&&l.match.matchingString]);let p=t.useCallback(g=>{a.update(()=>{const e=null!=l.match&&h?B(l.match):null;m(g,e,b,l.match?l.match.matchingString:"")})},[a,h,l.match,m,b]),q=t.useCallback(g=>{const e=a.getRootElement();null!==e&&(e.setAttribute("aria-activedescendant","typeahead-item-"+g),n(g))},[a]);t.useEffect(()=>
+()=>{let g=a.getRootElement();null!==g&&g.removeAttribute("aria-activedescendant")},[a]);y(()=>{null===f?n(null):null===c&&q(0)},[f,c,q]);t.useEffect(()=>w.mergeRegister(a.registerCommand(F,({option:g})=>g.ref&&null!=g.ref.current?(A(g.ref.current),!0):!1,x.COMMAND_PRIORITY_LOW)),[a,q]);t.useEffect(()=>w.mergeRegister(a.registerCommand(x.KEY_ARROW_DOWN_COMMAND,g=>{if(null!==f&&f.length&&null!==c){let e=c!==f.length-1?c+1:0;q(e);let v=f[e];null!=v.ref&&v.ref.current&&a.dispatchCommand(F,{index:e,option:v});
+g.preventDefault();g.stopImmediatePropagation()}return!0},x.COMMAND_PRIORITY_LOW),a.registerCommand(x.KEY_ARROW_UP_COMMAND,g=>{if(null!==f&&f.length&&null!==c){var e=0!==c?c-1:f.length-1;q(e);e=f[e];null!=e.ref&&e.ref.current&&A(e.ref.current);g.preventDefault();g.stopImmediatePropagation()}return!0},x.COMMAND_PRIORITY_LOW),a.registerCommand(x.KEY_ESCAPE_COMMAND,g=>{g.preventDefault();g.stopImmediatePropagation();b();return!0},x.COMMAND_PRIORITY_LOW),a.registerCommand(x.KEY_TAB_COMMAND,g=>{if(null===
+f||null===c||null==f[c])return!1;g.preventDefault();g.stopImmediatePropagation();p(f[c]);return!0},x.COMMAND_PRIORITY_LOW),a.registerCommand(x.KEY_ENTER_COMMAND,g=>{if(null===f||null===c||null==f[c])return!1;null!==g&&(g.preventDefault(),g.stopImmediatePropagation());p(f[c]);return!0},x.COMMAND_PRIORITY_LOW)),[p,b,a,f,c,q]);let u=t.useMemo(()=>({options:f,selectOptionAndCleanUp:p,selectedIndex:c,setHighlightedIndex:n}),[p,c,f]);return r(d,u,l.match?l.match.matchingString:"")}
+function H(b,a,d){let [l]=k.useLexicalComposerContext(),f=t.useRef(document.createElement("div")),r=t.useCallback(()=>{const h=l.getRootElement(),c=f.current;var n=c.firstChild;if(null!==h&&null!==b){const {left:q,top:u,width:g,height:e}=b.getRect();c.style.top=`${u+window.pageYOffset}px`;c.style.left=`${q+window.pageXOffset}px`;c.style.height=`${e}px`;c.style.width=`${g}px`;if(null!==n){var p=n.getBoundingClientRect();n=p.height;p=p.width;const v=h.getBoundingClientRect();q+p>v.right&&(c.style.left=
+`${q-p+window.pageXOffset}px`);(u+n>window.innerHeight||u+n>v.bottom)&&u-v.top>n&&(c.style.top=`${u-n+window.pageYOffset-(e+10)}px`)}c.isConnected||(null!=d&&(c.className=d),c.setAttribute("aria-label","Typeahead menu"),c.setAttribute("id","typeahead-menu"),c.setAttribute("role","listbox"),c.style.display="block",c.style.position="absolute",document.body.append(c));f.current=c;h.setAttribute("aria-controls","typeahead-menu")}},[l,b,d]);t.useEffect(()=>{let h=l.getRootElement();if(null!==b)return r(),
+()=>{null!==h&&h.removeAttribute("aria-controls");let c=f.current;null!==c&&c.isConnected&&c.remove()}},[l,r,b]);let m=t.useCallback(h=>{null!==b&&(h||a(null))},[b,a]);E(b,f.current,r,m);return f}
+exports.LexicalContextMenuPlugin=function({options:b,onClose:a,onOpen:d,onSelectOption:l,menuRenderFn:f,anchorClassName:r}){let [m]=k.useLexicalComposerContext(),[h,c]=t.useState(null),n=t.useRef(null);r=H(h,c,r);let p=t.useCallback(()=>{c(null);null!=a&&null!==h&&a()},[a,h]),q=t.useCallback(e=>{c(e);null!=d&&null===h&&d(e)},[d,h]),u=t.useCallback(e=>{e.preventDefault();q({getRect:()=>new DOMRect(e.clientX,e.clientY,1,1)})},[q]),g=t.useCallback(e=>{null===h||null==n.current||null==e.target||n.current.contains(e.target)||
+p()},[p,h]);t.useEffect(()=>{let e=m.getRootElement();if(e)return e.addEventListener("contextmenu",u),()=>e.removeEventListener("contextmenu",u)},[m,u]);t.useEffect(()=>{document.addEventListener("click",g);return()=>document.removeEventListener("click",g)},[m,g]);return null===h||null===m?null:t.createElement(G,{close:p,resolution:h,editor:m,anchorElementRef:r,options:b,menuRenderFn:(e,v)=>f(e,v,{setMenuRef:I=>{n.current=I}}),onSelectOption:l})};exports.MenuOption=z

package/LexicalDecoratorBlockNode.d.ts

@@ -18,5 +18,6 @@ export declare class DecoratorBlockNode extends DecoratorNode<JSX.Element> {
     createDOM(): HTMLElement;
     updateDOM(): false;
     setFormat(format: ElementFormatType): void;
+    isInline(): false;
 }
 export declare function $isDecoratorBlockNode(node: LexicalNode | null | undefined): node is DecoratorBlockNode;

package/LexicalDecoratorBlockNode.dev.js

@@ -42,6 +42,10 @@ class DecoratorBlockNode extends lexical.DecoratorNode {
     self.__format = format;
   }
 
+  isInline() {
+    return false;
+  }
+
 }
 function $isDecoratorBlockNode(node) {
   return node instanceof DecoratorBlockNode;

package/LexicalDecoratorBlockNode.prod.js

@@ -4,4 +4,4 @@
  * 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 b=require("lexical");class c extends b.DecoratorNode{constructor(a,d){super(d);this.__format=a||""}exportJSON(){return{format:this.__format||"",type:"decorator-block",version:1}}createDOM(){return document.createElement("div")}updateDOM(){return!1}setFormat(a){this.getWritable().__format=a}}exports.$isDecoratorBlockNode=function(a){return a instanceof c};exports.DecoratorBlockNode=c
+'use strict';var b=require("lexical");class c extends b.DecoratorNode{constructor(a,d){super(d);this.__format=a||""}exportJSON(){return{format:this.__format||"",type:"decorator-block",version:1}}createDOM(){return document.createElement("div")}updateDOM(){return!1}setFormat(a){this.getWritable().__format=a}isInline(){return!1}}exports.$isDecoratorBlockNode=function(a){return a instanceof c};exports.DecoratorBlockNode=c

package/LexicalNodeEventPlugin.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type Klass, type LexicalEditor, type LexicalNode, type NodeKey } from 'lexical';
+import type { Klass, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
 export declare function NodeEventPlugin({ nodeType, eventType, eventListener, }: {
     nodeType: Klass<LexicalNode>;
     eventType: string;

package/LexicalNodeEventPlugin.dev.js

@@ -7,6 +7,8 @@
 'use strict';
 
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var utils = require('@lexical/utils');
+var lexical = require('lexical');
 var react = require('react');
 
 /**
@@ -16,25 +18,7 @@ var react = require('react');
  * LICENSE file in the root directory of this source tree.
  *
  */
-const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-
-/**
- * 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 useLayoutEffectImpl = CAN_USE_DOM ? react.useLayoutEffect : react.useEffect;
-var useLayoutEffect = useLayoutEffectImpl;
-
-/**
- * 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,
@@ -43,24 +27,33 @@ function NodeEventPlugin({
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const listenerRef = react.useRef(eventListener);
   listenerRef.current = eventListener;
-  useLayoutEffect(() => {
-    const registedElements = new WeakSet();
-    return editor.registerMutationListener(nodeType, mutations => {
-      editor.getEditorState().read(() => {
-        for (const [key, mutation] of mutations) {
-          const element = editor.getElementByKey(key);
+  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 ( // Updated might be a move, so that might mean a new DOM element
-          // is created. In this case, we need to add and event listener too.
-          (mutation === 'created' || mutation === 'updated') && element !== null && !registedElements.has(element)) {
-            registedElements.add(element);
-            element.addEventListener(eventType, event => {
-              listenerRef.current(event, editor, key);
-            });
+          if (targetNode !== null) {
+            listenerRef.current(event, editor, targetNode.getKey());
+            return;
           }
         }
       });
-    }); // wW intentionally don't respect changes to eventType.
+    };
+
+    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;

package/LexicalNodeEventPlugin.prod.js

@@ -4,5 +4,5 @@
  * 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 c=require("@lexical/react/LexicalComposerContext"),l=require("react"),m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?l.useLayoutEffect:l.useEffect;
-exports.NodeEventPlugin=function({nodeType:d,eventType:n,eventListener:e}){let [a]=c.useLexicalComposerContext(),f=l.useRef(e);f.current=e;m(()=>{let g=new WeakSet;return a.registerMutationListener(d,p=>{a.getEditorState().read(()=>{for(let [h,k]of p){let b=a.getElementByKey(h);"created"!==k&&"updated"!==k||null===b||g.has(b)||(g.add(b),b.addEventListener(n,q=>{f.current(q,a,h)}))}})})},[a,d]);return null}
+'use strict';var g=require("@lexical/react/LexicalComposerContext"),m=require("@lexical/utils"),n=require("lexical"),p=require("react");let q=new Set(["mouseenter","mouseleave"]);
+exports.NodeEventPlugin=function({nodeType:d,eventType:e,eventListener:h}){let [c]=g.useLexicalComposerContext(),k=p.useRef(h);k.current=h;p.useEffect(()=>{let f=q.has(e),l=b=>{c.update(()=>{var a=n.$getNearestNodeFromDOMNode(b.target);null!==a&&(a=f?a instanceof d?a:null:m.$findMatchingParent(a,r=>r instanceof d),null!==a&&k.current(b,c,a.getKey()))})};return c.registerRootListener((b,a)=>{b&&b.addEventListener(e,l,f);a&&a.removeEventListener(e,l,f)})},[c,d]);return null}