@lexical/react 0.3.9 → 0.4.0

package/LexicalComposer.dev.js

@@ -57,10 +57,10 @@ function LexicalComposer({
 
     if (editor === null) {
       const newEditor = lexical.createEditor({
+        editable: false,
         namespace,
         nodes,
         onError: error => onError(error, newEditor),
-        readOnly: true,
         theme
       });
       initializeEditor(newEditor, initialEditorState);
@@ -72,9 +72,9 @@ function LexicalComposer({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   useLayoutEffect(() => {
-    const isReadOnly = initialConfig.readOnly;
+    const isEditable = initialConfig.editable;
     const [editor] = composerContext;
-    editor.setReadOnly(isReadOnly || false); // We only do this for init
+    editor.setEditable(isEditable || true); // We only do this for init
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(LexicalComposerContext.LexicalComposerContext.Provider, {

package/LexicalComposer.prod.js

@@ -6,4 +6,4 @@
  */
 'use strict';var c=require("@lexical/react/LexicalComposerContext"),f=require("lexical"),l=require("react"),m="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?l.useLayoutEffect:l.useEffect;let n={tag:"history-merge"};
 function p(b,a){if(null!==a&&void 0!==a&&null!==a)switch(typeof a){case "string":let d=b.parseEditorState(a);b.setEditorState(d,n);break;case "object":b.setEditorState(a,n);break;case "function":b.update(()=>{f.$getRoot().isEmpty()&&a(b)},n)}}
-exports.LexicalComposer=function({initialConfig:b,children:a}){let d=l.useMemo(()=>{const {theme:e,namespace:g,editor__DEPRECATED:q,nodes:r,onError:t,editorState:u}=b,v=c.createLexicalComposerContext(null,e);let h=q||null;if(null===h){const k=f.createEditor({namespace:g,nodes:r,onError:w=>t(w,k),readOnly:!0,theme:e});p(k,u);h=k}return[h,v]},[]);m(()=>{let e=b.readOnly,[g]=d;g.setReadOnly(e||!1)},[]);return l.createElement(c.LexicalComposerContext.Provider,{value:d},a)}
+exports.LexicalComposer=function({initialConfig:b,children:a}){let d=l.useMemo(()=>{const {theme:e,namespace:g,editor__DEPRECATED:q,nodes:r,onError:t,editorState:u}=b,v=c.createLexicalComposerContext(null,e);let h=q||null;if(null===h){const k=f.createEditor({editable:!1,namespace:g,nodes:r,onError:w=>t(w,k),theme:e});p(k,u);h=k}return[h,v]},[]);m(()=>{let e=b.editable,[g]=d;g.setEditable(e||!0)},[]);return l.createElement(c.LexicalComposerContext.Provider,{value:d},a)}

package/LexicalContentEditable.dev.js

@@ -58,37 +58,37 @@ function ContentEditable({
   testid
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [isReadOnly, setReadOnly] = React.useState(true);
+  const [isEditable, setEditable] = React.useState(true);
   const ref = React.useCallback(rootElement => {
     editor.setRootElement(rootElement);
   }, [editor]);
   useLayoutEffect(() => {
-    setReadOnly(editor.isReadOnly());
-    return editor.registerReadOnlyListener(currentIsReadOnly => {
-      setReadOnly(currentIsReadOnly);
+    setEditable(editor.isEditable());
+    return editor.registerEditableListener(currentIsEditable => {
+      setEditable(currentIsEditable);
     });
   }, [editor]);
   return /*#__PURE__*/React.createElement("div", {
-    "aria-activedescendant": isReadOnly ? null : ariaActiveDescendantID,
-    "aria-autocomplete": isReadOnly ? null : ariaAutoComplete,
-    "aria-controls": isReadOnly ? null : ariaControls,
+    "aria-activedescendant": !isEditable ? null : ariaActiveDescendantID,
+    "aria-autocomplete": !isEditable ? null : ariaAutoComplete,
+    "aria-controls": !isEditable ? null : ariaControls,
     "aria-describedby": ariaDescribedBy,
-    "aria-expanded": isReadOnly ? null : role === 'combobox' ? !!ariaExpanded : null,
+    "aria-expanded": !isEditable ? null : role === 'combobox' ? !!ariaExpanded : null,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-multiline": ariaMultiline,
-    "aria-owns": isReadOnly ? null : ariaOwneeID,
+    "aria-owns": !isEditable ? null : ariaOwneeID,
     "aria-required": ariaRequired,
     autoCapitalize: autoCapitalize !== undefined ? String(autoCapitalize) : undefined // @ts-ignore This is a valid attribute
     ,
     autoComplete: autoComplete,
     autoCorrect: autoCorrect !== undefined ? String(autoCorrect) : undefined,
     className: className,
-    contentEditable: !isReadOnly,
+    contentEditable: isEditable,
     "data-testid": testid,
     id: id,
     ref: ref,
-    role: isReadOnly ? undefined : role,
+    role: !isEditable ? undefined : role,
     spellCheck: spellCheck,
     style: style,
     tabIndex: tabIndex

package/LexicalContentEditable.prod.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var b=require("@lexical/react/LexicalComposerContext"),k=require("react"),l="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?k.useLayoutEffect:k.useEffect;
-exports.ContentEditable=function({ariaActiveDescendantID:m,ariaAutoComplete:n,ariaControls:p,ariaDescribedBy:q,ariaExpanded:r,ariaLabel:t,ariaLabelledBy:u,ariaMultiline:v,ariaOwneeID:w,ariaRequired:x,autoCapitalize:e,autoComplete:y,autoCorrect:f,className:z,id:A,role:g="textbox",spellCheck:B=!0,style:C,tabIndex:D,testid:E}){let [c]=b.useLexicalComposerContext(),[a,h]=k.useState(!0),F=k.useCallback(d=>{c.setRootElement(d)},[c]);l(()=>{h(c.isReadOnly());return c.registerReadOnlyListener(d=>{h(d)})},
-[c]);return k.createElement("div",{"aria-activedescendant":a?null:m,"aria-autocomplete":a?null:n,"aria-controls":a?null:p,"aria-describedby":q,"aria-expanded":a?null:"combobox"===g?!!r:null,"aria-label":t,"aria-labelledby":u,"aria-multiline":v,"aria-owns":a?null:w,"aria-required":x,autoCapitalize:void 0!==e?String(e):void 0,autoComplete:y,autoCorrect:void 0!==f?String(f):void 0,className:z,contentEditable:!a,"data-testid":E,id:A,ref:F,role:a?void 0:g,spellCheck:B,style:C,tabIndex:D})}
+exports.ContentEditable=function({ariaActiveDescendantID:m,ariaAutoComplete:n,ariaControls:p,ariaDescribedBy:q,ariaExpanded:r,ariaLabel:t,ariaLabelledBy:u,ariaMultiline:v,ariaOwneeID:w,ariaRequired:x,autoCapitalize:e,autoComplete:y,autoCorrect:f,className:z,id:A,role:g="textbox",spellCheck:B=!0,style:C,tabIndex:D,testid:E}){let [c]=b.useLexicalComposerContext(),[a,h]=k.useState(!0),F=k.useCallback(d=>{c.setRootElement(d)},[c]);l(()=>{h(c.isEditable());return c.registerEditableListener(d=>{h(d)})},
+[c]);return k.createElement("div",{"aria-activedescendant":a?m:null,"aria-autocomplete":a?n:null,"aria-controls":a?p:null,"aria-describedby":q,"aria-expanded":a?"combobox"===g?!!r:null:null,"aria-label":t,"aria-labelledby":u,"aria-multiline":v,"aria-owns":a?w:null,"aria-required":x,autoCapitalize:void 0!==e?String(e):void 0,autoComplete:y,autoCorrect:void 0!==f?String(f):void 0,className:z,contentEditable:a,"data-testid":E,id:A,ref:F,role:a?g:void 0,spellCheck:B,style:C,tabIndex:D})}

package/LexicalHorizontalRuleNode.dev.js

@@ -6,6 +6,9 @@
  */
 'use strict';
 
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var useLexicalNodeSelection = require('@lexical/react/useLexicalNodeSelection');
+var utils = require('@lexical/utils');
 var lexical = require('lexical');
 var React = require('react');
 
@@ -18,8 +21,47 @@ var React = require('react');
  */
 const INSERT_HORIZONTAL_RULE_COMMAND = lexical.createCommand();
 
-function HorizontalRuleComponent() {
-  return /*#__PURE__*/React.createElement("hr", null);
+function HorizontalRuleComponent({
+  nodeKey
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const hrRef = React.useRef(null);
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
+  const onDelete = React.useCallback(payload => {
+    if (isSelected && lexical.$isNodeSelection(lexical.$getSelection())) {
+      const event = payload;
+      event.preventDefault();
+      const node = lexical.$getNodeByKey(nodeKey);
+
+      if ($isHorizontalRuleNode(node)) {
+        node.remove();
+      }
+
+      setSelected(false);
+    }
+
+    return false;
+  }, [isSelected, nodeKey, setSelected]);
+  React.useEffect(() => {
+    return utils.mergeRegister(editor.registerCommand(lexical.CLICK_COMMAND, event => {
+      const hrElem = hrRef.current;
+
+      if (event.target === hrElem) {
+        if (!event.shiftKey) {
+          clearSelection();
+        }
+
+        setSelected(!isSelected);
+        return true;
+      }
+
+      return false;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_DELETE_COMMAND, onDelete, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_BACKSPACE_COMMAND, onDelete, lexical.COMMAND_PRIORITY_LOW));
+  }, [clearSelection, editor, isSelected, onDelete, setSelected]);
+  return /*#__PURE__*/React.createElement("hr", {
+    ref: hrRef,
+    className: isSelected ? 'selected' : undefined
+  });
 }
 
 class HorizontalRuleNode extends lexical.DecoratorNode {
@@ -61,7 +103,9 @@ class HorizontalRuleNode extends lexical.DecoratorNode {
   }
 
   decorate() {
-    return /*#__PURE__*/React.createElement(HorizontalRuleComponent, null);
+    return /*#__PURE__*/React.createElement(HorizontalRuleComponent, {
+      nodeKey: this.__key
+    });
   }
 
 }

package/LexicalHorizontalRuleNode.prod.js

@@ -4,6 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var b=require("lexical"),c=require("react");let d=b.createCommand();function e(){return c.createElement("hr",null)}
-class f extends b.DecoratorNode{static getType(){return"horizontalrule"}static clone(a){return new f(a.__key)}static importJSON(){return g()}exportJSON(){return{type:"horizontalrule",version:1}}createDOM(){let a=document.createElement("div");a.style.display="contents";return a}getTextContent(){return"\n"}isTopLevel(){return!0}updateDOM(){return!1}decorate(){return c.createElement(e,null)}}function g(){return new f}exports.$createHorizontalRuleNode=g;
-exports.$isHorizontalRuleNode=function(a){return a instanceof f};exports.HorizontalRuleNode=f;exports.INSERT_HORIZONTAL_RULE_COMMAND=d
+'use strict';var a=require("@lexical/react/LexicalComposerContext"),d=require("@lexical/react/useLexicalNodeSelection"),h=require("@lexical/utils"),n=require("lexical"),p=require("react");let q=n.createCommand();
+function r({nodeKey:b}){let [f]=a.useLexicalComposerContext(),l=p.useRef(null),[e,g,m]=d.useLexicalNodeSelection(b),k=p.useCallback(c=>{e&&n.$isNodeSelection(n.$getSelection())&&(c.preventDefault(),c=n.$getNodeByKey(b),t(c)&&c.remove(),g(!1));return!1},[e,b,g]);p.useEffect(()=>h.mergeRegister(f.registerCommand(n.CLICK_COMMAND,c=>c.target===l.current?(c.shiftKey||m(),g(!e),!0):!1,n.COMMAND_PRIORITY_LOW),f.registerCommand(n.KEY_DELETE_COMMAND,k,n.COMMAND_PRIORITY_LOW),f.registerCommand(n.KEY_BACKSPACE_COMMAND,
+k,n.COMMAND_PRIORITY_LOW)),[m,f,e,k,g]);return p.createElement("hr",{ref:l,className:e?"selected":void 0})}
+class u extends n.DecoratorNode{static getType(){return"horizontalrule"}static clone(b){return new u(b.__key)}static importJSON(){return v()}exportJSON(){return{type:"horizontalrule",version:1}}createDOM(){let b=document.createElement("div");b.style.display="contents";return b}getTextContent(){return"\n"}isTopLevel(){return!0}updateDOM(){return!1}decorate(){return p.createElement(r,{nodeKey:this.__key})}}function v(){return new u}function t(b){return b instanceof u}
+exports.$createHorizontalRuleNode=v;exports.$isHorizontalRuleNode=t;exports.HorizontalRuleNode=u;exports.INSERT_HORIZONTAL_RULE_COMMAND=q

package/LexicalMarkdownShortcutPlugin.d.ts

@@ -6,6 +6,7 @@
  *
  */
 import type { Transformer } from '@lexical/markdown';
+export declare const DEFAULT_TRANSFORMERS: Transformer[];
 export declare function MarkdownShortcutPlugin({ transformers, }: Readonly<{
     transformers?: Array<Transformer>;
 }>): null;

package/LexicalMarkdownShortcutPlugin.dev.js

@@ -19,6 +19,7 @@ var react = require('react');
  *
  */
 const HR = {
+  dependencies: [LexicalHorizontalRuleNode.HorizontalRuleNode],
   export: node => {
     return LexicalHorizontalRuleNode.$isHorizontalRuleNode(node) ? '***' : null;
   },
@@ -47,4 +48,5 @@ function MarkdownShortcutPlugin({
   return null;
 }
 
+exports.DEFAULT_TRANSFORMERS = DEFAULT_TRANSFORMERS;
 exports.MarkdownShortcutPlugin = MarkdownShortcutPlugin;

package/LexicalMarkdownShortcutPlugin.js.flow

@@ -9,6 +9,8 @@
 
 import type {Transformer} from '@lexical/markdown';
 
+declare export var DEFAULT_TRANSFORMERS: Array<Transformer>;
+
 declare export function MarkdownShortcutPlugin({
   transformers?: Array<Transformer>,
 }): React$Node;

package/LexicalMarkdownShortcutPlugin.prod.js

@@ -4,5 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var c=require("@lexical/markdown"),d=require("@lexical/react/LexicalComposerContext"),e=require("@lexical/react/LexicalHorizontalRuleNode"),f=require("react");let h=[{export:a=>e.$isHorizontalRuleNode(a)?"***":null,regExp:/^(---|\*\*\*|___)\s?$/,replace:(a,b,k,g)=>{b=e.$createHorizontalRuleNode();g||null!=a.getNextSibling()?a.replace(b):a.insertBefore(b);b.selectNext()},type:"element"},...c.TRANSFORMERS];
-exports.MarkdownShortcutPlugin=function({transformers:a=h}){let [b]=d.useLexicalComposerContext();f.useEffect(()=>c.registerMarkdownShortcuts(b,a),[b,a]);return null}
+'use strict';var c=require("@lexical/markdown"),d=require("@lexical/react/LexicalComposerContext"),e=require("@lexical/react/LexicalHorizontalRuleNode"),f=require("react");let g=[{dependencies:[e.HorizontalRuleNode],export:a=>e.$isHorizontalRuleNode(a)?"***":null,regExp:/^(---|\*\*\*|___)\s?$/,replace:(a,b,k,h)=>{b=e.$createHorizontalRuleNode();h||null!=a.getNextSibling()?a.replace(b):a.insertBefore(b);b.selectNext()},type:"element"},...c.TRANSFORMERS];exports.DEFAULT_TRANSFORMERS=g;
+exports.MarkdownShortcutPlugin=function({transformers:a=g}){let [b]=d.useLexicalComposerContext();f.useEffect(()=>c.registerMarkdownShortcuts(b,a),[b,a]);return null}

package/LexicalOnChangePlugin.dev.js

@@ -36,7 +36,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  *
  */
 function OnChangePlugin({
-  // TODO 0.4 flip to true
+  // TODO 0.5 flip to true
   ignoreHistoryMergeTagChange = false,
   ignoreInitialChange = true,
   ignoreSelectionChange = false,

package/LexicalOnChangePlugin.js.flow

@@ -11,7 +11,7 @@ import type {EditorState, LexicalEditor} from 'lexical';
 
 declare export function OnChangePlugin({
   ignoreHistoryMergeTagChange?: boolean,
-  // TODO 0.4 remove
+  // TODO 0.5 remove
   ignoreInitialChange?: boolean,
   ignoreSelectionChange?: boolean,
   onChange: (editorState: EditorState, editor: LexicalEditor) => void,

package/LexicalPlainTextPlugin.dev.js

@@ -61,7 +61,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  */
 
 function canShowPlaceholderFromCurrentEditorState(editor) {
-  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isReadOnly()));
+  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isEditable()));
   return currentCanShowPlaceholder;
 }
 
@@ -76,7 +76,7 @@ function useCanShowPlaceholder(editor) {
     resetCanShowPlaceholder();
     return utils.mergeRegister(editor.registerUpdateListener(() => {
       resetCanShowPlaceholder();
-    }), editor.registerReadOnlyListener(() => {
+    }), editor.registerEditableListener(() => {
       resetCanShowPlaceholder();
     }));
   }, [editor]);

package/LexicalPlainTextPlugin.prod.js

@@ -4,7 +4,7 @@
  * 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 d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/plain-text"),r="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function t(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isReadOnly()))}
-function u(a){let [c,f]=h.useState(()=>t(a));r(()=>{function b(){let g=t(a);f(g)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerReadOnlyListener(()=>{b()}))},[a]);return c}
+'use strict';var d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/plain-text"),r="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function t(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
+function u(a){let [c,f]=h.useState(()=>t(a));r(()=>{function b(){let g=t(a);f(g)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return c}
 function v(a){let [c,f]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{n.flushSync(()=>{f(b)})}),[a]);h.useEffect(()=>{f(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],g=Object.keys(c);for(let k=0;k<g.length;k++){var e=g[k];let w=c[e];e=a.getElementByKey(e);null!==e&&b.push(n.createPortal(w,e))}return b},[c,a])}function x(a,c){r(()=>m.mergeRegister(q.registerPlainText(a,c),p.registerDragonSupport(a)),[a])}
 exports.PlainTextPlugin=function({contentEditable:a,placeholder:c,initialEditorState:f}){let [b]=d.useLexicalComposerContext(),g=u(b),e=v(b);x(b,f);return h.createElement(h.Fragment,null,a,g&&c,e)}

package/LexicalRichTextPlugin.dev.js

@@ -61,7 +61,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  */
 
 function canShowPlaceholderFromCurrentEditorState(editor) {
-  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isReadOnly()));
+  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isEditable()));
   return currentCanShowPlaceholder;
 }
 
@@ -76,7 +76,7 @@ function useCanShowPlaceholder(editor) {
     resetCanShowPlaceholder();
     return utils.mergeRegister(editor.registerUpdateListener(() => {
       resetCanShowPlaceholder();
-    }), editor.registerReadOnlyListener(() => {
+    }), editor.registerEditableListener(() => {
       resetCanShowPlaceholder();
     }));
   }, [editor]);

package/LexicalRichTextPlugin.prod.js

@@ -4,7 +4,7 @@
  * 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 d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/rich-text"),r="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function t(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isReadOnly()))}
-function u(a){let [c,f]=h.useState(()=>t(a));r(()=>{function b(){let g=t(a);f(g)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerReadOnlyListener(()=>{b()}))},[a]);return c}
+'use strict';var d=require("@lexical/react/LexicalComposerContext"),h=require("react"),l=require("@lexical/text"),m=require("@lexical/utils"),n=require("react-dom"),p=require("@lexical/dragon"),q=require("@lexical/rich-text"),r="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?h.useLayoutEffect:h.useEffect;function t(a){return a.getEditorState().read(l.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
+function u(a){let [c,f]=h.useState(()=>t(a));r(()=>{function b(){let g=t(a);f(g)}b();return m.mergeRegister(a.registerUpdateListener(()=>{b()}),a.registerEditableListener(()=>{b()}))},[a]);return c}
 function v(a){let [c,f]=h.useState(()=>a.getDecorators());r(()=>a.registerDecoratorListener(b=>{n.flushSync(()=>{f(b)})}),[a]);h.useEffect(()=>{f(a.getDecorators())},[a]);return h.useMemo(()=>{let b=[],g=Object.keys(c);for(let k=0;k<g.length;k++){var e=g[k];let w=c[e];e=a.getElementByKey(e);null!==e&&b.push(n.createPortal(w,e))}return b},[c,a])}function x(a,c){r(()=>m.mergeRegister(q.registerRichText(a,c),p.registerDragonSupport(a)),[a])}
 exports.RichTextPlugin=function({contentEditable:a,placeholder:c,initialEditorState:f}){let [b]=d.useLexicalComposerContext(),g=u(b),e=v(b);x(b,f);return h.createElement(h.Fragment,null,a,g&&c,e)}

package/LexicalTypeaheadMenuPlugin.d.ts

@@ -23,7 +23,7 @@ export declare class TypeaheadOption {
     constructor(key: string);
     setRefElement(element: HTMLElement | null): void;
 }
-declare type MenuRenderFn<TOption extends TypeaheadOption> = (anchorElement: HTMLElement | null, itemProps: {
+export declare type MenuRenderFn<TOption extends TypeaheadOption> = (anchorElement: HTMLElement | null, itemProps: {
     selectedIndex: number | null;
     selectOptionAndCleanUp: (option: TOption) => void;
     setHighlightedIndex: (index: number) => void;
@@ -32,14 +32,14 @@ export declare function useBasicTypeaheadTriggerMatch(trigger: string, { minLeng
     minLength?: number;
     maxLength?: number;
 }): TriggerFn;
-declare type TypeaheadMenuPluginArgs<TOption extends TypeaheadOption> = {
+export declare type TypeaheadMenuPluginArgs<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;
 };
-declare type TriggerFn = (text: string, editor: LexicalEditor) => QueryMatch | null;
+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> = {
     onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;

package/LexicalTypeaheadMenuPlugin.dev.js

@@ -276,7 +276,7 @@ function LexicalPopoverMenu({
       }
 
       return true;
-    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => {
+    }, lexical.COMMAND_PRIORITY_NORMAL), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => {
       const event = payload;
 
       if (options !== null && options.length && selectedIndex !== null) {
@@ -293,13 +293,13 @@ function LexicalPopoverMenu({
       }
 
       return true;
-    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, payload => {
+    }, lexical.COMMAND_PRIORITY_NORMAL), 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 => {
+    }, lexical.COMMAND_PRIORITY_NORMAL), editor.registerCommand(lexical.KEY_TAB_COMMAND, payload => {
       const event = payload;
 
       if (options === null || selectedIndex === null || options[selectedIndex] == null) {
@@ -310,7 +310,7 @@ function LexicalPopoverMenu({
       event.stopImmediatePropagation();
       selectOptionAndCleanUp(options[selectedIndex]);
       return true;
-    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
+    }, lexical.COMMAND_PRIORITY_NORMAL), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
       if (options === null || selectedIndex === null || options[selectedIndex] == null) {
         return false;
       }
@@ -322,7 +322,7 @@ function LexicalPopoverMenu({
 
       selectOptionAndCleanUp(options[selectedIndex]);
       return true;
-    }, lexical.COMMAND_PRIORITY_LOW));
+    }, lexical.COMMAND_PRIORITY_NORMAL));
   }, [selectOptionAndCleanUp, close, editor, options, selectedIndex, updateSelectedIndex]);
   const listItemProps = React.useMemo(() => ({
     selectOptionAndCleanUp,
@@ -358,7 +358,7 @@ function useBasicTypeaheadTriggerMatch(trigger, {
   }, [maxLength, minLength, trigger]);
 }
 
-function useAnchorElementRef(resolution, options) {
+function useAnchorElementRef(resolution) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const anchorElementRef = React.useRef(document.createElement('div'));
   React.useEffect(() => {
@@ -374,11 +374,10 @@ function useAnchorElementRef(resolution, options) {
         const {
           left,
           top,
-          height,
-          width
+          height
         } = resolution.getRect();
-        containerDiv.style.top = `${top + height + window.pageYOffset}px`;
-        containerDiv.style.left = `${left + width + window.pageXOffset}px`;
+        containerDiv.style.top = `${top + height + 5 + window.pageYOffset}px`;
+        containerDiv.style.left = `${left + window.pageXOffset}px`;
         containerDiv.style.display = 'block';
         containerDiv.style.position = 'absolute';
 
@@ -402,7 +401,7 @@ function useAnchorElementRef(resolution, options) {
         }
       };
     }
-  }, [editor, resolution, options]);
+  }, [editor, resolution]);
   return anchorElementRef;
 }
 
@@ -415,7 +414,7 @@ function LexicalTypeaheadMenuPlugin({
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [resolution, setResolution] = React.useState(null);
-  const anchorElementRef = useAnchorElementRef(resolution, options);
+  const anchorElementRef = useAnchorElementRef(resolution);
   React.useEffect(() => {
     let activeRange = document.createRange();
     let previousText = null;
@@ -479,7 +478,7 @@ function LexicalNodeMenuPlugin({
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [resolution, setResolution] = React.useState(null);
-  const anchorElementRef = useAnchorElementRef(resolution, options);
+  const anchorElementRef = useAnchorElementRef(resolution);
   React.useEffect(() => {
     if (nodeKey && resolution == null) {
       editor.update(() => {

package/LexicalTypeaheadMenuPlugin.js.flow

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type {LexicalEditor, NodeKey, TextNode} from 'lexical';
+import * as React from 'react';
+
+export type QueryMatch = {
+  leadOffset: number,
+  matchingString: string,
+  replaceableString: string,
+};
+
+export type Resolution = {
+  match: QueryMatch,
+  getRect: () => ClientRect,
+};
+
+export const PUNCTUATION: string =
+  '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+
+declare export class TypeaheadOption {
+  key: string;
+  ref: React$ElementRef<HTMLElement | null>;
+  constructor(key: string): void;
+  setRefElement(element: HTMLElement | null): void;
+}
+
+export type MenuRenderFn<TOption> = (
+  anchorElement: HTMLElement | null,
+  itemProps: {
+    selectedIndex: number | null,
+    selectOptionAndCleanUp: (option: TOption) => void,
+    setHighlightedIndex: (index: number) => void,
+  },
+  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> = {
+  onQueryChange: (matchingString: string | null) => void,
+  onSelectOption: (
+    option: TOption,
+    textNodeContainingQuery: TextNode | null,
+    closeMenu: () => void,
+    matchingString: string,
+  ) => void,
+  options: Array<TOption>,
+  menuRenderFn: MenuRenderFn<TOption>,
+  triggerFn: TriggerFn,
+};
+
+export type TriggerFn = (
+  text: string,
+  editor: LexicalEditor,
+) => QueryMatch | null;
+
+declare export function LexicalTypeaheadMenuPlugin<TOption>(
+  options: TypeaheadMenuPluginArgs<TOption>,
+): React.MixedElement | null;
+
+type NodeMenuPluginArgs<TOption> = {
+  onSelectOption: (
+    option: TOption,
+    textNodeContainingQuery: TextNode | null,
+    closeMenu: () => void,
+    matchingString: string,
+  ) => void,
+  options: Array<TOption>,
+  nodeKey: NodeKey | null,
+  onClose: () => void,
+  menuRenderFn: MenuRenderFn<TOption>,
+};
+
+declare export function LexicalNodeMenuPlugin<TOption>(
+  options: NodeMenuPluginArgs<TOption>,
+): React.MixedElement | null;

package/LexicalTypeaheadMenuPlugin.prod.js

@@ -5,18 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict';var m=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(b){this.key=b;this.ref={current:null};this.setRefElement=this.setRefElement.bind(this)}setRefElement(b){this.ref={current:b}}}
-let A=b=>{var a=document.getElementById("typeahead-menu");if(a){a=a.getBoundingClientRect();const c=b.getBoundingClientRect();c.bottom>a.bottom?b.scrollIntoView(!1):c.top<a.top&&b.scrollIntoView()}};function C(b,a){var c=window.getSelection();if(null===c||!c.isCollapsed)return!1;let d=c.anchorNode;c=c.anchorOffset;if(null==d||null==c)return!1;try{a.setStart(d,b),a.setEnd(d,c)}catch(e){return!1}return!0}
-function D(b){let a=null;b.getEditorState().read(()=>{var c=w.$getSelection();if(w.$isRangeSelection(c)){var d=c.anchor;"text"!==d.type?a=null:(c=d.getNode(),c.isSimpleText()?(d=d.offset,a=c.getTextContent().slice(0,d)):a=null)}});return a}
-function E(b,a){b=w.$getSelection();if(!w.$isRangeSelection(b)||!b.isCollapsed())return null;var c=b.anchor;if("text"!==c.type)return null;b=c.getNode();if(!b.isSimpleText())return null;c=c.offset;let d=b.getTextContent().slice(0,c);var e=a.matchingString;a=a.replaceableString.length;for(let f=a;f<=e.length;f++)d.substr(-f)===e.substr(0,f)&&(a=f);a=c-a;if(0>a)return null;let g;0===a?[g]=b.splitText(c):[,g]=b.splitText(a,c);return g}
+let A=b=>{var a=document.getElementById("typeahead-menu");if(a){a=a.getBoundingClientRect();const c=b.getBoundingClientRect();c.bottom>a.bottom?b.scrollIntoView(!1):c.top<a.top&&b.scrollIntoView()}};function C(b,a){var c=window.getSelection();if(null===c||!c.isCollapsed)return!1;let e=c.anchorNode;c=c.anchorOffset;if(null==e||null==c)return!1;try{a.setStart(e,b),a.setEnd(e,c)}catch(f){return!1}return!0}
+function D(b){let a=null;b.getEditorState().read(()=>{var c=w.$getSelection();if(w.$isRangeSelection(c)){var e=c.anchor;"text"!==e.type?a=null:(c=e.getNode(),c.isSimpleText()?(e=e.offset,a=c.getTextContent().slice(0,e)):a=null)}});return a}
+function E(b,a){b=w.$getSelection();if(!w.$isRangeSelection(b)||!b.isCollapsed())return null;var c=b.anchor;if("text"!==c.type)return null;b=c.getNode();if(!b.isSimpleText())return null;c=c.offset;let e=b.getTextContent().slice(0,c);var f=a.matchingString;a=a.replaceableString.length;for(let k=a;k<=f.length;k++)e.substr(-k)===f.substr(0,k)&&(a=k);a=c-a;if(0>a)return null;let d;0===a?[d]=b.splitText(c):[,d]=b.splitText(a,c);return d}
 function F(b,a){return 0!==a?!1:b.getEditorState().read(()=>{var c=w.$getSelection();return w.$isRangeSelection(c)?(c=c.anchor.getNode().getPreviousSibling(),w.$isTextNode(c)&&c.isTextEntity()):!1})}function G(b){x.startTransition?x.startTransition(b):b()}
-function H({close:b,editor:a,anchorElement:c,resolution:d,options:e,menuRenderFn:g,onSelectOption:f}){let [h,r]=x.useState(null);x.useEffect(()=>{r(0)},[d.match.matchingString]);let q=x.useCallback(async k=>{a.update(()=>{const l=E(a,d.match);f(k,l,b,d.match.matchingString)})},[b,a,d.match,f]),p=x.useCallback(k=>{const l=a.getRootElement();null!==l&&(l.setAttribute("aria-activedescendant","typeahead-item-"+k),r(k))},[a]);x.useEffect(()=>()=>{let k=a.getRootElement();null!==k&&k.removeAttribute("aria-activedescendant")},
-[a]);y(()=>{null===e?r(null):null===h&&p(0)},[e,h,p]);x.useEffect(()=>n.mergeRegister(a.registerCommand(w.KEY_ARROW_DOWN_COMMAND,k=>{if(null!==e&&e.length&&null!==h){var l=h!==e.length-1?h+1:0;p(l);l=e[l];null!=l.ref&&l.ref.current&&A(l.ref.current);k.preventDefault();k.stopImmediatePropagation()}return!0},w.COMMAND_PRIORITY_LOW),a.registerCommand(w.KEY_ARROW_UP_COMMAND,k=>{if(null!==e&&e.length&&null!==h){var l=0!==h?h-1:e.length-1;p(l);l=e[l];null!=l.ref&&l.ref.current&&A(l.ref.current);k.preventDefault();
-k.stopImmediatePropagation()}return!0},w.COMMAND_PRIORITY_LOW),a.registerCommand(w.KEY_ESCAPE_COMMAND,k=>{k.preventDefault();k.stopImmediatePropagation();b();return!0},w.COMMAND_PRIORITY_LOW),a.registerCommand(w.KEY_TAB_COMMAND,k=>{if(null===e||null===h||null==e[h])return!1;k.preventDefault();k.stopImmediatePropagation();q(e[h]);return!0},w.COMMAND_PRIORITY_LOW),a.registerCommand(w.KEY_ENTER_COMMAND,k=>{if(null===e||null===h||null==e[h])return!1;null!==k&&(k.preventDefault(),k.stopImmediatePropagation());
-q(e[h]);return!0},w.COMMAND_PRIORITY_LOW)),[q,b,a,e,h,p]);let t=x.useMemo(()=>({selectOptionAndCleanUp:q,selectedIndex:h,setHighlightedIndex:r}),[q,h]);return g(c,t,d.match.matchingString)}
-function I(b,a){let [c]=m.useLexicalComposerContext(),d=x.useRef(document.createElement("div"));x.useEffect(()=>{function e(){let f=d.current;f.setAttribute("aria-label","Typeahead menu");f.setAttribute("id","typeahead-menu");f.setAttribute("role","listbox");if(null!==g&&null!==b){let {left:h,top:r,height:q,width:p}=b.getRect();f.style.top=`${r+q+window.pageYOffset}px`;f.style.left=`${h+p+window.pageXOffset}px`;f.style.display="block";f.style.position="absolute";f.isConnected||document.body.append(f);
-d.current=f;g.setAttribute("aria-controls","typeahead-menu")}}let g=c.getRootElement();if(null!==b)return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e);null!==g&&g.removeAttribute("aria-controls")}},[c,b,a]);return d}
-exports.LexicalNodeMenuPlugin=function({options:b,nodeKey:a,onClose:c,onSelectOption:d,menuRenderFn:e}){let [g]=m.useLexicalComposerContext(),[f,h]=x.useState(null),r=I(f,b);x.useEffect(()=>{a&&null==f?g.update(()=>{let q=w.$getNodeByKey(a),p=g.getElementByKey(a);if(null!=q&&null!=p){let t=q.getTextContent();G(()=>h({getRect:()=>p.getBoundingClientRect(),match:{leadOffset:t.length,matchingString:t,replaceableString:t}}))}}):null==a&&null!=f&&h(null)},[g,a,f]);return null===f||null===g?null:x.createElement(H,
-{close:c,resolution:f,editor:g,anchorElement:r.current,options:b,menuRenderFn:e,onSelectOption:d})};
-exports.LexicalTypeaheadMenuPlugin=function({options:b,onQueryChange:a,onSelectOption:c,menuRenderFn:d,triggerFn:e}){let [g]=m.useLexicalComposerContext(),[f,h]=x.useState(null),r=I(f,b);x.useEffect(()=>{let p=document.createRange(),t=null,k=g.registerUpdateListener(()=>{g.getEditorState().read(()=>{const l=p,B=w.$getSelection(),v=D(g);if(w.$isRangeSelection(B)&&B.isCollapsed()&&v!==t&&null!==v&&null!==l){t=v;var u=e(v,g);a(u?u.matchingString:null);null===u||F(g,u.leadOffset)||null===C(u.leadOffset,
-l)?h(null):G(()=>h({getRect:()=>l.getBoundingClientRect(),match:u}))}else h(null)})});return()=>{p=null;k()}},[g,e,a,f]);let q=x.useCallback(()=>{h(null)},[]);return null===f||null===g?null:x.createElement(H,{close:q,resolution:f,editor:g,anchorElement:r.current,options:b,menuRenderFn:d,onSelectOption:c})};exports.PUNCTUATION="\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";exports.TypeaheadOption=z;
-exports.useBasicTypeaheadTriggerMatch=function(b,{minLength:a=1,maxLength:c=75}){return x.useCallback(d=>{d=(new RegExp("(^|\\s|\\()(["+b+"]((?:[^"+(b+"\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;\\s]){0,")+c+"}))$")).exec(d);if(null!==d){let e=d[1],g=d[3];if(g.length>=a)return{leadOffset:d.index+e.length,matchingString:g,replaceableString:d[2]}}return null},[c,a,b])}
+function H({close:b,editor:a,anchorElement:c,resolution:e,options:f,menuRenderFn:d,onSelectOption:k}){let [g,q]=x.useState(null);x.useEffect(()=>{q(0)},[e.match.matchingString]);let r=x.useCallback(async h=>{a.update(()=>{const l=E(a,e.match);k(h,l,b,e.match.matchingString)})},[b,a,e.match,k]),p=x.useCallback(h=>{const l=a.getRootElement();null!==l&&(l.setAttribute("aria-activedescendant","typeahead-item-"+h),q(h))},[a]);x.useEffect(()=>()=>{let h=a.getRootElement();null!==h&&h.removeAttribute("aria-activedescendant")},
+[a]);y(()=>{null===f?q(null):null===g&&p(0)},[f,g,p]);x.useEffect(()=>n.mergeRegister(a.registerCommand(w.KEY_ARROW_DOWN_COMMAND,h=>{if(null!==f&&f.length&&null!==g){var l=g!==f.length-1?g+1:0;p(l);l=f[l];null!=l.ref&&l.ref.current&&A(l.ref.current);h.preventDefault();h.stopImmediatePropagation()}return!0},w.COMMAND_PRIORITY_NORMAL),a.registerCommand(w.KEY_ARROW_UP_COMMAND,h=>{if(null!==f&&f.length&&null!==g){var l=0!==g?g-1:f.length-1;p(l);l=f[l];null!=l.ref&&l.ref.current&&A(l.ref.current);h.preventDefault();
+h.stopImmediatePropagation()}return!0},w.COMMAND_PRIORITY_NORMAL),a.registerCommand(w.KEY_ESCAPE_COMMAND,h=>{h.preventDefault();h.stopImmediatePropagation();b();return!0},w.COMMAND_PRIORITY_NORMAL),a.registerCommand(w.KEY_TAB_COMMAND,h=>{if(null===f||null===g||null==f[g])return!1;h.preventDefault();h.stopImmediatePropagation();r(f[g]);return!0},w.COMMAND_PRIORITY_NORMAL),a.registerCommand(w.KEY_ENTER_COMMAND,h=>{if(null===f||null===g||null==f[g])return!1;null!==h&&(h.preventDefault(),h.stopImmediatePropagation());
+r(f[g]);return!0},w.COMMAND_PRIORITY_NORMAL)),[r,b,a,f,g,p]);let t=x.useMemo(()=>({selectOptionAndCleanUp:r,selectedIndex:g,setHighlightedIndex:q}),[r,g]);return d(c,t,e.match.matchingString)}
+function I(b){let [a]=m.useLexicalComposerContext(),c=x.useRef(document.createElement("div"));x.useEffect(()=>{function e(){let d=c.current;d.setAttribute("aria-label","Typeahead menu");d.setAttribute("id","typeahead-menu");d.setAttribute("role","listbox");if(null!==f&&null!==b){let {left:k,top:g,height:q}=b.getRect();d.style.top=`${g+q+5+window.pageYOffset}px`;d.style.left=`${k+window.pageXOffset}px`;d.style.display="block";d.style.position="absolute";d.isConnected||document.body.append(d);c.current=
+d;f.setAttribute("aria-controls","typeahead-menu")}}let f=a.getRootElement();if(null!==b)return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e);null!==f&&f.removeAttribute("aria-controls")}},[a,b]);return c}
+exports.LexicalNodeMenuPlugin=function({options:b,nodeKey:a,onClose:c,onSelectOption:e,menuRenderFn:f}){let [d]=m.useLexicalComposerContext(),[k,g]=x.useState(null),q=I(k);x.useEffect(()=>{a&&null==k?d.update(()=>{let r=w.$getNodeByKey(a),p=d.getElementByKey(a);if(null!=r&&null!=p){let t=r.getTextContent();G(()=>g({getRect:()=>p.getBoundingClientRect(),match:{leadOffset:t.length,matchingString:t,replaceableString:t}}))}}):null==a&&null!=k&&g(null)},[d,a,k]);return null===k||null===d?null:x.createElement(H,
+{close:c,resolution:k,editor:d,anchorElement:q.current,options:b,menuRenderFn:f,onSelectOption:e})};
+exports.LexicalTypeaheadMenuPlugin=function({options:b,onQueryChange:a,onSelectOption:c,menuRenderFn:e,triggerFn:f}){let [d]=m.useLexicalComposerContext(),[k,g]=x.useState(null),q=I(k);x.useEffect(()=>{let p=document.createRange(),t=null,h=d.registerUpdateListener(()=>{d.getEditorState().read(()=>{const l=p,B=w.$getSelection(),v=D(d);if(w.$isRangeSelection(B)&&B.isCollapsed()&&v!==t&&null!==v&&null!==l){t=v;var u=f(v,d);a(u?u.matchingString:null);null===u||F(d,u.leadOffset)||null===C(u.leadOffset,
+l)?g(null):G(()=>g({getRect:()=>l.getBoundingClientRect(),match:u}))}else g(null)})});return()=>{p=null;h()}},[d,f,a,k]);let r=x.useCallback(()=>{g(null)},[]);return null===k||null===d?null:x.createElement(H,{close:r,resolution:k,editor:d,anchorElement:q.current,options:b,menuRenderFn:e,onSelectOption:c})};exports.PUNCTUATION="\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";exports.TypeaheadOption=z;
+exports.useBasicTypeaheadTriggerMatch=function(b,{minLength:a=1,maxLength:c=75}){return x.useCallback(e=>{e=(new RegExp("(^|\\s|\\()(["+b+"]((?:[^"+(b+"\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;\\s]){0,")+c+"}))$")).exec(e);if(null!==e){let f=e[1],d=e[3];if(d.length>=a)return{leadOffset:e.index+f.length,matchingString:d,replaceableString:e[2]}}return null},[c,a,b])}