@lexical/react 0.12.2 → 0.12.4

package/LexicalNodeMenuPlugin.dev.js

@@ -18,6 +18,7 @@ var utils = require('@lexical/utils');
  * 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';
 
 /**
@@ -45,131 +46,105 @@ class MenuOption {
     };
     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
-
+}
 
+// 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.
-
+}
 
+// Reposition the menu on scroll, window resize, and element resize.
 function useDynamicPositioning(resolution, targetElement, onReposition, onVisibilityChange) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   React.useEffect(() => {
@@ -178,7 +153,6 @@ function useDynamicPositioning(resolution, targetElement, onReposition, onVisibi
       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 () {
@@ -187,18 +161,14 @@ function useDynamicPositioning(resolution, targetElement, onReposition, onVisibi
           });
           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, {
@@ -209,7 +179,7 @@ function useDynamicPositioning(resolution, targetElement, onReposition, onVisibi
       return () => {
         resizeObserver.unobserve(targetElement);
         window.removeEventListener('resize', onReposition);
-        document.removeEventListener('scroll', handleScroll);
+        document.removeEventListener('scroll', handleScroll, true);
       };
     }
   }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
@@ -223,7 +193,8 @@ function LexicalMenu({
   options,
   menuRenderFn,
   onSelectOption,
-  shouldSplitNodeWithQuery = false
+  shouldSplitNodeWithQuery = false,
+  commandPriority = lexical.COMMAND_PRIORITY_LOW
 }) {
   const [selectedIndex, setHighlightedIndex] = React.useState(null);
   const matchingString = resolution.match && resolution.match.matchingString;
@@ -238,7 +209,6 @@ function LexicalMenu({
   }, [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);
@@ -247,7 +217,6 @@ function LexicalMenu({
   React.useEffect(() => {
     return () => {
       const rootElem = editor.getRootElement();
-
       if (rootElem !== null) {
         rootElem.removeAttribute('aria-activedescendant');
       }
@@ -268,79 +237,66 @@ function LexicalMenu({
         scrollIntoViewIfNeeded(option.ref.current);
         return true;
       }
-
       return false;
-    }, lexical.COMMAND_PRIORITY_LOW));
-  }, [editor, updateSelectedIndex]);
+    }, commandPriority));
+  }, [editor, updateSelectedIndex, commandPriority]);
   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 => {
+    }, commandPriority), 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 => {
+    }, commandPriority), 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 => {
+    }, commandPriority), 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 => {
+    }, commandPriority), 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]);
+    }, commandPriority));
+  }, [selectOptionAndCleanUp, close, editor, options, selectedIndex, updateSelectedIndex, commandPriority]);
   const listItemProps = React.useMemo(() => ({
     options,
     selectOptionAndCleanUp,
@@ -353,10 +309,10 @@ function useMenuAnchorRef(resolution, setResolution, className) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const anchorElementRef = React.useRef(document.createElement('div'));
   const positionMenu = React.useCallback(() => {
+    anchorElementRef.current.style.top = anchorElementRef.current.style.bottom;
     const rootElement = editor.getRootElement();
     const containerDiv = anchorElementRef.current;
     const menuEle = containerDiv.firstChild;
-
     if (rootElement !== null && resolution !== null) {
       const {
         left,
@@ -364,33 +320,28 @@ function useMenuAnchorRef(resolution, setResolution, className) {
         width,
         height
       } = resolution.getRect();
-      containerDiv.style.top = `${top + window.pageYOffset}px`;
+      const anchorHeight = anchorElementRef.current.offsetHeight; // use to position under anchor
+      containerDiv.style.top = `${top + window.pageYOffset + anchorHeight + 3}px`;
       containerDiv.style.left = `${left + window.pageXOffset}px`;
       containerDiv.style.height = `${height}px`;
       containerDiv.style.width = `${width}px`;
-
       if (menuEle !== null) {
+        menuEle.style.top = `${top}`;
         const menuRect = menuEle.getBoundingClientRect();
         const menuHeight = menuRect.height;
         const menuWidth = menuRect.width;
         const rootElementRect = rootElement.getBoundingClientRect();
-
         if (left + menuWidth > rootElementRect.right) {
           containerDiv.style.left = `${rootElementRect.right - 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`;
+          containerDiv.style.top = `${top - menuHeight + window.pageYOffset - height}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');
@@ -398,23 +349,19 @@ function useMenuAnchorRef(resolution, setResolution, className) {
         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();
         }
@@ -439,7 +386,6 @@ function useMenuAnchorRef(resolution, setResolution, className) {
  * LICENSE file in the root directory of this source tree.
  *
  */
