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