@lexical/react 0.3.7 → 0.3.8

package/LexicalCollaborationPlugin.dev.js

@@ -102,6 +102,7 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
       provider.off('reload', onProviderDocReload);
       awareness.off('update', onAwarenessUpdate);
       root.getSharedType().unobserveDeep(onYjsTreeChanges);
+      docMap.delete(id);
       removeListener();
     };
   }, [binding, color, connect, disconnect, docMap, editor, id, name, provider, shouldBootstrap]);

package/LexicalCollaborationPlugin.prod.js

@@ -7,7 +7,7 @@
 'use strict';var e=require("@lexical/react/LexicalComposerContext"),f=require("react"),h=require("@lexical/utils"),x=require("@lexical/yjs"),F=require("lexical"),G=require("react-dom");
 function H(b,c,a,d,l,p,q){let n=f.useRef(!1),[r,v]=f.useState(d.get(c)),g=f.useMemo(()=>x.createBinding(b,a,c,r,d),[b,a,c,d,r]),t=f.useCallback(()=>{a.connect()},[a]),u=f.useCallback(()=>{try{a.disconnect()}catch(m){}},[a]);f.useEffect(()=>{let {root:m}=g,{awareness:y}=a,z=({status:k})=>{b.dispatchCommand(x.CONNECTED_COMMAND,"connected"===k)},A=k=>{q&&k&&m.isEmpty()&&0===m._xmlText._length&&!1===n.current&&I(b);n.current=!1},B=()=>{x.syncCursorPositions(g,a)},C=(k,w)=>{w.origin!==g&&x.syncYjsChangesToLexical(g,
 a,k)};x.initLocalState(a,l,p,document.activeElement===b.getRootElement());let D=k=>{J(b,g);v(k);d.set(c,k);n.current=!0};a.on("reload",D);a.on("status",z);a.on("sync",A);y.on("update",B);m.getSharedType().observeDeep(C);let R=b.registerUpdateListener(({prevEditorState:k,editorState:w,dirtyLeaves:O,dirtyElements:P,normalizedNodes:Q,tags:E})=>{!1===E.has("skip-collab")&&x.syncLexicalUpdateToYjs(g,a,k,w,P,O,Q,E)});t();return()=>{!1===n.current&&u();a.off("sync",A);a.off("status",z);a.off("reload",D);
-y.off("update",B);m.getSharedType().unobserveDeep(C);R()}},[g,p,t,u,d,b,c,l,a,q]);let S=f.useMemo(()=>G.createPortal(f.createElement("div",{ref:m=>{g.cursorsContainer=m}}),document.body),[g]);f.useEffect(()=>b.registerCommand(x.TOGGLE_CONNECT_COMMAND,m=>{void 0!==t&&void 0!==u&&(m?(console.log("Collaboration connected!"),t()):(console.log("Collaboration disconnected!"),u()));return!0},F.COMMAND_PRIORITY_EDITOR),[t,u,b]);return[S,g]}
+y.off("update",B);m.getSharedType().unobserveDeep(C);d.delete(c);R()}},[g,p,t,u,d,b,c,l,a,q]);let S=f.useMemo(()=>G.createPortal(f.createElement("div",{ref:m=>{g.cursorsContainer=m}}),document.body),[g]);f.useEffect(()=>b.registerCommand(x.TOGGLE_CONNECT_COMMAND,m=>{void 0!==t&&void 0!==u&&(m?(console.log("Collaboration connected!"),t()):(console.log("Collaboration disconnected!"),u()));return!0},F.COMMAND_PRIORITY_EDITOR),[t,u,b]);return[S,g]}
 function K(b,c,a,d){f.useEffect(()=>h.mergeRegister(b.registerCommand(F.FOCUS_COMMAND,()=>{x.setLocalStateFocus(c,a,d,!0);return!0},F.COMMAND_PRIORITY_EDITOR),b.registerCommand(F.BLUR_COMMAND,()=>{x.setLocalStateFocus(c,a,d,!1);return!0},F.COMMAND_PRIORITY_EDITOR)),[d,b,a,c])}
 function L(b,c){let a=f.useMemo(()=>x.createUndoManager(c,c.root.getSharedType()),[c]);f.useEffect(()=>h.mergeRegister(b.registerCommand(F.UNDO_COMMAND,()=>{a.undo();return!0},F.COMMAND_PRIORITY_EDITOR),b.registerCommand(F.REDO_COMMAND,()=>{a.redo();return!0},F.COMMAND_PRIORITY_EDITOR)));return f.useCallback(()=>{a.clear()},[a])}
 function I(b){b.update(()=>{var c=F.$getRoot();if(null===c.getFirstChild()){let a=F.$createParagraphNode();c.append(a);c=document.activeElement;(null!==F.$getSelection()||null!==c&&c===b.getRootElement())&&a.select()}},{tag:"history-merge"})}

