@lexical/react/LexicalDraggableBlockPlugin.prod.js

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.
 *
 */

"use strict";var t=require("@lexical/react/LexicalComposerContext"),e=require("@lexical/rich-text"),n=require("@lexical/utils"),r=require("lexical"),o=require("react"),i=require("react-dom"),s=require("react/jsx-runtime");class l{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 a{constructor(t,e,n,r){const[o,i]=e<=r?[e,r]:[r,e],[s,l]=t<=n?[t,n]:[n,t];this._top=o,this._right=l,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 l){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:l,height:a}=this;return(e+r>=i+l?e+r:i+l)-(e<=i?e:i)<=r+l&&(n+o>=s+a?n+o:s+a)-(n<=s?n:s)<=o+a}generateNewRect({left:t=this.left,top:e=this.top,right:n=this.right,bottom:r=this.bottom}){return new a(t,e,n,r)}static fromLTRB(t,e,n,r){return new a(t,e,n,r)}static fromLWTH(t,e,n,r){return new a(t,n,t+e,n+r)}static fromPoints(t,e){const{y:n,x:r}=t,{y:o,x:i}=e;return a.fromLTRB(r,n,i,o)}static fromDOM(t){const{top:e,width:n,left:r,height:o}=t.getBoundingClientRect();return a.fromLWTH(r,n,e,o)}}const c=4,u=2,g="application/x-lexical-drag-block",h=28,m=1,f=-1,p=0;let d=1/0;function y(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 _(t,e,o,i=!1){const s=t.getBoundingClientRect(),c=function(t){return t.getEditorState().read((()=>r.$getRoot().getChildrenKeys()))}(e);let u=null;return e.getEditorState().read((()=>{if(i){const[t,r]=[e.getElementByKey(c[0]),e.getElementByKey(c[c.length-1])],[i,s]=[null!=t?t.getBoundingClientRect():void 0,null!=r?r.getBoundingClientRect():void 0];if(i&&s){const e=n.calculateZoomLevel(t),l=n.calculateZoomLevel(r);if(o.y/e<i.top?u=t:o.y/l>s.bottom&&(u=r),u)return}}let t=0===(r=c.length)?1/0:d>=0&&d<r?d:Math.floor(r/2);var r;let g=p;for(;t>=0&&t<c.length;){const r=c[t],i=e.getElementByKey(r);if(null===i)break;const h=n.calculateZoomLevel(i),_=new l(o.x/h,o.y/h),x=a.fromDOM(i),{marginTop:b,marginBottom:C}=y(i),R=x.generateNewRect({bottom:x.bottom+C,left:s.left,right:s.right,top:x.top-b}),{result:T,reason:{isOnTopSide:v,isOnBottomSide:M}}=R.contains(_);if(T){u=i,d=t;break}g===p&&(g=v?f:M?m:1/0),t+=g}})),u}function x(t,l,a,m,f,p,d,x,b){const C=l.parentElement,R=o.useRef(!1),[T,v]=o.useState(null),M=o.useCallback((t=>{v(t),b&&b(t)}),[b]);return o.useEffect((()=>{function e(e){const r=e.target;if(!n.isHTMLElement(r))return void M(null);if(x(r))return;const o=_(l,t,e);M(o)}function r(){M(null)}return null!=C&&(C.addEventListener("mousemove",e),C.addEventListener("mouseleave",r)),()=>{null!=C&&(C.removeEventListener("mousemove",e),C.removeEventListener("mouseleave",r))}}),[C,l,t,x,M]),o.useEffect((()=>{a.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 l=parseInt(o.lineHeight,10);isNaN(l)&&(l=r.bottom-r.top);const a=r.top+(l-i.height)/2-s.top,u=c;e.style.opacity="1",e.style.transform=`translate(${u}px, ${a}px)`}(T,a.current,l)}),[l,T,a]),o.useEffect((()=>{function o(r){if(!R.current)return!1;const[o]=e.eventFiles(r);if(o)return!1;const{pageY:i,target:s}=r;if(!n.isHTMLElement(s))return!1;const a=_(l,t,r,!0),g=m.current;return null!==a&&null!==g&&(function(t,e,n,r){const{top:o,height:i}=e.getBoundingClientRect(),{top:s,width:l}=r.getBoundingClientRect(),{marginTop:a,marginBottom:g}=y(e);let m=o;n>=o?m+=i+g/2:m-=a/2;const f=m-s-u,p=h-c;t.style.transform=`translate(${p}px, ${f}px)`,t.style.width=l-2*(h-c)+"px",t.style.opacity=".4"}(g,a,i/n.calculateZoomLevel(s),l),r.preventDefault(),!0)}return n.mergeRegister(t.registerCommand(r.DRAGOVER_COMMAND,(t=>o(t)),r.COMMAND_PRIORITY_LOW),t.registerCommand(r.DROP_COMMAND,(o=>function(o){if(!R.current)return!1;const[i]=e.eventFiles(o);if(i)return!1;const{target:s,dataTransfer:a,pageY:c}=o,u=null!=a?a.getData(g):"",h=r.$getNodeByKey(u);if(!h)return!1;if(!n.isHTMLElement(s))return!1;const m=_(l,t,o,!0);if(!m)return!1;const f=r.$getNearestNodeFromDOMNode(m);if(!f)return!1;if(f===h)return!0;const p=m.getBoundingClientRect().top;return c/n.calculateZoomLevel(s)>=p?f.insertAfter(h):f.insertBefore(h),M(null),!0}(o)),r.COMMAND_PRIORITY_HIGH))}),[l,t,m,M]),i.createPortal(s.jsxs(s.Fragment,{children:[s.jsx("div",{draggable:!0,onDragStart:function(e){const n=e.dataTransfer;if(!n||!T)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,T);let o="";t.update((()=>{const t=r.$getNearestNodeFromDOMNode(T);t&&(o=t.getKey())})),R.current=!0,n.setData(g,o)},onDragEnd:function(){var t;R.current=!1,(t=m.current)&&(t.style.opacity="0",t.style.transform="translate(-10000px, -10000px)")},children:f&&p}),d]}),l)}exports.DraggableBlockPlugin_EXPERIMENTAL=function({anchorElem:e=document.body,menuRef:n,targetLineRef:r,menuComponent:o,targetLineComponent:i,isOnMenu:s,onElementChanged:l}){const[a]=t.useLexicalComposerContext();return x(a,e,n,r,a._editable,o,i,s,l)};