-
 function startTransition(callback) {
   if (React.startTransition) {
     React.startTransition(callback);
@@ -447,7 +393,6 @@ function startTransition(callback) {
     callback();
   }
 }
-
 function LexicalNodeMenuPlugin({
   options,
   nodeKey,
@@ -455,21 +400,20 @@ function LexicalNodeMenuPlugin({
   onOpen,
   onSelectOption,
   menuRenderFn,
-  anchorClassName
+  anchorClassName,
+  commandPriority = lexical.COMMAND_PRIORITY_LOW
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [resolution, setResolution] = React.useState(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);
     }
@@ -479,7 +423,6 @@ function LexicalNodeMenuPlugin({
       editor.update(() => {
         const node = lexical.$getNodeByKey(nodeKey);
         const domElement = editor.getElementByKey(nodeKey);
-
         if (node != null && domElement != null) {
           if (resolution == null) {
             startTransition(() => openNodeMenu({
@@ -513,7 +456,8 @@ function LexicalNodeMenuPlugin({
     anchorElementRef: anchorElementRef,
     options: options,
     menuRenderFn: menuRenderFn,
-    onSelectOption: onSelectOption
+    onSelectOption: onSelectOption,
+    commandPriority: commandPriority
   });
 }
 

package/LexicalNodeMenuPlugin.prod.js

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

package/LexicalOnChangePlugin.dev.js

@@ -16,6 +16,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';
 
 /**
@@ -53,7 +54,6 @@ function OnChangePlugin({
         if (ignoreSelectionChange && dirtyElements.size === 0 && dirtyLeaves.size === 0 || ignoreHistoryMergeTagChange && tags.has('history-merge') || prevEditorState.isEmpty()) {
           return;
         }
-
         onChange(editorState, editor, tags);
       });
     }

package/LexicalPlainTextPlugin.dev.js

@@ -22,6 +22,7 @@ var plainText = require('@lexical/plain-text');
  * 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';
 
 /**
@@ -41,12 +42,10 @@ var useLayoutEffect = useLayoutEffectImpl;
  * LICENSE file in the root directory of this source tree.
  *
  */
-
 function canShowPlaceholderFromCurrentEditorState(editor) {
   const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing()));
   return currentCanShowPlaceholder;
 }
-
 function useCanShowPlaceholder(editor) {
   const [canShowPlaceholder, setCanShowPlaceholder] = React.useState(() => canShowPlaceholderFromCurrentEditorState(editor));
   useLayoutEffect(() => {
@@ -54,7 +53,6 @@ function useCanShowPlaceholder(editor) {
       const currentCanShowPlaceholder = canShowPlaceholderFromCurrentEditorState(editor);
       setCanShowPlaceholder(currentCanShowPlaceholder);
     }
-
     resetCanShowPlaceholder();
     return utils.mergeRegister(editor.registerUpdateListener(() => {
       resetCanShowPlaceholder();
@@ -73,8 +71,9 @@ function useCanShowPlaceholder(editor) {
  *
  */
 function useDecorators(editor, ErrorBoundary) {
-  const [decorators, setDecorators] = React.useState(() => editor.getDecorators()); // Subscribe to changes
+  const [decorators, setDecorators] = React.useState(() => editor.getDecorators());
 
+  // Subscribe to changes
   useLayoutEffect(() => {
     return editor.registerDecoratorListener(nextDecorators => {
       reactDom.flushSync(() => {
@@ -87,12 +86,12 @@ function useDecorators(editor, ErrorBoundary) {
     // nothing will be rendered on initial pass. We can get around that by
     // ensuring that we set the value.
     setDecorators(editor.getDecorators());
-  }, [editor]); // Return decorators defined as React Portals
+  }, [editor]);
 
+  // Return decorators defined as React Portals
   return React.useMemo(() => {
     const decoratedPortals = [];
     const decoratorKeys = Object.keys(decorators);
-
     for (let i = 0; i < decoratorKeys.length; i++) {
       const nodeKey = decoratorKeys[i];
       const reactDecorator = /*#__PURE__*/React.createElement(ErrorBoundary, {
@@ -101,12 +100,10 @@ function useDecorators(editor, ErrorBoundary) {
         fallback: null
       }, decorators[nodeKey]));
       const element = editor.getElementByKey(nodeKey);
-
       if (element !== null) {
         decoratedPortals.push( /*#__PURE__*/reactDom.createPortal(reactDecorator, element, nodeKey));
       }
     }
-
     return decoratedPortals;
   }, [ErrorBoundary, decorators, editor]);
 }
@@ -120,7 +117,9 @@ function useDecorators(editor, ErrorBoundary) {
  */
 function usePlainTextSetup(editor) {
   useLayoutEffect(() => {
-    return utils.mergeRegister(plainText.registerPlainText(editor), dragon.registerDragonSupport(editor)); // We only do this for init
+    return utils.mergeRegister(plainText.registerPlainText(editor), dragon.registerDragonSupport(editor));
+
+    // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor]);
 }
@@ -144,18 +143,15 @@ function PlainTextPlugin({
     content: placeholder
   }), decorators);
 }
-
 function Placeholder({
   content
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const showPlaceholder = useCanShowPlaceholder(editor);
   const editable = useLexicalEditable();
-
   if (!showPlaceholder) {
     return null;
   }
-
   if (typeof content === 'function') {
     return content(editable);
   } else {