@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"),o=require("lexical"),r=require("react"),i=require("react-dom"),s=require("react/jsx-runtime");const l="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,a=l&&"documentMode"in document?document.documentMode:null,c=l&&/^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);l&&"InputEvent"in window&&!a&&new window.InputEvent("input");class u{_x;_y;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 m{_left;_top;_right;_bottom;constructor(t,e,n,o){const[r,i]=e<=o?[e,o]:[o,e],[s,l]=t<=n?[t,n]:[n,t];this._top=r,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:o}){return t===this._top&&n===this._bottom&&e===this._left&&o===this._right}contains(t){if(t instanceof u){const{x:e,y:n}=t,o=n<this._top,r=n>this._bottom,i=e<this._left,s=e>this._right;return{reason:{isOnBottomSide:r,isOnLeftSide:i,isOnRightSide:s,isOnTopSide:o},result:!(o||r||i||s)}}{const{top:e,left:n,bottom:o,right:r}=t;return e>=this._top&&e<=this._bottom&&o>=this._top&&o<=this._bottom&&n>=this._left&&n<=this._right&&r>=this._left&&r<=this._right}}intersectsWith(t){const{left:e,top:n,width:o,height:r}=t,{left:i,top:s,width:l,height:a}=this;return(e+o>=i+l?e+o:i+l)-(e<=i?e:i)<=o+l&&(n+r>=s+a?n+r:s+a)-(n<=s?n:s)<=r+a}generateNewRect({left:t=this.left,top:e=this.top,right:n=this.right,bottom:o=this.bottom}){return new m(t,e,n,o)}static fromLTRB(t,e,n,o){return new m(t,e,n,o)}static fromLWTH(t,e,n,o){return new m(t,n,t+e,n+o)}static fromPoints(t,e){const{y:n,x:o}=t,{y:r,x:i}=e;return m.fromLTRB(o,n,i,r)}static fromDOM(t){const{top:e,width:n,left:o,height:r}=t.getBoundingClientRect();return m.fromLWTH(o,n,e,r)}}const g="application/x-lexical-drag-block";let f=1/0;function d(t){const e=(t,e)=>t?parseFloat(window.getComputedStyle(t)[e]):0,{marginTop:n,marginBottom:o}=window.getComputedStyle(t),r=e(t.previousElementSibling,"marginBottom"),i=e(t.nextElementSibling,"marginTop"),s=Math.max(parseFloat(n),r);return{marginBottom:Math.max(parseFloat(o),i),marginTop:s}}function h(t,e,r,i=!1){const s=t.getBoundingClientRect(),l=function(t){return t.getEditorState().read(()=>o.$getRoot().getChildrenKeys())}(e);let a=null;return e.getEditorState().read(()=>{if(i){const[t,o]=[e.getElementByKey(l[0]),e.getElementByKey(l[l.length-1])],[i,s]=[null!=t?t.getBoundingClientRect():void 0,null!=o?o.getBoundingClientRect():void 0];if(i&&s){const e=n.calculateZoomLevel(t),l=n.calculateZoomLevel(o);if(r.y/e<i.top?a=t:r.y/l>s.bottom&&(a=o),a)return}}let t=0===(o=l.length)?1/0:f>=0&&f<o?f:Math.floor(o/2);var o;let c=0;for(;t>=0&&t<l.length;){const o=l[t],i=e.getElementByKey(o);if(null===i)break;const g=n.calculateZoomLevel(i),h=new u(r.x/g,r.y/g),p=m.fromDOM(i),{marginTop:y,marginBottom:_}=d(i),v=p.generateNewRect({bottom:p.bottom+_,left:s.left,right:s.right,top:p.top-y}),{result:x,reason:{isOnTopSide:E,isOnBottomSide:M}}=v.contains(h);if(x){a=i,f=t;break}0===c&&(c=E?-1:M?1:1/0),t+=c}}),a}function p(t,l,a,u,m,f,p,y,_){const v=l.parentElement,x=r.useRef(!1),[E,M]=r.useState(null),R=r.useCallback(t=>{M(t),_&&_(t)},[_]);return r.useEffect(()=>{function e(e){const o=e.target;if(!n.isHTMLElement(o))return void R(null);if(y(o))return;const r=h(l,t,e);R(r)}function o(){R(null)}return null!=v&&(v.addEventListener("mousemove",e),v.addEventListener("mouseleave",o)),()=>{null!=v&&(v.removeEventListener("mousemove",e),v.removeEventListener("mouseleave",o))}},[v,l,t,y,R]),r.useEffect(()=>{const t=n.calculateZoomLevel(document.getElementsByClassName("ContentEditable__root")[0],!0);a.current&&function(t,e,n,o){if(!t)return void(e.style.display="none");const r=t.getBoundingClientRect(),i=window.getComputedStyle(t),s=e.getBoundingClientRect(),l=n.getBoundingClientRect();let a=parseInt(i.lineHeight,10);isNaN(a)&&(a=r.bottom-r.top);const c=(r.top+(a-(s.height||a))/2-l.top+n.scrollTop)/o;e.style.display="flex",e.style.opacity="1",e.style.transform=`translate(4px, ${c}px)`}(E,a.current,l,t)},[l,E,a]),r.useEffect(()=>{function r(o){if(!x.current)return!1;const[r]=e.eventFiles(o);if(r)return!1;const{pageY:i,target:s}=o;if(!n.isHTMLElement(s))return!1;const a=h(l,t,o,!0),c=u.current;return null!==a&&null!==c&&(function(t,e,n,o){const{top:r,height:i}=e.getBoundingClientRect(),{top:s,width:l}=o.getBoundingClientRect(),{marginTop:a,marginBottom:c}=d(e);let u=r;n>=r?u+=i+c/2:u-=a/2;const m=u-s-2+o.scrollTop;t.style.transform=`translate(24px, ${m}px)`,t.style.width=l-48+"px",t.style.opacity=".4"}(c,a,i/n.calculateZoomLevel(s),l),o.preventDefault(),!0)}return n.mergeRegister(t.registerCommand(o.DRAGOVER_COMMAND,t=>r(t),o.COMMAND_PRIORITY_LOW),t.registerCommand(o.DROP_COMMAND,r=>function(r){if(!x.current)return!1;const[i]=e.eventFiles(r);if(i)return!1;const{target:s,dataTransfer:a,pageY:u}=r,m=null!=a?a.getData(g):"",f=o.$getNodeByKey(m);if(!f)return!1;if(!n.isHTMLElement(s))return!1;const d=h(l,t,r,!0);if(!d)return!1;const p=o.$getNearestNodeFromDOMNode(d);if(!p)return!1;if(p===f)return c&&t.focus(),!0;const y=d.getBoundingClientRect().top;return u/n.calculateZoomLevel(s)>=y?p.insertAfter(f):p.insertBefore(f),R(null),c&&o.$onUpdate(()=>{t.focus()}),!0}(r),o.COMMAND_PRIORITY_HIGH))},[l,t,u,R]),r.useEffect(()=>{if(c&&m)return n.mergeRegister(t.registerRootListener(e=>{function n(n){const r=n.relatedTarget;r&&r instanceof HTMLElement&&y(r)&&(e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=o.$getSelection();null===t||t.dirty||(t.dirty=!0)})),n.stopImmediatePropagation())}if(e)return e.addEventListener("blur",n,!0),()=>e.removeEventListener("blur",n,!0)}),t.registerCommand(o.BLUR_COMMAND,()=>{const e=t.getRootElement(),n=document.activeElement;return!!(e&&n&&n instanceof HTMLElement&&y(n))&&(e.focus({preventScroll:!0}),t.update(()=>{const t=o.$getSelection();null===t||t.dirty||(t.dirty=!0)}),!0)},o.COMMAND_PRIORITY_HIGH))},[t,m,y]),i.createPortal(s.jsxs(s.Fragment,{children:[s.jsx("div",{draggable:!0,onDragStart:function(e){const n=e.dataTransfer;if(!n||!E)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,E);let r="";if(t.update(()=>{const t=o.$getNearestNodeFromDOMNode(E);t&&(r=t.getKey())}),x.current=!0,n.setData(g,r),c){const e=t.getRootElement();null!==e&&document.activeElement!==e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=o.$getSelection();null===t||t.dirty||(t.dirty=!0)}))}},onDragEnd:function(){var e;x.current=!1,(e=u.current)&&(e.style.opacity="0",e.style.transform="translate(-10000px, -10000px)"),c&&t.focus()},children:m&&f}),p]}),l)}exports.DraggableBlockPlugin_EXPERIMENTAL=function({anchorElem:e=document.body,menuRef:n,targetLineRef:o,menuComponent:r,targetLineComponent:i,isOnMenu:s,onElementChanged:l}){const[a]=t.useLexicalComposerContext();return p(a,e,n,o,a._editable,r,i,s,l)};