package/LexicalTableOfContents__EXPERIMENTAL.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ */
+import type { LexicalEditor, NodeKey } from 'lexical';
+import { HeadingTagType } from '@lexical/rich-text';
+declare type Props = {
+    children: (values: Array<[key: NodeKey, text: string, tag: HeadingTagType]>, editor: LexicalEditor) => JSX.Element;
+};
+export default function LexicalTableOfContentsPlugin({ children, }: Props): JSX.Element;
+export {};

package/LexicalTableOfContents__EXPERIMENTAL.dev.js

@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var richText = require('@lexical/rich-text');
+var lexical = require('lexical');
+var react = require('react');
+
+/**
+ * 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.
+ *
+ */
+
+function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents) {
+  if (newHeading === null) {
+    return currentTableOfContents;
+  }
+
+  const newEntry = [newHeading.getKey(), newHeading.getTextContent(), newHeading.getTag()];
+  let newTableOfContents = [];
+
+  if (prevHeading === null) {
+    newTableOfContents = [newEntry, ...currentTableOfContents];
+  } else {
+    for (let i = 0; i < currentTableOfContents.length; i++) {
+      const key = currentTableOfContents[i][0];
+      newTableOfContents.push(currentTableOfContents[i]);
+
+      if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
+        newTableOfContents.push(newEntry);
+      }
+    }
+  }
+
+  return newTableOfContents;
+}
+
+function $deleteHeadingFromTableOfContents(key, currentTableOfContents) {
+  const newTableOfContents = [];
+
+  for (const heading of currentTableOfContents) {
+    if (heading[0] !== key) {
+      newTableOfContents.push(heading);
+    }
+  }
+
+  return newTableOfContents;
+}
+
+function $updateHeadingInTableOfContents(heading, currentTableOfContents) {
+  const newTextContent = heading.getTextContent();
+  const newTableOfContents = [];
+
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey()) {
+      newTableOfContents.push([heading.getKey(), newTextContent, heading.getTag()]);
+    } else {
+      newTableOfContents.push(oldHeading);
+    }
+  }
+
+  return newTableOfContents;
+}
+
+function LexicalTableOfContentsPlugin({
+  children
+}) {
+  const [tableOfContents, setTableOfContents] = react.useState([]);
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  react.useEffect(() => {
+    // Set table of contents initial state
+    let currentTableOfContents = [];
+    editor.getEditorState().read(() => {
+      const root = lexical.$getRoot();
+      const rootChildren = root.getChildren();
+
+      for (const child of rootChildren) {
+        if (richText.$isHeadingNode(child)) {
+          currentTableOfContents.push([child.getKey(), child.getTextContent(), child.getTag()]);
+        }
+      }
+
+      setTableOfContents(currentTableOfContents);
+    }); // Listen to updates to heading mutations and update state
+
+    const removeHeaderMutationListener = editor.registerMutationListener(richText.HeadingNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'created') {
+            const newHeading = lexical.$getNodeByKey(nodeKey);
+
+            if (newHeading !== null) {
+              let prevHeading = newHeading.getPreviousSibling();
+
+              while (prevHeading && !richText.$isHeadingNode(prevHeading)) {
+                prevHeading = prevHeading.getPreviousSibling();
+              }
+
+              currentTableOfContents = $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents);
+              setTableOfContents(currentTableOfContents);
+            }
+          } else if (mutation === 'destroyed') {
+            currentTableOfContents = $deleteHeadingFromTableOfContents(nodeKey, currentTableOfContents);
+            setTableOfContents(currentTableOfContents);
+          }
+        }
+      });
+    }); // Listen to text node mutation updates
+
+    const removeTextNodeMutationListener = editor.registerMutationListener(lexical.TextNode, mutatedNodes => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'updated') {
+            const currNode = lexical.$getNodeByKey(nodeKey);
+
+            if (currNode !== null) {
+              const parentNode = currNode.getParentOrThrow();
+
+              if (richText.$isHeadingNode(parentNode)) {
+                currentTableOfContents = $updateHeadingInTableOfContents(parentNode, currentTableOfContents);
+                setTableOfContents(currentTableOfContents);
+              }
+            }
+          }
+        }
+      });
+    });
+    return () => {
+      removeHeaderMutationListener();
+      removeTextNodeMutationListener();
+    };
+  }, [editor]);
+  return children(tableOfContents, editor);
+}
+
+module.exports = LexicalTableOfContentsPlugin;

