UNPKG

@lexical/react

Version:

This package provides Lexical components and hooks for React applications.

10 lines (8 loc) • 3.39 kB
/** * 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{useFloating as e,autoUpdate as t,offset as n,flip as s,shift as i,useRole as l,useDismiss as o,useListNavigation as r,useTypeahead as a,useInteractions as c,FloatingPortal as m,FloatingOverlay as d,FloatingFocusManager as p}from"@floating-ui/react";import{useLexicalComposerContext as h}from"@lexical/react/LexicalComposerContext";import{registerEventListener as f,$getNearestNodeFromDOMNode as u,$getRoot as y}from"lexical";import{forwardRef as g,useState as x,useRef as b,useEffect as k,createElement as $}from"react";import{jsx as w,jsxs as N}from"react/jsx-runtime";class O{key;ref;constructor(e){this.key=e,this.ref={current:null},this.setRefElement=this.setRefElement.bind(this)}setRefElement(e){this.ref={current:e}}}class C extends O{type;title;icon;disabled;$onSelect;$showOn;constructor(e,t){super(e),this.type="item",this.title=e,this.disabled=t.disabled??!1,this.icon=t.icon??null,this.$onSelect=t.$onSelect,t.$showOn&&(this.$showOn=t.$showOn)}}class R extends O{type;$showOn;constructor(e){super("_separator"),this.type="separator",e&&e.$showOn&&(this.$showOn=e.$showOn)}}const v=/* @__PURE__ */g(({className:e,disabled:t,...n},s)=>/*#__PURE__*/w("hr",{className:e})),S=/* @__PURE__ */g(({className:e,label:t,disabled:n,icon:s,...i},l)=>/*#__PURE__*/N("button",{...i,className:e,ref:l,role:"menuitem",disabled:n,children:[s,t]})),I=/* @__PURE__ */g(({items:g,className:N,itemClassName:O,separatorClassName:C},R)=>{const[I]=h(),[E,P]=x(null),[F,M]=x(!1),X=b([]),Y=b([]),{refs:A,floatingStyles:L,context:j}=e({middleware:[n({alignmentAxis:4,mainAxis:5}),s({fallbackPlacements:["left-start"]}),i({padding:10})],onOpenChange:M,open:F,placement:"right-start",strategy:"fixed",whileElementsMounted:t}),B=l(j,{role:"menu"}),D=o(j),U=r(j,{activeIndex:E,listRef:X,onNavigate:P}),_=a(j,{activeIndex:E,enabled:F,listRef:Y,onMatch:P}),{getFloatingProps:q,getItemProps:z}=c([B,D,U,_]),[G,H]=x([]);return k(()=>{function e(e){let t=[];if(g&&I.read(()=>{const n=u(e.target)??y();n&&(t=g.filter(e=>!e.$showOn||e.$showOn(n)))}),!t.some(e=>"separator"!==e.type))return;e.preventDefault(),A.setPositionReference({getBoundingClientRect:()=>({bottom:e.clientY,height:0,left:e.clientX,right:e.clientX,top:e.clientY,width:0,x:e.clientX,y:e.clientY})});const n=t.map((e,t)=>"separator"===e.type?{className:C,key:e.key+"-"+t,type:e.type}:{className:O,disabled:e.disabled,icon:e.icon,key:e.key,label:e.title,onClick:()=>I.update(()=>e.$onSelect()),title:e.title,type:e.type});Y.current=n.map(e=>e.key),H(n),M(!0)}return I.registerRootListener(t=>{if(null!==t)return f(t,"contextmenu",e)})},[g,O,C,A,I]),/*#__PURE__*/w(m,{children:F&&/*#__PURE__*/w(d,{lockScroll:!0,children:/*#__PURE__*/w(p,{context:j,initialFocus:A.floating,children:/*#__PURE__*/w("div",{className:N,ref:A.setFloating,style:L,...q(),children:G.map((e,t)=>"item"===e.type?/*#__PURE__*/$(S,{...z({...e,onClick(){e.onClick(),M(!1)},onMouseUp(){e.onClick(),M(!1)},ref(e){X.current[t]=e},tabIndex:E===t?0:-1}),key:e.key}):"separator"===e.type?/*#__PURE__*/$(v,{...z({...e,ref(e){X.current[t]=e},tabIndex:E===t?0:-1}),key:e.key}):void 0)})})})})});export{C as NodeContextMenuOption,I as NodeContextMenuPlugin,R as NodeContextMenuSeparator};