@lexical/react 0.38.3-nightly.20251119.0 → 0.38.3-nightly.20251121.0

package/LexicalAutoEmbedPlugin.d.ts

@@ -7,7 +7,7 @@
  */
 import type { CommandListenerPriority, LexicalNode } from 'lexical';
 import type { JSX } from 'react';
-import { MenuOption } from '@lexical/react/LexicalNodeMenuPlugin';
+import { MenuOption, MenuRenderFn } from '@lexical/react/LexicalNodeMenuPlugin';
 import { LexicalCommand, LexicalEditor } from 'lexical';
 export type EmbedMatchResult<TEmbedMatchResult = unknown> = {
     url: string;
@@ -32,7 +32,8 @@ type LexicalAutoEmbedPluginProps<TEmbedConfig extends EmbedConfig> = {
     embedConfigs: Array<TEmbedConfig>;
     onOpenEmbedModalForConfig: (embedConfig: TEmbedConfig) => void;
     getMenuOptions: (activeEmbedConfig: TEmbedConfig, embedFn: () => void, dismissFn: () => void) => Array<AutoEmbedOption>;
+    menuRenderFn: MenuRenderFn<AutoEmbedOption>;
     menuCommandPriority?: CommandListenerPriority;
 };
-export declare function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>({ embedConfigs, onOpenEmbedModalForConfig, getMenuOptions, menuCommandPriority, }: LexicalAutoEmbedPluginProps<TEmbedConfig>): JSX.Element | null;
+export declare function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>({ embedConfigs, onOpenEmbedModalForConfig, getMenuOptions, menuRenderFn, menuCommandPriority, }: LexicalAutoEmbedPluginProps<TEmbedConfig>): JSX.Element | null;
 export {};

package/LexicalAutoEmbedPlugin.dev.js

@@ -39,6 +39,7 @@ function LexicalAutoEmbedPlugin({
   embedConfigs,
   onOpenEmbedModalForConfig,
   getMenuOptions,
+  menuRenderFn,
   menuCommandPriority = lexical.COMMAND_PRIORITY_LOW
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
@@ -134,6 +135,7 @@ function LexicalAutoEmbedPlugin({
     onClose: reset,
     onSelectOption: onSelectOption,
     options: options,
+    menuRenderFn: menuRenderFn,
     commandPriority: menuCommandPriority
   }) : null;
 }

package/LexicalAutoEmbedPlugin.dev.mjs

@@ -37,6 +37,7 @@ function LexicalAutoEmbedPlugin({
   embedConfigs,
   onOpenEmbedModalForConfig,
   getMenuOptions,
+  menuRenderFn,
   menuCommandPriority = COMMAND_PRIORITY_LOW
 }) {
   const [editor] = useLexicalComposerContext();
@@ -132,6 +133,7 @@ function LexicalAutoEmbedPlugin({
     onClose: reset,
     onSelectOption: onSelectOption,
     options: options,
+    menuRenderFn: menuRenderFn,
     commandPriority: menuCommandPriority
   }) : null;
 }

package/LexicalAutoEmbedPlugin.js.flow

@@ -13,6 +13,7 @@ import {MenuOption} from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import type {LexicalCommand, LexicalEditor, NodeKey, TextNode} from 'lexical';
 import * as React from 'react';
 import {createCommand} from 'lexical';
+import type {MenuRenderFn} from './LexicalTypeaheadMenuPlugin';
 
 export type EmbedMatchResult = {
   url: string,
@@ -42,6 +43,7 @@ type LexicalAutoEmbedPluginProps<TEmbedConfig> = {
     embedFn: () => void,
     dismissFn: () => void,
   ) => Array<AutoEmbedOption>,
+  menuRenderFn: MenuRenderFn<AutoEmbedOption>,
 };
 
 declare export class AutoEmbedOption extends MenuOption {

package/LexicalAutoEmbedPlugin.prod.js

@@ -6,4 +6,4 @@
  *
  */
 
-"use strict";var e=require("@lexical/link"),t=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/react/LexicalNodeMenuPlugin"),o=require("@lexical/utils"),i=require("lexical"),l=require("react"),r=require("react/jsx-runtime");const s=i.createCommand("INSERT_EMBED_COMMAND");class a extends n.MenuOption{title;onSelect;constructor(e,t){super(e),this.title=e,this.onSelect=t.onSelect.bind(this)}}exports.AutoEmbedOption=a,exports.INSERT_EMBED_COMMAND=s,exports.LexicalAutoEmbedPlugin=function({embedConfigs:a,onOpenEmbedModalForConfig:u,getMenuOptions:c,menuCommandPriority:d=i.COMMAND_PRIORITY_LOW}){const[m]=t.useLexicalComposerContext(),[p,x]=l.useState(null),[C,f]=l.useState(null),M=l.useCallback(()=>{x(null),f(null)},[]),g=l.useCallback(async t=>{const n=m.getEditorState().read(function(){const n=i.$getNodeByKey(t);if(e.$isLinkNode(n))return n.getURL()});if(void 0!==n)for(const e of a){null!=await Promise.resolve(e.parseUrl(n))&&(f(e),x(t))}},[m,a]);l.useEffect(()=>o.mergeRegister(...[e.LinkNode,e.AutoLinkNode].map(e=>m.registerMutationListener(e,(...e)=>((e,{updateTags:t,dirtyLeaves:n})=>{for(const[o,l]of e)"created"===l&&t.has(i.PASTE_TAG)&&n.size<=3?g(o):o===p&&M()})(...e),{skipInitialization:!0}))),[g,m,a,p,M]),l.useEffect(()=>m.registerCommand(s,e=>{const t=a.find(({type:t})=>t===e);return!!t&&(u(t),!0)},i.COMMAND_PRIORITY_EDITOR),[m,a,u]);const E=l.useCallback(async function(){if(null!=C&&null!=p){const t=m.getEditorState().read(()=>{const t=i.$getNodeByKey(p);return e.$isLinkNode(t)?t:null});if(e.$isLinkNode(t)){const e=await Promise.resolve(C.parseUrl(t.__url));null!=e&&m.update(()=>{i.$getSelection()||t.selectEnd(),C.insertNode(m,e),t.isAttached()&&t.remove()})}}},[C,m,p]),N=l.useMemo(()=>null!=C&&null!=p?c(C,E,M):[],[C,E,c,p,M]),L=l.useCallback((e,t,n)=>{m.update(()=>{e.onSelect(t),n()})},[m]);return null!=p?r.jsx(n.LexicalNodeMenuPlugin,{nodeKey:p,onClose:M,onSelectOption:L,options:N,commandPriority:d}):null},exports.URL_MATCHER=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+"use strict";var e=require("@lexical/link"),t=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/react/LexicalNodeMenuPlugin"),o=require("@lexical/utils"),i=require("lexical"),l=require("react"),r=require("react/jsx-runtime");const s=i.createCommand("INSERT_EMBED_COMMAND");class u extends n.MenuOption{title;onSelect;constructor(e,t){super(e),this.title=e,this.onSelect=t.onSelect.bind(this)}}exports.AutoEmbedOption=u,exports.INSERT_EMBED_COMMAND=s,exports.LexicalAutoEmbedPlugin=function({embedConfigs:u,onOpenEmbedModalForConfig:a,getMenuOptions:c,menuRenderFn:d,menuCommandPriority:m=i.COMMAND_PRIORITY_LOW}){const[p]=t.useLexicalComposerContext(),[x,C]=l.useState(null),[f,M]=l.useState(null),g=l.useCallback(()=>{C(null),M(null)},[]),E=l.useCallback(async t=>{const n=p.getEditorState().read(function(){const n=i.$getNodeByKey(t);if(e.$isLinkNode(n))return n.getURL()});if(void 0!==n)for(const e of u){null!=await Promise.resolve(e.parseUrl(n))&&(M(e),C(t))}},[p,u]);l.useEffect(()=>o.mergeRegister(...[e.LinkNode,e.AutoLinkNode].map(e=>p.registerMutationListener(e,(...e)=>((e,{updateTags:t,dirtyLeaves:n})=>{for(const[o,l]of e)"created"===l&&t.has(i.PASTE_TAG)&&n.size<=3?E(o):o===x&&g()})(...e),{skipInitialization:!0}))),[E,p,u,x,g]),l.useEffect(()=>p.registerCommand(s,e=>{const t=u.find(({type:t})=>t===e);return!!t&&(a(t),!0)},i.COMMAND_PRIORITY_EDITOR),[p,u,a]);const N=l.useCallback(async function(){if(null!=f&&null!=x){const t=p.getEditorState().read(()=>{const t=i.$getNodeByKey(x);return e.$isLinkNode(t)?t:null});if(e.$isLinkNode(t)){const e=await Promise.resolve(f.parseUrl(t.__url));null!=e&&p.update(()=>{i.$getSelection()||t.selectEnd(),f.insertNode(p,e),t.isAttached()&&t.remove()})}}},[f,p,x]),L=l.useMemo(()=>null!=f&&null!=x?c(f,N,g):[],[f,N,c,x,g]),A=l.useCallback((e,t,n)=>{p.update(()=>{e.onSelect(t),n()})},[p]);return null!=x?r.jsx(n.LexicalNodeMenuPlugin,{nodeKey:x,onClose:g,onSelectOption:A,options:L,menuRenderFn:d,commandPriority:m}):null},exports.URL_MATCHER=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;

package/LexicalAutoEmbedPlugin.prod.mjs

@@ -6,4 +6,4 @@
  *
  */
 
-import{$isLinkNode as t,LinkNode as e,AutoLinkNode as o}from"@lexical/link";import{useLexicalComposerContext as n}from"@lexical/react/LexicalComposerContext";import{MenuOption as i,LexicalNodeMenuPlugin as r}from"@lexical/react/LexicalNodeMenuPlugin";import{mergeRegister as l}from"@lexical/utils";import{createCommand as s,$getNodeByKey as a,COMMAND_PRIORITY_EDITOR as c,$getSelection as u,COMMAND_PRIORITY_LOW as m,PASTE_TAG as d}from"lexical";import{useState as p,useCallback as f,useEffect as x,useMemo as g}from"react";import{jsx as w}from"react/jsx-runtime";const C=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/,S=s("INSERT_EMBED_COMMAND");class y extends i{title;onSelect;constructor(t,e){super(t),this.title=t,this.onSelect=e.onSelect.bind(this)}}function E({embedConfigs:i,onOpenEmbedModalForConfig:s,getMenuOptions:C,menuCommandPriority:y=m}){const[E]=n(),[M,h]=p(null),[_,v]=p(null),z=f(()=>{h(null),v(null)},[]),A=f(async e=>{const o=E.getEditorState().read(function(){const o=a(e);if(t(o))return o.getURL()});if(void 0!==o)for(const t of i){null!=await Promise.resolve(t.parseUrl(o))&&(v(t),h(e))}},[E,i]);x(()=>l(...[e,o].map(t=>E.registerMutationListener(t,(...t)=>((t,{updateTags:e,dirtyLeaves:o})=>{for(const[n,i]of t)"created"===i&&e.has(d)&&o.size<=3?A(n):n===M&&z()})(...t),{skipInitialization:!0}))),[A,E,i,M,z]),x(()=>E.registerCommand(S,t=>{const e=i.find(({type:e})=>e===t);return!!e&&(s(e),!0)},c),[E,i,s]);const L=f(async function(){if(null!=_&&null!=M){const e=E.getEditorState().read(()=>{const e=a(M);return t(e)?e:null});if(t(e)){const t=await Promise.resolve(_.parseUrl(e.__url));null!=t&&E.update(()=>{u()||e.selectEnd(),_.insertNode(E,t),e.isAttached()&&e.remove()})}}},[_,E,M]),P=g(()=>null!=_&&null!=M?C(_,L,z):[],[_,L,C,M,z]),b=f((t,e,o)=>{E.update(()=>{t.onSelect(e),o()})},[E]);return null!=M?w(r,{nodeKey:M,onClose:z,onSelectOption:b,options:P,commandPriority:y}):null}export{y as AutoEmbedOption,S as INSERT_EMBED_COMMAND,E as LexicalAutoEmbedPlugin,C as URL_MATCHER};
+import{$isLinkNode as e,LinkNode as t,AutoLinkNode as n}from"@lexical/link";import{useLexicalComposerContext as o}from"@lexical/react/LexicalComposerContext";import{MenuOption as r,LexicalNodeMenuPlugin as i}from"@lexical/react/LexicalNodeMenuPlugin";import{mergeRegister as l}from"@lexical/utils";import{createCommand as s,$getNodeByKey as a,COMMAND_PRIORITY_EDITOR as c,$getSelection as u,COMMAND_PRIORITY_LOW as m,PASTE_TAG as d}from"lexical";import{useState as p,useCallback as f,useEffect as x,useMemo as g}from"react";import{jsx as w}from"react/jsx-runtime";const C=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/,S=s("INSERT_EMBED_COMMAND");class y extends r{title;onSelect;constructor(e,t){super(e),this.title=e,this.onSelect=t.onSelect.bind(this)}}function E({embedConfigs:r,onOpenEmbedModalForConfig:s,getMenuOptions:C,menuRenderFn:y,menuCommandPriority:E=m}){const[M]=o(),[h,_]=p(null),[v,z]=p(null),A=f(()=>{_(null),z(null)},[]),L=f(async t=>{const n=M.getEditorState().read(function(){const n=a(t);if(e(n))return n.getURL()});if(void 0!==n)for(const e of r){null!=await Promise.resolve(e.parseUrl(n))&&(z(e),_(t))}},[M,r]);x(()=>l(...[t,n].map(e=>M.registerMutationListener(e,(...e)=>((e,{updateTags:t,dirtyLeaves:n})=>{for(const[o,r]of e)"created"===r&&t.has(d)&&n.size<=3?L(o):o===h&&A()})(...e),{skipInitialization:!0}))),[L,M,r,h,A]),x(()=>M.registerCommand(S,e=>{const t=r.find(({type:t})=>t===e);return!!t&&(s(t),!0)},c),[M,r,s]);const P=f(async function(){if(null!=v&&null!=h){const t=M.getEditorState().read(()=>{const t=a(h);return e(t)?t:null});if(e(t)){const e=await Promise.resolve(v.parseUrl(t.__url));null!=e&&M.update(()=>{u()||t.selectEnd(),v.insertNode(M,e),t.isAttached()&&t.remove()})}}},[v,M,h]),b=g(()=>null!=v&&null!=h?C(v,P,A):[],[v,P,C,h,A]),N=f((e,t,n)=>{M.update(()=>{e.onSelect(t),n()})},[M]);return null!=h?w(i,{nodeKey:h,onClose:A,onSelectOption:N,options:b,menuRenderFn:y,commandPriority:E}):null}export{y as AutoEmbedOption,S as INSERT_EMBED_COMMAND,E as LexicalAutoEmbedPlugin,C as URL_MATCHER};

package/LexicalContextMenuPlugin.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 { MenuRenderFn, MenuResolution } from './shared/LexicalMenu';
+import type { JSX } from 'react';
+import { CommandListenerPriority, LexicalNode } from 'lexical';
+import { ReactPortal, RefObject } from 'react';
+import { MenuOption } from './shared/LexicalMenu';
+export type ContextMenuRenderFn<TOption extends MenuOption> = (anchorElementRef: RefObject<HTMLElement | null>, itemProps: {
+    selectedIndex: number | null;
+    selectOptionAndCleanUp: (option: TOption) => void;
+    setHighlightedIndex: (index: number) => void;
+    options: Array<TOption>;
+}, menuProps: {
+    setMenuRef: (element: HTMLElement | null) => void;
+}) => ReactPortal | JSX.Element | null;
+export type LexicalContextMenuPluginProps<TOption extends MenuOption> = {
+    onSelectOption: (option: TOption, textNodeContainingQuery: LexicalNode | null, closeMenu: () => void, matchingString: string) => void;
+    options: Array<TOption>;
+    onClose?: () => void;
+    onWillOpen?: (event: MouseEvent) => void;
+    onOpen?: (resolution: MenuResolution) => void;
+    menuRenderFn: ContextMenuRenderFn<TOption>;
+    anchorClassName?: string;
+    commandPriority?: CommandListenerPriority;
+    parent?: HTMLElement;
+};
+/**
+ * @deprecated Use LexicalNodeContextMenuPlugin instead.
+ */
+export declare function LexicalContextMenuPlugin<TOption extends MenuOption>({ options, onWillOpen, onClose, onOpen, onSelectOption, menuRenderFn: contextMenuRenderFn, anchorClassName, commandPriority, parent, }: LexicalContextMenuPluginProps<TOption>): JSX.Element | null;
+export { MenuOption, MenuRenderFn, MenuResolution };

package/LexicalContextMenuPlugin.dev.js

@@ -0,0 +1,524 @@
+/**
+ * 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');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    for (var k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(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.
+ *
+ */
+
+
+// This workaround is no longer necessary in React 19,
+// but we currently support React >=17.x
+// https://github.com/facebook/react/pull/26395
+const useLayoutEffectImpl = CAN_USE_DOM ? React.useLayoutEffect : React.useEffect;
+
+/**
+ * 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.
+ *
+ */
+
+class MenuOption {
+  key;
+  ref;
+  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 typeaheadContainerNode = document.getElementById('typeahead-menu');
+  if (!typeaheadContainerNode) {
+    return;
+  }
+  const typeaheadRect = typeaheadContainerNode.getBoundingClientRect();
+  if (typeaheadRect.top + typeaheadRect.height > window.innerHeight) {
+    typeaheadContainerNode.scrollIntoView({
+      block: 'center'
+    });
+  }
+  if (typeaheadRect.top < 0) {
+    typeaheadContainerNode.scrollIntoView({
+      block: 'center'
+    });
+  }
+  target.scrollIntoView({
+    block: 'nearest'
+  });
+};
+
+/**
+ * Walk backwards along user input and forward through entity title to try
+ * and replace more of the user's text with entity.
+ */
+function getFullMatchOffset(documentText, entryText, offset) {
+  let triggerOffset = offset;
+  for (let i = triggerOffset; i <= entryText.length; i++) {
+    if (documentText.slice(-i) === entryText.substring(0, i)) {
+      triggerOffset = i;
+    }
+  }
+  return triggerOffset;
+}
+
+/**
+ * Split Lexical TextNode and return a new TextNode only containing matched text.
+ * Common use cases include: removing the node, replacing with a new node.
+ */
+function $splitNodeContainingQuery(match) {
+  const selection = lexical.$getSelection();
+  if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed()) {
+    return null;
+  }
+  const anchor = selection.anchor;
+  if (anchor.type !== 'text') {
+    return null;
+  }
+  const anchorNode = anchor.getNode();
+  if (!anchorNode.isSimpleText()) {
+    return null;
+  }
+  const selectionOffset = anchor.offset;
+  const textContent = anchorNode.getTextContent().slice(0, selectionOffset);
+  const characterOffset = match.replaceableString.length;
+  const queryOffset = getFullMatchOffset(textContent, match.matchingString, characterOffset);
+  const startOffset = selectionOffset - queryOffset;
+  if (startOffset < 0) {
+    return null;
+  }
+  let newNode;
+  if (startOffset === 0) {
+    [newNode] = anchorNode.splitText(selectionOffset);
+  } else {
+    [, newNode] = anchorNode.splitText(startOffset, selectionOffset);
+  }
+  return newNode;
+}
+
+// Got from https://stackoverflow.com/a/42543908/2013580
+function getScrollParent(element, includeHidden) {
+  let style = getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRegex = /(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();
+  const VISIBILITY_MARGIN_PX = 6;
+  return tRect.top >= cRect.top - VISIBILITY_MARGIN_PX && tRect.top <= cRect.bottom + VISIBILITY_MARGIN_PX;
+}
+
+// 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) : 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, true);
+      };
+    }
+  }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
+}
+const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND = lexical.createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
+function LexicalMenu({
+  close,
+  editor,
+  anchorElementRef,
+  resolution,
+  options,
+  menuRenderFn,
+  onSelectOption,
+  shouldSplitNodeWithQuery = false,
+  commandPriority = lexical.COMMAND_PRIORITY_LOW,
+  preselectFirstItem = true
+}) {
+  const [rawSelectedIndex, setHighlightedIndex] = React.useState(null);
+  // Clamp highlighted index if options list shrinks
+  const selectedIndex = rawSelectedIndex !== null ? Math.min(options.length - 1, rawSelectedIndex) : null;
+  const matchingString = resolution.match && resolution.match.matchingString;
+  React.useEffect(() => {
+    if (preselectFirstItem) {
+      setHighlightedIndex(0);
+    }
+  }, [matchingString, preselectFirstItem]);
+  const selectOptionAndCleanUp = React.useCallback(selectedEntry => {
+    editor.update(() => {
+      const textNodeContainingQuery = resolution.match != null && shouldSplitNodeWithQuery ? $splitNodeContainingQuery(resolution.match) : null;
+      onSelectOption(selectedEntry, textNodeContainingQuery, close, resolution.match ? resolution.match.matchingString : '');
+    });
+  }, [editor, shouldSplitNodeWithQuery, resolution.match, onSelectOption, close]);
+  const updateSelectedIndex = React.useCallback(index => {
+    const rootElem = editor.getRootElement();
+    if (rootElem !== null) {
+      rootElem.setAttribute('aria-activedescendant', 'typeahead-item-' + index);
+      setHighlightedIndex(index);
+    }
+  }, [editor]);
+  React.useEffect(() => {
+    return () => {
+      const rootElem = editor.getRootElement();
+      if (rootElem !== null) {
+        rootElem.removeAttribute('aria-activedescendant');
+      }
+    };
+  }, [editor]);
+  useLayoutEffectImpl(() => {
+    if (options === null) {
+      setHighlightedIndex(null);
+    } else if (selectedIndex === null && preselectFirstItem) {
+      updateSelectedIndex(0);
+    }
+  }, [options, selectedIndex, updateSelectedIndex, preselectFirstItem]);
+  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;
+    }, commandPriority));
+  }, [editor, updateSelectedIndex, commandPriority]);
+  React.useEffect(() => {
+    return utils.mergeRegister(editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, payload => {
+      const event = payload;
+      if (options !== null && options.length) {
+        const newSelectedIndex = selectedIndex === null ? 0 : selectedIndex !== options.length - 1 ? selectedIndex + 1 : 0;
+        updateSelectedIndex(newSelectedIndex);
+        const option = options[newSelectedIndex];
+        if (!option) {
+          updateSelectedIndex(-1);
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          return true;
+        }
+        if (option.ref && option.ref.current) {
+          editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
+            index: newSelectedIndex,
+            option
+          });
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+      return true;
+    }, commandPriority), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => {
+      const event = payload;
+      if (options !== null && options.length) {
+        const newSelectedIndex = selectedIndex === null ? options.length - 1 : selectedIndex !== 0 ? selectedIndex - 1 : options.length - 1;
+        updateSelectedIndex(newSelectedIndex);
+        const option = options[newSelectedIndex];
+        if (!option) {
+          updateSelectedIndex(-1);
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          return true;
+        }
+        if (option.ref && option.ref.current) {
+          scrollIntoViewIfNeeded(option.ref.current);
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+      return true;
+    }, commandPriority), editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, payload => {
+      const event = payload;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      close();
+      return true;
+    }, commandPriority), editor.registerCommand(lexical.KEY_TAB_COMMAND, payload => {
+      const event = payload;
+      if (options === null || selectedIndex === null || options[selectedIndex] == null) {
+        return false;
+      }
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      selectOptionAndCleanUp(options[selectedIndex]);
+      return true;
+    }, commandPriority), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
+      if (options === null || selectedIndex === null || options[selectedIndex] == null) {
+        return false;
+      }
+      if (event !== null) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+      selectOptionAndCleanUp(options[selectedIndex]);
+      return true;
+    }, commandPriority));
+  }, [selectOptionAndCleanUp, close, editor, options, selectedIndex, updateSelectedIndex, commandPriority]);
+  const listItemProps = React.useMemo(() => ({
+    options,
+    selectOptionAndCleanUp,
+    selectedIndex,
+    setHighlightedIndex
+  }), [selectOptionAndCleanUp, selectedIndex, options]);
+  return menuRenderFn(anchorElementRef, listItemProps, resolution.match ? resolution.match.matchingString : '');
+}
+function setContainerDivAttributes(containerDiv, className) {
+  if (className != null) {
+    containerDiv.className = className;
+  }
+  containerDiv.setAttribute('aria-label', 'Typeahead menu');
+  containerDiv.setAttribute('role', 'listbox');
+  containerDiv.style.display = 'block';
+  containerDiv.style.position = 'absolute';
+}
+function useMenuAnchorRef(resolution, setResolution, className, parent = CAN_USE_DOM ? document.body : undefined, shouldIncludePageYOffset__EXPERIMENTAL = true) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const initialAnchorElement = CAN_USE_DOM ? document.createElement('div') : null;
+  const anchorElementRef = React.useRef(initialAnchorElement);
+  const positionMenu = React.useCallback(() => {
+    if (anchorElementRef.current === null || parent === undefined) {
+      return;
+    }
+    anchorElementRef.current.style.top = anchorElementRef.current.style.bottom;
+    const rootElement = editor.getRootElement();
+    const containerDiv = anchorElementRef.current;
+    const menuEle = containerDiv.firstChild;
+    if (rootElement !== null && resolution !== null) {
+      const {
+        left,
+        top,
+        width,
+        height
+      } = resolution.getRect();
+      const anchorHeight = anchorElementRef.current.offsetHeight; // use to position under anchor
+      containerDiv.style.top = `${top + anchorHeight + 3 + (shouldIncludePageYOffset__EXPERIMENTAL ? window.pageYOffset : 0)}px`;
+      containerDiv.style.left = `${left + window.pageXOffset}px`;
+      containerDiv.style.height = `${height}px`;
+      containerDiv.style.width = `${width}px`;
+      if (menuEle !== null) {
+        menuEle.style.top = `${top}`;
+        const menuRect = menuEle.getBoundingClientRect();
+        const menuHeight = menuRect.height;
+        const menuWidth = menuRect.width;
+        const rootElementRect = rootElement.getBoundingClientRect();
+        if (left + menuWidth > rootElementRect.right) {
+          containerDiv.style.left = `${rootElementRect.right - menuWidth + window.pageXOffset}px`;
+        }
+        if ((top + menuHeight > window.innerHeight || top + menuHeight > rootElementRect.bottom) && top - rootElementRect.top > menuHeight + height) {
+          containerDiv.style.top = `${top - menuHeight - height + (shouldIncludePageYOffset__EXPERIMENTAL ? window.pageYOffset : 0)}px`;
+        }
+      }
+      if (!containerDiv.isConnected) {
+        setContainerDivAttributes(containerDiv, className);
+        parent.append(containerDiv);
+      }
+      containerDiv.setAttribute('id', 'typeahead-menu');
+      rootElement.setAttribute('aria-controls', 'typeahead-menu');
+    }
+  }, [editor, resolution, shouldIncludePageYOffset__EXPERIMENTAL, className, parent]);
+  React.useEffect(() => {
+    const rootElement = editor.getRootElement();
+    if (resolution !== null) {
+      positionMenu();
+    }
+    return () => {
+      if (rootElement !== null) {
+        rootElement.removeAttribute('aria-controls');
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const containerDiv = anchorElementRef.current;
+      if (containerDiv !== null && containerDiv.isConnected) {
+        containerDiv.remove();
+        containerDiv.removeAttribute('id');
+      }
+    };
+  }, [editor, positionMenu, resolution]);
+  const onVisibilityChange = React.useCallback(isInView => {
+    if (resolution !== null) {
+      if (!isInView) {
+        setResolution(null);
+      }
+    }
+  }, [resolution, setResolution]);
+  useDynamicPositioning(resolution, anchorElementRef.current, positionMenu, onVisibilityChange);
+
+  // Append the context for the menu immediately
+  if (initialAnchorElement != null && initialAnchorElement === anchorElementRef.current) {
+    setContainerDivAttributes(initialAnchorElement, className);
+    if (parent != null) {
+      parent.append(initialAnchorElement);
+    }
+  }
+  return anchorElementRef;
+}
+
+/**
+ * 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 PRE_PORTAL_DIV_SIZE = 1;
+
+/**
+ * @deprecated Use LexicalNodeContextMenuPlugin instead.
+ */
+function LexicalContextMenuPlugin({
+  options,
+  onWillOpen,
+  onClose,
+  onOpen,
+  onSelectOption,
+  menuRenderFn: contextMenuRenderFn,
+  anchorClassName,
+  commandPriority = lexical.COMMAND_PRIORITY_LOW,
+  parent
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [resolution, setResolution] = React.useState(null);
+  const menuRef = React__namespace.useRef(null);
+  const anchorElementRef = useMenuAnchorRef(resolution, setResolution, anchorClassName, parent);
+  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]);
+  const handleContextMenu = React.useCallback(event => {
+    event.preventDefault();
+    if (onWillOpen != null) {
+      onWillOpen(event);
+    }
+    const zoom = utils.calculateZoomLevel(event.target);
+    openNodeMenu({
+      getRect: () => new DOMRect(event.clientX / zoom, event.clientY / zoom, PRE_PORTAL_DIV_SIZE, PRE_PORTAL_DIV_SIZE)
+    });
+  }, [openNodeMenu, onWillOpen]);
+  const handleClick = React.useCallback(event => {
+    if (resolution !== null && menuRef.current != null && event.target != null && lexical.isDOMNode(event.target) && !menuRef.current.contains(event.target)) {
+      closeNodeMenu();
+    }
+  }, [closeNodeMenu, resolution]);
+  React.useEffect(() => {
+    const editorElement = editor.getRootElement();
+    if (editorElement) {
+      editorElement.addEventListener('contextmenu', handleContextMenu);
+      return () => editorElement.removeEventListener('contextmenu', handleContextMenu);
+    }
+  }, [editor, handleContextMenu]);
+  React.useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, [editor, handleClick]);
+  return anchorElementRef.current === null || resolution === null || editor === null ? null : /*#__PURE__*/jsxRuntime.jsx(LexicalMenu, {
+    close: closeNodeMenu,
+    resolution: resolution,
+    editor: editor,
+    anchorElementRef: anchorElementRef,
+    options: options,
+    menuRenderFn: (anchorRef, itemProps) => contextMenuRenderFn(anchorRef, itemProps, {
+      setMenuRef: ref => {
+        menuRef.current = ref;
+      }
+    }),
+    onSelectOption: onSelectOption,
+    commandPriority: commandPriority
+  });
+}
+
+exports.LexicalContextMenuPlugin = LexicalContextMenuPlugin;
+exports.MenuOption = MenuOption;