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