package/LexicalTableOfContents__EXPERIMENTAL.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict'
+const LexicalTableOfContents__EXPERIMENTAL = process.env.NODE_ENV === 'development' ? require('./LexicalTableOfContents__EXPERIMENTAL.dev.js') : require('./LexicalTableOfContents__EXPERIMENTAL.prod.js')
+module.exports = LexicalTableOfContents__EXPERIMENTAL;

package/LexicalTableOfContents__EXPERIMENTAL.js.flow

@@ -0,0 +1,17 @@
+/**
+ * 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 {HeadingTagType} from '@lexical/rich-text';
+import type {NodeKey} from 'lexical';
+
+declare export function LexicalTableOfContentsPlugin(
+  children: (
+    tableOfContents: Array<[NodeKey, string, HeadingTagType]>,
+  ) => React$Node,
+): React$Node;

package/LexicalTableOfContents__EXPERIMENTAL.prod.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';var k=require("@lexical/react/LexicalComposerContext"),l=require("@lexical/rich-text"),r=require("lexical"),u=require("react");
+module.exports=function({children:v}){let [w,m]=u.useState([]),[f]=k.useLexicalComposerContext();u.useEffect(()=>{let b=[];f.getEditorState().read(()=>{let h=r.$getRoot().getChildren();for(let a of h)l.$isHeadingNode(a)&&b.push([a.getKey(),a.getTextContent(),a.getTag()]);m(b)});let x=f.registerMutationListener(l.HeadingNode,h=>{f.getEditorState().read(()=>{for(const [n,p]of h)if("created"===p){var a=r.$getNodeByKey(n);if(null!==a){for(var c=a.getPreviousSibling();c&&!l.$isHeadingNode(c);)c=c.getPreviousSibling();
+a:{var d=b;if(null===a){b=d;break a}let e=[a.getKey(),a.getTextContent(),a.getTag()],g=[];if(null===c)g=[e,...d];else for(let q=0;q<d.length;q++){let t=d[q][0];g.push(d[q]);t===c.getKey()&&t!==a.getKey()&&g.push(e)}b=g}m(b)}}else if("destroyed"===p){c=n;a=b;d=[];for(let e of a)e[0]!==c&&d.push(e);b=d;m(b)}})}),y=f.registerMutationListener(r.TextNode,h=>{f.getEditorState().read(()=>{for(const [d,n]of h)if("updated"===n){var a=r.$getNodeByKey(d);if(null!==a&&(a=a.getParentOrThrow(),l.$isHeadingNode(a))){var c=
+b;let p=a.getTextContent(),e=[];for(let g of c)g[0]===a.getKey()?e.push([a.getKey(),p,a.getTag()]):e.push(g);b=e;m(b)}}})});return()=>{x();y()}},[f]);return v(w,f)}

package/LexicalTypeaheadMenuPlugin.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ *
+ */
+import { TextNode } from 'lexical';
+import { MutableRefObject, ReactPortal } from 'react';
+export declare type QueryMatch = {
+    leadOffset: number;
+    matchingString: string;
+    replaceableString: string;
+};
+export declare type Resolution = {
+    match: QueryMatch;
+    range: Range;
+};
+export declare const PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
+export declare class TypeaheadOption {
+    key: string;
+    ref?: MutableRefObject<HTMLElement | null>;
+    constructor(key: string);
+    setRefElement(element: HTMLElement | null): void;
+}
+declare type MenuRenderFn<TOption extends TypeaheadOption> = (anchorElement: HTMLElement | null, itemProps: {
+    selectedIndex: number | null;
+    selectOptionAndCleanUp: (option: TOption) => void;
+    setHighlightedIndex: (index: number) => void;
+}, matchingString: string) => ReactPortal | JSX.Element | null;
+export declare function useBasicTypeaheadTriggerMatch(trigger: string, { minLength, maxLength }: {
+    minLength?: number;
+    maxLength?: number;
+}): TriggerFn;
+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) => QueryMatch | null;
+export declare function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({ options, onQueryChange, onSelectOption, menuRenderFn, triggerFn, }: TypeaheadMenuPluginArgs<TOption>): JSX.Element | null;
+export {};

