@depup/lexical__react 0.41.0-depup.0 → 0.43.0-depup.0

package/LexicalAutoEmbedPlugin.d.ts

@@ -7,7 +7,7 @@
  */
 import type { CommandListenerPriority, LexicalNode } from 'lexical';
 import type { JSX } from 'react';
-import { MenuOption, MenuRenderFn } from '@lexical/react/LexicalNodeMenuPlugin';
+import { MenuOption, type MenuRenderFn } from '@lexical/react/LexicalNodeMenuPlugin';
 import { LexicalCommand, LexicalEditor } from 'lexical';
 export type EmbedMatchResult<TEmbedMatchResult = unknown> = {
     url: string;
@@ -32,7 +32,7 @@ type LexicalAutoEmbedPluginProps<TEmbedConfig extends EmbedConfig> = {
     embedConfigs: Array<TEmbedConfig>;
     onOpenEmbedModalForConfig: (embedConfig: TEmbedConfig) => void;
     getMenuOptions: (activeEmbedConfig: TEmbedConfig, embedFn: () => void, dismissFn: () => void) => Array<AutoEmbedOption>;
-    menuRenderFn: MenuRenderFn<AutoEmbedOption>;
+    menuRenderFn?: MenuRenderFn<AutoEmbedOption>;
     menuCommandPriority?: CommandListenerPriority;
 };
 export declare function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>({ embedConfigs, onOpenEmbedModalForConfig, getMenuOptions, menuRenderFn, menuCommandPriority, }: LexicalAutoEmbedPluginProps<TEmbedConfig>): JSX.Element | null;

package/LexicalAutoEmbedPlugin.js.flow

@@ -10,10 +10,10 @@
 import type {LexicalNode, MutationListener} from 'lexical';
 
 import {MenuOption} from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import type {MenuRenderFn} from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import type {LexicalCommand, LexicalEditor, NodeKey, TextNode} from 'lexical';
 import * as React from 'react';
 import {createCommand} from 'lexical';
-import type {MenuRenderFn} from './LexicalTypeaheadMenuPlugin';
 
 export type EmbedMatchResult = {
   url: string,
@@ -43,17 +43,17 @@ type LexicalAutoEmbedPluginProps<TEmbedConfig> = {
     embedFn: () => void,
     dismissFn: () => void,
   ) => Array<AutoEmbedOption>,
-  menuRenderFn: MenuRenderFn<AutoEmbedOption>,
+  menuRenderFn?: MenuRenderFn<AutoEmbedOption>,
 };
 
 declare export class AutoEmbedOption extends MenuOption {
   title: string;
-  icon: React.MixedElement;
+  icon?: React.MixedElement;
   onSelect: (targetNode: LexicalNode | null) => void;
   constructor(
     title: string,
     options: {
-      icon: React.MixedElement,
+      icon?: React.MixedElement,
       onSelect: (targetNode: LexicalNode | null) => void,
     },
   ): void;

package/LexicalAutoFocusPlugin.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   defaultSelection?: 'rootStart' | 'rootEnd',
 }>;
 

package/LexicalBlockWithAlignableContents.js.flow

@@ -15,11 +15,11 @@ import type {
   NodeKey,
 } from 'lexical';
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   children: React.Node,
   format: ?ElementFormatType,
   nodeKey: NodeKey,
-  className: $ReadOnly<{
+  className: Readonly<{
     base: string,
     focus: string,
   }>,

package/LexicalClearEditorPlugin.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   onClear?: () => void,
 }>;
 

package/LexicalComposer.js.flow

@@ -22,10 +22,10 @@ export type InitialEditorStateType =
   | EditorState
   | ((editor: LexicalEditor) => void);
 
-export type InitialConfigType = $ReadOnly<{
+export type InitialConfigType = Readonly<{
   editable?: boolean,
   namespace: string,
-  nodes?: $ReadOnlyArray<Class<LexicalNode> | LexicalNodeReplacement>,
+  nodes?: ReadonlyArray<Class<LexicalNode> | LexicalNodeReplacement>,
   theme?: EditorThemeClasses,
   editorState?: InitialEditorStateType,
   onError: (error: Error, editor: LexicalEditor) => void,

package/LexicalContentEditable.js.flow

@@ -14,11 +14,11 @@ import type {TRefFor} from 'CoreTypes.flow';
 import * as React from 'react';
 
 type InlineStyle = {
-  [key: string]: mixed,
+  [key: string]: unknown,
 };
 
 // Due to Flow limitations, we prefer fixed types over the built-in inexact HTMLElement
-type HTMLDivElementDOMProps = $ReadOnly<{
+type HTMLDivElementDOMProps = Readonly<{
   'aria-label'?: void | string,
   'aria-labeledby'?: void | string,
   'aria-activedescendant'?: void | string,
@@ -28,7 +28,7 @@ type HTMLDivElementDOMProps = $ReadOnly<{
   'aria-invalid'?: void | boolean,
   'aria-owns'?: void | string,
   'title'?: void | string,
-  onClick?: void | ((e: SyntheticEvent<HTMLDivElement>) => mixed),
+  onClick?: void | ((e: SyntheticEvent<HTMLDivElement>) => unknown),
   autoCapitalize?: void | boolean,
   autoComplete?: void | boolean,
   autoCorrect?: void | boolean,
@@ -44,11 +44,11 @@ type HTMLDivElementDOMProps = $ReadOnly<{
 }>;
 
 export type PlaceholderProps =
-  | $ReadOnly<{
+  | Readonly<{
       'aria-placeholder'?: void,
       placeholder?: null,
     }>
-  | $ReadOnly<{
+  | Readonly<{
       'aria-placeholder': string,
       placeholder:
         | ((isEditable: boolean) => null | React.Node)
@@ -56,7 +56,7 @@ export type PlaceholderProps =
         | React.Node,
     }>;
 
-export type Props = $ReadOnly<{
+export type Props = Readonly<{
   ...HTMLDivElementDOMProps,
   ariaActiveDescendant?: string,
   ariaAutoComplete?: string,

package/LexicalDecoratorBlockNode.d.ts

@@ -14,12 +14,14 @@ export type SerializedDecoratorBlockNode = Spread<{
 export declare class DecoratorBlockNode extends DecoratorNode<JSX.Element> {
     __format: ElementFormatType;
     constructor(format?: ElementFormatType, key?: NodeKey);
+    afterCloneFrom(prevNode: this): void;
     exportJSON(): SerializedDecoratorBlockNode;
     updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedDecoratorBlockNode>): this;
     canIndent(): false;
     createDOM(): HTMLElement;
     updateDOM(): false;
     setFormat(format: ElementFormatType): this;
+    getFormat(): ElementFormatType;
     isInline(): false;
 }
 export declare function $isDecoratorBlockNode(node: LexicalNode | null | undefined): node is DecoratorBlockNode;

package/LexicalDecoratorBlockNode.dev.js

@@ -24,6 +24,10 @@ class DecoratorBlockNode extends lexical.DecoratorNode {
     super(key);
     this.__format = format || '';
   }
+  afterCloneFrom(prevNode) {
+    super.afterCloneFrom(prevNode);
+    this.__format = prevNode.__format;
+  }
   exportJSON() {
     return {
       ...super.exportJSON(),
@@ -47,6 +51,9 @@ class DecoratorBlockNode extends lexical.DecoratorNode {
     self.__format = format;
     return self;
   }
+  getFormat() {
+    return this.getLatest().__format;
+  }
   isInline() {
     return false;
   }

package/LexicalDecoratorBlockNode.dev.mjs

@@ -22,6 +22,10 @@ class DecoratorBlockNode extends DecoratorNode {
     super(key);
     this.__format = format || '';
   }
+  afterCloneFrom(prevNode) {
+    super.afterCloneFrom(prevNode);
+    this.__format = prevNode.__format;
+  }
   exportJSON() {
     return {
       ...super.exportJSON(),
@@ -45,6 +49,9 @@ class DecoratorBlockNode extends DecoratorNode {
     self.__format = format;
     return self;
   }
+  getFormat() {
+    return this.getLatest().__format;
+  }
   isInline() {
     return false;
   }

package/LexicalDecoratorBlockNode.prod.js

@@ -6,4 +6,4 @@
  *
  */
 
-"use strict";var r=require("lexical");class t extends r.DecoratorNode{__format;constructor(r,t){super(t),this.__format=r||""}exportJSON(){return{...super.exportJSON(),format:this.__format||""}}updateFromJSON(r){return super.updateFromJSON(r).setFormat(r.format||"")}canIndent(){return!1}createDOM(){return document.createElement("div")}updateDOM(){return!1}setFormat(r){const t=this.getWritable();return t.__format=r,t}isInline(){return!1}}exports.$isDecoratorBlockNode=function(r){return r instanceof t},exports.DecoratorBlockNode=t;
+"use strict";var r=require("lexical");class t extends r.DecoratorNode{__format;constructor(r,t){super(t),this.__format=r||""}afterCloneFrom(r){super.afterCloneFrom(r),this.__format=r.__format}exportJSON(){return{...super.exportJSON(),format:this.__format||""}}updateFromJSON(r){return super.updateFromJSON(r).setFormat(r.format||"")}canIndent(){return!1}createDOM(){return document.createElement("div")}updateDOM(){return!1}setFormat(r){const t=this.getWritable();return t.__format=r,t}getFormat(){return this.getLatest().__format}isInline(){return!1}}exports.$isDecoratorBlockNode=function(r){return r instanceof t},exports.DecoratorBlockNode=t;

package/LexicalDecoratorBlockNode.prod.mjs

@@ -6,4 +6,4 @@
  *
  */
 
-import{DecoratorNode as t}from"lexical";class r extends t{__format;constructor(t,r){super(r),this.__format=t||""}exportJSON(){return{...super.exportJSON(),format:this.__format||""}}updateFromJSON(t){return super.updateFromJSON(t).setFormat(t.format||"")}canIndent(){return!1}createDOM(){return document.createElement("div")}updateDOM(){return!1}setFormat(t){const r=this.getWritable();return r.__format=t,r}isInline(){return!1}}function e(t){return t instanceof r}export{e as $isDecoratorBlockNode,r as DecoratorBlockNode};
+import{DecoratorNode as t}from"lexical";class r extends t{__format;constructor(t,r){super(r),this.__format=t||""}afterCloneFrom(t){super.afterCloneFrom(t),this.__format=t.__format}exportJSON(){return{...super.exportJSON(),format:this.__format||""}}updateFromJSON(t){return super.updateFromJSON(t).setFormat(t.format||"")}canIndent(){return!1}createDOM(){return document.createElement("div")}updateDOM(){return!1}setFormat(t){const r=this.getWritable();return r.__format=t,r}getFormat(){return this.getLatest().__format}isInline(){return!1}}function e(t){return t instanceof r}export{e as $isDecoratorBlockNode,r as DecoratorBlockNode};

package/LexicalDraggableBlockPlugin.dev.js

@@ -533,7 +533,7 @@ function useDraggableBlockMenu(editor, anchorElem, menuRef, targetLineRef, isEdi
     if (!IS_FIREFOX || !isEditable) {
       return;
     }
-    return utils.mergeRegister(editor.registerRootListener((rootElement, prevRootElement) => {
+    return utils.mergeRegister(editor.registerRootListener(rootElement => {
       function onBlur(event) {
         const relatedTarget = event.relatedTarget;
         if (relatedTarget && relatedTarget instanceof HTMLElement && isOnMenu(relatedTarget)) {
@@ -557,9 +557,7 @@ function useDraggableBlockMenu(editor, anchorElem, menuRef, targetLineRef, isEdi
       }
       if (rootElement) {
         rootElement.addEventListener('blur', onBlur, true);
-      }
-      if (prevRootElement) {
-        prevRootElement.removeEventListener('blur', onBlur, true);
+        return () => rootElement.removeEventListener('blur', onBlur, true);
       }
     }),
     // Intercept BLUR_COMMAND if focus is on the menu (fallback in case event propagation wasn't stopped)

package/LexicalDraggableBlockPlugin.dev.mjs

@@ -531,7 +531,7 @@ function useDraggableBlockMenu(editor, anchorElem, menuRef, targetLineRef, isEdi
     if (!IS_FIREFOX || !isEditable) {
       return;
     }
-    return mergeRegister(editor.registerRootListener((rootElement, prevRootElement) => {
+    return mergeRegister(editor.registerRootListener(rootElement => {
       function onBlur(event) {
         const relatedTarget = event.relatedTarget;
         if (relatedTarget && relatedTarget instanceof HTMLElement && isOnMenu(relatedTarget)) {
@@ -555,9 +555,7 @@ function useDraggableBlockMenu(editor, anchorElem, menuRef, targetLineRef, isEdi
       }
       if (rootElement) {
         rootElement.addEventListener('blur', onBlur, true);
-      }
-      if (prevRootElement) {
-        prevRootElement.removeEventListener('blur', onBlur, true);
+        return () => rootElement.removeEventListener('blur', onBlur, true);
       }
     }),
     // Intercept BLUR_COMMAND if focus is on the menu (fallback in case event propagation wasn't stopped)

package/LexicalDraggableBlockPlugin.js.flow

@@ -9,7 +9,7 @@
 
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   anchorElem?: ?HTMLElement,
   menuRef: React.RefObject<?HTMLElement>,
   targetLineRef: React.RefObject<?HTMLElement>,

package/LexicalDraggableBlockPlugin.prod.js

@@ -6,4 +6,4 @@
  *
  */
 
-"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 d=1/0;function f(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:d>=0&&d<o?d: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:_}=f(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,d=t;break}0===c&&(c=E?-1:M?1:1/0),t+=c}}),a}function p(t,l,a,u,m,d,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}=f(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):"",d=o.$getNodeByKey(m);if(!d)return!1;if(!n.isHTMLElement(s))return!1;const f=h(l,t,r,!0);if(!f)return!1;const p=o.$getNearestNodeFromDOMNode(f);if(!p)return!1;if(p===d)return c&&t.focus(),!0;const y=f.getBoundingClientRect().top;return u/n.calculateZoomLevel(s)>=y?p.insertAfter(d):p.insertBefore(d),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,n)=>{function r(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())}e&&e.addEventListener("blur",r,!0),n&&n.removeEventListener("blur",r,!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&&d}),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)};
+"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)};

package/LexicalDraggableBlockPlugin.prod.mjs

@@ -6,4 +6,4 @@
  *
  */
 
-import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{eventFiles as e}from"@lexical/rich-text";import{calculateZoomLevel as n,mergeRegister as o,isHTMLElement as r}from"@lexical/utils";import{DRAGOVER_COMMAND as i,COMMAND_PRIORITY_LOW as s,DROP_COMMAND as l,COMMAND_PRIORITY_HIGH as a,BLUR_COMMAND as c,$getSelection as u,$getNodeByKey as m,$getNearestNodeFromDOMNode as g,$onUpdate as h,$getRoot as f}from"lexical";import{useRef as d,useState as p,useCallback as y,useEffect as _}from"react";import{createPortal as x}from"react-dom";import{jsxs as b,Fragment as v,jsx as w}from"react/jsx-runtime";const E="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,T=E&&"documentMode"in document?document.documentMode:null,B=E&&/^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);E&&"InputEvent"in window&&!T&&new window.InputEvent("input");class C{_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 R{_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 C){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 R(t,e,n,o)}static fromLTRB(t,e,n,o){return new R(t,e,n,o)}static fromLWTH(t,e,n,o){return new R(t,n,t+e,n+o)}static fromPoints(t,e){const{y:n,x:o}=t,{y:r,x:i}=e;return R.fromLTRB(o,n,i,r)}static fromDOM(t){const{top:e,width:n,left:o,height:r}=t.getBoundingClientRect();return R.fromLWTH(o,n,e,r)}}const S="application/x-lexical-drag-block";let D=1/0;function L(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 M(t,e,o,r=!1){const i=t.getBoundingClientRect(),s=function(t){return t.getEditorState().read(()=>f().getChildrenKeys())}(e);let l=null;return e.getEditorState().read(()=>{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=n(t),s=n(r);if(o.y/e<i.top?l=t:o.y/s>a.bottom&&(l=r),l)return}}let t=0===(a=s.length)?1/0:D>=0&&D<a?D: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=n(a),m=new C(o.x/u,o.y/u),g=R.fromDOM(a),{marginTop:h,marginBottom:f}=L(a),d=g.generateNewRect({bottom:g.bottom+f,left:i.left,right:i.right,top:g.top-h}),{result:p,reason:{isOnTopSide:y,isOnBottomSide:_}}=d.contains(m);if(p){l=a,D=t;break}0===c&&(c=y?-1:_?1:1/0),t+=c}}),l}function O(t,f,E,T,C,R,D,O,H){const I=f.parentElement,K=d(!1),[N,Y]=p(null),k=y(t=>{Y(t),H&&H(t)},[H]);return _(()=>{function e(e){const n=e.target;if(!r(n))return void k(null);if(O(n))return;const o=M(f,t,e);k(o)}function n(){k(null)}return null!=I&&(I.addEventListener("mousemove",e),I.addEventListener("mouseleave",n)),()=>{null!=I&&(I.removeEventListener("mousemove",e),I.removeEventListener("mouseleave",n))}},[I,f,t,O,k]),_(()=>{const t=n(document.getElementsByClassName("ContentEditable__root")[0],!0);E.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)`}(N,E.current,f,t)},[f,N,E]),_(()=>{function c(o){if(!K.current)return!1;const[i]=e(o);if(i)return!1;const{pageY:s,target:l}=o;if(!r(l))return!1;const a=M(f,t,o,!0),c=T.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}=L(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/n(l),f),o.preventDefault(),!0)}return o(t.registerCommand(i,t=>c(t),s),t.registerCommand(l,o=>function(o){if(!K.current)return!1;const[i]=e(o);if(i)return!1;const{target:s,dataTransfer:l,pageY:a}=o,c=null!=l?l.getData(S):"",u=m(c);if(!u)return!1;if(!r(s))return!1;const d=M(f,t,o,!0);if(!d)return!1;const p=g(d);if(!p)return!1;if(p===u)return B&&t.focus(),!0;const y=d.getBoundingClientRect().top;return a/n(s)>=y?p.insertAfter(u):p.insertBefore(u),k(null),B&&h(()=>{t.focus()}),!0}(o),a))},[f,t,T,k]),_(()=>{if(B&&C)return o(t.registerRootListener((e,n)=>{function o(n){const o=n.relatedTarget;o&&o instanceof HTMLElement&&O(o)&&(e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=u();null===t||t.dirty||(t.dirty=!0)})),n.stopImmediatePropagation())}e&&e.addEventListener("blur",o,!0),n&&n.removeEventListener("blur",o,!0)}),t.registerCommand(c,()=>{const e=t.getRootElement(),n=document.activeElement;return!!(e&&n&&n instanceof HTMLElement&&O(n))&&(e.focus({preventScroll:!0}),t.update(()=>{const t=u();null===t||t.dirty||(t.dirty=!0)}),!0)},a))},[t,C,O]),x(b(v,{children:[w("div",{draggable:!0,onDragStart:function(e){const n=e.dataTransfer;if(!n||!N)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,N);let o="";if(t.update(()=>{const t=g(N);t&&(o=t.getKey())}),K.current=!0,n.setData(S,o),B){const e=t.getRootElement();null!==e&&document.activeElement!==e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=u();null===t||t.dirty||(t.dirty=!0)}))}},onDragEnd:function(){var e;K.current=!1,(e=T.current)&&(e.style.opacity="0",e.style.transform="translate(-10000px, -10000px)"),B&&t.focus()},children:C&&R}),D]}),f)}function H({anchorElem:e=document.body,menuRef:n,targetLineRef:o,menuComponent:r,targetLineComponent:i,isOnMenu:s,onElementChanged:l}){const[a]=t();return O(a,e,n,o,a._editable,r,i,s,l)}export{H as DraggableBlockPlugin_EXPERIMENTAL};
+import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{eventFiles as e}from"@lexical/rich-text";import{calculateZoomLevel as n,mergeRegister as o,isHTMLElement as r}from"@lexical/utils";import{DRAGOVER_COMMAND as i,COMMAND_PRIORITY_LOW as s,DROP_COMMAND as l,COMMAND_PRIORITY_HIGH as a,BLUR_COMMAND as c,$getSelection as u,$getNodeByKey as m,$getNearestNodeFromDOMNode as g,$onUpdate as h,$getRoot as f}from"lexical";import{useRef as d,useState as p,useCallback as y,useEffect as _}from"react";import{createPortal as x}from"react-dom";import{jsxs as b,Fragment as v,jsx as w}from"react/jsx-runtime";const E="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,T=E&&"documentMode"in document?document.documentMode:null,B=E&&/^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);E&&"InputEvent"in window&&!T&&new window.InputEvent("input");class C{_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 R{_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 C){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 R(t,e,n,o)}static fromLTRB(t,e,n,o){return new R(t,e,n,o)}static fromLWTH(t,e,n,o){return new R(t,n,t+e,n+o)}static fromPoints(t,e){const{y:n,x:o}=t,{y:r,x:i}=e;return R.fromLTRB(o,n,i,r)}static fromDOM(t){const{top:e,width:n,left:o,height:r}=t.getBoundingClientRect();return R.fromLWTH(o,n,e,r)}}const S="application/x-lexical-drag-block";let D=1/0;function L(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 M(t,e,o,r=!1){const i=t.getBoundingClientRect(),s=function(t){return t.getEditorState().read(()=>f().getChildrenKeys())}(e);let l=null;return e.getEditorState().read(()=>{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=n(t),s=n(r);if(o.y/e<i.top?l=t:o.y/s>a.bottom&&(l=r),l)return}}let t=0===(a=s.length)?1/0:D>=0&&D<a?D: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=n(a),m=new C(o.x/u,o.y/u),g=R.fromDOM(a),{marginTop:h,marginBottom:f}=L(a),d=g.generateNewRect({bottom:g.bottom+f,left:i.left,right:i.right,top:g.top-h}),{result:p,reason:{isOnTopSide:y,isOnBottomSide:_}}=d.contains(m);if(p){l=a,D=t;break}0===c&&(c=y?-1:_?1:1/0),t+=c}}),l}function O(t,f,E,T,C,R,D,O,H){const I=f.parentElement,K=d(!1),[N,Y]=p(null),k=y(t=>{Y(t),H&&H(t)},[H]);return _(()=>{function e(e){const n=e.target;if(!r(n))return void k(null);if(O(n))return;const o=M(f,t,e);k(o)}function n(){k(null)}return null!=I&&(I.addEventListener("mousemove",e),I.addEventListener("mouseleave",n)),()=>{null!=I&&(I.removeEventListener("mousemove",e),I.removeEventListener("mouseleave",n))}},[I,f,t,O,k]),_(()=>{const t=n(document.getElementsByClassName("ContentEditable__root")[0],!0);E.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)`}(N,E.current,f,t)},[f,N,E]),_(()=>{function c(o){if(!K.current)return!1;const[i]=e(o);if(i)return!1;const{pageY:s,target:l}=o;if(!r(l))return!1;const a=M(f,t,o,!0),c=T.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}=L(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/n(l),f),o.preventDefault(),!0)}return o(t.registerCommand(i,t=>c(t),s),t.registerCommand(l,o=>function(o){if(!K.current)return!1;const[i]=e(o);if(i)return!1;const{target:s,dataTransfer:l,pageY:a}=o,c=null!=l?l.getData(S):"",u=m(c);if(!u)return!1;if(!r(s))return!1;const d=M(f,t,o,!0);if(!d)return!1;const p=g(d);if(!p)return!1;if(p===u)return B&&t.focus(),!0;const y=d.getBoundingClientRect().top;return a/n(s)>=y?p.insertAfter(u):p.insertBefore(u),k(null),B&&h(()=>{t.focus()}),!0}(o),a))},[f,t,T,k]),_(()=>{if(B&&C)return o(t.registerRootListener(e=>{function n(n){const o=n.relatedTarget;o&&o instanceof HTMLElement&&O(o)&&(e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=u();null===t||t.dirty||(t.dirty=!0)})),n.stopImmediatePropagation())}if(e)return e.addEventListener("blur",n,!0),()=>e.removeEventListener("blur",n,!0)}),t.registerCommand(c,()=>{const e=t.getRootElement(),n=document.activeElement;return!!(e&&n&&n instanceof HTMLElement&&O(n))&&(e.focus({preventScroll:!0}),t.update(()=>{const t=u();null===t||t.dirty||(t.dirty=!0)}),!0)},a))},[t,C,O]),x(b(v,{children:[w("div",{draggable:!0,onDragStart:function(e){const n=e.dataTransfer;if(!n||!N)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,N);let o="";if(t.update(()=>{const t=g(N);t&&(o=t.getKey())}),K.current=!0,n.setData(S,o),B){const e=t.getRootElement();null!==e&&document.activeElement!==e&&(e.focus({preventScroll:!0}),t.update(()=>{const t=u();null===t||t.dirty||(t.dirty=!0)}))}},onDragEnd:function(){var e;K.current=!1,(e=T.current)&&(e.style.opacity="0",e.style.transform="translate(-10000px, -10000px)"),B&&t.focus()},children:C&&R}),D]}),f)}function H({anchorElem:e=document.body,menuRef:n,targetLineRef:o,menuComponent:r,targetLineComponent:i,isOnMenu:s,onElementChanged:l}){const[a]=t();return O(a,e,n,o,a._editable,r,i,s,l)}export{H as DraggableBlockPlugin_EXPERIMENTAL};

package/LexicalEditorRefPlugin.d.ts

@@ -6,8 +6,8 @@
  *
  */
 import { LexicalEditor } from 'lexical';
-import { RefObject } from 'react';
 import * as React from 'react';
+import { RefObject } from 'react';
 /**
  *
  * Use this plugin to access the editor instance outside of the

package/LexicalEditorRefPlugin.dev.js

@@ -32,7 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
  *
  */
 
-
 /**
  *
  * Use this plugin to access the editor instance outside of the

package/LexicalEditorRefPlugin.dev.mjs

@@ -17,7 +17,6 @@ import * as React from 'react';
  *
  */
 
-
 /**
  *
  * Use this plugin to access the editor instance outside of the

package/LexicalEditorRefPlugin.js.flow

@@ -12,7 +12,7 @@ import type {LexicalEditor} from 'lexical';
 import type {TRefFor} from 'CoreTypes.flow';
 
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   editorRef: TRefFor<LexicalEditor>,
 }>;
 

package/LexicalErrorBoundary.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-export type LexicalErrorBoundaryProps = $ReadOnly<{
+export type LexicalErrorBoundaryProps = Readonly<{
   children: React.Node,
   onError: (error: Error) => void,
 }>;

package/LexicalExtensionComposer.d.ts

@@ -8,7 +8,7 @@ export interface LexicalExtensionComposerProps {
     /**
      * Any children will have access to useLexicalComposerContext (e.g. for React plug-ins or UX)
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /**
      * Override the default ContentEditable that is rendered as the first child of the
      * composer. If this is null, then it is your responsibility to render a ContentEditable

package/LexicalExtensionEditorComposer.d.ts

@@ -0,0 +1,20 @@
+import { LexicalEditorWithDispose } from 'lexical';
+export interface LexicalExtensionEditorComposerProps {
+    /**
+     * Your root extension, typically defined with {@link defineExtension}
+     */
+    initialEditor: LexicalEditorWithDispose;
+    /**
+     * Any children will have access to useLexicalComposerContext (e.g. for React plug-ins or UX)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The equivalent of LexicalComposer for an editor that was already built for
+ * extensions, typically used with nested editors.
+ *
+ * Make sure that your initialEditor argument is stable (e.g. using module scope or useMemo) so
+ * that you are not re-creating the editor on every render! The editor should be built with
+ * ReactProviderExtension and ReactExtension dependencies.
+ */
+export declare function LexicalExtensionEditorComposer({ initialEditor: editor, children, }: LexicalExtensionEditorComposerProps): import("react/jsx-runtime").JSX.Element;

package/LexicalExtensionEditorComposer.dev.js

@@ -0,0 +1,55 @@
+/**
+ * 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 extension = require('@lexical/extension');
+var ReactExtension = require('@lexical/react/ReactExtension');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * 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.
+ *
+ */
+/**
+ * The equivalent of LexicalComposer for an editor that was already built for
+ * extensions, typically used with nested editors.
+ *
+ * Make sure that your initialEditor argument is stable (e.g. using module scope or useMemo) so
+ * that you are not re-creating the editor on every render! The editor should be built with
+ * ReactProviderExtension and ReactExtension dependencies.
+ */
+function LexicalExtensionEditorComposer({
+  initialEditor: editor,
+  children
+}) {
+  react.useEffect(() => {
+    // Strict mode workaround
+    let didMount = false;
+    queueMicrotask(() => {
+      didMount = true;
+    });
+    return () => {
+      if (didMount) {
+        editor.dispose();
+      }
+    };
+  }, [editor]);
+  const {
+    Component
+  } = extension.getExtensionDependencyFromEditor(editor, ReactExtension.ReactExtension).output;
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
+    children: children
+  });
+}
+
+exports.LexicalExtensionEditorComposer = LexicalExtensionEditorComposer;

package/LexicalExtensionEditorComposer.dev.mjs

@@ -0,0 +1,53 @@
+/**
+ * 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 { getExtensionDependencyFromEditor } from '@lexical/extension';
+import { ReactExtension } from '@lexical/react/ReactExtension';
+import { useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * 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.
+ *
+ */
+/**
+ * The equivalent of LexicalComposer for an editor that was already built for
+ * extensions, typically used with nested editors.
+ *
+ * Make sure that your initialEditor argument is stable (e.g. using module scope or useMemo) so
+ * that you are not re-creating the editor on every render! The editor should be built with
+ * ReactProviderExtension and ReactExtension dependencies.
+ */
+function LexicalExtensionEditorComposer({
+  initialEditor: editor,
+  children
+}) {
+  useEffect(() => {
+    // Strict mode workaround
+    let didMount = false;
+    queueMicrotask(() => {
+      didMount = true;
+    });
+    return () => {
+      if (didMount) {
+        editor.dispose();
+      }
+    };
+  }, [editor]);
+  const {
+    Component
+  } = getExtensionDependencyFromEditor(editor, ReactExtension).output;
+  return /*#__PURE__*/jsx(Component, {
+    children: children
+  });
+}
+
+export { LexicalExtensionEditorComposer };

package/LexicalExtensionEditorComposer.js

@@ -0,0 +1,11 @@
+/**
+ * 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'
+const LexicalExtensionEditorComposer = process.env.NODE_ENV !== 'production' ? require('./LexicalExtensionEditorComposer.dev.js') : require('./LexicalExtensionEditorComposer.prod.js');
+module.exports = LexicalExtensionEditorComposer;

package/LexicalExtensionEditorComposer.js.flow

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+/**
+ * LexicalExtensionEditorComposer
+ */
+
+
+import type {
+  LexicalEditorWithDispose,
+  EditorThemeClasses,
+  LexicalNode,
+  LexicalNodeReplacement,
+} from 'lexical';
+
+export type LexicalNestedComposerProps = {
+  children?: React.Node;
+  initialEditor: LexicalEditorWithDispose;
+};
+
+declare export function LexicalExtensionEditorComposer(props: LexicalNestedComposerProps): React.Node;

package/{LexicalContextMenuPlugin.mjs → LexicalExtensionEditorComposer.mjs}

@@ -6,8 +6,7 @@
  *
  */
 
-import * as modDev from './LexicalContextMenuPlugin.dev.mjs';
-import * as modProd from './LexicalContextMenuPlugin.prod.mjs';
+import * as modDev from './LexicalExtensionEditorComposer.dev.mjs';
+import * as modProd from './LexicalExtensionEditorComposer.prod.mjs';
 const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
-export const LexicalContextMenuPlugin = mod.LexicalContextMenuPlugin;
-export const MenuOption = mod.MenuOption;
+export const LexicalExtensionEditorComposer = mod.LexicalExtensionEditorComposer;

package/{LexicalContextMenuPlugin.node.mjs → LexicalExtensionEditorComposer.node.mjs}

@@ -6,6 +6,5 @@
  *
  */
 
-const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalContextMenuPlugin.dev.mjs') : import('./LexicalContextMenuPlugin.prod.mjs'));
-export const LexicalContextMenuPlugin = mod.LexicalContextMenuPlugin;
-export const MenuOption = mod.MenuOption;
+const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalExtensionEditorComposer.dev.mjs') : import('./LexicalExtensionEditorComposer.prod.mjs'));
+export const LexicalExtensionEditorComposer = mod.LexicalExtensionEditorComposer;

package/LexicalExtensionEditorComposer.prod.js

@@ -0,0 +1,9 @@
+/**
+ * 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 e=require("@lexical/extension"),t=require("@lexical/react/ReactExtension"),r=require("react"),i=require("react/jsx-runtime");exports.LexicalExtensionEditorComposer=function({initialEditor:n,children:o}){r.useEffect(()=>{let e=!1;return queueMicrotask(()=>{e=!0}),()=>{e&&n.dispose()}},[n]);const{Component:c}=e.getExtensionDependencyFromEditor(n,t.ReactExtension).output;return i.jsx(c,{children:o})};

package/LexicalExtensionEditorComposer.prod.mjs

@@ -0,0 +1,9 @@
+/**
+ * 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{getExtensionDependencyFromEditor as t}from"@lexical/extension";import{ReactExtension as r}from"@lexical/react/ReactExtension";import{useEffect as e}from"react";import{jsx as o}from"react/jsx-runtime";function i({initialEditor:i,children:n}){e(()=>{let t=!1;return queueMicrotask(()=>{t=!0}),()=>{t&&i.dispose()}},[i]);const{Component:c}=t(i,r).output;return o(c,{children:n})}export{i as LexicalExtensionEditorComposer};