@payloadcms/richtext-lexical 3.0.0-beta.4 → 3.0.0-beta.40

package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setTargetLine.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.ts"],"names":[],"mappings":";AAOA,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,WAAW,EAC3B,eAAe,EAAE,WAAW,EAC5B,mBAAmB,EAAE,WAAW,GAAG,IAAI,EACvC,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,WAAW,EACvB,KAAK,EAAE,SAAS,EAChB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAClD,yBAAyB,GAAE,OAAe,QAiD3C"}
+{"version":3,"file":"setTargetLine.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.ts"],"names":[],"mappings":";AASA,wBAAgB,aAAa,CAC3B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,cAAc,EAAE,WAAW,EAC3B,eAAe,EAAE,WAAW,EAC5B,eAAe,EAAE;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAA;IACxB,OAAO,EAAE,OAAO,CAAA;CACjB,EACD,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,WAAW,EACvB,KAAK,EAAE,SAAS,EAChB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EACzD,yBAAyB,GAAE,OAAe;;;EA4I3C"}

package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.js

@@ -1,16 +1,54 @@
 import { getCollapsedMargins } from '../utils/getCollapsedMargins.js';
-import { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js';
 import { highlightElemOriginalPosition } from './highlightElemOriginalPosition.js';
 const TARGET_LINE_HALF_HEIGHT = 25;
 const TEXT_BOX_HORIZONTAL_PADDING = -24;
 const DEBUG = false;
-export function setTargetLine(SPACE, targetLineElem, targetBlockElem, lastTargetBlockElem, mouseY, anchorElem, event, debugHighlightRef, isFoundNodeEmptyParagraph = false) {
-    const { height: targetBlockElemHeight, top: targetBlockElemTop } = getBoundingClientRectWithoutTransform(targetBlockElem);
+let animationTimer = 0;
+export function setTargetLine(offsetWidth, offsetLeft, targetLineElem, targetBlockElem, lastTargetBlock, mouseY, anchorElem, event, debugHighlightRef, isFoundNodeEmptyParagraph = false) {
+    const { height: targetBlockElemHeight, top: targetBlockElemTop } = targetBlockElem.getBoundingClientRect() // used to be getBoundingClientRectWithoutTransform. Not sure what's better, but the normal getBoundingClientRect seems to work fine
+    ;
     const { top: anchorTop, width: anchorWidth } = anchorElem.getBoundingClientRect();
     const { marginBottom, marginTop } = getCollapsedMargins(targetBlockElem);
     let lineTop = targetBlockElemTop;
     const isBelow = mouseY >= targetBlockElemTop + targetBlockElemHeight / 2 + window.scrollY;
-    if (!isFoundNodeEmptyParagraph) {
+    let willStayInSamePosition = false;
+    /**
+   * Do not run any transform or changes if the actual new line position would be the same (even if it's now inserted BEFORE rather than AFTER - position would still be the same)
+   * This prevents unnecessary flickering.
+   *
+   * We still need to let it run even if the position (IGNORING the transform) would not change, as the transform animation is not finished yet. This is what animationTimer does. Otherwise, the positioning will be inaccurate
+   */ if (lastTargetBlock?.elem) {
+        if (targetBlockElem !== lastTargetBlock?.elem) {
+            if (isBelow && lastTargetBlock?.elem && lastTargetBlock?.elem === targetBlockElem.nextElementSibling) {
+                animationTimer++;
+                if (animationTimer < 200) {
+                    willStayInSamePosition = true;
+                }
+            } else if (!isBelow && lastTargetBlock?.elem && lastTargetBlock?.elem === targetBlockElem.previousElementSibling) {
+                animationTimer++;
+                if (animationTimer < 200) {
+                    willStayInSamePosition = true;
+                }
+            }
+        } else {
+            animationTimer++;
+            const lastBoundingBoxPosition = lastTargetBlock?.boundingBox?.y;
+            const currentBoundingBoxPosition = targetBlockElem.getBoundingClientRect().y;
+            if (isBelow === lastTargetBlock?.isBelow && lastBoundingBoxPosition === currentBoundingBoxPosition || animationTimer < 200) {
+                willStayInSamePosition = false;
+            }
+        }
+    }
+    if (willStayInSamePosition) {
+        return {
+            isBelow,
+            willStayInSamePosition
+        };
+    }
+    /**
+   * Paragraphs need no isBelow/above handling,
+   */ if (!isFoundNodeEmptyParagraph) {
+        //if (!isFoundNodeEmptyParagraph) {
         if (isBelow) {
             // below targetBlockElem
             lineTop += targetBlockElemHeight + marginBottom / 2;
@@ -21,29 +59,58 @@ export function setTargetLine(SPACE, targetLineElem, targetBlockElem, lastTarget
     } else {
         lineTop += targetBlockElemHeight / 2;
     }
-    const top = lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT;
-    const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE;
-    targetLineElem.style.transform = `translate(${left}px, ${top}px)`;
-    targetLineElem.style.width = `${anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2}px`;
+    let targetElemTranslate2 = 0;
+    if (!isFoundNodeEmptyParagraph) {
+        if (isBelow) {
+            targetElemTranslate2 = -TARGET_LINE_HALF_HEIGHT;
+        } else {
+            targetElemTranslate2 = TARGET_LINE_HALF_HEIGHT;
+        }
+    }
+    const top = lineTop - anchorTop + targetElemTranslate2;
+    const left = TEXT_BOX_HORIZONTAL_PADDING - offsetLeft;
+    targetLineElem.style.width = `calc(${anchorWidth}px - ${offsetWidth})`;
     targetLineElem.style.opacity = '.4';
-    targetBlockElem.style.opacity = '0.4';
+    /**
+   * Move around element below or above the line (= the target / targetBlockElem). Creates "space" for the targetLineElem
+   *
+   * Not needed for empty paragraphs, as an empty paragraph is enough space for the targetLineElem anyways.
+   */ //targetBlockElem.style.opacity = '0.4'
+    const buffer = 12 // creates more spacing/padding so target line is not directly next to the targetBlockElem
+    ;
     if (!isFoundNodeEmptyParagraph) {
-        // move lastTargetBlockElem down 50px to make space for targetLineElem (which is 50px height)
         if (isBelow) {
-            targetBlockElem.style.transform = `translate(0, ${-TARGET_LINE_HALF_HEIGHT / 1.9}px)`;
+            targetBlockElem.style.marginBottom = TARGET_LINE_HALF_HEIGHT * 2 + buffer + 'px';
+            targetLineElem.style.transform = `translate(${left}px, calc(${top}px - ${'0px'}))`;
         } else {
-            targetBlockElem.style.transform = `translate(0, ${TARGET_LINE_HALF_HEIGHT / 1.9}px)`;
+            targetBlockElem.style.marginTop = TARGET_LINE_HALF_HEIGHT * 2 + buffer + 'px';
+            targetLineElem.style.transform = `translate(${left}px, calc(${top - TARGET_LINE_HALF_HEIGHT * 2}px - ${'0px'}))`;
         }
+    } else {
+        targetLineElem.style.transform = `translate(${left}px, ${top - TARGET_LINE_HALF_HEIGHT}px)`;
     }
     if (DEBUG) {
         //targetBlockElem.style.border = '3px solid red'
         highlightElemOriginalPosition(debugHighlightRef, targetBlockElem, anchorElem);
     }
-    if (lastTargetBlockElem && lastTargetBlockElem !== targetBlockElem) {
-        lastTargetBlockElem.style.opacity = '1';
-        lastTargetBlockElem.style.transform = 'translate(0, 0)';
-    //lastTargetBlockElem.style.border = 'none'
+    /**
+   * Properly reset previous targetBlockElem styles
+   */ lastTargetBlock.elem.style.opacity = '';
+    if (lastTargetBlock?.elem === targetBlockElem) {
+        if (isBelow) {
+            lastTargetBlock.elem.style.marginTop = '';
+        } else {
+            lastTargetBlock.elem.style.marginBottom = '';
+        }
+    } else {
+        lastTargetBlock.elem.style.marginBottom = '';
+        lastTargetBlock.elem.style.marginTop = '';
     }
+    animationTimer = 0;
+    return {
+        isBelow,
+        willStayInSamePosition
+    };
 }
 
 //# sourceMappingURL=setTargetLine.js.map

package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.ts"],"sourcesContent":["import { getCollapsedMargins } from '../utils/getCollapsedMargins.js'\nimport { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js'\nimport { highlightElemOriginalPosition } from './highlightElemOriginalPosition.js'\nconst TARGET_LINE_HALF_HEIGHT = 25\nconst TEXT_BOX_HORIZONTAL_PADDING = -24\nconst DEBUG = false\n\nexport function setTargetLine(\n  SPACE: number,\n  targetLineElem: HTMLElement,\n  targetBlockElem: HTMLElement,\n  lastTargetBlockElem: HTMLElement | null,\n  mouseY: number,\n  anchorElem: HTMLElement,\n  event: DragEvent,\n  debugHighlightRef: React.RefObject<HTMLDivElement>,\n  isFoundNodeEmptyParagraph: boolean = false,\n) {\n  const { height: targetBlockElemHeight, top: targetBlockElemTop } =\n    getBoundingClientRectWithoutTransform(targetBlockElem)\n  const { top: anchorTop, width: anchorWidth } = anchorElem.getBoundingClientRect()\n\n  const { marginBottom, marginTop } = getCollapsedMargins(targetBlockElem)\n  let lineTop = targetBlockElemTop\n\n  const isBelow = mouseY >= targetBlockElemTop + targetBlockElemHeight / 2 + window.scrollY\n  if (!isFoundNodeEmptyParagraph) {\n    if (isBelow) {\n      // below targetBlockElem\n      lineTop += targetBlockElemHeight + marginBottom / 2\n    } else {\n      // above targetBlockElem\n      lineTop -= marginTop / 2\n    }\n  } else {\n    lineTop += targetBlockElemHeight / 2\n  }\n\n  const top = lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT\n  const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE\n\n  targetLineElem.style.transform = `translate(${left}px, ${top}px)`\n  targetLineElem.style.width = `${anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2}px`\n  targetLineElem.style.opacity = '.4'\n\n  targetBlockElem.style.opacity = '0.4'\n  if (!isFoundNodeEmptyParagraph) {\n    // move lastTargetBlockElem down 50px to make space for targetLineElem (which is 50px height)\n    if (isBelow) {\n      targetBlockElem.style.transform = `translate(0, ${-TARGET_LINE_HALF_HEIGHT / 1.9}px)`\n    } else {\n      targetBlockElem.style.transform = `translate(0, ${TARGET_LINE_HALF_HEIGHT / 1.9}px)`\n    }\n  }\n\n  if (DEBUG) {\n    //targetBlockElem.style.border = '3px solid red'\n    highlightElemOriginalPosition(debugHighlightRef, targetBlockElem, anchorElem)\n  }\n\n  if (lastTargetBlockElem && lastTargetBlockElem !== targetBlockElem) {\n    lastTargetBlockElem.style.opacity = '1'\n    lastTargetBlockElem.style.transform = 'translate(0, 0)'\n    //lastTargetBlockElem.style.border = 'none'\n  }\n}\n"],"names":["getCollapsedMargins","getBoundingClientRectWithoutTransform","highlightElemOriginalPosition","TARGET_LINE_HALF_HEIGHT","TEXT_BOX_HORIZONTAL_PADDING","DEBUG","setTargetLine","SPACE","targetLineElem","targetBlockElem","lastTargetBlockElem","mouseY","anchorElem","event","debugHighlightRef","isFoundNodeEmptyParagraph","height","targetBlockElemHeight","top","targetBlockElemTop","anchorTop","width","anchorWidth","getBoundingClientRect","marginBottom","marginTop","lineTop","isBelow","window","scrollY","left","style","transform","opacity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,mBAAmB,QAAQ,kCAAiC;AACrE,SAASC,qCAAqC,QAAQ,uCAAsC;AAC5F,SAASC,6BAA6B,QAAQ,qCAAoC;AAClF,MAAMC,0BAA0B;AAChC,MAAMC,8BAA8B,CAAC;AACrC,MAAMC,QAAQ;AAEd,OAAO,SAASC,cACdC,KAAa,EACbC,cAA2B,EAC3BC,eAA4B,EAC5BC,mBAAuC,EACvCC,MAAc,EACdC,UAAuB,EACvBC,KAAgB,EAChBC,iBAAkD,EAClDC,4BAAqC,KAAK;IAE1C,MAAM,EAAEC,QAAQC,qBAAqB,EAAEC,KAAKC,kBAAkB,EAAE,GAC9DlB,sCAAsCQ;IACxC,MAAM,EAAES,KAAKE,SAAS,EAAEC,OAAOC,WAAW,EAAE,GAAGV,WAAWW,qBAAqB;IAE/E,MAAM,EAAEC,YAAY,EAAEC,SAAS,EAAE,GAAGzB,oBAAoBS;IACxD,IAAIiB,UAAUP;IAEd,MAAMQ,UAAUhB,UAAUQ,qBAAqBF,wBAAwB,IAAIW,OAAOC,OAAO;IACzF,IAAI,CAACd,2BAA2B;QAC9B,IAAIY,SAAS;YACX,wBAAwB;YACxBD,WAAWT,wBAAwBO,eAAe;QACpD,OAAO;YACL,wBAAwB;YACxBE,WAAWD,YAAY;QACzB;IACF,OAAO;QACLC,WAAWT,wBAAwB;IACrC;IAEA,MAAMC,MAAMQ,UAAUN,YAAYjB;IAClC,MAAM2B,OAAO1B,8BAA8BG;IAE3CC,eAAeuB,KAAK,CAACC,SAAS,GAAG,CAAC,UAAU,EAAEF,KAAK,IAAI,EAAEZ,IAAI,GAAG,CAAC;IACjEV,eAAeuB,KAAK,CAACV,KAAK,GAAG,CAAC,EAAEC,cAAc,AAAClB,CAAAA,8BAA8BG,KAAI,IAAK,EAAE,EAAE,CAAC;IAC3FC,eAAeuB,KAAK,CAACE,OAAO,GAAG;IAE/BxB,gBAAgBsB,KAAK,CAACE,OAAO,GAAG;IAChC,IAAI,CAAClB,2BAA2B;QAC9B,6FAA6F;QAC7F,IAAIY,SAAS;YACXlB,gBAAgBsB,KAAK,CAACC,SAAS,GAAG,CAAC,aAAa,EAAE,CAAC7B,0BAA0B,IAAI,GAAG,CAAC;QACvF,OAAO;YACLM,gBAAgBsB,KAAK,CAACC,SAAS,GAAG,CAAC,aAAa,EAAE7B,0BAA0B,IAAI,GAAG,CAAC;QACtF;IACF;IAEA,IAAIE,OAAO;QACT,gDAAgD;QAChDH,8BAA8BY,mBAAmBL,iBAAiBG;IACpE;IAEA,IAAIF,uBAAuBA,wBAAwBD,iBAAiB;QAClEC,oBAAoBqB,KAAK,CAACE,OAAO,GAAG;QACpCvB,oBAAoBqB,KAAK,CAACC,SAAS,GAAG;IACtC,2CAA2C;IAC7C;AACF"}
+{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.ts"],"sourcesContent":["import { getCollapsedMargins } from '../utils/getCollapsedMargins.js'\nimport { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js'\nimport { highlightElemOriginalPosition } from './highlightElemOriginalPosition.js'\nconst TARGET_LINE_HALF_HEIGHT = 25\nconst TEXT_BOX_HORIZONTAL_PADDING = -24\nconst DEBUG = false\n\nlet animationTimer = 0\n\nexport function setTargetLine(\n  offsetWidth: string,\n  offsetLeft: number,\n  targetLineElem: HTMLElement,\n  targetBlockElem: HTMLElement,\n  lastTargetBlock: {\n    boundingBox?: DOMRect\n    elem: HTMLElement | null\n    isBelow: boolean\n  },\n  mouseY: number,\n  anchorElem: HTMLElement,\n  event: DragEvent,\n  debugHighlightRef: React.RefObject<HTMLDivElement | null>,\n  isFoundNodeEmptyParagraph: boolean = false,\n) {\n  const { height: targetBlockElemHeight, top: targetBlockElemTop } =\n    targetBlockElem.getBoundingClientRect() // used to be getBoundingClientRectWithoutTransform. Not sure what's better, but the normal getBoundingClientRect seems to work fine\n  const { top: anchorTop, width: anchorWidth } = anchorElem.getBoundingClientRect()\n\n  const { marginBottom, marginTop } = getCollapsedMargins(targetBlockElem)\n  let lineTop = targetBlockElemTop\n\n  const isBelow = mouseY >= targetBlockElemTop + targetBlockElemHeight / 2 + window.scrollY\n\n  let willStayInSamePosition = false\n\n  /**\n   * Do not run any transform or changes if the actual new line position would be the same (even if it's now inserted BEFORE rather than AFTER - position would still be the same)\n   * This prevents unnecessary flickering.\n   *\n   * We still need to let it run even if the position (IGNORING the transform) would not change, as the transform animation is not finished yet. This is what animationTimer does. Otherwise, the positioning will be inaccurate\n   */\n  if (lastTargetBlock?.elem) {\n    if (targetBlockElem !== lastTargetBlock?.elem) {\n      if (\n        isBelow &&\n        lastTargetBlock?.elem &&\n        lastTargetBlock?.elem === targetBlockElem.nextElementSibling\n      ) {\n        animationTimer++\n\n        if (animationTimer < 200) {\n          willStayInSamePosition = true\n        }\n      } else if (\n        !isBelow &&\n        lastTargetBlock?.elem &&\n        lastTargetBlock?.elem === targetBlockElem.previousElementSibling\n      ) {\n        animationTimer++\n        if (animationTimer < 200) {\n          willStayInSamePosition = true\n        }\n      }\n    } else {\n      animationTimer++\n\n      const lastBoundingBoxPosition = lastTargetBlock?.boundingBox?.y\n      const currentBoundingBoxPosition = targetBlockElem.getBoundingClientRect().y\n\n      if (\n        (isBelow === lastTargetBlock?.isBelow &&\n          lastBoundingBoxPosition === currentBoundingBoxPosition) ||\n        animationTimer < 200\n      ) {\n        willStayInSamePosition = false\n      }\n    }\n  }\n  if (willStayInSamePosition) {\n    return {\n      isBelow,\n      willStayInSamePosition,\n    }\n  }\n\n  /**\n   * Paragraphs need no isBelow/above handling,\n   */\n  if (!isFoundNodeEmptyParagraph) {\n    //if (!isFoundNodeEmptyParagraph) {\n    if (isBelow) {\n      // below targetBlockElem\n      lineTop += targetBlockElemHeight + marginBottom / 2\n    } else {\n      // above targetBlockElem\n      lineTop -= marginTop / 2\n    }\n  } else {\n    lineTop += targetBlockElemHeight / 2\n  }\n\n  let targetElemTranslate2 = 0\n\n  if (!isFoundNodeEmptyParagraph) {\n    if (isBelow) {\n      targetElemTranslate2 = -TARGET_LINE_HALF_HEIGHT\n    } else {\n      targetElemTranslate2 = TARGET_LINE_HALF_HEIGHT\n    }\n  }\n\n  const top = lineTop - anchorTop + targetElemTranslate2\n\n  const left = TEXT_BOX_HORIZONTAL_PADDING - offsetLeft\n\n  targetLineElem.style.width = `calc(${anchorWidth}px - ${offsetWidth})`\n  targetLineElem.style.opacity = '.4'\n\n  /**\n   * Move around element below or above the line (= the target / targetBlockElem). Creates \"space\" for the targetLineElem\n   *\n   * Not needed for empty paragraphs, as an empty paragraph is enough space for the targetLineElem anyways.\n   */\n  //targetBlockElem.style.opacity = '0.4'\n  const buffer = 12 // creates more spacing/padding so target line is not directly next to the targetBlockElem\n  if (!isFoundNodeEmptyParagraph) {\n    if (isBelow) {\n      targetBlockElem.style.marginBottom = TARGET_LINE_HALF_HEIGHT * 2 + buffer + 'px'\n      targetLineElem.style.transform = `translate(${left}px, calc(${top}px - ${'0px'}))`\n    } else {\n      targetBlockElem.style.marginTop = TARGET_LINE_HALF_HEIGHT * 2 + buffer + 'px'\n      targetLineElem.style.transform = `translate(${left}px, calc(${top - TARGET_LINE_HALF_HEIGHT * 2}px - ${'0px'}))`\n    }\n  } else {\n    targetLineElem.style.transform = `translate(${left}px, ${top - TARGET_LINE_HALF_HEIGHT}px)`\n  }\n\n  if (DEBUG) {\n    //targetBlockElem.style.border = '3px solid red'\n    highlightElemOriginalPosition(debugHighlightRef, targetBlockElem, anchorElem)\n  }\n\n  /**\n   * Properly reset previous targetBlockElem styles\n   */\n  lastTargetBlock.elem.style.opacity = ''\n\n  if (lastTargetBlock?.elem === targetBlockElem) {\n    if (isBelow) {\n      lastTargetBlock.elem.style.marginTop = ''\n    } else {\n      lastTargetBlock.elem.style.marginBottom = ''\n    }\n  } else {\n    lastTargetBlock.elem.style.marginBottom = ''\n    lastTargetBlock.elem.style.marginTop = ''\n  }\n  animationTimer = 0\n  return {\n    isBelow,\n    willStayInSamePosition,\n  }\n}\n"],"names":["getCollapsedMargins","highlightElemOriginalPosition","TARGET_LINE_HALF_HEIGHT","TEXT_BOX_HORIZONTAL_PADDING","DEBUG","animationTimer","setTargetLine","offsetWidth","offsetLeft","targetLineElem","targetBlockElem","lastTargetBlock","mouseY","anchorElem","event","debugHighlightRef","isFoundNodeEmptyParagraph","height","targetBlockElemHeight","top","targetBlockElemTop","getBoundingClientRect","anchorTop","width","anchorWidth","marginBottom","marginTop","lineTop","isBelow","window","scrollY","willStayInSamePosition","elem","nextElementSibling","previousElementSibling","lastBoundingBoxPosition","boundingBox","y","currentBoundingBoxPosition","targetElemTranslate2","left","style","opacity","buffer","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/lexical/plugins/handles/utils/calculateDistanceFromScrollerElem.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Calculate distance between scrollerElem and target if target is not in scrollerElem
+ */
+export declare const calculateDistanceFromScrollerElem: (scrollerElem: HTMLElement | null, pageX: number, pageY: number, target: HTMLElement, horizontalBuffer?: number, verticalBuffer?: number) => number;
+//# sourceMappingURL=calculateDistanceFromScrollerElem.d.ts.map

package/dist/field/lexical/plugins/handles/utils/calculateDistanceFromScrollerElem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculateDistanceFromScrollerElem.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/utils/calculateDistanceFromScrollerElem.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,iCAAiC,iBAC9B,WAAW,GAAG,IAAI,SACzB,MAAM,SACN,MAAM,UACL,WAAW,qBACD,MAAM,mBACR,MAAM,KACrB,MAwBF,CAAA"}

package/dist/field/lexical/plugins/handles/utils/calculateDistanceFromScrollerElem.js

@@ -0,0 +1,21 @@
+/**
+ * Calculate distance between scrollerElem and target if target is not in scrollerElem
+ */ export const calculateDistanceFromScrollerElem = (scrollerElem, pageX, pageY, target, horizontalBuffer = 50, verticalBuffer = 25)=>{
+    let distanceFromScrollerElem = 0;
+    if (scrollerElem && !scrollerElem.contains(target)) {
+        const { bottom, left, right, top } = scrollerElem.getBoundingClientRect();
+        const adjustedTop = top + window.scrollY;
+        const adjustedBottom = bottom + window.scrollY;
+        if (pageY < adjustedTop - verticalBuffer || pageY > adjustedBottom + verticalBuffer || pageX < left - horizontalBuffer || pageX > right + horizontalBuffer) {
+            return -1;
+        }
+        // This is used to allow the _draggableBlockElem to be found when the mouse is in the
+        // buffer zone around the scrollerElem.
+        if (pageX < left || pageX > right) {
+            distanceFromScrollerElem = pageX < left ? pageX - left : pageX - right;
+        }
+    }
+    return distanceFromScrollerElem;
+};
+
+//# sourceMappingURL=calculateDistanceFromScrollerElem.js.map

package/dist/field/lexical/plugins/handles/utils/calculateDistanceFromScrollerElem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/utils/calculateDistanceFromScrollerElem.ts"],"sourcesContent":["/**\n * Calculate distance between scrollerElem and target if target is not in scrollerElem\n */\nexport const calculateDistanceFromScrollerElem = (\n  scrollerElem: HTMLElement | null,\n  pageX: number,\n  pageY: number,\n  target: HTMLElement,\n  horizontalBuffer: number = 50,\n  verticalBuffer: number = 25,\n): number => {\n  let distanceFromScrollerElem = 0\n  if (scrollerElem && !scrollerElem.contains(target)) {\n    const { bottom, left, right, top } = scrollerElem.getBoundingClientRect()\n\n    const adjustedTop = top + window.scrollY\n    const adjustedBottom = bottom + window.scrollY\n\n    if (\n      pageY < adjustedTop - verticalBuffer ||\n      pageY > adjustedBottom + verticalBuffer ||\n      pageX < left - horizontalBuffer ||\n      pageX > right + horizontalBuffer\n    ) {\n      return -1\n    }\n\n    // This is used to allow the _draggableBlockElem to be found when the mouse is in the\n    // buffer zone around the scrollerElem.\n    if (pageX < left || pageX > right) {\n      distanceFromScrollerElem = pageX < left ? pageX - left : pageX - right\n    }\n  }\n  return distanceFromScrollerElem\n}\n"],"names":["calculateDistanceFromScrollerElem","scrollerElem","pageX","pageY","target","horizontalBuffer","verticalBuffer","distanceFromScrollerElem","contains","bottom","left","right","top","getBoundingClientRect","adjustedTop","window","scrollY","adjustedBottom"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAAA;;CAEC,GACD,OAAO,MAAMA,oCAAoC,CAC/CC,cACAC,OACAC,OACAC,QACAC,mBAA2B,EAAE,EAC7BC,iBAAyB,EAAE;IAE3B,IAAIC,2BAA2B;IAC/B,IAAIN,gBAAgB,CAACA,aAAaO,QAAQ,CAACJ,SAAS;QAClD,MAAM,EAAEK,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,GAAG,EAAE,GAAGX,aAAaY,qBAAqB;QAEvE,MAAMC,cAAcF,MAAMG,OAAOC,OAAO;QACxC,MAAMC,iBAAiBR,SAASM,OAAOC,OAAO;QAE9C,IACEb,QAAQW,cAAcR,kBACtBH,QAAQc,iBAAiBX,kBACzBJ,QAAQQ,OAAOL,oBACfH,QAAQS,QAAQN,kBAChB;YACA,OAAO,CAAC;QACV;QAEA,qFAAqF;QACrF,uCAAuC;QACvC,IAAIH,QAAQQ,QAAQR,QAAQS,OAAO;YACjCJ,2BAA2BL,QAAQQ,OAAOR,QAAQQ,OAAOR,QAAQS;QACnE;IACF;IACA,OAAOJ;AACT,EAAC"}

package/dist/field/lexical/plugins/handles/utils/doesLineHeightAffectElement.d.ts

@@ -0,0 +1,9 @@
+/**
+ * From ChatGPT, only that verified it works for HR elements.
+ *
+ * HTML Elements can have CSS lineHeight applied to them, but it doesn't always affect the visual layout.
+ * This function checks if the line-height property has an effect on the element's layout.
+ * @param htmlElem
+ */
+export declare function doesLineHeightAffectElement(htmlElem: HTMLElement): boolean;
+//# sourceMappingURL=doesLineHeightAffectElement.d.ts.map

package/dist/field/lexical/plugins/handles/utils/doesLineHeightAffectElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"doesLineHeightAffectElement.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/utils/doesLineHeightAffectElement.ts"],"names":[],"mappings":"AAaA;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,WAAW,WA2BhE"}

package/dist/field/lexical/plugins/handles/utils/doesLineHeightAffectElement.js

@@ -0,0 +1,35 @@
+const replacedElements = [
+    'IMG',
+    'INPUT',
+    'TEXTAREA',
+    'SELECT',
+    'BUTTON',
+    'VIDEO',
+    'OBJECT',
+    'EMBED',
+    'IFRAME',
+    'HR'
+];
+/**
+ * From ChatGPT, only that verified it works for HR elements.
+ *
+ * HTML Elements can have CSS lineHeight applied to them, but it doesn't always affect the visual layout.
+ * This function checks if the line-height property has an effect on the element's layout.
+ * @param htmlElem
+ */ export function doesLineHeightAffectElement(htmlElem) {
+    if (!htmlElem) return false;
+    // Check for replaced elements, elements that typically don't support line-height adjustments,
+    // and elements without visible content
+    if (replacedElements.includes(htmlElem.tagName) || htmlElem.offsetHeight === 0 || htmlElem.offsetWidth === 0) {
+        return false;
+    }
+    // Check for specific CSS properties that negate line-height's visual effects
+    const style = window.getComputedStyle(htmlElem);
+    if (style.display === 'table-cell' || style.position === 'absolute' || style.visibility === 'hidden' || style.opacity === '0') {
+        return false;
+    }
+    // This is a basic check, and there can be more complex scenarios where line-height doesn't have an effect.
+    return true;
+}
+
+//# sourceMappingURL=doesLineHeightAffectElement.js.map

package/dist/field/lexical/plugins/handles/utils/doesLineHeightAffectElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/utils/doesLineHeightAffectElement.ts"],"sourcesContent":["const replacedElements = [\n  'IMG',\n  'INPUT',\n  'TEXTAREA',\n  'SELECT',\n  'BUTTON',\n  'VIDEO',\n  'OBJECT',\n  'EMBED',\n  'IFRAME',\n  'HR',\n]\n\n/**\n * From ChatGPT, only that verified it works for HR elements.\n *\n * HTML Elements can have CSS lineHeight applied to them, but it doesn't always affect the visual layout.\n * This function checks if the line-height property has an effect on the element's layout.\n * @param htmlElem\n */\nexport function doesLineHeightAffectElement(htmlElem: HTMLElement) {\n  if (!htmlElem) return false\n\n  // Check for replaced elements, elements that typically don't support line-height adjustments,\n  // and elements without visible content\n\n  if (\n    replacedElements.includes(htmlElem.tagName) ||\n    htmlElem.offsetHeight === 0 ||\n    htmlElem.offsetWidth === 0\n  ) {\n    return false\n  }\n\n  // Check for specific CSS properties that negate line-height's visual effects\n  const style = window.getComputedStyle(htmlElem)\n  if (\n    style.display === 'table-cell' ||\n    style.position === 'absolute' ||\n    style.visibility === 'hidden' ||\n    style.opacity === '0'\n  ) {\n    return false\n  }\n\n  // This is a basic check, and there can be more complex scenarios where line-height doesn't have an effect.\n  return true\n}\n"],"names":["replacedElements","doesLineHeightAffectElement","htmlElem","includes","tagName","offsetHeight","offsetWidth","style","window","getComputedStyle","display","position","visibility","opacity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,MAAMA,mBAAmB;IACvB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED;;;;;;CAMC,GACD,OAAO,SAASC,4BAA4BC,QAAqB;IAC/D,IAAI,CAACA,UAAU,OAAO;IAEtB,8FAA8F;IAC9F,uCAAuC;IAEvC,IACEF,iBAAiBG,QAAQ,CAACD,SAASE,OAAO,KAC1CF,SAASG,YAAY,KAAK,KAC1BH,SAASI,WAAW,KAAK,GACzB;QACA,OAAO;IACT;IAEA,6EAA6E;IAC7E,MAAMC,QAAQC,OAAOC,gBAAgB,CAACP;IACtC,IACEK,MAAMG,OAAO,KAAK,gBAClBH,MAAMI,QAAQ,KAAK,cACnBJ,MAAMK,UAAU,KAAK,YACrBL,MAAMM,OAAO,KAAK,KAClB;QACA,OAAO;IACT;IAEA,2GAA2G;IAC3G,OAAO;AACT"}

package/dist/field/lexical/plugins/handles/{DraggableBlockPlugin → utils}/getNodeCloseToPoint.d.ts

@@ -2,12 +2,16 @@ import type { LexicalEditor, LexicalNode } from 'lexical';
 import { Point } from '../../../utils/point.js';
 type Props = {
     anchorElem: HTMLElement;
-    cache_treshold?: number;
+    cache_threshold?: number;
     editor: LexicalEditor;
     /** fuzzy makes the search not exact. If no exact match found, find the closes node instead of returning null */
     fuzzy?: boolean;
     horizontalOffset?: number;
     point: Point;
+    /**
+     * By default, empty paragraphs are not returned. Set this to true to return empty paragraphs. @default false
+     */
+    returnEmptyParagraphs?: boolean;
     /**
      * The index to start searching from. It can be a considerable performance optimization to start searching from the index of the
      * previously found node, as the node is likely to be close to the next node.

package/dist/field/lexical/plugins/handles/utils/getNodeCloseToPoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getNodeCloseToPoint.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/utils/getNodeCloseToPoint.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAW/C,KAAK,KAAK,GAAG;IACX,UAAU,EAAE,WAAW,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,EAAE,aAAa,CAAA;IACrB,gHAAgH;IAChH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,EAAE,KAAK,CAAA;IACZ;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,MAAM,GAAG;IACZ,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IAC7B,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IAC7B,YAAY,EAAE,MAAM,CAAA;IACpB,yBAAyB,EAAE,OAAO,CAAA;CACnC,CAAA;AAaD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAmKxD"}

package/dist/field/lexical/plugins/handles/{DraggableBlockPlugin → utils}/getNodeCloseToPoint.js

@@ -1,10 +1,9 @@
-import lexicalImport from 'lexical';
-const { $getNodeByKey } = lexicalImport;
+import { $getNodeByKey } from 'lexical';
 import { Point } from '../../../utils/point.js';
 import { Rect } from '../../../utils/rect.js';
+import { getBoundingClientRectWithoutTransform } from '../DraggableBlockPlugin/getBoundingRectWithoutTransform.js';
 import { getCollapsedMargins } from '../utils/getCollapsedMargins.js';
 import { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js';
-import { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js';
 // Directions
 const Downward = 1;
 const Upward = -1;
@@ -19,12 +18,9 @@ function isPointClose(previous, current, threshold = 20) {
     return dx * dx + dy * dy <= threshold * threshold;
 }
 export function getNodeCloseToPoint(props) {
-    const { anchorElem, cache_treshold = 20, editor, fuzzy = false, horizontalOffset = 0, point: { x, y }, startIndex = 0, useEdgeAsDefault = false, verbose = false } = props;
+    const { anchorElem, cache_threshold = 20, editor, fuzzy = false, horizontalOffset = 0, point: { x, y }, startIndex = 0, useEdgeAsDefault = false, verbose = false } = props;
     // Use cache
-    if (cache_treshold > 0 && cache.props && cache.result && cache.props.fuzzy === props.fuzzy && cache.props.horizontalOffset === props.horizontalOffset && cache.props.useEdgeAsDefault === props.useEdgeAsDefault && isPointClose(cache.props.point, props.point, cache_treshold)) {
-        if (verbose) {
-        //console.log('Returning cached result')
-        }
+    if (cache_threshold > 0 && cache.props && cache.result && cache.props.fuzzy === props.fuzzy && cache.props.horizontalOffset === props.horizontalOffset && cache.props.useEdgeAsDefault === props.useEdgeAsDefault && isPointClose(cache.props.point, props.point, cache_threshold)) {
         return cache.result;
     }
     const anchorElementRect = anchorElem.getBoundingClientRect();
@@ -60,9 +56,6 @@ export function getNodeCloseToPoint(props) {
                     closestBlockElem.foundAtIndex = topLevelNodeKeys.length - 1;
                 }
                 if (closestBlockElem?.blockElem) {
-                    if (verbose) {
-                    //console.log('useEdgeAsDefault', useEdgeAsDefault)
-                    }
                     return {
                         blockElem: null,
                         isFoundNodeEmptyParagraph: false
@@ -73,9 +66,6 @@ export function getNodeCloseToPoint(props) {
         // Find matching block element
         let index = startIndex;
         let direction = Indeterminate;
-        if (verbose) {
-        //console.log('start index', startIndex)
-        }
         while(index >= 0 && index < topLevelNodeKeys.length){
             const key = topLevelNodeKeys[index];
             const elem = editor.getElementByKey(key);
@@ -94,9 +84,6 @@ export function getNodeCloseToPoint(props) {
                 top: domRect.top - marginTop
             });
             const { distance, isOnBottomSide, isOnTopSide } = rect.distanceFromPoint(point);
-            if (verbose) {
-            //console.log('distance', distance)
-            }
             if (distance === 0) {
                 closestBlockElem.blockElem = elem;
                 closestBlockElem.blockNode = $getNodeByKey(key);
@@ -104,7 +91,7 @@ export function getNodeCloseToPoint(props) {
                 closestBlockElem.distance = distance;
                 // Check if blockNode is an empty text node
                 if (closestBlockElem.blockNode && closestBlockElem.blockNode.getType() === 'paragraph' && closestBlockElem.blockNode.getTextContent() === '') {
-                    if (!fuzzy) {
+                    if (!fuzzy && !props.returnEmptyParagraphs) {
                         closestBlockElem.blockElem = null;
                         closestBlockElem.blockNode = null;
                     }

package/dist/field/lexical/plugins/handles/utils/getNodeCloseToPoint.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/utils/getNodeCloseToPoint.ts"],"sourcesContent":["import type { LexicalEditor, LexicalNode } from 'lexical'\n\nimport { $getNodeByKey } from 'lexical'\n\nimport { Point } from '../../../utils/point.js'\nimport { Rect } from '../../../utils/rect.js'\nimport { getBoundingClientRectWithoutTransform } from '../DraggableBlockPlugin/getBoundingRectWithoutTransform.js'\nimport { getCollapsedMargins } from '../utils/getCollapsedMargins.js'\nimport { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js'\n\n// Directions\nconst Downward = 1\nconst Upward = -1\nconst Indeterminate = 0\n\ntype Props = {\n  anchorElem: HTMLElement\n  cache_threshold?: number\n  editor: LexicalEditor\n  /** fuzzy makes the search not exact. If no exact match found, find the closes node instead of returning null */\n  fuzzy?: boolean\n  horizontalOffset?: number\n  point: Point\n  /**\n   * By default, empty paragraphs are not returned. Set this to true to return empty paragraphs. @default false\n   */\n  returnEmptyParagraphs?: boolean\n  /**\n   * The index to start searching from. It can be a considerable performance optimization to start searching from the index of the\n   * previously found node, as the node is likely to be close to the next node.\n   */\n  startIndex?: number\n  useEdgeAsDefault?: boolean\n  verbose?: boolean\n}\n\ntype Output = {\n  blockElem: HTMLElement | null\n  blockNode: LexicalNode | null\n  foundAtIndex: number\n  isFoundNodeEmptyParagraph: boolean\n}\n\nconst cache = {\n  props: null as Props | null,\n  result: null as Output | null,\n}\n\nfunction isPointClose(previous: Point, current: Point, threshold: number = 20): boolean {\n  const dx = previous.x - current.x\n  const dy = previous.y - current.y\n  return dx * dx + dy * dy <= threshold * threshold\n}\n\nexport function getNodeCloseToPoint(props: Props): Output {\n  const {\n    anchorElem,\n    cache_threshold = 20,\n    editor,\n    fuzzy = false,\n    horizontalOffset = 0,\n    point: { x, y },\n    startIndex = 0,\n    useEdgeAsDefault = false,\n    verbose = false,\n  } = props\n\n  // Use cache\n  if (\n    cache_threshold > 0 &&\n    cache.props &&\n    cache.result &&\n    cache.props.fuzzy === props.fuzzy &&\n    cache.props.horizontalOffset === props.horizontalOffset &&\n    cache.props.useEdgeAsDefault === props.useEdgeAsDefault &&\n    isPointClose(cache.props.point, props.point, cache_threshold)\n  ) {\n    return cache.result\n  }\n\n  const anchorElementRect = anchorElem.getBoundingClientRect()\n  const topLevelNodeKeys = getTopLevelNodeKeys(editor)\n\n  const closestBlockElem: {\n    blockElem: HTMLElement | null\n    blockNode: LexicalNode | null\n    distance: number\n    foundAtIndex: number\n    isFoundNodeEmptyParagraph: boolean\n  } = {\n    blockElem: null,\n    blockNode: null,\n    distance: Infinity,\n    foundAtIndex: -1,\n    isFoundNodeEmptyParagraph: false,\n  }\n\n  // Return null if matching block element is the first or last node\n  editor.getEditorState().read(() => {\n    if (useEdgeAsDefault) {\n      const [firstNode, lastNode] = [\n        editor.getElementByKey(topLevelNodeKeys[0]),\n        editor.getElementByKey(topLevelNodeKeys[topLevelNodeKeys.length - 1]),\n      ]\n\n      const [firstNodeRect, lastNodeRect] = [\n        getBoundingClientRectWithoutTransform(firstNode),\n        getBoundingClientRectWithoutTransform(lastNode),\n      ]\n\n      if (firstNodeRect && lastNodeRect) {\n        if (y < firstNodeRect.top) {\n          closestBlockElem.blockElem = firstNode\n          closestBlockElem.distance = firstNodeRect.top - y\n          closestBlockElem.blockNode = $getNodeByKey(topLevelNodeKeys[0])\n          closestBlockElem.foundAtIndex = 0\n        } else if (y > lastNodeRect.bottom) {\n          closestBlockElem.distance = y - lastNodeRect.bottom\n          closestBlockElem.blockNode = $getNodeByKey(topLevelNodeKeys[topLevelNodeKeys.length - 1])\n          closestBlockElem.blockElem = lastNode\n          closestBlockElem.foundAtIndex = topLevelNodeKeys.length - 1\n        }\n\n        if (closestBlockElem?.blockElem) {\n          return {\n            blockElem: null,\n            isFoundNodeEmptyParagraph: false,\n          } as Output\n        }\n      }\n    }\n\n    // Find matching block element\n    let index = startIndex\n    let direction = Indeterminate\n\n    while (index >= 0 && index < topLevelNodeKeys.length) {\n      const key = topLevelNodeKeys[index]\n      const elem = editor.getElementByKey(key)\n      if (elem === null) {\n        break\n      }\n      const point = new Point(x + horizontalOffset, y)\n      //const domRect = Rect.fromDOM(elem)\n      // Do not consider transform of blocks when calculating distance\n      const domRect = Rect.fromDOMRect(getBoundingClientRectWithoutTransform(elem))\n\n      const { marginBottom, marginTop } = getCollapsedMargins(elem)\n\n      const rect = domRect.generateNewRect({\n        bottom: domRect.bottom + marginBottom,\n        left: anchorElementRect.left,\n        right: anchorElementRect.right,\n        top: domRect.top - marginTop,\n      })\n\n      const { distance, isOnBottomSide, isOnTopSide } = rect.distanceFromPoint(point)\n\n      if (distance === 0) {\n        closestBlockElem.blockElem = elem\n        closestBlockElem.blockNode = $getNodeByKey(key)\n        closestBlockElem.foundAtIndex = index\n        closestBlockElem.distance = distance\n\n        // Check if blockNode is an empty text node\n        if (\n          closestBlockElem.blockNode &&\n          closestBlockElem.blockNode.getType() === 'paragraph' &&\n          closestBlockElem.blockNode.getTextContent() === ''\n        ) {\n          if (!fuzzy && !props.returnEmptyParagraphs) {\n            closestBlockElem.blockElem = null\n            closestBlockElem.blockNode = null\n          }\n\n          closestBlockElem.isFoundNodeEmptyParagraph = true\n        }\n        break\n      } else if (fuzzy) {\n        if (distance < closestBlockElem.distance) {\n          closestBlockElem.blockElem = elem\n          closestBlockElem.blockNode = $getNodeByKey(key)\n          closestBlockElem.distance = distance\n          closestBlockElem.foundAtIndex = index\n        }\n      }\n\n      if (direction === Indeterminate) {\n        if (isOnTopSide) {\n          direction = Upward\n        } else if (isOnBottomSide) {\n          direction = Downward\n        } else {\n          // stop search block element\n          direction = Infinity\n        }\n      }\n\n      index += direction\n    }\n  })\n\n  // Store in cache before returning\n  cache.props = props\n  cache.result = {\n    blockElem: closestBlockElem.blockElem,\n    blockNode: closestBlockElem.blockNode,\n    foundAtIndex: closestBlockElem.foundAtIndex,\n    isFoundNodeEmptyParagraph: closestBlockElem.isFoundNodeEmptyParagraph,\n  }\n\n  return {\n    blockElem: closestBlockElem.blockElem,\n    blockNode: closestBlockElem.blockNode,\n    foundAtIndex: closestBlockElem.foundAtIndex,\n    isFoundNodeEmptyParagraph: closestBlockElem.isFoundNodeEmptyParagraph,\n  }\n}\n"],"names":["$getNodeByKey","Point","Rect","getBoundingClientRectWithoutTransform","getCollapsedMargins","getTopLevelNodeKeys","Downward","Upward","Indeterminate","cache","props","result","isPointClose","previous","current","threshold","dx","x","dy","y","getNodeCloseToPoint","anchorElem","cache_threshold","editor","fuzzy","horizontalOffset","point","startIndex","useEdgeAsDefault","verbose","anchorElementRect","getBoundingClientRect","topLevelNodeKeys","closestBlockElem","blockElem","blockNode","distance","Infinity","foundAtIndex","isFoundNodeEmptyParagraph","getEditorState","read","firstNode","lastNode","getElementByKey","length","firstNodeRect","lastNodeRect","top","bottom","index","direction","key","elem","domRect","fromDOMRect","marginBottom","marginTop","rect","generateNewRect","left","right","isOnBottomSide","isOnTopSide","distanceFromPoint","getType","getTextContent","returnEmptyParagraphs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/lexical/plugins/handles/utils/getTopLevelNodeKeys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getTopLevelNodeKeys.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/utils/getTopLevelNodeKeys.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAK5C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,EAAE,CAEnE"}
+{"version":3,"file":"getTopLevelNodeKeys.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/utils/getTopLevelNodeKeys.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAI5C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,EAAE,CAEnE"}

package/dist/field/lexical/plugins/handles/utils/getTopLevelNodeKeys.js

@@ -1,5 +1,4 @@
-import lexicalImport from 'lexical';
-const { $getRoot } = lexicalImport;
+import { $getRoot } from 'lexical';
 export function getTopLevelNodeKeys(editor) {
     return editor.getEditorState().read(()=>$getRoot().getChildrenKeys());
 }

package/dist/field/lexical/plugins/handles/utils/getTopLevelNodeKeys.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/utils/getTopLevelNodeKeys.ts"],"sourcesContent":["import type { LexicalEditor } from 'lexical'\n\nimport lexicalImport from 'lexical'\nconst { $getRoot } = lexicalImport\n\nexport function getTopLevelNodeKeys(editor: LexicalEditor): string[] {\n  return editor.getEditorState().read(() => $getRoot().getChildrenKeys())\n}\n"],"names":["lexicalImport","$getRoot","getTopLevelNodeKeys","editor","getEditorState","read","getChildrenKeys"],"rangeMappings":";;;;","mappings":"AAEA,OAAOA,mBAAmB,UAAS;AACnC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;AAErB,OAAO,SAASE,oBAAoBC,MAAqB;IACvD,OAAOA,OAAOC,cAAc,GAAGC,IAAI,CAAC,IAAMJ,WAAWK,eAAe;AACtE"}
+{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/utils/getTopLevelNodeKeys.ts"],"sourcesContent":["import type { LexicalEditor } from 'lexical'\n\nimport { $getRoot } from 'lexical'\n\nexport function getTopLevelNodeKeys(editor: LexicalEditor): string[] {\n  return editor.getEditorState().read(() => $getRoot().getChildrenKeys())\n}\n"],"names":["$getRoot","getTopLevelNodeKeys","editor","getEditorState","read","getChildrenKeys"],"rangeMappings":";;;","mappings":"AAEA,SAASA,QAAQ,QAAQ,UAAS;AAElC,OAAO,SAASC,oBAAoBC,MAAqB;IACvD,OAAOA,OAAOC,cAAc,GAAGC,IAAI,CAAC,IAAMJ,WAAWK,eAAe;AACtE"}

package/dist/field/lexical/plugins/handles/utils/setHandlePosition.d.ts

@@ -1,2 +1,2 @@
-export declare function setHandlePosition(targetElem: HTMLElement | null, floatingElem: HTMLElement, anchorElem: HTMLElement, leftOffset?: number): void;
+export declare function setHandlePosition(targetElem: HTMLElement | null, handleElem: HTMLElement, anchorElem: HTMLElement, leftOffset?: number): void;
 //# sourceMappingURL=setHandlePosition.d.ts.map

package/dist/field/lexical/plugins/handles/utils/setHandlePosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setHandlePosition.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/utils/setHandlePosition.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,WAAW,GAAG,IAAI,EAC9B,YAAY,EAAE,WAAW,EACzB,UAAU,EAAE,WAAW,EACvB,UAAU,GAAE,MAAU,QAsBvB"}
+{"version":3,"file":"setHandlePosition.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/utils/setHandlePosition.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,WAAW,GAAG,IAAI,EAC9B,UAAU,EAAE,WAAW,EACvB,UAAU,EAAE,WAAW,EACvB,UAAU,GAAE,MAAU,QAuCvB"}

package/dist/field/lexical/plugins/handles/utils/setHandlePosition.js

@@ -1,17 +1,29 @@
-export function setHandlePosition(targetElem, floatingElem, anchorElem, leftOffset = 0) {
+import { doesLineHeightAffectElement } from './doesLineHeightAffectElement.js';
+export function setHandlePosition(targetElem, handleElem, anchorElem, leftOffset = 0) {
     if (!targetElem) {
-        floatingElem.style.opacity = '0';
-        floatingElem.style.transform = 'translate(-10000px, -10000px)';
+        handleElem.style.opacity = '0';
+        handleElem.style.transform = 'translate(-10000px, -10000px)';
         return;
     }
     const targetRect = targetElem.getBoundingClientRect();
     const targetStyle = window.getComputedStyle(targetElem);
-    const floatingElemRect = floatingElem.getBoundingClientRect();
+    const floatingElemRect = handleElem.getBoundingClientRect();
     const anchorElementRect = anchorElem.getBoundingClientRect();
-    const top = targetRect.top + (parseInt(targetStyle.lineHeight, 10) - floatingElemRect.height) / 2 - anchorElementRect.top;
+    let top;
+    const shouldDisplayHandleInCenter = targetRect.height < 60;
+    if (!shouldDisplayHandleInCenter) {
+        // No need to let line height affect the re-positioning of the floating element if line height has no
+        // visual effect on the element. Otherwise, the floating element will be positioned incorrectly.
+        const actualLineHeight = doesLineHeightAffectElement(targetElem) ? parseInt(targetStyle.lineHeight, 10) : 0;
+        top = targetRect.top + (actualLineHeight - floatingElemRect.height) / 2 - anchorElementRect.top - 1 // 1px inaccuracy
+        ;
+    } else {
+        top = targetRect.top - floatingElemRect.height / 2 - anchorElementRect.top + targetRect.height / 2 - 1 // 1px inaccuracy
+        ;
+    }
     const left = leftOffset;
-    floatingElem.style.opacity = '1';
-    floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+    handleElem.style.opacity = '1';
+    handleElem.style.transform = `translate(${left}px, ${top}px)`;
 }
 
 //# sourceMappingURL=setHandlePosition.js.map

package/dist/field/lexical/plugins/handles/utils/setHandlePosition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/utils/setHandlePosition.ts"],"sourcesContent":["export function setHandlePosition(\n  targetElem: HTMLElement | null,\n  floatingElem: HTMLElement,\n  anchorElem: HTMLElement,\n  leftOffset: number = 0, // SPACE\n) {\n  if (!targetElem) {\n    floatingElem.style.opacity = '0'\n    floatingElem.style.transform = 'translate(-10000px, -10000px)'\n    return\n  }\n\n  const targetRect = targetElem.getBoundingClientRect()\n  const targetStyle = window.getComputedStyle(targetElem)\n  const floatingElemRect = floatingElem.getBoundingClientRect()\n  const anchorElementRect = anchorElem.getBoundingClientRect()\n\n  const top =\n    targetRect.top +\n    (parseInt(targetStyle.lineHeight, 10) - floatingElemRect.height) / 2 -\n    anchorElementRect.top\n\n  const left = leftOffset\n\n  floatingElem.style.opacity = '1'\n  floatingElem.style.transform = `translate(${left}px, ${top}px)`\n}\n"],"names":["setHandlePosition","targetElem","floatingElem","anchorElem","leftOffset","style","opacity","transform","targetRect","getBoundingClientRect","targetStyle","window","getComputedStyle","floatingElemRect","anchorElementRect","top","parseInt","lineHeight","height","left"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,OAAO,SAASA,kBACdC,UAA8B,EAC9BC,YAAyB,EACzBC,UAAuB,EACvBC,aAAqB,CAAC;IAEtB,IAAI,CAACH,YAAY;QACfC,aAAaG,KAAK,CAACC,OAAO,GAAG;QAC7BJ,aAAaG,KAAK,CAACE,SAAS,GAAG;QAC/B;IACF;IAEA,MAAMC,aAAaP,WAAWQ,qBAAqB;IACnD,MAAMC,cAAcC,OAAOC,gBAAgB,CAACX;IAC5C,MAAMY,mBAAmBX,aAAaO,qBAAqB;IAC3D,MAAMK,oBAAoBX,WAAWM,qBAAqB;IAE1D,MAAMM,MACJP,WAAWO,GAAG,GACd,AAACC,CAAAA,SAASN,YAAYO,UAAU,EAAE,MAAMJ,iBAAiBK,MAAM,AAAD,IAAK,IACnEJ,kBAAkBC,GAAG;IAEvB,MAAMI,OAAOf;IAEbF,aAAaG,KAAK,CAACC,OAAO,GAAG;IAC7BJ,aAAaG,KAAK,CAACE,SAAS,GAAG,CAAC,UAAU,EAAEY,KAAK,IAAI,EAAEJ,IAAI,GAAG,CAAC;AACjE"}
+{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/utils/setHandlePosition.ts"],"sourcesContent":["import { doesLineHeightAffectElement } from './doesLineHeightAffectElement.js'\n\nexport function setHandlePosition(\n  targetElem: HTMLElement | null,\n  handleElem: HTMLElement,\n  anchorElem: HTMLElement,\n  leftOffset: number = 0, // SPACE\n) {\n  if (!targetElem) {\n    handleElem.style.opacity = '0'\n    handleElem.style.transform = 'translate(-10000px, -10000px)'\n    return\n  }\n\n  const targetRect = targetElem.getBoundingClientRect()\n  const targetStyle = window.getComputedStyle(targetElem)\n  const floatingElemRect = handleElem.getBoundingClientRect()\n  const anchorElementRect = anchorElem.getBoundingClientRect()\n\n  let top: number\n\n  const shouldDisplayHandleInCenter = targetRect.height < 60\n\n  if (!shouldDisplayHandleInCenter) {\n    // No need to let line height affect the re-positioning of the floating element if line height has no\n    // visual effect on the element. Otherwise, the floating element will be positioned incorrectly.\n    const actualLineHeight = doesLineHeightAffectElement(targetElem)\n      ? parseInt(targetStyle.lineHeight, 10)\n      : 0\n\n    top =\n      targetRect.top + (actualLineHeight - floatingElemRect.height) / 2 - anchorElementRect.top - 1 // 1px inaccuracy\n  } else {\n    top =\n      targetRect.top -\n      floatingElemRect.height / 2 -\n      anchorElementRect.top +\n      targetRect.height / 2 -\n      1 // 1px inaccuracy\n  }\n\n  const left = leftOffset\n\n  handleElem.style.opacity = '1'\n  handleElem.style.transform = `translate(${left}px, ${top}px)`\n}\n"],"names":["doesLineHeightAffectElement","setHandlePosition","targetElem","handleElem","anchorElem","leftOffset","style","opacity","transform","targetRect","getBoundingClientRect","targetStyle","window","getComputedStyle","floatingElemRect","anchorElementRect","top","shouldDisplayHandleInCenter","height","actualLineHeight","parseInt","lineHeight","left"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,2BAA2B,QAAQ,mCAAkC;AAE9E,OAAO,SAASC,kBACdC,UAA8B,EAC9BC,UAAuB,EACvBC,UAAuB,EACvBC,aAAqB,CAAC;IAEtB,IAAI,CAACH,YAAY;QACfC,WAAWG,KAAK,CAACC,OAAO,GAAG;QAC3BJ,WAAWG,KAAK,CAACE,SAAS,GAAG;QAC7B;IACF;IAEA,MAAMC,aAAaP,WAAWQ,qBAAqB;IACnD,MAAMC,cAAcC,OAAOC,gBAAgB,CAACX;IAC5C,MAAMY,mBAAmBX,WAAWO,qBAAqB;IACzD,MAAMK,oBAAoBX,WAAWM,qBAAqB;IAE1D,IAAIM;IAEJ,MAAMC,8BAA8BR,WAAWS,MAAM,GAAG;IAExD,IAAI,CAACD,6BAA6B;QAChC,qGAAqG;QACrG,gGAAgG;QAChG,MAAME,mBAAmBnB,4BAA4BE,cACjDkB,SAAST,YAAYU,UAAU,EAAE,MACjC;QAEJL,MACEP,WAAWO,GAAG,GAAG,AAACG,CAAAA,mBAAmBL,iBAAiBI,MAAM,AAAD,IAAK,IAAIH,kBAAkBC,GAAG,GAAG,EAAE,iBAAiB;;IACnH,OAAO;QACLA,MACEP,WAAWO,GAAG,GACdF,iBAAiBI,MAAM,GAAG,IAC1BH,kBAAkBC,GAAG,GACrBP,WAAWS,MAAM,GAAG,IACpB,EAAE,iBAAiB;;IACvB;IAEA,MAAMI,OAAOjB;IAEbF,WAAWG,KAAK,CAACC,OAAO,GAAG;IAC3BJ,WAAWG,KAAK,CAACE,SAAS,GAAG,CAAC,UAAU,EAAEc,KAAK,IAAI,EAAEN,IAAI,GAAG,CAAC;AAC/D"}

package/dist/field/lexical/theme/EditorTheme.scss

@@ -15,10 +15,13 @@
     position: relative;
   }
 
+  // No bottom margin for last paragraph in editor. This also created nice animations when adding a new line at the end
+  .ContentEditable__root > &__paragraph:last-child {
+    margin-bottom: 0;
+  }
+
   &__quote {
-    margin: 0;
-    margin-left: 20px;
-    margin-bottom: 10px;
+    margin: 0 0 10px 20px;
     font-size: 15px;
     color: rgb(101, 103, 107);
     border-left-color: rgb(206, 208, 212);
@@ -115,9 +118,7 @@
     padding: 8px 8px 8px 52px;
     line-height: 1.53;
     font-size: 13px;
-    margin: 0;
-    margin-top: 8px;
-    margin-bottom: 8px;
+    margin: 8px 0;
     tab-size: 2;
     /* white-space: pre; */
     overflow-x: auto;
@@ -292,8 +293,7 @@
 
   &__ol1 {
     padding: 0;
-    margin: 0;
-    list-style-position: inside;
+    list-style-position: outside;
     margin: 0 0 1.5em;
   }
 
@@ -301,38 +301,42 @@
     padding: 0;
     margin: 0;
     list-style-type: upper-alpha;
-    list-style-position: inside;
+    list-style-position: outside;
   }
 
   &__ol3 {
     padding: 0;
     margin: 0;
     list-style-type: lower-alpha;
-    list-style-position: inside;
+    list-style-position: outside;
   }
 
   &__ol4 {
     padding: 0;
     margin: 0;
     list-style-type: upper-roman;
-    list-style-position: inside;
+    list-style-position: outside;
   }
 
   &__ol5 {
     padding: 0;
     margin: 0;
     list-style-type: lower-roman;
-    list-style-position: inside;
+    list-style-position: outside;
   }
 
   &__ul {
     padding: 0;
     margin: 0 0 1.5em;
-    list-style-position: inside;
+    list-style-position: outside;
+  }
+
+  &__ul ul {
+    margin: 0;
   }
 
   &__listItem {
-    margin: 0 0px 0.4em 16px;
+    margin: 0 0 0.4em 16px;
   }
 
   &__listItemChecked,

package/dist/field/lexical/ui/ContentEditable.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" resolution-mode="require"/>
+import type { JSX } from 'react';
 import './ContentEditable.scss';
 export declare function LexicalContentEditable({ className }: {
     className?: string;

package/dist/field/lexical/ui/ContentEditable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditable.d.ts","sourceRoot":"","sources":["../../../../src/field/lexical/ui/ContentEditable.tsx"],"names":[],"mappings":";AAKA,OAAO,wBAAwB,CAAA;AAE/B,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAEzF"}
+{"version":3,"file":"ContentEditable.d.ts","sourceRoot":"","sources":["../../../../src/field/lexical/ui/ContentEditable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAKhC,OAAO,wBAAwB,CAAA;AAE/B,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAEzF"}

package/dist/field/lexical/ui/ContentEditable.js

@@ -1,9 +1,9 @@
-import lexicalContentEditableImport from '@lexical/react/LexicalContentEditable.js';
-const { ContentEditable } = lexicalContentEditableImport;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContentEditable } from '@lexical/react/LexicalContentEditable.js';
 import * as React from 'react';
 import './ContentEditable.scss';
 export function LexicalContentEditable({ className }) {
-    return /*#__PURE__*/ React.createElement(ContentEditable, {
+    return /*#__PURE__*/ _jsx(ContentEditable, {
         className: className ?? 'ContentEditable__root'
     });
 }

package/dist/field/lexical/ui/ContentEditable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/lexical/ui/ContentEditable.tsx"],"sourcesContent":["import lexicalContentEditableImport from '@lexical/react/LexicalContentEditable.js'\nconst { ContentEditable } = lexicalContentEditableImport\n\nimport * as React from 'react'\n\nimport './ContentEditable.scss'\n\nexport function LexicalContentEditable({ className }: { className?: string }): JSX.Element {\n  return <ContentEditable className={className ?? 'ContentEditable__root'} />\n}\n"],"names":["lexicalContentEditableImport","ContentEditable","React","LexicalContentEditable","className"],"rangeMappings":";;;;;;;;","mappings":"AAAA,OAAOA,kCAAkC,2CAA0C;AACnF,MAAM,EAAEC,eAAe,EAAE,GAAGD;AAE5B,YAAYE,WAAW,QAAO;AAE9B,OAAO,yBAAwB;AAE/B,OAAO,SAASC,uBAAuB,EAAEC,SAAS,EAA0B;IAC1E,qBAAO,oBAACH;QAAgBG,WAAWA,aAAa;;AAClD"}
+{"version":3,"sources":["../../../../src/field/lexical/ui/ContentEditable.tsx"],"sourcesContent":["import type { JSX } from 'react'\n\nimport { ContentEditable } from '@lexical/react/LexicalContentEditable.js'\nimport * as React from 'react'\n\nimport './ContentEditable.scss'\n\nexport function LexicalContentEditable({ className }: { className?: string }): JSX.Element {\n  return <ContentEditable className={className ?? 'ContentEditable__root'} />\n}\n"],"names":["ContentEditable","React","LexicalContentEditable","className"],"rangeMappings":";;;;;;;;","mappings":";AAEA,SAASA,eAAe,QAAQ,2CAA0C;AAC1E,YAAYC,WAAW,QAAO;AAE9B,OAAO,yBAAwB;AAE/B,OAAO,SAASC,uBAAuB,EAAEC,SAAS,EAA0B;IAC1E,qBAAO,KAACH;QAAgBG,WAAWA,aAAa;;AAClD"}