@lexical/react/LexicalNodeMenuPlugin.prod.js

This package provides Lexical components and hooks for React applications.

/**
 * 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 e=require("@lexical/react/LexicalComposerContext"),t=require("lexical"),n=require("react"),o=require("@lexical/utils"),l=require("react/jsx-runtime");const r="startTransition";const i="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,u=i?n.useLayoutEffect:n.useEffect;const s=e=>{const t=document.getElementById("typeahead-menu");if(!t)return;const n=t.getBoundingClientRect();n.top+n.height>window.innerHeight&&t.scrollIntoView({block:"center"}),n.top<0&&t.scrollIntoView({block:"center"}),e.scrollIntoView({block:"nearest"})};function c(e,t){const n=e.getBoundingClientRect(),o=t.getBoundingClientRect();return n.top>o.top&&n.top<o.bottom}function a(t,o,l,r){const[i]=e.useLexicalComposerContext();n.useEffect((()=>{if(null!=o&&null!=t){const e=i.getRootElement(),t=null!=e?function(e,t){let n=getComputedStyle(e);const o="absolute"===n.position,l=/(auto|scroll)/;if("fixed"===n.position)return document.body;for(let t=e;t=t.parentElement;)if(n=getComputedStyle(t),(!o||"static"!==n.position)&&l.test(n.overflow+n.overflowY+n.overflowX))return t;return document.body}(e):document.body;let n=!1,u=c(o,t);const s=function(){n||(window.requestAnimationFrame((function(){l(),n=!1})),n=!0);const e=c(o,t);e!==u&&(u=e,null!=r&&r(e))},a=new ResizeObserver(l);return window.addEventListener("resize",l),document.addEventListener("scroll",s,{capture:!0,passive:!0}),a.observe(o),()=>{a.unobserve(o),window.removeEventListener("resize",l),document.removeEventListener("scroll",s,!0)}}}),[o,i,r,l,t])}const d=t.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function m({close:e,editor:l,anchorElementRef:r,resolution:i,options:c,menuRenderFn:a,onSelectOption:m,shouldSplitNodeWithQuery:f=!1,commandPriority:p=t.COMMAND_PRIORITY_LOW}){const[g,h]=n.useState(null),C=i.match&&i.match.matchingString;n.useEffect((()=>{h(0)}),[C]);const E=n.useCallback((n=>{l.update((()=>{const o=null!=i.match&&f?function(e){const n=t.$getSelection();if(!t.$isRangeSelection(n)||!n.isCollapsed())return null;const o=n.anchor;if("text"!==o.type)return null;const l=o.getNode();if(!l.isSimpleText())return null;const r=o.offset,i=l.getTextContent().slice(0,r),u=e.replaceableString.length,s=r-function(e,t,n){let o=n;for(let n=o;n<=t.length;n++)e.slice(-n)===t.substring(0,n)&&(o=n);return o}(i,e.matchingString,u);if(s<0)return null;let c;return 0===s?[c]=l.splitText(r):[,c]=l.splitText(s,r),c}(i.match):null;m(n,o,e,i.match?i.match.matchingString:"")}))}),[l,f,i.match,m,e]),y=n.useCallback((e=>{const t=l.getRootElement();null!==t&&(t.setAttribute("aria-activedescendant","typeahead-item-"+e),h(e))}),[l]);n.useEffect((()=>()=>{const e=l.getRootElement();null!==e&&e.removeAttribute("aria-activedescendant")}),[l]),u((()=>{null===c?h(null):null===g&&y(0)}),[c,g,y]),n.useEffect((()=>o.mergeRegister(l.registerCommand(d,(({option:e})=>!(!e.ref||null==e.ref.current)&&(s(e.ref.current),!0)),p))),[l,y,p]),n.useEffect((()=>o.mergeRegister(l.registerCommand(t.KEY_ARROW_DOWN_COMMAND,(e=>{const t=e;if(null!==c&&c.length&&null!==g){const e=g!==c.length-1?g+1:0;y(e);const n=c[e];null!=n.ref&&n.ref.current&&l.dispatchCommand(d,{index:e,option:n}),t.preventDefault(),t.stopImmediatePropagation()}return!0}),p),l.registerCommand(t.KEY_ARROW_UP_COMMAND,(e=>{const t=e;if(null!==c&&c.length&&null!==g){const e=0!==g?g-1:c.length-1;y(e);const n=c[e];null!=n.ref&&n.ref.current&&s(n.ref.current),t.preventDefault(),t.stopImmediatePropagation()}return!0}),p),l.registerCommand(t.KEY_ESCAPE_COMMAND,(t=>{const n=t;return n.preventDefault(),n.stopImmediatePropagation(),e(),!0}),p),l.registerCommand(t.KEY_TAB_COMMAND,(e=>{const t=e;return null!==c&&null!==g&&null!=c[g]&&(t.preventDefault(),t.stopImmediatePropagation(),E(c[g]),!0)}),p),l.registerCommand(t.KEY_ENTER_COMMAND,(e=>null!==c&&null!==g&&null!=c[g]&&(null!==e&&(e.preventDefault(),e.stopImmediatePropagation()),E(c[g]),!0)),p))),[E,e,l,c,g,y,p]);return a(r,n.useMemo((()=>({options:c,selectOptionAndCleanUp:E,selectedIndex:g,setHighlightedIndex:h})),[E,g,c]),i.match?i.match.matchingString:"")}function f(e,t){null!=t&&(e.className=t),e.setAttribute("aria-label","Typeahead menu"),e.setAttribute("role","listbox"),e.style.display="block",e.style.position="absolute"}exports.LexicalNodeMenuPlugin=function({options:o,nodeKey:u,onClose:s,onOpen:c,onSelectOption:d,menuRenderFn:p,anchorClassName:g,commandPriority:h=t.COMMAND_PRIORITY_LOW,parent:C}){const[E]=e.useLexicalComposerContext(),[y,b]=n.useState(null),R=function(t,o,l,r=(i?document.body:void 0),u=!0){const[s]=e.useLexicalComposerContext(),c=n.useRef(i?document.createElement("div"):null),d=n.useCallback((()=>{if(null===c.current||void 0===r)return;c.current.style.top=c.current.style.bottom;const e=s.getRootElement(),n=c.current,o=n.firstChild;if(null!==e&&null!==t){const{left:i,top:s,width:a,height:d}=t.getRect(),m=c.current.offsetHeight;if(n.style.top=`${s+m+3+(u?window.pageYOffset:0)}px`,n.style.left=`${i+window.pageXOffset}px`,n.style.height=`${d}px`,n.style.width=`${a}px`,null!==o){o.style.top=`${s}`;const t=o.getBoundingClientRect(),l=t.height,r=t.width,c=e.getBoundingClientRect();i+r>c.right&&(n.style.left=`${c.right-r+window.pageXOffset}px`),(s+l>window.innerHeight||s+l>c.bottom)&&s-c.top>l+d&&(n.style.top=`${s-l-d+(u?window.pageYOffset:0)}px`)}n.isConnected||(f(n,l),r.append(n)),n.setAttribute("id","typeahead-menu"),c.current=n,e.setAttribute("aria-controls","typeahead-menu")}}),[s,t,u,l,r]);n.useEffect((()=>{const e=s.getRootElement();return null!==t&&d(),()=>{null!==e&&e.removeAttribute("aria-controls");const t=c.current;null!==t&&t.isConnected&&(t.remove(),t.removeAttribute("id"))}}),[s,d,t]);const m=n.useCallback((e=>{null!==t&&(e||o(null))}),[t,o]);a(t,c.current,d,m);const p=c.current;return null!=p&&(f(p,l),null!=r&&r.append(p)),c}(y,b,g,C),w=n.useCallback((()=>{b(null),null!=s&&null!==y&&s()}),[s,y]),x=n.useCallback((e=>{b(e),null!=c&&null===y&&c(e)}),[c,y]),v=n.useCallback((()=>{u?E.update((()=>{const e=t.$getNodeByKey(u),o=E.getElementByKey(u);var l;null!=e&&null!=o&&null==y&&(l=()=>x({getRect:()=>o.getBoundingClientRect()}),r in n?n[r](l):l())})):null==u&&null!=y&&w()}),[w,E,u,x,y]);return n.useEffect((()=>{v()}),[v,u]),n.useEffect((()=>{if(null!=u)return E.registerUpdateListener((({dirtyElements:e})=>{e.get(u)&&v()}))}),[E,v,u]),null===R.current||null===y||null===E?null:l.jsx(m,{close:w,resolution:y,editor:E,anchorElementRef:R,options:o,menuRenderFn:p,onSelectOption:d,commandPriority:h})},exports.MenuOption=class{constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}};