UNPKG

@lexical/react

Version:

This package provides Lexical components and hooks for React applications.

github.com/facebook/lexical

facebook/lexical

10 lines (8 loc) • 7.33 kB
1
2
3
4
5
6
7
8
9
10
/** * 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/utils"),n=require("lexical"),o=require("react"),l=require("react/jsx-runtime");function r(e){var t=Object.create(null);if(e)for(var n in e)t[n]=e[n];return t.default=e,t}var i=r(o);const u="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,s=u?o.useLayoutEffect:o.useEffect;const c=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 a(e,t){const n=e.getBoundingClientRect(),o=t.getBoundingClientRect();return n.top>=o.top-6&&n.top<=o.bottom+6}function m(t,n,l,r){const[i]=e.useLexicalComposerContext();o.useEffect(()=>{if(null!=n&&null!=t){const e=i.getRootElement(),t=null!=e?function(e){let t=getComputedStyle(e);const n="absolute"===t.position,o=/(auto|scroll)/;if("fixed"===t.position)return document.body;for(let l=e;l=l.parentElement;)if(t=getComputedStyle(l),(!n||"static"!==t.position)&&o.test(t.overflow+t.overflowY+t.overflowX))return l;return document.body}(e):document.body;let o=!1,u=a(n,t);const s=function(){o||(window.requestAnimationFrame(function(){l(),o=!1}),o=!0);const e=a(n,t);e!==u&&(u=e,null!=r&&r(e))},c=new ResizeObserver(l);return window.addEventListener("resize",l),document.addEventListener("scroll",s,{capture:!0,passive:!0}),c.observe(n),()=>{c.unobserve(n),window.removeEventListener("resize",l),document.removeEventListener("scroll",s,!0)}}},[n,i,r,l,t])}const d=n.createCommand("SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND");function f({close:e,editor:l,anchorElementRef:r,resolution:i,options:u,menuRenderFn:a,onSelectOption:m,shouldSplitNodeWithQuery:f=!1,commandPriority:p=n.COMMAND_PRIORITY_LOW,preselectFirstItem:g=!0}){const[h,C]=o.useState(null),E=null!==h?Math.min(u.length-1,h):null,v=i.match&&i.match.matchingString;o.useEffect(()=>{g&&C(0)},[v,g]);const R=o.useCallback(t=>{l.update(()=>{const o=null!=i.match&&f?function(e){const t=n.$getSelection();if(!n.$isRangeSelection(t)||!t.isCollapsed())return null;const o=t.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(t,o,e,i.match?i.match.matchingString:"")})},[l,f,i.match,m,e]),b=o.useCallback(e=>{const t=l.getRootElement();null!==t&&(t.setAttribute("aria-activedescendant","typeahead-item-"+e),C(e))},[l]);o.useEffect(()=>()=>{const e=l.getRootElement();null!==e&&e.removeAttribute("aria-activedescendant")},[l]),s(()=>{null===u?C(null):null===E&&g&&b(0)},[u,E,b,g]),o.useEffect(()=>t.mergeRegister(l.registerCommand(d,({option:e})=>!(!e.ref||null==e.ref.current)&&(c(e.ref.current),!0),p)),[l,b,p]),o.useEffect(()=>t.mergeRegister(l.registerCommand(n.KEY_ARROW_DOWN_COMMAND,e=>{const t=e;if(null!==u&&u.length){const e=null===E?0:E!==u.length-1?E+1:0;b(e);const n=u[e];if(!n)return b(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&l.dispatchCommand(d,{index:e,option:n}),t.preventDefault(),t.stopImmediatePropagation()}return!0},p),l.registerCommand(n.KEY_ARROW_UP_COMMAND,e=>{const t=e;if(null!==u&&u.length){const e=null===E?u.length-1:0!==E?E-1:u.length-1;b(e);const n=u[e];if(!n)return b(-1),t.preventDefault(),t.stopImmediatePropagation(),!0;n.ref&&n.ref.current&&c(n.ref.current),t.preventDefault(),t.stopImmediatePropagation()}return!0},p),l.registerCommand(n.KEY_ESCAPE_COMMAND,t=>{const n=t;return n.preventDefault(),n.stopImmediatePropagation(),e(),!0},p),l.registerCommand(n.KEY_TAB_COMMAND,e=>{const t=e;return null!==u&&null!==E&&null!=u[E]&&(t.preventDefault(),t.stopImmediatePropagation(),R(u[E]),!0)},p),l.registerCommand(n.KEY_ENTER_COMMAND,e=>null!==u&&null!==E&&null!=u[E]&&(null!==e&&(e.preventDefault(),e.stopImmediatePropagation()),R(u[E]),!0),p)),[R,e,l,u,E,b,p]);return a(r,o.useMemo(()=>({options:u,selectOptionAndCleanUp:R,selectedIndex:E,setHighlightedIndex:C}),[R,E,u]),i.match?i.match.matchingString:"")}function p(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.LexicalContextMenuPlugin=function({options:r,onWillOpen:s,onClose:c,onOpen:a,onSelectOption:d,menuRenderFn:g,anchorClassName:h,commandPriority:C=n.COMMAND_PRIORITY_LOW,parent:E}){const[v]=e.useLexicalComposerContext(),[R,b]=o.useState(null),w=i.useRef(null),x=function(t,n,l,r=(u?document.body:void 0),i=!0){const[s]=e.useLexicalComposerContext(),c=u?document.createElement("div"):null,a=o.useRef(c),d=o.useCallback(()=>{if(null===a.current||void 0===r)return;a.current.style.top=a.current.style.bottom;const e=s.getRootElement(),n=a.current,o=n.firstChild;if(null!==e&&null!==t){const{left:u,top:s,width:c,height:m}=t.getRect(),d=a.current.offsetHeight;if(n.style.top=`${s+d+3+(i?window.pageYOffset:0)}px`,n.style.left=`${u+window.pageXOffset}px`,n.style.height=`${m}px`,n.style.width=`${c}px`,null!==o){o.style.top=`${s}`;const t=o.getBoundingClientRect(),l=t.height,r=t.width,c=e.getBoundingClientRect();u+r>c.right&&(n.style.left=`${c.right-r+window.pageXOffset}px`),(s+l>window.innerHeight||s+l>c.bottom)&&s-c.top>l+m&&(n.style.top=`${s-l-m+(i?window.pageYOffset:0)}px`)}n.isConnected||(p(n,l),r.append(n)),n.setAttribute("id","typeahead-menu"),e.setAttribute("aria-controls","typeahead-menu")}},[s,t,i,l,r]);o.useEffect(()=>{const e=s.getRootElement();return null!==t&&d(),()=>{null!==e&&e.removeAttribute("aria-controls");const t=a.current;null!==t&&t.isConnected&&(t.remove(),t.removeAttribute("id"))}},[s,d,t]);const f=o.useCallback(e=>{null!==t&&(e||n(null))},[t,n]);return m(t,a.current,d,f),null!=c&&c===a.current&&(p(c,l),null!=r&&r.append(c)),a}(R,b,h,E),O=o.useCallback(()=>{b(null),null!=c&&null!==R&&c()},[c,R]),y=o.useCallback(e=>{b(e),null!=a&&null===R&&a(e)},[a,R]),A=o.useCallback(e=>{e.preventDefault(),null!=s&&s(e);const n=t.calculateZoomLevel(e.target);y({getRect:()=>new DOMRect(e.clientX/n,e.clientY/n,1,1)})},[y,s]),M=o.useCallback(e=>{null!==R&&null!=w.current&&null!=e.target&&n.isDOMNode(e.target)&&!w.current.contains(e.target)&&O()},[O,R]);return o.useEffect(()=>{const e=v.getRootElement();if(e)return e.addEventListener("contextmenu",A),()=>e.removeEventListener("contextmenu",A)},[v,A]),o.useEffect(()=>(document.addEventListener("click",M),()=>document.removeEventListener("click",M)),[v,M]),null===x.current||null===R||null===v?null:l.jsx(f,{close:O,resolution:R,editor:v,anchorElementRef:x,options:r,menuRenderFn:(e,t)=>g(e,t,{setMenuRef:e=>{w.current=e}}),onSelectOption:d,commandPriority:C})},exports.MenuOption=class{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}};