UNPKG

@lexical/react

Version:

This package provides Lexical components and hooks for React applications.

facebook/lexical

10 lines (8 loc) • 7.23 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. * */ import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{useLexicalEditable as e}from"@lexical/react/useLexicalEditable";import{eventFiles as n}from"@lexical/rich-text";import{calculateZoomLevel as o}from"@lexical/utils";import{getParentElement as r,registerEventListeners as i,mergeRegister as s,DRAGOVER_COMMAND as l,COMMAND_PRIORITY_LOW as a,DROP_COMMAND as c,COMMAND_PRIORITY_HIGH as u,IS_FIREFOX as m,registerEventListener as h,BLUR_COMMAND as f,getActiveElementDeep as g,getRootOwnerDocument as p,isHTMLElement as d,getComposedEventTarget as y,$getNodeByKey as _,$getNearestNodeFromDOMNode as x,$onUpdate as b,$getSelection as T,getActiveElement as B,$getRoot as C}from"lexical";import{useRef as R,useState as D,useCallback as w,useEffect as E}from"react";import{createPortal as M}from"react-dom";import{jsxs as S,Fragment as v,jsx as L}from"react/jsx-runtime";class O{_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 I{_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 O){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 I(t,e,n,o)}static fromLTRB(t,e,n,o){return new I(t,e,n,o)}static fromLWTH(t,e,n,o){return new I(t,n,t+e,n+o)}static fromPoints(t,e){const{y:n,x:o}=t,{y:r,x:i}=e;return I.fromLTRB(o,n,i,r)}static fromDOM(t){const{top:e,width:n,left:o,height:r}=t.getBoundingClientRect();return I.fromLWTH(o,n,e,r)}}const N="application/x-lexical-drag-block";let K=Infinity;function Y(t,e){e.focus({preventScroll:!0}),t.update(()=>{const t=T();null===t||t.dirty||(t.dirty=!0)})}function H(t){const e=t.ownerDocument.defaultView,n=(t,n)=>t&&e?parseFloat(e.getComputedStyle(t)[n]):0,{marginTop:o="0",marginBottom:r="0"}=e?e.getComputedStyle(t):{},i=n(t.previousElementSibling,"marginBottom"),s=n(t.nextElementSibling,"marginTop"),l=Math.max(parseFloat(o),i);return{marginBottom:Math.max(parseFloat(r),s),marginTop:l}}function k(t,e,n,r=!1){const i=t.getBoundingClientRect(),s=function(t){return t.read("latest",()=>C().getChildrenKeys())}(e);let l=null;return e.read("latest",()=>{if(r){const[t,r]=[e.getElementByKey(s[0]),e.getElementByKey(s[s.length-1])],[i,a]=[null!=t?t.getBoundingClientRect():void 0,null!=r?r.getBoundingClientRect():void 0];if(i&&a){const e=o(t),s=o(r);if(n.y/e<i.top?l=t:n.y/s>a.bottom&&(l=r),l)return}}let t=0===(a=s.length)?Infinity:K>=0&&K<a?K:Math.floor(a/2);var a;let c=0;for(;t>=0&&t<s.length;){const r=s[t],a=e.getElementByKey(r);if(null===a)break;const u=o(a),m=new O(n.x/u,n.y/u),h=I.fromDOM(a),{marginTop:f,marginBottom:g}=H(a),p=h.generateNewRect({bottom:h.bottom+g,left:i.left,right:i.right,top:h.top-f}),{result:d,reason:{isOnTopSide:y,isOnBottomSide:_}}=p.contains(m);if(d){l=a,K=t;break}0===c&&(c=y?-1:_?1:Infinity),t+=c}}),l}function q(t,e,T,C,O,I,K,q,F){const V=r(e),W=R(!1),[X,P]=D(null),$=w(t=>{P(t),F&&F(t)},[F]);return E(()=>{if(null!=V)return i(V,{mouseleave:function(){$(null)},mousemove:function(n){const o=y(n);if(!d(o))return void $(null);if(q(o))return;const r=k(e,t,n);$(r)}})},[V,e,t,q,$]),E(()=>{const n=o(t.getRootElement(),!0);T.current&&function(t,e,n,o){if(!t)return void(e.style.display="none");const r=t.getBoundingClientRect(),i=t.ownerDocument.defaultView,s=i?i.getComputedStyle(t):null,l=e.getBoundingClientRect(),a=n.getBoundingClientRect();let c=s?parseInt(s.lineHeight,10):NaN;isNaN(c)&&(c=r.bottom-r.top);const u=(r.top+(c-(l.height||c))/2-a.top+n.scrollTop)/o;e.style.display="flex",e.style.opacity="1",e.style.transform=`translate(4px, ${u}px)`}(X,T.current,e,n)},[t,e,X,T]),E(()=>{function r(r){if(!W.current)return!1;const[i]=n(r);if(i)return!1;const s=r.pageY,l=y(r);if(!d(l))return!1;const a=k(e,t,r,!0),c=C.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}=H(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,s/o(l),e),r.preventDefault(),!0)}return s(t.registerCommand(l,t=>r(t),a),t.registerCommand(c,r=>function(r){if(!W.current)return!1;const[i]=n(r);if(i)return!1;const{dataTransfer:s,pageY:l}=r,a=y(r),c=null!=s?s.getData(N):"",u=_(c);if(!u)return!1;if(!d(a))return!1;const h=k(e,t,r,!0);if(!h)return!1;const f=x(h);if(!f)return!1;if(f===u)return m&&t.focus(),!0;const g=h.getBoundingClientRect().top;return l/o(a)>=g?f.insertAfter(u):f.insertBefore(u),$(null),m&&b(()=>{t.focus()}),!0}(r),u))},[e,t,C,$]),E(()=>{if(m&&O)return s(t.registerRootListener(e=>{if(e)return h(e,"blur",function(n){const o=n.relatedTarget;d(o)&&q(o)&&(e&&Y(t,e),n.stopImmediatePropagation())},!0)}),t.registerCommand(f,()=>{const e=t.getRootElement(),n=g(p(e));return!!(e&&d(n)&&q(n))&&(Y(t,e),!0)},u))},[t,O,q]),/*#__PURE__*/M(/*#__PURE__*/S(v,{children:[/*#__PURE__*/L("div",{draggable:!0,onDragStart:function(e){const n=e.dataTransfer;if(!n||!X)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,X);let o="";if(t.update(()=>{const t=x(X);t&&(o=t.getKey())}),W.current=!0,n.setData(N,o),m){const e=t.getRootElement();null!==e&&B(e)!==e&&Y(t,e)}},onDragEnd:function(){var e;W.current=!1,(e=C.current)&&(e.style.opacity="0",e.style.transform="translate(-10000px, -10000px)");const n=t.getRootElement();null!==n&&B(n)!==n&&Y(t,n)},children:O&&I}),K]}),e)}function F({anchorElem:n=document.body,menuRef:o,targetLineRef:r,menuComponent:i,targetLineComponent:s,isOnMenu:l,onElementChanged:a}){const[c]=t();return q(c,n,o,r,e(),i,s,l,a)}export{F as DraggableBlockPlugin_EXPERIMENTAL};