@lexical/react/LexicalDraggableBlockPlugin.prod.mjs

This package provides Lexical components and hooks for React applications.

/**
 * 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{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{eventFiles as e}from"@lexical/rich-text";import{mergeRegister as n,isHTMLElement as r,calculateZoomLevel as o}from"@lexical/utils";import{DRAGOVER_COMMAND as i,COMMAND_PRIORITY_LOW as s,DROP_COMMAND as a,COMMAND_PRIORITY_HIGH as l,$getNodeByKey as c,$getNearestNodeFromDOMNode as u,$getRoot as h}from"lexical";import{useRef as m,useState as g,useCallback as f,useEffect as p}from"react";import{createPortal as d}from"react-dom";import{jsxs as y,Fragment as x,jsx as _}from"react/jsx-runtime";class b{constructor(t,e){this._x=t,this._y=e}get x(){return this._x}get y(){return this._y}equals({x:t,y:e}){return this.x===t&&this.y===e}calcDeltaXTo({x:t}){return this.x-t}calcDeltaYTo({y:t}){return this.y-t}calcHorizontalDistanceTo(t){return Math.abs(this.calcDeltaXTo(t))}calcVerticalDistance(t){return Math.abs(this.calcDeltaYTo(t))}calcDistanceTo(t){return Math.sqrt(Math.pow(this.calcDeltaXTo(t),2)+Math.pow(this.calcDeltaYTo(t),2))}}class B{constructor(t,e,n,r){const[o,i]=e<=r?[e,r]:[r,e],[s,a]=t<=n?[t,n]:[n,t];this._top=o,this._right=a,this._left=s,this._bottom=i}get top(){return this._top}get right(){return this._right}get bottom(){return this._bottom}get left(){return this._left}get width(){return Math.abs(this._left-this._right)}get height(){return Math.abs(this._bottom-this._top)}equals({top:t,left:e,bottom:n,right:r}){return t===this._top&&n===this._bottom&&e===this._left&&r===this._right}contains(t){if(t instanceof b){const{x:e,y:n}=t,r=n<this._top,o=n>this._bottom,i=e<this._left,s=e>this._right;return{reason:{isOnBottomSide:o,isOnLeftSide:i,isOnRightSide:s,isOnTopSide:r},result:!(r||o||i||s)}}{const{top:e,left:n,bottom:r,right:o}=t;return e>=this._top&&e<=this._bottom&&r>=this._top&&r<=this._bottom&&n>=this._left&&n<=this._right&&o>=this._left&&o<=this._right}}intersectsWith(t){const{left:e,top:n,width:r,height:o}=t,{left:i,top:s,width:a,height:l}=this;return(e+r>=i+a?e+r:i+a)-(e<=i?e:i)<=r+a&&(n+o>=s+l?n+o:s+l)-(n<=s?n:s)<=o+l}generateNewRect({left:t=this.left,top:e=this.top,right:n=this.right,bottom:r=this.bottom}){return new B(t,e,n,r)}static fromLTRB(t,e,n,r){return new B(t,e,n,r)}static fromLWTH(t,e,n,r){return new B(t,n,t+e,n+r)}static fromPoints(t,e){const{y:n,x:r}=t,{y:o,x:i}=e;return B.fromLTRB(r,n,i,o)}static fromDOM(t){const{top:e,width:n,left:r,height:o}=t.getBoundingClientRect();return B.fromLWTH(r,n,e,o)}}const T=4,C=2,w="application/x-lexical-drag-block",v=28,D=1,R=-1,E=0;let S=1/0;function M(t){const e=(t,e)=>t?parseFloat(window.getComputedStyle(t)[e]):0,{marginTop:n,marginBottom:r}=window.getComputedStyle(t),o=e(t.previousElementSibling,"marginBottom"),i=e(t.nextElementSibling,"marginTop"),s=Math.max(parseFloat(n),o);return{marginBottom:Math.max(parseFloat(r),i),marginTop:s}}function L(t,e,n,r=!1){const i=t.getBoundingClientRect(),s=function(t){return t.getEditorState().read((()=>h().getChildrenKeys()))}(e);let a=null;return e.getEditorState().read((()=>{if(r){const[t,r]=[e.getElementByKey(s[0]),e.getElementByKey(s[s.length-1])],[i,l]=[null!=t?t.getBoundingClientRect():void 0,null!=r?r.getBoundingClientRect():void 0];if(i&&l){const e=o(t),s=o(r);if(n.y/e<i.top?a=t:n.y/s>l.bottom&&(a=r),a)return}}let t=0===(l=s.length)?1/0:S>=0&&S<l?S:Math.floor(l/2);var l;let c=E;for(;t>=0&&t<s.length;){const r=s[t],l=e.getElementByKey(r);if(null===l)break;const u=o(l),h=new b(n.x/u,n.y/u),m=B.fromDOM(l),{marginTop:g,marginBottom:f}=M(l),p=m.generateNewRect({bottom:m.bottom+f,left:i.left,right:i.right,top:m.top-g}),{result:d,reason:{isOnTopSide:y,isOnBottomSide:x}}=p.contains(h);if(d){a=l,S=t;break}c===E&&(c=y?R:x?D:1/0),t+=c}})),a}function O(t,h,b,B,D,R,E,S,O){const K=h.parentElement,Y=m(!1),[H,N]=g(null),$=f((t=>{N(t),O&&O(t)}),[O]);return p((()=>{function e(e){const n=e.target;if(!r(n))return void $(null);if(S(n))return;const o=L(h,t,e);$(o)}function n(){$(null)}return null!=K&&(K.addEventListener("mousemove",e),K.addEventListener("mouseleave",n)),()=>{null!=K&&(K.removeEventListener("mousemove",e),K.removeEventListener("mouseleave",n))}}),[K,h,t,S,$]),p((()=>{b.current&&function(t,e,n){if(!t)return e.style.opacity="0",void(e.style.transform="translate(-10000px, -10000px)");const r=t.getBoundingClientRect(),o=window.getComputedStyle(t),i=e.getBoundingClientRect(),s=n.getBoundingClientRect();let a=parseInt(o.lineHeight,10);isNaN(a)&&(a=r.bottom-r.top);const l=r.top+(a-i.height)/2-s.top,c=T;e.style.opacity="1",e.style.transform=`translate(${c}px, ${l}px)`}(H,b.current,h)}),[h,H,b]),p((()=>{function m(n){if(!Y.current)return!1;const[i]=e(n);if(i)return!1;const{pageY:s,target:a}=n;if(!r(a))return!1;const l=L(h,t,n,!0),c=B.current;return null!==l&&null!==c&&(function(t,e,n,r){const{top:o,height:i}=e.getBoundingClientRect(),{top:s,width:a}=r.getBoundingClientRect(),{marginTop:l,marginBottom:c}=M(e);let u=o;n>=o?u+=i+c/2:u-=l/2;const h=u-s-C,m=v-T;t.style.transform=`translate(${m}px, ${h}px)`,t.style.width=a-2*(v-T)+"px",t.style.opacity=".4"}(c,l,s/o(a),h),n.preventDefault(),!0)}return n(t.registerCommand(i,(t=>m(t)),s),t.registerCommand(a,(n=>function(n){if(!Y.current)return!1;const[i]=e(n);if(i)return!1;const{target:s,dataTransfer:a,pageY:l}=n,m=null!=a?a.getData(w):"",g=c(m);if(!g)return!1;if(!r(s))return!1;const f=L(h,t,n,!0);if(!f)return!1;const p=u(f);if(!p)return!1;if(p===g)return!0;const d=f.getBoundingClientRect().top;return l/o(s)>=d?p.insertAfter(g):p.insertBefore(g),$(null),!0}(n)),l))}),[h,t,B,$]),d(y(x,{children:[_("div",{draggable:!0,onDragStart:function(e){const n=e.dataTransfer;if(!n||!H)return;!function(t,e){const{transform:n}=e.style;e.style.transform="translateZ(0)",t.setDragImage(e,0,0),setTimeout((()=>{e.style.transform=n}))}(n,H);let r="";t.update((()=>{const t=u(H);t&&(r=t.getKey())})),Y.current=!0,n.setData(w,r)},onDragEnd:function(){var t;Y.current=!1,(t=B.current)&&(t.style.opacity="0",t.style.transform="translate(-10000px, -10000px)")},children:D&&R}),E]}),h)}function K({anchorElem:e=document.body,menuRef:n,targetLineRef:r,menuComponent:o,targetLineComponent:i,isOnMenu:s,onElementChanged:a}){const[l]=t();return O(l,e,n,r,l._editable,o,i,s,a)}export{K as DraggableBlockPlugin_EXPERIMENTAL};