@lexical/react
Version:
This package provides Lexical components and hooks for React applications.
10 lines (8 loc) • 8.87 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 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,s=i?n.useLayoutEffect:n.useEffect;const u=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,s=c(o,t);const u=function(){n||(window.requestAnimationFrame((function(){l(),n=!1})),n=!0);const e=c(o,t);e!==s&&(s=e,null!=r&&r(e))},a=new ResizeObserver(l);return window.addEventListener("resize",l),document.addEventListener("scroll",u,{capture:!0,passive:!0}),a.observe(o),()=>{a.unobserve(o),window.removeEventListener("resize",l),document.removeEventListener("scroll",u,!0)}}}),[o,i,r,l,t])}const d=t.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function f({close:e,editor:l,anchorElementRef:r,resolution:i,options:c,menuRenderFn:a,onSelectOption:f,shouldSplitNodeWithQuery:m=!1,commandPriority:g=t.COMMAND_PRIORITY_LOW,preselectFirstItem:p=!0}){const[h,C]=n.useState(null),E=i.match&&i.match.matchingString;n.useEffect((()=>{p&&C(0)}),[E,p]);const x=n.useCallback((n=>{l.update((()=>{const o=null!=i.match&&m?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),s=e.replaceableString.length,u=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,s);if(u<0)return null;let c;return 0===u?[c]=l.splitText(r):[,c]=l.splitText(u,r),c}(i.match):null;f(n,o,e,i.match?i.match.matchingString:"")}))}),[l,m,i.match,f,e]),O=n.useCallback((e=>{const t=l.getRootElement();null!==t&&(t.setAttribute("aria-activedescendant","typeahead-item-"+e),C(e))}),[l]);n.useEffect((()=>()=>{const e=l.getRootElement();null!==e&&e.removeAttribute("aria-activedescendant")}),[l]),s((()=>{null===c?C(null):null===h&&p&&O(0)}),[c,h,O,p]),n.useEffect((()=>o.mergeRegister(l.registerCommand(d,(({option:e})=>!(!e.ref||null==e.ref.current)&&(u(e.ref.current),!0)),g))),[l,O,g]),n.useEffect((()=>o.mergeRegister(l.registerCommand(t.KEY_ARROW_DOWN_COMMAND,(e=>{const t=e;if(null!==c&&c.length){const e=null===h?0:h!==c.length-1?h+1:0;O(e);const n=c[e];null!=n.ref&&n.ref.current&&l.dispatchCommand(d,{index:e,option:n}),t.preventDefault(),t.stopImmediatePropagation()}return!0}),g),l.registerCommand(t.KEY_ARROW_UP_COMMAND,(e=>{const t=e;if(null!==c&&c.length){const e=null===h?c.length-1:0!==h?h-1:c.length-1;O(e);const n=c[e];null!=n.ref&&n.ref.current&&u(n.ref.current),t.preventDefault(),t.stopImmediatePropagation()}return!0}),g),l.registerCommand(t.KEY_ESCAPE_COMMAND,(t=>{const n=t;return n.preventDefault(),n.stopImmediatePropagation(),e(),!0}),g),l.registerCommand(t.KEY_TAB_COMMAND,(e=>{const t=e;return null!==c&&null!==h&&null!=c[h]&&(t.preventDefault(),t.stopImmediatePropagation(),x(c[h]),!0)}),g),l.registerCommand(t.KEY_ENTER_COMMAND,(e=>null!==c&&null!==h&&null!=c[h]&&(null!==e&&(e.preventDefault(),e.stopImmediatePropagation()),x(c[h]),!0)),g))),[x,e,l,c,h,O,g]);return a(r,n.useMemo((()=>({options:c,selectOptionAndCleanUp:x,selectedIndex:h,setHighlightedIndex:C})),[x,h,c]),i.match?i.match.matchingString:"")}function m(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"}const g="\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";const p=t.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");exports.LexicalTypeaheadMenuPlugin=function({options:o,onQueryChange:s,onSelectOption:u,onOpen:c,onClose:d,menuRenderFn:g,triggerFn:p,anchorClassName:h,commandPriority:C=t.COMMAND_PRIORITY_LOW,parent:E,preselectFirstItem:x=!0}){const[O]=e.useLexicalComposerContext(),[y,b]=n.useState(null),R=function(t,o,l,r=(i?document.body:void 0),s=!0){const[u]=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=u.getRootElement(),n=c.current,o=n.firstChild;if(null!==e&&null!==t){const{left:i,top:u,width:a,height:d}=t.getRect(),f=c.current.offsetHeight;if(n.style.top=`${u+f+3+(s?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=`${u}`;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`),(u+l>window.innerHeight||u+l>c.bottom)&&u-c.top>l+d&&(n.style.top=`${u-l-d+(s?window.pageYOffset:0)}px`)}n.isConnected||(m(n,l),r.append(n)),n.setAttribute("id","typeahead-menu"),c.current=n,e.setAttribute("aria-controls","typeahead-menu")}}),[u,t,s,l,r]);n.useEffect((()=>{const e=u.getRootElement();return null!==t&&d(),()=>{null!==e&&e.removeAttribute("aria-controls");const t=c.current;null!==t&&t.isConnected&&(t.remove(),t.removeAttribute("id"))}}),[u,d,t]);const f=n.useCallback((e=>{null!==t&&(e||o(null))}),[t,o]);a(t,c.current,d,f);const g=c.current;return null!=g&&(m(g,l),null!=r&&r.append(g)),c}(y,b,h,E),w=n.useCallback((()=>{b(null),null!=d&&null!==y&&d()}),[d,y]),S=n.useCallback((e=>{b(e),null!=c&&null===y&&c(e)}),[c,y]);return n.useEffect((()=>{const e=O.registerUpdateListener((()=>{O.getEditorState().read((()=>{if(!O.isEditable())return void w();const e=O._window||window,o=e.document.createRange(),l=t.$getSelection(),i=function(e){let n=null;return e.getEditorState().read((()=>{const e=t.$getSelection();t.$isRangeSelection(e)&&(n=function(e){const t=e.anchor;if("text"!==t.type)return null;const n=t.getNode();if(!n.isSimpleText())return null;const o=t.offset;return n.getTextContent().slice(0,o)}(e))})),n}(O);if(!t.$isRangeSelection(l)||!l.isCollapsed()||null===i||null===o)return void w();const u=p(i,O);if(s(u?u.matchingString:null),null!==u&&!function(e,n){return 0===n&&e.getEditorState().read((()=>{const e=t.$getSelection();if(t.$isRangeSelection(e)){const n=e.anchor.getNode().getPreviousSibling();return t.$isTextNode(n)&&n.isTextEntity()}return!1}))}(O,u.leadOffset)){const l=function(e,n,o){const l=t.getDOMSelection(o);if(null===l||!l.isCollapsed)return!1;const r=l.anchorNode,i=e,s=l.anchorOffset;if(null==r||null==s)return!1;try{n.setStart(r,i),n.setEnd(r,s)}catch(e){return!1}return!0}(u.leadOffset,o,e);if(null!==l)return c=()=>S({getRect:()=>o.getBoundingClientRect(),match:u}),void(r in n?n[r](c):c())}var c;w()}))}));return()=>{e()}}),[O,p,s,y,w,S]),n.useEffect((()=>O.registerEditableListener((e=>{e||w()}))),[O,w]),null===y||null===O||null===R.current?null:l.jsx(f,{close:w,resolution:y,editor:O,anchorElementRef:R,options:o,menuRenderFn:g,shouldSplitNodeWithQuery:!0,onSelectOption:u,commandPriority:C,preselectFirstItem:x})},exports.MenuOption=class{constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}},exports.PUNCTUATION=g,exports.SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND=p,exports.getScrollParent=function(e,t){let n=getComputedStyle(e);const o="absolute"===n.position,l=t?/(auto|scroll|hidden)/:/(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},exports.useBasicTypeaheadTriggerMatch=function(e,{minLength:t=1,maxLength:o=75}){return n.useCallback((n=>{const l=new RegExp("(^|\\s|\\()(["+e+"]((?:"+("[^"+e+g+"\\s]")+"){0,"+o+"}))$").exec(n);if(null!==l){const e=l[1],n=l[3];if(n.length>=t)return{leadOffset:l.index+e.length,matchingString:n,replaceableString:l[2]}}return null}),[o,t,e])},exports.useDynamicPositioning=a;