@lexical/react 0.8.0 → 0.9.0

package/LexicalTypeaheadMenuPlugin.dev.js

@@ -18,7 +18,6 @@ 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';
 
 /**
@@ -47,171 +46,216 @@ class TypeaheadOption {
     };
     this.setRefElement = this.setRefElement.bind(this);
   }
+
   setRefElement(element) {
     this.ref = {
       current: element
     };
   }
+
 }
+
 const scrollIntoViewIfNeeded = target => {
   const container = document.getElementById('typeahead-menu');
   if (!container) return;
   const typeaheadContainerNode = container.querySelector('.typeahead-popover');
   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'
   });
 };
+
 function getTextUpToAnchor(selection) {
   const anchor = selection.anchor;
+
   if (anchor.type !== 'text') {
     return null;
   }
+
   const anchorNode = anchor.getNode();
+
   if (!anchorNode.isSimpleText()) {
     return null;
   }
+
   const anchorOffset = anchor.offset;
   return anchorNode.getTextContent().slice(0, anchorOffset);
 }
+
 function tryToPositionRange(leadOffset, range) {
   const domSelection = window.getSelection();
+
   if (domSelection === null || !domSelection.isCollapsed) {
     return false;
   }
+
   const anchorNode = domSelection.anchorNode;
   const startOffset = leadOffset;
   const endOffset = domSelection.anchorOffset;
+
   if (anchorNode == null || endOffset == null) {
     return false;
   }
+
   try {
     range.setStart(anchorNode, startOffset);
     range.setEnd(anchorNode, endOffset);
   } catch (error) {
     return false;
   }
+
   return true;
 }
+
 function getQueryTextForSearch(editor) {
   let text = null;
   editor.getEditorState().read(() => {
     const selection = lexical.$getSelection();
+
     if (!lexical.$isRangeSelection(selection)) {
       return;
     }
+
     text = getTextUpToAnchor(selection);
   });
   return text;
 }
-
 /**
  * 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(editor, 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;
 }
+
 function isSelectionOnEntityBoundary(editor, offset) {
   if (offset !== 0) {
     return false;
   }
+
   return editor.getEditorState().read(() => {
     const selection = lexical.$getSelection();
+
     if (lexical.$isRangeSelection(selection)) {
       const anchor = selection.anchor;
       const anchorNode = anchor.getNode();
       const prevSibling = anchorNode.getPreviousSibling();
       return lexical.$isTextNode(prevSibling) && prevSibling.isTextEntity();
     }
+
     return false;
   });
 }
+
 function startTransition(callback) {
   if (React.startTransition) {
     React.startTransition(callback);
   } else {
     callback();
   }
-}
+} // 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(() => {
@@ -220,6 +264,7 @@ 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 () {
@@ -228,14 +273,18 @@ 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, {
@@ -252,6 +301,7 @@ function useDynamicPositioning(resolution, targetElement, onReposition, onVisibi
   }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
 }
 const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = lexical.createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
+
 function LexicalPopoverMenu({
   close,
   editor,
@@ -273,6 +323,7 @@ function LexicalPopoverMenu({
   }, [close, editor, resolution.match, onSelectOption]);
   const updateSelectedIndex = React.useCallback(index => {
     const rootElem = editor.getRootElement();
+
     if (rootElem !== null) {
       rootElem.setAttribute('aria-activedescendant', 'typeahead-item-' + index);
       setHighlightedIndex(index);
@@ -281,6 +332,7 @@ function LexicalPopoverMenu({
   React.useEffect(() => {
     return () => {
       const rootElem = editor.getRootElement();
+
       if (rootElem !== null) {
         rootElem.removeAttribute('aria-activedescendant');
       }
@@ -301,38 +353,47 @@ function LexicalPopoverMenu({
         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;
@@ -342,9 +403,11 @@ function LexicalPopoverMenu({
       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]);
@@ -353,10 +416,12 @@ function LexicalPopoverMenu({
       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));
@@ -369,6 +434,7 @@ function LexicalPopoverMenu({
   }), [selectOptionAndCleanUp, selectedIndex, options]);
   return menuRenderFn(anchorElementRef, listItemProps, resolution.match.matchingString);
 }
+
 function useBasicTypeaheadTriggerMatch(trigger, {
   minLength = 1,
   maxLength = 75
@@ -377,9 +443,11 @@ function useBasicTypeaheadTriggerMatch(trigger, {
     const validChars = '[^' + trigger + PUNCTUATION + '\\s]';
     const TypeaheadTriggerRegex = new RegExp('(^|\\s|\\()(' + '[' + trigger + ']' + '((?:' + validChars + '){0,' + maxLength + '})' + ')$');
     const match = TypeaheadTriggerRegex.exec(text);
+
     if (match !== null) {
       const maybeLeadingWhitespace = match[1];
       const matchingString = match[3];
+
       if (matchingString.length >= minLength) {
         return {
           leadOffset: match.index + maybeLeadingWhitespace.length,
@@ -388,15 +456,18 @@ function useBasicTypeaheadTriggerMatch(trigger, {
         };
       }
     }
+
     return null;
   }, [maxLength, minLength, trigger]);
 }
+
 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;
+
     if (rootElement !== null && resolution !== null) {
       const {
         left,
@@ -408,10 +479,12 @@ function useMenuAnchorRef(resolution, setResolution, className) {
       containerDiv.style.left = `${left + window.pageXOffset}px`;
       containerDiv.style.height = `${height}px`;
       containerDiv.style.width = `${width}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');
@@ -419,19 +492,23 @@ 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();
         }
@@ -448,6 +525,7 @@ function useMenuAnchorRef(resolution, setResolution, className) {
   useDynamicPositioning(resolution, anchorElementRef.current, positionMenu, onVisibilityChange);
   return anchorElementRef;
 }
+
 function LexicalTypeaheadMenuPlugin({
   options,
   onQueryChange,
@@ -463,12 +541,14 @@ function LexicalTypeaheadMenuPlugin({
   const anchorElementRef = useMenuAnchorRef(resolution, setResolution, anchorClassName);
   const closeTypeahead = React.useCallback(() => {
     setResolution(null);
+
     if (onClose != null && resolution !== null) {
       onClose();
     }
   }, [onClose, resolution]);
   const openTypeahead = React.useCallback(res => {
     setResolution(res);
+
     if (onOpen != null && resolution === null) {
       onOpen(res);
     }
@@ -479,14 +559,18 @@ function LexicalTypeaheadMenuPlugin({
         const range = document.createRange();
         const selection = lexical.$getSelection();
         const text = getQueryTextForSearch(editor);
+
         if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed() || text === null || range === null) {
           closeTypeahead();
           return;
         }
+
         const match = triggerFn(text, editor);
         onQueryChange(match ? match.matchingString : null);
+
         if (match !== null && !isSelectionOnEntityBoundary(editor, match.leadOffset)) {
           const isRangePositioned = tryToPositionRange(match.leadOffset, range);
+
           if (isRangePositioned !== null) {
             startTransition(() => openTypeahead({
               getRect: () => range.getBoundingClientRect(),
@@ -495,9 +579,11 @@ function LexicalTypeaheadMenuPlugin({
             return;
           }
         }
+
         closeTypeahead();
       });
     };
+
     const removeUpdateListener = editor.registerUpdateListener(updateListener);
     return () => {
       removeUpdateListener();
@@ -527,37 +613,57 @@ function LexicalNodeMenuPlugin({
   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]);
-  React.useEffect(() => {
-    if (nodeKey && resolution == null) {
+  const positionOrCloseMenu = React.useCallback(() => {
+    if (nodeKey) {
       editor.update(() => {
         const node = lexical.$getNodeByKey(nodeKey);
         const domElement = editor.getElementByKey(nodeKey);
+
         if (node != null && domElement != null) {
           const text = node.getTextContent();
-          startTransition(() => openNodeMenu({
-            getRect: () => domElement.getBoundingClientRect(),
-            match: {
-              leadOffset: text.length,
-              matchingString: text,
-              replaceableString: text
-            }
-          }));
+
+          if (resolution == null || resolution.match.matchingString !== text) {
+            startTransition(() => openNodeMenu({
+              getRect: () => domElement.getBoundingClientRect(),
+              match: {
+                leadOffset: text.length,
+                matchingString: text,
+                replaceableString: text
+              }
+            }));
+          }
         }
       });
     } else if (nodeKey == null && resolution != null) {
       closeNodeMenu();
     }
   }, [closeNodeMenu, editor, nodeKey, openNodeMenu, resolution]);
+  React.useEffect(() => {
+    positionOrCloseMenu();
+  }, [positionOrCloseMenu, nodeKey]);
+  React.useEffect(() => {
+    if (nodeKey != null) {
+      return editor.registerUpdateListener(({
+        dirtyElements
+      }) => {
+        if (dirtyElements.get(nodeKey)) {
+          positionOrCloseMenu();
+        }
+      });
+    }
+  }, [editor, positionOrCloseMenu, nodeKey]);
   return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalPopoverMenu, {
     close: closeNodeMenu,
     resolution: resolution,

package/LexicalTypeaheadMenuPlugin.prod.js

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

package/package.json

@@ -8,29 +8,29 @@
     "rich-text"
   ],
   "license": "MIT",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "dependencies": {
-    "@lexical/clipboard": "0.8.0",
-    "@lexical/code": "0.8.0",
-    "@lexical/dragon": "0.8.0",
-    "@lexical/hashtag": "0.8.0",
-    "@lexical/history": "0.8.0",
-    "@lexical/link": "0.8.0",
-    "@lexical/list": "0.8.0",
-    "@lexical/mark": "0.8.0",
-    "@lexical/markdown": "0.8.0",
-    "@lexical/overflow": "0.8.0",
-    "@lexical/plain-text": "0.8.0",
-    "@lexical/rich-text": "0.8.0",
-    "@lexical/selection": "0.8.0",
-    "@lexical/table": "0.8.0",
-    "@lexical/text": "0.8.0",
-    "@lexical/utils": "0.8.0",
-    "@lexical/yjs": "0.8.0",
+    "@lexical/clipboard": "0.9.0",
+    "@lexical/code": "0.9.0",
+    "@lexical/dragon": "0.9.0",
+    "@lexical/hashtag": "0.9.0",
+    "@lexical/history": "0.9.0",
+    "@lexical/link": "0.9.0",
+    "@lexical/list": "0.9.0",
+    "@lexical/mark": "0.9.0",
+    "@lexical/markdown": "0.9.0",
+    "@lexical/overflow": "0.9.0",
+    "@lexical/plain-text": "0.9.0",
+    "@lexical/rich-text": "0.9.0",
+    "@lexical/selection": "0.9.0",
+    "@lexical/table": "0.9.0",
+    "@lexical/text": "0.9.0",
+    "@lexical/utils": "0.9.0",
+    "@lexical/yjs": "0.9.0",
     "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
-    "lexical": "0.8.0",
+    "lexical": "0.9.0",
     "react": ">=17.x",
     "react-dom": ">=17.x"
   },