@lexical/react/LexicalNodeMenuPlugin.prod.mjs

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.
 *
 */

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