@lexical/react 0.4.1 → 0.5.1-next.0

package/LexicalTreeView.prod.js

@@ -4,17 +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 l=require("@lexical/link"),q=require("@lexical/mark"),t=require("lexical"),D=require("react");let E=Object.freeze({"\t":"\\t","\n":"\\n"}),F=new RegExp(Object.keys(E).join("|"),"g"),G=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
-function H(a){let b="",c=I(a),d=a.anchor;a=a.focus;let e=d.offset,g=a.offset;b=b+`: range ${""!==c?`{ ${c} }`:""}`+`\n  \u251c anchor { key: ${d.key}, offset: ${null===e?"null":e}, type: ${d.type} }`;return b+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===g?"null":g}, type: ${a.type} }`}
-function K(a){let b=" root\n";a=a.read(()=>{const c=t.$getSelection();L(t.$getRoot(),(d,e)=>{const g=`(${d.getKey()})`,h=d.getType()||"",n=d.isSelected(),w=q.$isMarkNode(d)?` id: [ ${d.getIDs().join(", ")} ] `:"";var v=b,r=n?G.selectedLine:" ",x=e.join(" ");if(t.$isTextNode(d)){var f=d.getTextContent(!0);var m=0===f.length?"(empty)":`"${M(f)}"`;f=[I(d),N(d),O(d)].filter(Boolean).join(", ");f=[m,0!==f.length?`{ ${f} }`:null].filter(Boolean).join(" ").trim()}else if(l.$isLinkNode(d)){f=d.getURL();f=
-0===f.length?"(empty)":`"${M(f)}"`;m=d.getTarget();null!=m&&(m="target: "+m);var y=Boolean;let u=d.getRel();null!=u&&(u="rel: "+u);m=[m,u].filter(y).join(", ");f=[f,0!==m.length?`{ ${m} }`:null].filter(Boolean).join(" ").trim()}else f="";b=v+`${r} ${x} ${g} ${h} ${w} ${f}\n`;b+=P({indent:e,isSelected:n,node:d,nodeKeyDisplay:g,selection:c,typeDisplay:h})});return null===c?": null":t.$isRangeSelection(c)?H(c):t.$isGridSelection(c)?`: grid\n  \u2514 { grid: ${c.gridKey}, anchorCell: ${c.anchor.key}, focusCell: ${c.focus.key} }`:
-`: node\n  \u2514 [${Array.from(c._nodes).join(", ")}]`});return b+"\n selection"+a}function L(a,b,c=[]){a=a.getChildren();let d=a.length;a.forEach((e,g)=>{b(e,c.concat(g===d-1?G.isLastChild:G.hasNextSibling));t.$isElementNode(e)&&L(e,b,c.concat(g===d-1?G.ancestorIsLastChild:G.ancestorHasNextSibling))})}function M(a){return Object.entries(E).reduce((b,[c,d])=>b.replace(new RegExp(c,"g"),String(d)),a)}
-let Q=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],R=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],S=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented",a=>a.isInert()&&"Inert"];
-function N(a){let b=R.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="detail: "+b);return b}function O(a){let b=S.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="mode: "+b);return b}function I(a){let b=Q.map(c=>c(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==b&&(b="format: "+b);return b}
-function P({indent:a,isSelected:b,node:c,nodeKeyDisplay:d,selection:e,typeDisplay:g}){if(!t.$isTextNode(c)||!t.$isRangeSelection(e)||!b||t.$isElementNode(c))return"";b=e.anchor;var h=e.focus;if(""===c.getTextContent()||b.getNode()===e.focus.getNode()&&b.offset===h.offset)return"";h=e.anchor;let n=e.focus,w=c.getTextContent(!0),v=w.length;b=e=-1;if("text"===h.type&&"text"===n.type){let f=h.getNode(),m=n.getNode();f===m&&c===f&&h.offset!==n.offset?[e,b]=h.offset<n.offset?[h.offset,n.offset]:[n.offset,
-h.offset]:c===f?[e,b]=f.isBefore(m)?[h.offset,v]:[0,h.offset]:c===m?[e,b]=m.isBefore(f)?[n.offset,v]:[0,n.offset]:[e,b]=[0,v]}c=(w.slice(0,e).match(F)||[]).length;h=(w.slice(e,b).match(F)||[]).length;let [r,x]=[e+c,b+c+h];if(r===x)return"";c=a[a.length-1]===G.hasNextSibling?G.ancestorHasNextSibling:G.ancestorIsLastChild;a=[...a.slice(0,a.length-1),c];c=Array(r+1).fill(" ");e=Array(x-r).fill(G.selectedChar);d=Array(d.length+(g.length+3)).fill(" ");return[G.selectedLine,a.join(" "),[...d,...c,...e].join("")].join(" ")+
+'use strict';var k=require("@lexical/link"),r=require("@lexical/mark"),v=require("@lexical/utils"),C=require("lexical"),D=require("react");let E=Object.freeze({"\t":"\\t","\n":"\\n"}),F=new RegExp(Object.keys(E).join("|"),"g"),G=Object.freeze({ancestorHasNextSibling:"|",ancestorIsLastChild:" ",hasNextSibling:"\u251c",isLastChild:"\u2514",selectedChar:"^",selectedLine:">"});
+function H(a){let c="",e=K(a),l=a.anchor;a=a.focus;let f=l.offset,b=a.offset;c=c+`: range ${""!==e?`{ ${e} }`:""}`+`\n  \u251c anchor { key: ${l.key}, offset: ${null===f?"null":f}, type: ${l.type} }`;return c+=`\n  \u2514 focus { key: ${a.key}, offset: ${null===b?"null":b}, type: ${a.type} }`}
+function L(a,c,e,l){let f=" root\n";a=a.read(()=>{const b=C.$getSelection();M(C.$getRoot(),(d,n)=>{const x=`(${d.getKey()})`,t=d.getType()||"",q=d.isSelected(),z=r.$isMarkNode(d)?` id: [ ${d.getIDs().join(", ")} ] `:"";var m=f,w=q?G.selectedLine:" ",A=n.join(" ");if(C.$isTextNode(d)){var h=d.getTextContent();var p=0===h.length?"(empty)":`"${N(h)}"`;h=[K(d),O(d),P(d)].filter(Boolean).join(", ");h=[p,0!==h.length?`{ ${h} }`:null].filter(Boolean).join(" ").trim()}else if(k.$isLinkNode(d)){h=d.getURL();
+h=0===h.length?"(empty)":`"${N(h)}"`;p=d.getTarget();null!=p&&(p="target: "+p);var y=Boolean;let g=d.getRel();null!=g&&(g="rel: "+g);p=[p,g].filter(y).join(", ");h=[h,0!==p.length?`{ ${p} }`:null].filter(Boolean).join(" ").trim()}else h="";f=m+`${w} ${A} ${x} ${t} ${z} ${h}\n`;f+=Q({indent:n,isSelected:q,node:d,nodeKeyDisplay:x,selection:b,typeDisplay:t})});return null===b?": null":C.$isRangeSelection(b)?H(b):C.DEPRECATED_$isGridSelection(b)?`: grid\n  \u2514 { grid: ${b.gridKey}, anchorCell: ${b.anchor.key}, focusCell: ${b.focus.key} }`:
+`: node\n  \u2514 [${Array.from(b._nodes).join(", ")}]`});f+="\n selection"+a;f+="\n\n editor:";f+=`\n  \u2514 namespace ${c.namespace}`;null!==e&&(f+=`\n  \u2514 compositionKey ${e}`);return f+=`\n  \u2514 editable ${String(l)}`}function M(a,c,e=[]){a=a.getChildren();let l=a.length;a.forEach((f,b)=>{c(f,e.concat(b===l-1?G.isLastChild:G.hasNextSibling));C.$isElementNode(f)&&M(f,c,e.concat(b===l-1?G.ancestorIsLastChild:G.ancestorHasNextSibling))})}
+function N(a){return Object.entries(E).reduce((c,[e,l])=>c.replace(new RegExp(e,"g"),String(l)),a)}
+let R=[a=>a.hasFormat("bold")&&"Bold",a=>a.hasFormat("code")&&"Code",a=>a.hasFormat("italic")&&"Italic",a=>a.hasFormat("strikethrough")&&"Strikethrough",a=>a.hasFormat("subscript")&&"Subscript",a=>a.hasFormat("superscript")&&"Superscript",a=>a.hasFormat("underline")&&"Underline"],S=[a=>a.isDirectionless()&&"Directionless",a=>a.isUnmergeable()&&"Unmergeable"],T=[a=>a.isToken()&&"Token",a=>a.isSegmented()&&"Segmented"];
+function O(a){let c=S.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="detail: "+c);return c}function P(a){let c=T.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="mode: "+c);return c}function K(a){let c=R.map(e=>e(a)).filter(Boolean).join(", ").toLocaleLowerCase();""!==c&&(c="format: "+c);return c}
+function Q({indent:a,isSelected:c,node:e,nodeKeyDisplay:l,selection:f,typeDisplay:b}){if(!C.$isTextNode(e)||!C.$isRangeSelection(f)||!c||C.$isElementNode(e))return"";c=f.anchor;var d=f.focus;if(""===e.getTextContent()||c.getNode()===f.focus.getNode()&&c.offset===d.offset)return"";d=f.anchor;let n=f.focus,x=e.getTextContent(),t=x.length;c=f=-1;if("text"===d.type&&"text"===n.type){let m=d.getNode(),w=n.getNode();m===w&&e===m&&d.offset!==n.offset?[f,c]=d.offset<n.offset?[d.offset,n.offset]:[n.offset,
+d.offset]:e===m?[f,c]=m.isBefore(w)?[d.offset,t]:[0,d.offset]:e===w?[f,c]=w.isBefore(m)?[n.offset,t]:[0,n.offset]:[f,c]=[0,t]}e=(x.slice(0,f).match(F)||[]).length;d=(x.slice(f,c).match(F)||[]).length;let [q,z]=[f+e,c+e+d];if(q===z)return"";e=a[a.length-1]===G.hasNextSibling?G.ancestorHasNextSibling:G.ancestorIsLastChild;a=[...a.slice(0,a.length-1),e];e=Array(q+1).fill(" ");f=Array(z-q).fill(G.selectedChar);l=Array(l.length+(b.length+3)).fill(" ");return[G.selectedLine,a.join(" "),[...l,...e,...f].join("")].join(" ")+
 "\n"}
-exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:b,timeTravelPanelButtonClassName:c,viewClassName:d,timeTravelPanelClassName:e,editor:g}){let [h,n]=D.useState([]),[w,v]=D.useState(""),[r,x]=D.useState(!1),f=D.useRef(0),m=D.useRef(null),y=D.useRef(null),[u,C]=D.useState(!1);D.useEffect(()=>{v(K(g.getEditorState()));return g.registerUpdateListener(({editorState:k})=>{let p=g._compositionKey,z=K(g.getEditorState());v([z,null!==p&&`Composition key: ${p}`].filter(Boolean).join("\n\n"));r||
-n(B=>[...B,[Date.now(),k]])})},[r,g]);let A=h.length;D.useEffect(()=>{if(u){let k,p=()=>{const z=f.current;z===A-1?C(!1):k=setTimeout(()=>{f.current++;const B=f.current,J=y.current;null!==J&&(J.value=String(B));g.setEditorState(h[B][1]);p()},h[z+1][0]-h[z][0])};p();return()=>{clearTimeout(k)}}},[h,u,g,A]);D.useEffect(()=>{let k=m.current;if(null!==k)return k.__lexicalEditor=g,()=>{k.__lexicalEditor=null}},[g]);return D.createElement("div",{className:d},!r&&2<A&&D.createElement("button",{onClick:()=>
-{let k=g.getRootElement();null!==k&&(k.contentEditable="false",f.current=A-1,x(!0))},className:a,type:"button"},"Time Travel"),D.createElement("pre",{ref:m},w),r&&D.createElement("div",{className:e},D.createElement("button",{className:c,onClick:()=>{C(!u)},type:"button"},u?"Pause":"Play"),D.createElement("input",{className:b,ref:y,onChange:k=>{k=Number(k.target.value);let p=h[k];p&&(f.current=k,g.setEditorState(p[1]))},type:"range",min:"1",max:A-1}),D.createElement("button",{className:c,onClick:()=>
-{var k=g.getRootElement();if(null!==k){k.contentEditable="true";k=h.length-1;g.setEditorState(h[k][1]);let p=y.current;null!==p&&(p.value=String(k));x(!1);C(!1)}},type:"button"},"Exit")))}
+exports.TreeView=function({timeTravelButtonClassName:a,timeTravelPanelSliderClassName:c,timeTravelPanelButtonClassName:e,viewClassName:l,timeTravelPanelClassName:f,editor:b}){let [d,n]=D.useState([]),[x,t]=D.useState(""),[q,z]=D.useState(!1),m=D.useRef(0),w=D.useRef(null),A=D.useRef(null),[h,p]=D.useState(!1);D.useEffect(()=>{t(L(b.getEditorState(),b._config,b._compositionKey,b._editable));return v.mergeRegister(b.registerUpdateListener(({editorState:g})=>{let u=L(b.getEditorState(),b._config,b._compositionKey,
+b._editable);t(u);q||n(B=>[...B,[Date.now(),g]])}),b.registerEditableListener(()=>{let g=L(b.getEditorState(),b._config,b._compositionKey,b._editable);t(g)}))},[q,b]);let y=d.length;D.useEffect(()=>{if(h){let g,u=()=>{const B=m.current;B===y-1?p(!1):g=setTimeout(()=>{m.current++;const I=m.current,J=A.current;null!==J&&(J.value=String(I));b.setEditorState(d[I][1]);u()},d[B+1][0]-d[B][0])};u();return()=>{clearTimeout(g)}}},[d,h,b,y]);D.useEffect(()=>{let g=w.current;if(null!==g)return g.__lexicalEditor=
+b,()=>{g.__lexicalEditor=null}},[b]);return D.createElement("div",{className:l},!q&&2<y&&D.createElement("button",{onClick:()=>{let g=b.getRootElement();null!==g&&(g.contentEditable="false",m.current=y-1,z(!0))},className:a,type:"button"},"Time Travel"),D.createElement("pre",{ref:w},x),q&&D.createElement("div",{className:f},D.createElement("button",{className:e,onClick:()=>{m.current===y-1&&(m.current=1);p(!h)},type:"button"},h?"Pause":"Play"),D.createElement("input",{className:c,ref:A,onChange:g=>
+{g=Number(g.target.value);let u=d[g];u&&(m.current=g,b.setEditorState(u[1]))},type:"range",min:"1",max:y-1}),D.createElement("button",{className:e,onClick:()=>{var g=b.getRootElement();if(null!==g){g.contentEditable="true";g=d.length-1;b.setEditorState(d[g][1]);let u=A.current;null!==u&&(u.value=String(g));z(!1);p(!1)}},type:"button"},"Exit")))}

package/LexicalTypeaheadMenuPlugin.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { LexicalEditor, NodeKey, TextNode } from 'lexical';
+import { LexicalCommand, LexicalEditor, NodeKey, TextNode } from 'lexical';
 import { MutableRefObject, ReactPortal } from 'react';
 export declare type QueryMatch = {
     leadOffset: number;
@@ -14,7 +14,7 @@ export declare type QueryMatch = {
 };
 export declare type Resolution = {
     match: QueryMatch;
-    getRect: () => ClientRect;
+    getRect: () => DOMRect;
 };
 export declare const PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
 export declare class TypeaheadOption {
@@ -23,30 +23,42 @@ export declare class TypeaheadOption {
     constructor(key: string);
     setRefElement(element: HTMLElement | null): void;
 }
-export declare type MenuRenderFn<TOption extends TypeaheadOption> = (anchorElement: HTMLElement | null, itemProps: {
+export declare type MenuRenderFn<TOption extends TypeaheadOption> = (anchorElementRef: MutableRefObject<HTMLElement | null>, itemProps: {
     selectedIndex: number | null;
     selectOptionAndCleanUp: (option: TOption) => void;
     setHighlightedIndex: (index: number) => void;
+    options: Array<TOption>;
 }, matchingString: string) => ReactPortal | JSX.Element | null;
+export declare function getScrollParent(element: HTMLElement, includeHidden: boolean): HTMLElement | HTMLBodyElement;
+export declare function useDynamicPositioning(resolution: Resolution | null, targetElement: HTMLElement | null, onReposition: () => void, onVisibilityChange?: (isInView: boolean) => void): void;
+export declare const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{
+    index: number;
+    option: TypeaheadOption;
+}>;
 export declare function useBasicTypeaheadTriggerMatch(trigger: string, { minLength, maxLength }: {
     minLength?: number;
     maxLength?: number;
 }): TriggerFn;
-export declare type TypeaheadMenuPluginArgs<TOption extends TypeaheadOption> = {
+export declare type TypeaheadMenuPluginProps<TOption extends TypeaheadOption> = {
     onQueryChange: (matchingString: string | null) => void;
     onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
     options: Array<TOption>;
     menuRenderFn: MenuRenderFn<TOption>;
     triggerFn: TriggerFn;
+    onOpen?: (resolution: Resolution) => void;
+    onClose?: () => void;
+    anchorClassName?: string;
 };
 export declare type TriggerFn = (text: string, editor: LexicalEditor) => QueryMatch | null;
-export declare function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({ options, onQueryChange, onSelectOption, menuRenderFn, triggerFn, }: TypeaheadMenuPluginArgs<TOption>): JSX.Element | null;
-declare type NodeMenuPluginArgs<TOption extends TypeaheadOption> = {
+export declare function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({ options, onQueryChange, onSelectOption, onOpen, onClose, menuRenderFn, triggerFn, anchorClassName, }: TypeaheadMenuPluginProps<TOption>): JSX.Element | null;
+declare type NodeMenuPluginProps<TOption extends TypeaheadOption> = {
     onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
     options: Array<TOption>;
     nodeKey: NodeKey | null;
-    onClose: () => void;
+    onClose?: () => void;
+    onOpen?: (resolution: Resolution) => void;
     menuRenderFn: MenuRenderFn<TOption>;
+    anchorClassName?: string;
 };
-export declare function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({ options, nodeKey, onClose, onSelectOption, menuRenderFn, }: NodeMenuPluginArgs<TOption>): JSX.Element | null;
+export declare function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({ options, nodeKey, onClose, onOpen, onSelectOption, menuRenderFn, anchorClassName, }: NodeMenuPluginProps<TOption>): JSX.Element | null;
 export {};

package/LexicalTypeaheadMenuPlugin.dev.js

@@ -213,12 +213,90 @@ function startTransition(callback) {
   } else {
     callback();
   }
+} // 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 LexicalPopoverMenu({
   close,
   editor,
-  anchorElement,
+  anchorElementRef,
   resolution,
   options,
   menuRenderFn,
@@ -228,7 +306,7 @@ function LexicalPopoverMenu({
   React.useEffect(() => {
     setHighlightedIndex(0);
   }, [resolution.match.matchingString]);
-  const selectOptionAndCleanUp = React.useCallback(async selectedEntry => {
+  const selectOptionAndCleanUp = React.useCallback(selectedEntry => {
     editor.update(() => {
       const textNodeContainingQuery = splitNodeContainingQuery(editor, resolution.match);
       onSelectOption(selectedEntry, textNodeContainingQuery, close, resolution.match.matchingString);
@@ -258,6 +336,18 @@ function LexicalPopoverMenu({
       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;
@@ -268,7 +358,10 @@ function LexicalPopoverMenu({
         const option = options[newSelectedIndex];
 
         if (option.ref != null && option.ref.current) {
-          scrollIntoViewIfNeeded(option.ref.current);
+          editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
+            index: newSelectedIndex,
+            option
+          });
         }
 
         event.preventDefault();
@@ -276,7 +369,7 @@ function LexicalPopoverMenu({
       }
 
       return true;
-    }, lexical.COMMAND_PRIORITY_NORMAL), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => {
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => {
       const event = payload;
 
       if (options !== null && options.length && selectedIndex !== null) {
@@ -293,13 +386,13 @@ function LexicalPopoverMenu({
       }
 
       return true;
-    }, lexical.COMMAND_PRIORITY_NORMAL), editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, payload => {
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, payload => {
       const event = payload;
       event.preventDefault();
       event.stopImmediatePropagation();
       close();
       return true;
-    }, lexical.COMMAND_PRIORITY_NORMAL), editor.registerCommand(lexical.KEY_TAB_COMMAND, payload => {
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(lexical.KEY_TAB_COMMAND, payload => {
       const event = payload;
 
       if (options === null || selectedIndex === null || options[selectedIndex] == null) {
@@ -310,7 +403,7 @@ function LexicalPopoverMenu({
       event.stopImmediatePropagation();
       selectOptionAndCleanUp(options[selectedIndex]);
       return true;
-    }, lexical.COMMAND_PRIORITY_NORMAL), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
       if (options === null || selectedIndex === null || options[selectedIndex] == null) {
         return false;
       }
@@ -322,14 +415,15 @@ function LexicalPopoverMenu({
 
       selectOptionAndCleanUp(options[selectedIndex]);
       return true;
-    }, lexical.COMMAND_PRIORITY_NORMAL));
+    }, lexical.COMMAND_PRIORITY_CRITICAL));
   }, [selectOptionAndCleanUp, close, editor, options, selectedIndex, updateSelectedIndex]);
   const listItemProps = React.useMemo(() => ({
+    options,
     selectOptionAndCleanUp,
     selectedIndex,
     setHighlightedIndex
-  }), [selectOptionAndCleanUp, selectedIndex]);
-  return menuRenderFn(anchorElement, listItemProps, resolution.match.matchingString);
+  }), [selectOptionAndCleanUp, selectedIndex, options]);
+  return menuRenderFn(anchorElementRef, listItemProps, resolution.match.matchingString);
 }
 
 function useBasicTypeaheadTriggerMatch(trigger, {
@@ -358,50 +452,68 @@ function useBasicTypeaheadTriggerMatch(trigger, {
   }, [maxLength, minLength, trigger]);
 }
 
-function useAnchorElementRef(resolution) {
+function useMenuAnchorRef(resolution, setResolution, className) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const anchorElementRef = React.useRef(document.createElement('div'));
-  React.useEffect(() => {
+  const positionMenu = React.useCallback(() => {
     const rootElement = editor.getRootElement();
+    const containerDiv = anchorElementRef.current;
+
+    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 (!containerDiv.isConnected) {
+        if (className != null) {
+          containerDiv.className = className;
+        }
 
-    function positionMenu() {
-      const containerDiv = anchorElementRef.current;
-      containerDiv.setAttribute('aria-label', 'Typeahead menu');
-      containerDiv.setAttribute('id', 'typeahead-menu');
-      containerDiv.setAttribute('role', 'listbox');
-
-      if (rootElement !== null && resolution !== null) {
-        const {
-          left,
-          top,
-          height
-        } = resolution.getRect();
-        containerDiv.style.top = `${top + height + 5 + window.pageYOffset}px`;
-        containerDiv.style.left = `${left + window.pageXOffset}px`;
+        containerDiv.setAttribute('aria-label', 'Typeahead menu');
+        containerDiv.setAttribute('id', 'typeahead-menu');
+        containerDiv.setAttribute('role', 'listbox');
         containerDiv.style.display = 'block';
         containerDiv.style.position = 'absolute';
-
-        if (!containerDiv.isConnected) {
-          document.body.append(containerDiv);
-        }
-
-        anchorElementRef.current = containerDiv;
-        rootElement.setAttribute('aria-controls', 'typeahead-menu');
+        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();
-      window.addEventListener('resize', positionMenu);
       return () => {
-        window.removeEventListener('resize', positionMenu);
-
         if (rootElement !== null) {
           rootElement.removeAttribute('aria-controls');
         }
+
+        const containerDiv = anchorElementRef.current;
+
+        if (containerDiv !== null && containerDiv.isConnected) {
+          containerDiv.remove();
+        }
       };
     }
-  }, [editor, resolution]);
+  }, [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;
 }
 
@@ -409,15 +521,31 @@ function LexicalTypeaheadMenuPlugin({
   options,
   onQueryChange,
   onSelectOption,
+  onOpen,
+  onClose,
   menuRenderFn,
-  triggerFn
+  triggerFn,
+  anchorClassName
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [resolution, setResolution] = React.useState(null);
-  const anchorElementRef = useAnchorElementRef(resolution);
+  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);
+    }
+  }, [onOpen, resolution]);
   React.useEffect(() => {
     let activeRange = document.createRange();
-    let previousText = null;
 
     const updateListener = () => {
       editor.getEditorState().read(() => {
@@ -425,12 +553,11 @@ function LexicalTypeaheadMenuPlugin({
         const selection = lexical.$getSelection();
         const text = getQueryTextForSearch(editor);
 
-        if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed() || text === previousText || text === null || range === null) {
-          setResolution(null);
+        if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed() || text === null || range === null) {
+          closeTypeahead();
           return;
         }
 
-        previousText = text;
         const match = triggerFn(text, editor);
         onQueryChange(match ? match.matchingString : null);
 
@@ -438,7 +565,7 @@ function LexicalTypeaheadMenuPlugin({
           const isRangePositioned = tryToPositionRange(match.leadOffset, range);
 
           if (isRangePositioned !== null) {
-            startTransition(() => setResolution({
+            startTransition(() => openTypeahead({
               getRect: () => range.getBoundingClientRect(),
               match
             }));
@@ -446,7 +573,7 @@ function LexicalTypeaheadMenuPlugin({
           }
         }
 
-        setResolution(null);
+        closeTypeahead();
       });
     };
 
@@ -455,15 +582,12 @@ function LexicalTypeaheadMenuPlugin({
       activeRange = null;
       removeUpdateListener();
     };
-  }, [editor, triggerFn, onQueryChange, resolution]);
-  const closeTypeahead = React.useCallback(() => {
-    setResolution(null);
-  }, []);
+  }, [editor, triggerFn, onQueryChange, resolution, closeTypeahead, openTypeahead]);
   return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalPopoverMenu, {
     close: closeTypeahead,
     resolution: resolution,
     editor: editor,
-    anchorElement: anchorElementRef.current,
+    anchorElementRef: anchorElementRef,
     options: options,
     menuRenderFn: menuRenderFn,
     onSelectOption: onSelectOption
@@ -473,12 +597,28 @@ function LexicalNodeMenuPlugin({
   options,
   nodeKey,
   onClose,
+  onOpen,
   onSelectOption,
-  menuRenderFn
+  menuRenderFn,
+  anchorClassName
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [resolution, setResolution] = React.useState(null);
-  const anchorElementRef = useAnchorElementRef(resolution);
+  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) {
       editor.update(() => {
@@ -487,7 +627,7 @@ function LexicalNodeMenuPlugin({
 
         if (node != null && domElement != null) {
           const text = node.getTextContent();
-          startTransition(() => setResolution({
+          startTransition(() => openNodeMenu({
             getRect: () => domElement.getBoundingClientRect(),
             match: {
               leadOffset: text.length,
@@ -498,14 +638,14 @@ function LexicalNodeMenuPlugin({
         }
       });
     } else if (nodeKey == null && resolution != null) {
-      setResolution(null);
+      closeNodeMenu();
     }
-  }, [editor, nodeKey, resolution]);
+  }, [closeNodeMenu, editor, nodeKey, openNodeMenu, resolution]);
   return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalPopoverMenu, {
-    close: onClose,
+    close: closeNodeMenu,
     resolution: resolution,
     editor: editor,
-    anchorElement: anchorElementRef.current,
+    anchorElementRef: anchorElementRef,
     options: options,
     menuRenderFn: menuRenderFn,
     onSelectOption: onSelectOption
@@ -515,5 +655,8 @@ function LexicalNodeMenuPlugin({
 exports.LexicalNodeMenuPlugin = LexicalNodeMenuPlugin;
 exports.LexicalTypeaheadMenuPlugin = LexicalTypeaheadMenuPlugin;
 exports.PUNCTUATION = PUNCTUATION;
+exports.SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND;
 exports.TypeaheadOption = TypeaheadOption;
+exports.getScrollParent = getScrollParent;
 exports.useBasicTypeaheadTriggerMatch = useBasicTypeaheadTriggerMatch;
+exports.useDynamicPositioning = useDynamicPositioning;

package/LexicalTypeaheadMenuPlugin.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-import type {LexicalEditor, NodeKey, TextNode} from 'lexical';
+import type {LexicalCommand, LexicalEditor, NodeKey, TextNode} from 'lexical';
 import * as React from 'react';
 
 export type QueryMatch = {
@@ -26,40 +26,33 @@ export const PUNCTUATION: string =
 
 declare export class TypeaheadOption {
   key: string;
-  ref: React$ElementRef<HTMLElement | null>;
+  ref: {current: HTMLElement | null};
   constructor(key: string): void;
   setRefElement(element: HTMLElement | null): void;
 }
 
+declare export var SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{
+  index: number,
+  option: TypeaheadOption,
+}>;
+
 export type MenuRenderFn<TOption> = (
-  anchorElement: HTMLElement | null,
+  anchorElementRef: {current: HTMLElement | null},
   itemProps: {
     selectedIndex: number | null,
     selectOptionAndCleanUp: (option: TOption) => void,
     setHighlightedIndex: (index: number) => void,
+    options: Array<TOption>,
   },
   matchingString: string,
 ) => React.Portal | React.MixedElement | null;
 
-const scrollIntoViewIfNeeded = (target: HTMLElement) => {
-  const container = document.getElementById('typeahead-menu');
-  if (container) {
-    const containerRect = container.getBoundingClientRect();
-    const targetRect = target.getBoundingClientRect();
-    if (targetRect.bottom > containerRect.bottom) {
-      target.scrollIntoView(false);
-    } else if (targetRect.top < containerRect.top) {
-      target.scrollIntoView();
-    }
-  }
-};
-
 declare export function useBasicTypeaheadTriggerMatch(
   trigger: string,
   options: {minLength?: number, maxLength?: number},
 ): TriggerFn;
 
-export type TypeaheadMenuPluginArgs<TOption> = {
+export type TypeaheadMenuPluginProps<TOption> = {
   onQueryChange: (matchingString: string | null) => void,
   onSelectOption: (
     option: TOption,
@@ -70,6 +63,9 @@ export type TypeaheadMenuPluginArgs<TOption> = {
   options: Array<TOption>,
   menuRenderFn: MenuRenderFn<TOption>,
   triggerFn: TriggerFn,
+  onOpen?: (resolution: Resolution) => void,
+  onClose?: () => void,
+  anchorClassName?: string,
 };
 
 export type TriggerFn = (
@@ -78,10 +74,10 @@ export type TriggerFn = (
 ) => QueryMatch | null;
 
 declare export function LexicalTypeaheadMenuPlugin<TOption>(
-  options: TypeaheadMenuPluginArgs<TOption>,
+  options: TypeaheadMenuPluginProps<TOption>,
 ): React.MixedElement | null;
 
-type NodeMenuPluginArgs<TOption> = {
+type NodeMenuPluginProps<TOption> = {
   onSelectOption: (
     option: TOption,
     textNodeContainingQuery: TextNode | null,
@@ -90,10 +86,12 @@ type NodeMenuPluginArgs<TOption> = {
   ) => void,
   options: Array<TOption>,
   nodeKey: NodeKey | null,
-  onClose: () => void,
+  onClose?: () => void,
+  onOpen?: (resolution: Resolution) => void,
   menuRenderFn: MenuRenderFn<TOption>,
+  anchorClassName?: string,
 };
 
 declare export function LexicalNodeMenuPlugin<TOption>(
-  options: NodeMenuPluginArgs<TOption>,
+  options: NodeMenuPluginProps<TOption>,
 ): React.MixedElement | null;