package/LexicalTypeaheadMenuPlugin.dev.js

@@ -0,0 +1,463 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var utils = require('@lexical/utils');
+var lexical = require('lexical');
+var React = require('react');
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const useLayoutEffectImpl = CAN_USE_DOM ? React.useLayoutEffect : React.useEffect;
+var useLayoutEffect = useLayoutEffectImpl;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+class TypeaheadOption {
+  constructor(key) {
+    this.key = key;
+    this.ref = {
+      current: null
+    };
+    this.setRefElement = this.setRefElement.bind(this);
+  }
+
+  setRefElement(element) {
+    this.ref = {
+      current: element
+    };
+  }
+
+}
+
+const scrollIntoViewIfNeeded = target => {
+  const 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();
+    }
+  }
+};
+
+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 Lexica 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 ShortcutTypeahead({
+  close,
+  editor,
+  resolution,
+  options,
+  menuRenderFn,
+  onSelectOption
+}) {
+  const [selectedIndex, setHighlightedIndex] = React.useState(null);
+  const anchorElementRef = React.useRef(document.createElement('div'));
+  React.useEffect(() => {
+    setHighlightedIndex(0);
+  }, [resolution.match.matchingString]);
+  React.useEffect(() => {
+    const rootElement = editor.getRootElement();
+
+    function positionMenu() {
+      const containerDiv = anchorElementRef.current;
+      containerDiv.setAttribute('aria-label', 'Typeahead menu');
+      containerDiv.setAttribute('id', 'typeahead-menu');
+      containerDiv.setAttribute('role', 'listbox');
+
+      if (rootElement !== null) {
+        const range = resolution.range;
+        const {
+          left,
+          top,
+          height
+        } = range.getBoundingClientRect();
+        containerDiv.style.top = `${top + height + window.pageYOffset}px`;
+        containerDiv.style.left = `${left + window.pageXOffset}px`;
+        containerDiv.style.display = 'block';
+        containerDiv.style.position = 'absolute';
+
+        if (!containerDiv.isConnected) {
+          document.body.append(containerDiv);
+        }
+
+        anchorElementRef.current = containerDiv;
+        rootElement.setAttribute('aria-controls', 'typeahead-menu');
+      }
+    }
+
+    positionMenu();
+    window.addEventListener('resize', positionMenu);
+    return () => {
+      window.removeEventListener('resize', positionMenu);
+
+      if (rootElement !== null) {
+        rootElement.removeAttribute('aria-controls');
+      }
+    };
+  }, [editor, resolution, options]);
+  const selectOptionAndCleanUp = React.useCallback(async selectedEntry => {
+    editor.update(() => {
+      const textNodeContainingQuery = splitNodeContainingQuery(editor, resolution.match);
+      onSelectOption(selectedEntry, textNodeContainingQuery, close, resolution.match.matchingString);
+    });
+  }, [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);
+    }
+  }, [editor]);
+  React.useEffect(() => {
+    return () => {
+      const rootElem = editor.getRootElement();
+
+      if (rootElem !== null) {
+        rootElem.removeAttribute('aria-activedescendant');
+      }
+    };
+  }, [editor]);
+  useLayoutEffect(() => {
+    if (options === null) {
+      setHighlightedIndex(null);
+    } else if (selectedIndex === null) {
+      updateSelectedIndex(0);
+    }
+  }, [options, selectedIndex, updateSelectedIndex]);
+  React.useEffect(() => {
+    return utils.mergeRegister(editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, payload => {
+      const event = payload;
+
+      if (options !== null && selectedIndex !== null) {
+        const newSelectedIndex = selectedIndex !== options.length - 1 ? selectedIndex + 1 : 0;
+        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_ARROW_UP_COMMAND, payload => {
+      const event = payload;
+
+      if (options !== null && 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;
+
+      if (options === null || selectedIndex === null) {
+        return false;
+      }
+
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      close();
+      return true;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_TAB_COMMAND, payload => {
+      const event = payload;
+
+      if (options === null || selectedIndex === null || options[selectedIndex] == null) {
+        return false;
+      }
+
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      selectOptionAndCleanUp(options[selectedIndex]);
+      return true;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
+      if (options === null || selectedIndex === null || options[selectedIndex] == null) {
+        return false;
+      }
+
+      if (event !== null) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+
+      selectOptionAndCleanUp(options[selectedIndex]);
+      return true;
+    }, lexical.COMMAND_PRIORITY_LOW));
+  }, [selectOptionAndCleanUp, close, editor, options, selectedIndex, updateSelectedIndex]);
+  const listItemProps = React.useMemo(() => ({
+    selectOptionAndCleanUp,
+    selectedIndex,
+    setHighlightedIndex
+  }), [selectOptionAndCleanUp, selectedIndex]);
+  return menuRenderFn(anchorElementRef.current, listItemProps, resolution.match.matchingString);
+}
+
+function useBasicTypeaheadTriggerMatch(trigger, {
+  minLength = 1,
+  maxLength = 75
+}) {
+  return React.useCallback(text => {
+    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,
+          matchingString,
+          replaceableString: match[2]
+        };
+      }
+    }
+
+    return null;
+  }, [maxLength, minLength, trigger]);
+}
+function LexicalTypeaheadMenuPlugin({
+  options,
+  onQueryChange,
+  onSelectOption,
+  menuRenderFn,
+  triggerFn
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [resolution, setResolution] = React.useState(null);
+  React.useEffect(() => {
+    let activeRange = document.createRange();
+    let previousText = null;
+
+    const updateListener = () => {
+      editor.getEditorState().read(() => {
+        const range = activeRange;
+        const selection = lexical.$getSelection();
+        const text = getQueryTextForSearch(editor);
+
+        if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed() || text === previousText || text === null || range === null) {
+          React.startTransition(() => setResolution(null));
+          return;
+        }
+
+        previousText = text;
+        const match = triggerFn(text);
+        onQueryChange(match ? match.matchingString : null);
+
+        if (match !== null && !isSelectionOnEntityBoundary(editor, match.leadOffset)) {
+          const isRangePositioned = tryToPositionRange(match.leadOffset, range);
+
+          if (isRangePositioned !== null) {
+            React.startTransition(() => setResolution({
+              match,
+              range
+            }));
+            return;
+          }
+        }
+
+        React.startTransition(() => setResolution(null));
+      });
+    };
+
+    const removeUpdateListener = editor.registerUpdateListener(updateListener);
+    return () => {
+      activeRange = null;
+      removeUpdateListener();
+    };
+  }, [editor, triggerFn, onQueryChange, resolution]);
+  const closeTypeahead = React.useCallback(() => {
+    setResolution(null);
+  }, []);
+  return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(ShortcutTypeahead, {
+    close: closeTypeahead,
+    resolution: resolution,
+    editor: editor,
+    options: options,
+    menuRenderFn: menuRenderFn,
+    onSelectOption: onSelectOption
+  });
+}
+
+exports.LexicalTypeaheadMenuPlugin = LexicalTypeaheadMenuPlugin;
+exports.PUNCTUATION = PUNCTUATION;
+exports.TypeaheadOption = TypeaheadOption;
+exports.useBasicTypeaheadTriggerMatch = useBasicTypeaheadTriggerMatch;

package/LexicalTypeaheadMenuPlugin.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict'
+const LexicalTypeaheadMenuPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalTypeaheadMenuPlugin.dev.js') : require('./LexicalTypeaheadMenuPlugin.prod.js')
+module.exports = LexicalTypeaheadMenuPlugin;

package/LexicalTypeaheadMenuPlugin.prod.js

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

package/package.json

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