@payloadcms/richtext-lexical 3.70.0 → 3.71.0-internal-debug.80dab4c

package/dist/lexical/plugins/TextPlugin/index.js

@@ -1,51 +1,36 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { TEXT_TYPE_TO_FORMAT, TextNode } from 'lexical';
 import { useEffect } from 'react';
-export function TextPlugin(t0) {
-  const $ = _c(6);
-  const {
-    features
-  } = t0;
-  const [editor] = useLexicalComposerContext();
-  let t1;
-  if ($[0] !== editor || $[1] !== features.enabledFormats) {
-    t1 = () => {
-      const disabledFormats = getDisabledFormats(features.enabledFormats);
-      if (disabledFormats.length === 0) {
-        return;
-      }
-      return editor.registerNodeTransform(TextNode, textNode => {
-        disabledFormats.forEach(disabledFormat => {
-          if (textNode.hasFormat(disabledFormat)) {
-            textNode.toggleFormat(disabledFormat);
-          }
+export function TextPlugin({ features }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(()=>{
+        const disabledFormats = getDisabledFormats(features.enabledFormats);
+        if (disabledFormats.length === 0) {
+            return;
+        }
+        // Ideally override the TextNode with our own TextNode (changing its setFormat or toggleFormat methods),
+        // would be more performant. If we find a noticeable perf regression we can switch to that option.
+        // Overriding the FORMAT_TEXT_COMMAND and PASTE_COMMAND commands is not an option I considered because
+        // there might be other forms of mutation that we might not be considering. For example:
+        // browser extensions or Payload/Lexical plugins that have their own commands.
+        return editor.registerNodeTransform(TextNode, (textNode)=>{
+            disabledFormats.forEach((disabledFormat)=>{
+                if (textNode.hasFormat(disabledFormat)) {
+                    textNode.toggleFormat(disabledFormat);
+                }
+            });
         });
-      });
-    };
-    $[0] = editor;
-    $[1] = features.enabledFormats;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== editor || $[4] !== features) {
-    t2 = [editor, features];
-    $[3] = editor;
-    $[4] = features;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  useEffect(t1, t2);
-  return null;
+    }, [
+        editor,
+        features
+    ]);
+    return null;
 }
 function getDisabledFormats(enabledFormats) {
-  const allFormats = Object.keys(TEXT_TYPE_TO_FORMAT);
-  const enabledSet = new Set(enabledFormats);
-  return allFormats.filter(format => !enabledSet.has(format));
+    const allFormats = Object.keys(TEXT_TYPE_TO_FORMAT);
+    const enabledSet = new Set(enabledFormats);
+    return allFormats.filter((format)=>!enabledSet.has(format));
 }
+
 //# sourceMappingURL=index.js.map

package/dist/lexical/plugins/TextPlugin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","TEXT_TYPE_TO_FORMAT","TextNode","useEffect","TextPlugin","t0","$","features","editor","t1","enabledFormats","disabledFormats","getDisabledFormats","length","registerNodeTransform","textNode","forEach","disabledFormat","hasFormat","toggleFormat","t2","allFormats","Object","keys","enabledSet","Set","filter","format","has"],"sources":["../../../../src/lexical/plugins/TextPlugin/index.tsx"],"sourcesContent":["'use client'\nimport type { TextFormatType } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { TEXT_TYPE_TO_FORMAT, TextNode } from 'lexical'\nimport { useEffect } from 'react'\n\nimport type { SanitizedClientFeatures } from '../../../features/typesClient.js'\n\nexport function TextPlugin({ features }: { features: SanitizedClientFeatures }) {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    const disabledFormats = getDisabledFormats(features.enabledFormats)\n    if (disabledFormats.length === 0) {\n      return\n    }\n    // Ideally override the TextNode with our own TextNode (changing its setFormat or toggleFormat methods),\n    // would be more performant. If we find a noticeable perf regression we can switch to that option.\n    // Overriding the FORMAT_TEXT_COMMAND and PASTE_COMMAND commands is not an option I considered because\n    // there might be other forms of mutation that we might not be considering. For example:\n    // browser extensions or Payload/Lexical plugins that have their own commands.\n    return editor.registerNodeTransform(TextNode, (textNode) => {\n      disabledFormats.forEach((disabledFormat) => {\n        if (textNode.hasFormat(disabledFormat)) {\n          textNode.toggleFormat(disabledFormat)\n        }\n      })\n    })\n  }, [editor, features])\n\n  return null\n}\n\nfunction getDisabledFormats(enabledFormats: TextFormatType[]): TextFormatType[] {\n  const allFormats = Object.keys(TEXT_TYPE_TO_FORMAT) as TextFormatType[]\n  const enabledSet = new Set(enabledFormats)\n\n  return allFormats.filter((format) => !enabledSet.has(format))\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAGA,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ;AAC9C,SAASC,SAAS,QAAQ;AAI1B,OAAO,SAAAC,WAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAoB;IAAAQ;EAAA,IAAAF,EAAmD;EAC5E,OAAAG,MAAA,IAAiBR,yBAAA;EAAA,IAAAS,EAAA;EAAA,IAAAH,CAAA,QAAAE,MAAA,IAAAF,CAAA,QAAAC,QAAA,CAAAG,cAAA;IAEPD,EAAA,GAAAA,CAAA;MACR,MAAAE,eAAA,GAAwBC,kBAAA,CAAmBL,QAAA,CAAAG,cAAuB;MAAA,IAC9DC,eAAA,CAAAE,MAAA,MAA2B;QAAA;MAAA;MAAA,OAQxBL,MAAA,CAAAM,qBAAA,CAAAZ,QAAA,EAAAa,QAAA;QACLJ,eAAA,CAAAK,OAAA,CAAAC,cAAA;UAAA,IACMF,QAAA,CAAAG,SAAA,CAAmBD,cAAA;YACrBF,QAAA,CAAAI,YAAA,CAAsBF,cAAA;UAAA;QAAA,CAE1B;MAAA,CACF;IAAA;IACFX,CAAA,MAAAE,MAAA;IAAAF,CAAA,MAAAC,QAAA,CAAAG,cAAA;IAAAJ,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAc,EAAA;EAAA,IAAAd,CAAA,QAAAE,MAAA,IAAAF,CAAA,QAAAC,QAAA;IAAGa,EAAA,IAACZ,MAAA,EAAQD,QAAA;IAASD,CAAA,MAAAE,MAAA;IAAAF,CAAA,MAAAC,QAAA;IAAAD,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAjBrBH,SAAA,CAAUM,EAiBV,EAAGW,EAAkB;EAAA;AAAA;AAKvB,SAASR,mBAAmBF,cAAgC;EAC1D,MAAMW,UAAA,GAAaC,MAAA,CAAOC,IAAI,CAACtB,mBAAA;EAC/B,MAAMuB,UAAA,GAAa,IAAIC,GAAA,CAAIf,cAAA;EAE3B,OAAOW,UAAA,CAAWK,MAAM,CAAEC,MAAA,IAAW,CAACH,UAAA,CAAWI,GAAG,CAACD,MAAA;AACvD","ignoreList":[]}
+{"version":3,"sources":["../../../../src/lexical/plugins/TextPlugin/index.tsx"],"sourcesContent":["'use client'\nimport type { TextFormatType } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { TEXT_TYPE_TO_FORMAT, TextNode } from 'lexical'\nimport { useEffect } from 'react'\n\nimport type { SanitizedClientFeatures } from '../../../features/typesClient.js'\n\nexport function TextPlugin({ features }: { features: SanitizedClientFeatures }) {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    const disabledFormats = getDisabledFormats(features.enabledFormats)\n    if (disabledFormats.length === 0) {\n      return\n    }\n    // Ideally override the TextNode with our own TextNode (changing its setFormat or toggleFormat methods),\n    // would be more performant. If we find a noticeable perf regression we can switch to that option.\n    // Overriding the FORMAT_TEXT_COMMAND and PASTE_COMMAND commands is not an option I considered because\n    // there might be other forms of mutation that we might not be considering. For example:\n    // browser extensions or Payload/Lexical plugins that have their own commands.\n    return editor.registerNodeTransform(TextNode, (textNode) => {\n      disabledFormats.forEach((disabledFormat) => {\n        if (textNode.hasFormat(disabledFormat)) {\n          textNode.toggleFormat(disabledFormat)\n        }\n      })\n    })\n  }, [editor, features])\n\n  return null\n}\n\nfunction getDisabledFormats(enabledFormats: TextFormatType[]): TextFormatType[] {\n  const allFormats = Object.keys(TEXT_TYPE_TO_FORMAT) as TextFormatType[]\n  const enabledSet = new Set(enabledFormats)\n\n  return allFormats.filter((format) => !enabledSet.has(format))\n}\n"],"names":["useLexicalComposerContext","TEXT_TYPE_TO_FORMAT","TextNode","useEffect","TextPlugin","features","editor","disabledFormats","getDisabledFormats","enabledFormats","length","registerNodeTransform","textNode","forEach","disabledFormat","hasFormat","toggleFormat","allFormats","Object","keys","enabledSet","Set","filter","format","has"],"mappings":"AAAA;AAGA,SAASA,yBAAyB,QAAQ,wCAAuC;AACjF,SAASC,mBAAmB,EAAEC,QAAQ,QAAQ,UAAS;AACvD,SAASC,SAAS,QAAQ,QAAO;AAIjC,OAAO,SAASC,WAAW,EAAEC,QAAQ,EAAyC;IAC5E,MAAM,CAACC,OAAO,GAAGN;IAEjBG,UAAU;QACR,MAAMI,kBAAkBC,mBAAmBH,SAASI,cAAc;QAClE,IAAIF,gBAAgBG,MAAM,KAAK,GAAG;YAChC;QACF;QACA,wGAAwG;QACxG,kGAAkG;QAClG,sGAAsG;QACtG,wFAAwF;QACxF,8EAA8E;QAC9E,OAAOJ,OAAOK,qBAAqB,CAACT,UAAU,CAACU;YAC7CL,gBAAgBM,OAAO,CAAC,CAACC;gBACvB,IAAIF,SAASG,SAAS,CAACD,iBAAiB;oBACtCF,SAASI,YAAY,CAACF;gBACxB;YACF;QACF;IACF,GAAG;QAACR;QAAQD;KAAS;IAErB,OAAO;AACT;AAEA,SAASG,mBAAmBC,cAAgC;IAC1D,MAAMQ,aAAaC,OAAOC,IAAI,CAAClB;IAC/B,MAAMmB,aAAa,IAAIC,IAAIZ;IAE3B,OAAOQ,WAAWK,MAAM,CAAC,CAACC,SAAW,CAACH,WAAWI,GAAG,CAACD;AACvD"}

package/dist/lexical/plugins/handles/AddBlockHandlePlugin/index.js

@@ -1,6 +1,5 @@
 'use client';
-
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { $createParagraphNode, isHTMLElement } from 'lexical';
 import * as React from 'react';
@@ -14,142 +13,158 @@ import { getNodeCloseToPoint } from '../utils/getNodeCloseToPoint.js';
 import { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js';
 import { isOnHandleElement } from '../utils/isOnHandleElement.js';
 import { setHandlePosition } from '../utils/setHandlePosition.js';
+import './index.scss';
 const ADD_BLOCK_MENU_CLASSNAME = 'add-block-menu';
 let prevIndex = Infinity;
 function getCurrentIndex(keysLength) {
-  if (keysLength === 0) {
-    return Infinity;
-  }
-  if (prevIndex >= 0 && prevIndex < keysLength) {
-    return prevIndex;
-  }
-  return Math.floor(keysLength / 2);
+    if (keysLength === 0) {
+        return Infinity;
+    }
+    if (prevIndex >= 0 && prevIndex < keysLength) {
+        return prevIndex;
+    }
+    return Math.floor(keysLength / 2);
 }
 function useAddBlockHandle(editor, anchorElem, isEditable) {
-  const scrollerElem = anchorElem.parentElement;
-  const {
-    editorConfig
-  } = useEditorConfigContext();
-  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : 12;
-  const menuRef = useRef(null);
-  const [hoveredElement, setHoveredElement] = useState(null);
-  useEffect(() => {
-    function onDocumentMouseMove(event) {
-      const target = event.target;
-      if (!isHTMLElement(target)) {
-        return;
-      }
-      const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target);
-      if (distanceFromScrollerElem === -1) {
-        setHoveredElement(null);
-        return;
-      }
-      if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {
-        return;
-      }
-      const topLevelNodeKeys = getTopLevelNodeKeys(editor);
-      const {
-        blockElem: _emptyBlockElem,
-        blockNode,
-        foundAtIndex
-      } = getNodeCloseToPoint({
+    const scrollerElem = anchorElem.parentElement;
+    const { editorConfig } = useEditorConfigContext();
+    const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : 12;
+    const menuRef = useRef(null);
+    const [hoveredElement, setHoveredElement] = useState(null);
+    useEffect(()=>{
+        function onDocumentMouseMove(event) {
+            const target = event.target;
+            if (!isHTMLElement(target)) {
+                return;
+            }
+            const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target);
+            if (distanceFromScrollerElem === -1) {
+                setHoveredElement(null);
+                return;
+            }
+            if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {
+                return;
+            }
+            const topLevelNodeKeys = getTopLevelNodeKeys(editor);
+            const { blockElem: _emptyBlockElem, blockNode, foundAtIndex } = getNodeCloseToPoint({
+                anchorElem,
+                cache_threshold: 0,
+                editor,
+                horizontalOffset: -distanceFromScrollerElem,
+                point: new Point(event.x, event.y),
+                returnEmptyParagraphs: true,
+                startIndex: getCurrentIndex(topLevelNodeKeys.length),
+                useEdgeAsDefault: false
+            });
+            prevIndex = foundAtIndex;
+            if (!_emptyBlockElem) {
+                return;
+            }
+            if (blockNode && (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem)) {
+                setHoveredElement({
+                    elem: _emptyBlockElem,
+                    node: blockNode
+                });
+            }
+        }
+        // Since the draggableBlockElem is outside the actual editor, we need to listen to the document
+        // to be able to detect when the mouse is outside the editor and respect a buffer around
+        // the scrollerElem to avoid the draggableBlockElem disappearing too early.
+        document?.addEventListener('mousemove', onDocumentMouseMove);
+        return ()=>{
+            document?.removeEventListener('mousemove', onDocumentMouseMove);
+        };
+    }, [
+        scrollerElem,
         anchorElem,
-        cache_threshold: 0,
         editor,
-        horizontalOffset: -distanceFromScrollerElem,
-        point: new Point(event.x, event.y),
-        returnEmptyParagraphs: true,
-        startIndex: getCurrentIndex(topLevelNodeKeys.length),
-        useEdgeAsDefault: false
-      });
-      prevIndex = foundAtIndex;
-      if (!_emptyBlockElem) {
-        return;
-      }
-      if (blockNode && (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem)) {
-        setHoveredElement({
-          elem: _emptyBlockElem,
-          node: blockNode
-        });
-      }
-    }
-    // Since the draggableBlockElem is outside the actual editor, we need to listen to the document
-    // to be able to detect when the mouse is outside the editor and respect a buffer around
-    // the scrollerElem to avoid the draggableBlockElem disappearing too early.
-    document?.addEventListener('mousemove', onDocumentMouseMove);
-    return () => {
-      document?.removeEventListener('mousemove', onDocumentMouseMove);
-    };
-  }, [scrollerElem, anchorElem, editor, hoveredElement]);
-  useEffect(() => {
-    if (menuRef.current && hoveredElement?.node) {
-      setHandlePosition(hoveredElement?.elem, menuRef.current, anchorElem, blockHandleHorizontalOffset);
-    }
-  }, [anchorElem, hoveredElement, blockHandleHorizontalOffset]);
-  const handleAddClick = useCallback(event_0 => {
-    let hoveredElementToUse = hoveredElement;
-    if (!hoveredElementToUse?.node) {
-      return;
-    }
-    // 1. Update hoveredElement.node to a new paragraph node if the hoveredElement.node is not a paragraph node
-    editor.update(() => {
-      // Check if blockNode is an empty text node
-      let isEmptyParagraph = true;
-      if (hoveredElementToUse?.node.getType() !== 'paragraph' || hoveredElementToUse.node.getTextContent() !== '') {
-        isEmptyParagraph = false;
-      }
-      if (!isEmptyParagraph) {
-        const newParagraph = $createParagraphNode();
-        hoveredElementToUse?.node.insertAfter(newParagraph);
-        setTimeout(() => {
-          hoveredElementToUse = {
-            elem: editor.getElementByKey(newParagraph.getKey()),
-            node: newParagraph
-          };
-          setHoveredElement(hoveredElementToUse);
-        }, 0);
-      }
-    });
-    // 2. Focus on the new paragraph node
-    setTimeout(() => {
-      editor.update(() => {
-        editor.focus();
-        if (hoveredElementToUse?.node && 'select' in hoveredElementToUse.node && typeof hoveredElementToUse.node.select === 'function') {
-          hoveredElementToUse.node.select();
+        hoveredElement
+    ]);
+    useEffect(()=>{
+        if (menuRef.current && hoveredElement?.node) {
+            setHandlePosition(hoveredElement?.elem, menuRef.current, anchorElem, blockHandleHorizontalOffset);
+        }
+    }, [
+        anchorElem,
+        hoveredElement,
+        blockHandleHorizontalOffset
+    ]);
+    const handleAddClick = useCallback((event)=>{
+        let hoveredElementToUse = hoveredElement;
+        if (!hoveredElementToUse?.node) {
+            return;
         }
-      });
-    }, 1);
-    // Make sure this is called AFTER the focusing has been processed by the browser
-    // Otherwise, this won't work
-    setTimeout(() => {
-      editor.dispatchCommand(ENABLE_SLASH_MENU_COMMAND, {
-        node: hoveredElementToUse?.node
-      });
-    }, 2);
-    event_0.stopPropagation();
-    event_0.preventDefault();
-  }, [editor, hoveredElement]);
-  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(React.Fragment, {
-    children: /*#__PURE__*/_jsx("button", {
-      "aria-label": "Add block",
-      className: "icon add-block-menu",
-      onClick: event_1 => {
-        handleAddClick(event_1);
-      },
-      ref: menuRef,
-      type: "button",
-      children: /*#__PURE__*/_jsx("div", {
-        className: isEditable ? 'icon' : ''
-      })
-    })
-  }), anchorElem);
+        // 1. Update hoveredElement.node to a new paragraph node if the hoveredElement.node is not a paragraph node
+        editor.update(()=>{
+            // Check if blockNode is an empty text node
+            let isEmptyParagraph = true;
+            if (hoveredElementToUse?.node.getType() !== 'paragraph' || hoveredElementToUse.node.getTextContent() !== '') {
+                isEmptyParagraph = false;
+            }
+            if (!isEmptyParagraph) {
+                const newParagraph = $createParagraphNode();
+                hoveredElementToUse?.node.insertAfter(newParagraph);
+                setTimeout(()=>{
+                    hoveredElementToUse = {
+                        elem: editor.getElementByKey(newParagraph.getKey()),
+                        node: newParagraph
+                    };
+                    setHoveredElement(hoveredElementToUse);
+                }, 0);
+            }
+        });
+        // 2. Focus on the new paragraph node
+        setTimeout(()=>{
+            editor.update(()=>{
+                editor.focus();
+                if (hoveredElementToUse?.node && 'select' in hoveredElementToUse.node && typeof hoveredElementToUse.node.select === 'function') {
+                    hoveredElementToUse.node.select();
+                }
+            });
+        }, 1);
+        // Make sure this is called AFTER the focusing has been processed by the browser
+        // Otherwise, this won't work
+        setTimeout(()=>{
+            editor.dispatchCommand(ENABLE_SLASH_MENU_COMMAND, {
+                node: hoveredElementToUse?.node
+            });
+        }, 2);
+        event.stopPropagation();
+        event.preventDefault();
+    }, [
+        editor,
+        hoveredElement
+    ]);
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxDEV(React.Fragment, {
+        children: /*#__PURE__*/ _jsxDEV("button", {
+            "aria-label": "Add block",
+            className: "icon add-block-menu",
+            onClick: (event)=>{
+                handleAddClick(event);
+            },
+            ref: menuRef,
+            type: "button",
+            children: /*#__PURE__*/ _jsxDEV("div", {
+                className: isEditable ? 'icon' : ''
+            }, void 0, false, {
+                fileName: "src/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx",
+                lineNumber: 199,
+                columnNumber: 9
+            }, this)
+        }, void 0, false, {
+            fileName: "src/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx",
+            lineNumber: 190,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx",
+        lineNumber: 189,
+        columnNumber: 5
+    }, this), anchorElem);
 }
-export function AddBlockHandlePlugin(t0) {
-  const {
-    anchorElem: t1
-  } = t0;
-  const anchorElem = t1 === undefined ? document.body : t1;
-  const [editor] = useLexicalComposerContext();
-  return useAddBlockHandle(editor, anchorElem, editor._editable);
+export function AddBlockHandlePlugin({ anchorElem = document.body }) {
+    const [editor] = useLexicalComposerContext();
+    return useAddBlockHandle(editor, anchorElem, editor._editable);
 }
+
 //# sourceMappingURL=index.js.map

package/dist/lexical/plugins/handles/AddBlockHandlePlugin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useLexicalComposerContext","$createParagraphNode","isHTMLElement","React","useCallback","useEffect","useRef","useState","createPortal","useEditorConfigContext","Point","ENABLE_SLASH_MENU_COMMAND","calculateDistanceFromScrollerElem","getNodeCloseToPoint","getTopLevelNodeKeys","isOnHandleElement","setHandlePosition","ADD_BLOCK_MENU_CLASSNAME","prevIndex","Infinity","getCurrentIndex","keysLength","Math","floor","useAddBlockHandle","editor","anchorElem","isEditable","scrollerElem","parentElement","editorConfig","blockHandleHorizontalOffset","admin","hideGutter","menuRef","hoveredElement","setHoveredElement","onDocumentMouseMove","event","target","distanceFromScrollerElem","pageX","pageY","topLevelNodeKeys","blockElem","_emptyBlockElem","blockNode","foundAtIndex","cache_threshold","horizontalOffset","point","x","y","returnEmptyParagraphs","startIndex","length","useEdgeAsDefault","node","elem","document","addEventListener","removeEventListener","current","handleAddClick","hoveredElementToUse","update","isEmptyParagraph","getType","getTextContent","newParagraph","insertAfter","setTimeout","getElementByKey","getKey","focus","select","dispatchCommand","stopPropagation","preventDefault","_jsx","Fragment","className","onClick","ref","type","AddBlockHandlePlugin","t0","t1","undefined","body","_editable"],"sources":["../../../../../src/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor, LexicalNode, ParagraphNode } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $createParagraphNode, isHTMLElement } from 'lexical'\nimport * as React from 'react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js'\nimport { Point } from '../../../utils/point.js'\nimport { ENABLE_SLASH_MENU_COMMAND } from '../../SlashMenu/LexicalTypeaheadMenuPlugin/index.js'\nimport { calculateDistanceFromScrollerElem } from '../utils/calculateDistanceFromScrollerElem.js'\nimport { getNodeCloseToPoint } from '../utils/getNodeCloseToPoint.js'\nimport { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js'\nimport { isOnHandleElement } from '../utils/isOnHandleElement.js'\nimport { setHandlePosition } from '../utils/setHandlePosition.js'\nimport './index.scss'\n\nconst ADD_BLOCK_MENU_CLASSNAME = 'add-block-menu'\n\nlet prevIndex = Infinity\n\nfunction getCurrentIndex(keysLength: number): number {\n  if (keysLength === 0) {\n    return Infinity\n  }\n  if (prevIndex >= 0 && prevIndex < keysLength) {\n    return prevIndex\n  }\n\n  return Math.floor(keysLength / 2)\n}\n\nfunction useAddBlockHandle(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n  isEditable: boolean,\n): React.ReactElement {\n  const scrollerElem = anchorElem.parentElement\n\n  const { editorConfig } = useEditorConfigContext()\n  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : 12\n\n  const menuRef = useRef<HTMLButtonElement>(null)\n  const [hoveredElement, setHoveredElement] = useState<{\n    elem: HTMLElement\n    node: LexicalNode\n  } | null>(null)\n\n  useEffect(() => {\n    function onDocumentMouseMove(event: MouseEvent) {\n      const target = event.target\n      if (!isHTMLElement(target)) {\n        return\n      }\n\n      const distanceFromScrollerElem = calculateDistanceFromScrollerElem(\n        scrollerElem,\n        event.pageX,\n        event.pageY,\n        target,\n      )\n\n      if (distanceFromScrollerElem === -1) {\n        setHoveredElement(null)\n        return\n      }\n\n      if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {\n        return\n      }\n      const topLevelNodeKeys = getTopLevelNodeKeys(editor)\n\n      const {\n        blockElem: _emptyBlockElem,\n        blockNode,\n        foundAtIndex,\n      } = getNodeCloseToPoint({\n        anchorElem,\n        cache_threshold: 0,\n        editor,\n        horizontalOffset: -distanceFromScrollerElem,\n        point: new Point(event.x, event.y),\n        returnEmptyParagraphs: true,\n        startIndex: getCurrentIndex(topLevelNodeKeys.length),\n        useEdgeAsDefault: false,\n      })\n\n      prevIndex = foundAtIndex\n\n      if (!_emptyBlockElem) {\n        return\n      }\n      if (\n        blockNode &&\n        (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem)\n      ) {\n        setHoveredElement({\n          elem: _emptyBlockElem,\n          node: blockNode,\n        })\n      }\n    }\n\n    // Since the draggableBlockElem is outside the actual editor, we need to listen to the document\n    // to be able to detect when the mouse is outside the editor and respect a buffer around\n    // the scrollerElem to avoid the draggableBlockElem disappearing too early.\n    document?.addEventListener('mousemove', onDocumentMouseMove)\n\n    return () => {\n      document?.removeEventListener('mousemove', onDocumentMouseMove)\n    }\n  }, [scrollerElem, anchorElem, editor, hoveredElement])\n\n  useEffect(() => {\n    if (menuRef.current && hoveredElement?.node) {\n      setHandlePosition(\n        hoveredElement?.elem,\n        menuRef.current,\n        anchorElem,\n        blockHandleHorizontalOffset,\n      )\n    }\n  }, [anchorElem, hoveredElement, blockHandleHorizontalOffset])\n\n  const handleAddClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      let hoveredElementToUse = hoveredElement\n      if (!hoveredElementToUse?.node) {\n        return\n      }\n\n      // 1. Update hoveredElement.node to a new paragraph node if the hoveredElement.node is not a paragraph node\n      editor.update(() => {\n        // Check if blockNode is an empty text node\n        let isEmptyParagraph = true\n        if (\n          hoveredElementToUse?.node.getType() !== 'paragraph' ||\n          hoveredElementToUse.node.getTextContent() !== ''\n        ) {\n          isEmptyParagraph = false\n        }\n\n        if (!isEmptyParagraph) {\n          const newParagraph = $createParagraphNode()\n          hoveredElementToUse?.node.insertAfter(newParagraph)\n\n          setTimeout(() => {\n            hoveredElementToUse = {\n              elem: editor.getElementByKey(newParagraph.getKey())!,\n              node: newParagraph,\n            }\n            setHoveredElement(hoveredElementToUse)\n          }, 0)\n        }\n      })\n\n      // 2. Focus on the new paragraph node\n      setTimeout(() => {\n        editor.update(() => {\n          editor.focus()\n\n          if (\n            hoveredElementToUse?.node &&\n            'select' in hoveredElementToUse.node &&\n            typeof hoveredElementToUse.node.select === 'function'\n          ) {\n            hoveredElementToUse.node.select()\n          }\n        })\n      }, 1)\n\n      // Make sure this is called AFTER the focusing has been processed by the browser\n      // Otherwise, this won't work\n      setTimeout(() => {\n        editor.dispatchCommand(ENABLE_SLASH_MENU_COMMAND, {\n          node: hoveredElementToUse?.node as ParagraphNode,\n        })\n      }, 2)\n\n      event.stopPropagation()\n      event.preventDefault()\n    },\n    [editor, hoveredElement],\n  )\n\n  return createPortal(\n    <React.Fragment>\n      <button\n        aria-label=\"Add block\"\n        className=\"icon add-block-menu\"\n        onClick={(event) => {\n          handleAddClick(event)\n        }}\n        ref={menuRef}\n        type=\"button\"\n      >\n        <div className={isEditable ? 'icon' : ''} />\n      </button>\n    </React.Fragment>,\n    anchorElem,\n  )\n}\n\nexport function AddBlockHandlePlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): React.ReactElement {\n  const [editor] = useLexicalComposerContext()\n  return useAddBlockHandle(editor, anchorElem, editor._editable)\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor, LexicalNode, ParagraphNode } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $createParagraphNode, isHTMLElement } from 'lexical'\nimport * as React from 'react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js'\nimport { Point } from '../../../utils/point.js'\nimport { ENABLE_SLASH_MENU_COMMAND } from '../../SlashMenu/LexicalTypeaheadMenuPlugin/index.js'\nimport { calculateDistanceFromScrollerElem } from '../utils/calculateDistanceFromScrollerElem.js'\nimport { getNodeCloseToPoint } from '../utils/getNodeCloseToPoint.js'\nimport { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js'\nimport { isOnHandleElement } from '../utils/isOnHandleElement.js'\nimport { setHandlePosition } from '../utils/setHandlePosition.js'\nimport './index.scss'\n\nconst ADD_BLOCK_MENU_CLASSNAME = 'add-block-menu'\n\nlet prevIndex = Infinity\n\nfunction getCurrentIndex(keysLength: number): number {\n  if (keysLength === 0) {\n    return Infinity\n  }\n  if (prevIndex >= 0 && prevIndex < keysLength) {\n    return prevIndex\n  }\n\n  return Math.floor(keysLength / 2)\n}\n\nfunction useAddBlockHandle(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n  isEditable: boolean,\n): React.ReactElement {\n  const scrollerElem = anchorElem.parentElement\n\n  const { editorConfig } = useEditorConfigContext()\n  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : 12\n\n  const menuRef = useRef<HTMLButtonElement>(null)\n  const [hoveredElement, setHoveredElement] = useState<{\n    elem: HTMLElement\n    node: LexicalNode\n  } | null>(null)\n\n  useEffect(() => {\n    function onDocumentMouseMove(event: MouseEvent) {\n      const target = event.target\n      if (!isHTMLElement(target)) {\n        return\n      }\n\n      const distanceFromScrollerElem = calculateDistanceFromScrollerElem(\n        scrollerElem,\n        event.pageX,\n        event.pageY,\n        target,\n      )\n\n      if (distanceFromScrollerElem === -1) {\n        setHoveredElement(null)\n        return\n      }\n\n      if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {\n        return\n      }\n      const topLevelNodeKeys = getTopLevelNodeKeys(editor)\n\n      const {\n        blockElem: _emptyBlockElem,\n        blockNode,\n        foundAtIndex,\n      } = getNodeCloseToPoint({\n        anchorElem,\n        cache_threshold: 0,\n        editor,\n        horizontalOffset: -distanceFromScrollerElem,\n        point: new Point(event.x, event.y),\n        returnEmptyParagraphs: true,\n        startIndex: getCurrentIndex(topLevelNodeKeys.length),\n        useEdgeAsDefault: false,\n      })\n\n      prevIndex = foundAtIndex\n\n      if (!_emptyBlockElem) {\n        return\n      }\n      if (\n        blockNode &&\n        (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem)\n      ) {\n        setHoveredElement({\n          elem: _emptyBlockElem,\n          node: blockNode,\n        })\n      }\n    }\n\n    // Since the draggableBlockElem is outside the actual editor, we need to listen to the document\n    // to be able to detect when the mouse is outside the editor and respect a buffer around\n    // the scrollerElem to avoid the draggableBlockElem disappearing too early.\n    document?.addEventListener('mousemove', onDocumentMouseMove)\n\n    return () => {\n      document?.removeEventListener('mousemove', onDocumentMouseMove)\n    }\n  }, [scrollerElem, anchorElem, editor, hoveredElement])\n\n  useEffect(() => {\n    if (menuRef.current && hoveredElement?.node) {\n      setHandlePosition(\n        hoveredElement?.elem,\n        menuRef.current,\n        anchorElem,\n        blockHandleHorizontalOffset,\n      )\n    }\n  }, [anchorElem, hoveredElement, blockHandleHorizontalOffset])\n\n  const handleAddClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      let hoveredElementToUse = hoveredElement\n      if (!hoveredElementToUse?.node) {\n        return\n      }\n\n      // 1. Update hoveredElement.node to a new paragraph node if the hoveredElement.node is not a paragraph node\n      editor.update(() => {\n        // Check if blockNode is an empty text node\n        let isEmptyParagraph = true\n        if (\n          hoveredElementToUse?.node.getType() !== 'paragraph' ||\n          hoveredElementToUse.node.getTextContent() !== ''\n        ) {\n          isEmptyParagraph = false\n        }\n\n        if (!isEmptyParagraph) {\n          const newParagraph = $createParagraphNode()\n          hoveredElementToUse?.node.insertAfter(newParagraph)\n\n          setTimeout(() => {\n            hoveredElementToUse = {\n              elem: editor.getElementByKey(newParagraph.getKey())!,\n              node: newParagraph,\n            }\n            setHoveredElement(hoveredElementToUse)\n          }, 0)\n        }\n      })\n\n      // 2. Focus on the new paragraph node\n      setTimeout(() => {\n        editor.update(() => {\n          editor.focus()\n\n          if (\n            hoveredElementToUse?.node &&\n            'select' in hoveredElementToUse.node &&\n            typeof hoveredElementToUse.node.select === 'function'\n          ) {\n            hoveredElementToUse.node.select()\n          }\n        })\n      }, 1)\n\n      // Make sure this is called AFTER the focusing has been processed by the browser\n      // Otherwise, this won't work\n      setTimeout(() => {\n        editor.dispatchCommand(ENABLE_SLASH_MENU_COMMAND, {\n          node: hoveredElementToUse?.node as ParagraphNode,\n        })\n      }, 2)\n\n      event.stopPropagation()\n      event.preventDefault()\n    },\n    [editor, hoveredElement],\n  )\n\n  return createPortal(\n    <React.Fragment>\n      <button\n        aria-label=\"Add block\"\n        className=\"icon add-block-menu\"\n        onClick={(event) => {\n          handleAddClick(event)\n        }}\n        ref={menuRef}\n        type=\"button\"\n      >\n        <div className={isEditable ? 'icon' : ''} />\n      </button>\n    </React.Fragment>,\n    anchorElem,\n  )\n}\n\nexport function AddBlockHandlePlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): React.ReactElement {\n  const [editor] = useLexicalComposerContext()\n  return useAddBlockHandle(editor, anchorElem, editor._editable)\n}\n"],"names":["useLexicalComposerContext","$createParagraphNode","isHTMLElement","React","useCallback","useEffect","useRef","useState","createPortal","useEditorConfigContext","Point","ENABLE_SLASH_MENU_COMMAND","calculateDistanceFromScrollerElem","getNodeCloseToPoint","getTopLevelNodeKeys","isOnHandleElement","setHandlePosition","ADD_BLOCK_MENU_CLASSNAME","prevIndex","Infinity","getCurrentIndex","keysLength","Math","floor","useAddBlockHandle","editor","anchorElem","isEditable","scrollerElem","parentElement","editorConfig","blockHandleHorizontalOffset","admin","hideGutter","menuRef","hoveredElement","setHoveredElement","onDocumentMouseMove","event","target","distanceFromScrollerElem","pageX","pageY","topLevelNodeKeys","blockElem","_emptyBlockElem","blockNode","foundAtIndex","cache_threshold","horizontalOffset","point","x","y","returnEmptyParagraphs","startIndex","length","useEdgeAsDefault","node","elem","document","addEventListener","removeEventListener","current","handleAddClick","hoveredElementToUse","update","isEmptyParagraph","getType","getTextContent","newParagraph","insertAfter","setTimeout","getElementByKey","getKey","focus","select","dispatchCommand","stopPropagation","preventDefault","Fragment","button","aria-label","className","onClick","ref","type","div","AddBlockHandlePlugin","body","_editable"],"mappings":"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"}

package/dist/lexical/plugins/handles/AddBlockHandlePlugin/index.scss

@@ -0,0 +1,35 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .add-block-menu {
+    all: unset; // reset all default button styles
+    border-radius: $style-radius-m;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    will-change: transform;
+
+    &:hover {
+      background-color: var(--theme-elevation-100);
+      .icon {
+        opacity: 1;
+      }
+    }
+
+    .icon {
+      width: 18px;
+      height: 24px;
+      opacity: 0.3;
+      background-image: url(../../../ui/icons/Add/index.svg);
+    }
+
+    html[data-theme='dark'] & {
+      .icon {
+        background-image: url(../../../ui/icons/Add/light.svg);
+      }
+    }
+  }
+}

package/dist/lexical/plugins/handles/DraggableBlockPlugin/debounce.js

@@ -1,15 +1,15 @@
 'use client';
-
 export function debounce(func, wait) {
-  let timeout;
-  return function (...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      timeout = undefined;
-      func(...args);
+    let timeout;
+    return function(...args) {
+        const later = ()=>{
+            clearTimeout(timeout);
+            timeout = undefined;
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = window.setTimeout(later, wait);
     };
-    clearTimeout(timeout);
-    timeout = window.setTimeout(later, wait);
-  };
 }
+
 //# sourceMappingURL=debounce.js.map

package/dist/lexical/plugins/handles/DraggableBlockPlugin/debounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.js","names":["debounce","func","wait","timeout","args","later","clearTimeout","undefined","window","setTimeout"],"sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/debounce.ts"],"sourcesContent":["'use client'\nexport function debounce(func: (...args: undefined[]) => void, wait: number) {\n  let timeout: number | string | undefined\n  return function (...args: undefined[]) {\n    const later = () => {\n      clearTimeout(timeout)\n      timeout = undefined\n      func(...args)\n    }\n\n    clearTimeout(timeout)\n    timeout = window.setTimeout(later, wait)\n  }\n}\n"],"mappings":"AAAA;;AACA,OAAO,SAASA,SAASC,IAAoC,EAAEC,IAAY;EACzE,IAAIC,OAAA;EACJ,OAAO,UAAU,GAAGC,IAAiB;IACnC,MAAMC,KAAA,GAAQA,CAAA;MACZC,YAAA,CAAaH,OAAA;MACbA,OAAA,GAAUI,SAAA;MACVN,IAAA,IAAQG,IAAA;IACV;IAEAE,YAAA,CAAaH,OAAA;IACbA,OAAA,GAAUK,MAAA,CAAOC,UAAU,CAACJ,KAAA,EAAOH,IAAA;EACrC;AACF","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/debounce.ts"],"sourcesContent":["'use client'\nexport function debounce(func: (...args: undefined[]) => void, wait: number) {\n  let timeout: number | string | undefined\n  return function (...args: undefined[]) {\n    const later = () => {\n      clearTimeout(timeout)\n      timeout = undefined\n      func(...args)\n    }\n\n    clearTimeout(timeout)\n    timeout = window.setTimeout(later, wait)\n  }\n}\n"],"names":["debounce","func","wait","timeout","args","later","clearTimeout","undefined","window","setTimeout"],"mappings":"AAAA;AACA,OAAO,SAASA,SAASC,IAAoC,EAAEC,IAAY;IACzE,IAAIC;IACJ,OAAO,SAAU,GAAGC,IAAiB;QACnC,MAAMC,QAAQ;YACZC,aAAaH;YACbA,UAAUI;YACVN,QAAQG;QACV;QAEAE,aAAaH;QACbA,UAAUK,OAAOC,UAAU,CAACJ,OAAOH;IACrC;AACF"}

package/dist/lexical/plugins/handles/DraggableBlockPlugin/getBoundingRectWithoutTransform.js

@@ -1,15 +1,15 @@
 'use client';
-
 export function getBoundingClientRectWithoutTransform(elem) {
-  const rect = elem.getBoundingClientRect();
-  // Extract the translation value from the transform style
-  const transformValue = getComputedStyle(elem).getPropertyValue('transform');
-  if (!transformValue || transformValue === 'none') {
+    const rect = elem.getBoundingClientRect();
+    // Extract the translation value from the transform style
+    const transformValue = getComputedStyle(elem).getPropertyValue('transform');
+    if (!transformValue || transformValue === 'none') {
+        return rect;
+    }
+    const lastNumberOfTransformValue = transformValue.split(',').pop();
+    rect.y = rect.y - Number(lastNumberOfTransformValue?.replace(')', ''));
+    // Return the original bounding rect if no translation is applied
     return rect;
-  }
-  const lastNumberOfTransformValue = transformValue.split(',').pop();
-  rect.y = rect.y - Number(lastNumberOfTransformValue?.replace(')', ''));
-  // Return the original bounding rect if no translation is applied
-  return rect;
 }
+
 //# sourceMappingURL=getBoundingRectWithoutTransform.js.map

package/dist/lexical/plugins/handles/DraggableBlockPlugin/getBoundingRectWithoutTransform.js.map

@@ -1 +1 @@
-{"version":3,"file":"getBoundingRectWithoutTransform.js","names":["getBoundingClientRectWithoutTransform","elem","rect","getBoundingClientRect","transformValue","getComputedStyle","getPropertyValue","lastNumberOfTransformValue","split","pop","y","Number","replace"],"sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/getBoundingRectWithoutTransform.ts"],"sourcesContent":["'use client'\nexport function getBoundingClientRectWithoutTransform(elem: HTMLElement): DOMRect {\n  const rect = elem.getBoundingClientRect()\n\n  // Extract the translation value from the transform style\n  const transformValue = getComputedStyle(elem).getPropertyValue('transform')\n  if (!transformValue || transformValue === 'none') {\n    return rect\n  }\n\n  const lastNumberOfTransformValue = transformValue.split(',').pop()\n  rect.y = rect.y - Number(lastNumberOfTransformValue?.replace(')', ''))\n\n  // Return the original bounding rect if no translation is applied\n  return rect\n}\n"],"mappings":"AAAA;;AACA,OAAO,SAASA,sCAAsCC,IAAiB;EACrE,MAAMC,IAAA,GAAOD,IAAA,CAAKE,qBAAqB;EAEvC;EACA,MAAMC,cAAA,GAAiBC,gBAAA,CAAiBJ,IAAA,EAAMK,gBAAgB,CAAC;EAC/D,IAAI,CAACF,cAAA,IAAkBA,cAAA,KAAmB,QAAQ;IAChD,OAAOF,IAAA;EACT;EAEA,MAAMK,0BAAA,GAA6BH,cAAA,CAAeI,KAAK,CAAC,KAAKC,GAAG;EAChEP,IAAA,CAAKQ,CAAC,GAAGR,IAAA,CAAKQ,CAAC,GAAGC,MAAA,CAAOJ,0BAAA,EAA4BK,OAAA,CAAQ,KAAK;EAElE;EACA,OAAOV,IAAA;AACT","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/getBoundingRectWithoutTransform.ts"],"sourcesContent":["'use client'\nexport function getBoundingClientRectWithoutTransform(elem: HTMLElement): DOMRect {\n  const rect = elem.getBoundingClientRect()\n\n  // Extract the translation value from the transform style\n  const transformValue = getComputedStyle(elem).getPropertyValue('transform')\n  if (!transformValue || transformValue === 'none') {\n    return rect\n  }\n\n  const lastNumberOfTransformValue = transformValue.split(',').pop()\n  rect.y = rect.y - Number(lastNumberOfTransformValue?.replace(')', ''))\n\n  // Return the original bounding rect if no translation is applied\n  return rect\n}\n"],"names":["getBoundingClientRectWithoutTransform","elem","rect","getBoundingClientRect","transformValue","getComputedStyle","getPropertyValue","lastNumberOfTransformValue","split","pop","y","Number","replace"],"mappings":"AAAA;AACA,OAAO,SAASA,sCAAsCC,IAAiB;IACrE,MAAMC,OAAOD,KAAKE,qBAAqB;IAEvC,yDAAyD;IACzD,MAAMC,iBAAiBC,iBAAiBJ,MAAMK,gBAAgB,CAAC;IAC/D,IAAI,CAACF,kBAAkBA,mBAAmB,QAAQ;QAChD,OAAOF;IACT;IAEA,MAAMK,6BAA6BH,eAAeI,KAAK,CAAC,KAAKC,GAAG;IAChEP,KAAKQ,CAAC,GAAGR,KAAKQ,CAAC,GAAGC,OAAOJ,4BAA4BK,QAAQ,KAAK;IAElE,iEAAiE;IACjE,OAAOV;AACT"}

package/dist/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.js

@@ -1,31 +1,28 @@
 'use client';
-
 import { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js';
 export function highlightElemOriginalPosition(debugHighlightRef, htmlElem, anchorElem) {
-  if (!debugHighlightRef.current) {
-    // If the ref doesn't point to an existing element, we can't set styles
-    return;
-  }
-  const {
-    left: anchorLeft,
-    top: anchorTop
-  } = anchorElem.getBoundingClientRect();
-  // Get computed styles of the given element
-  const boundingRect = getBoundingClientRectWithoutTransform(htmlElem);
-  // Extract necessary styles (ignoring transform)
-  const width = boundingRect.width;
-  const height = boundingRect.height;
-  const top = boundingRect.top - anchorTop;
-  const left = boundingRect.left - anchorLeft;
-  debugHighlightRef.current.style.border = '2px solid green';
-  debugHighlightRef.current.style.boxSizing = 'border-box';
-  debugHighlightRef.current.style.height = height + 'px';
-  debugHighlightRef.current.style.pointerEvents = 'none';
-  debugHighlightRef.current.style.position = 'absolute';
-  debugHighlightRef.current.style.top = top + 'px';
-  debugHighlightRef.current.style.left = left + 'px';
-  debugHighlightRef.current.style.width = width + 'px';
-  debugHighlightRef.current.style.zIndex = '1000';
-  debugHighlightRef.current.style.opacity = '0.5';
+    if (!debugHighlightRef.current) {
+        // If the ref doesn't point to an existing element, we can't set styles
+        return;
+    }
+    const { left: anchorLeft, top: anchorTop } = anchorElem.getBoundingClientRect();
+    // Get computed styles of the given element
+    const boundingRect = getBoundingClientRectWithoutTransform(htmlElem);
+    // Extract necessary styles (ignoring transform)
+    const width = boundingRect.width;
+    const height = boundingRect.height;
+    const top = boundingRect.top - anchorTop;
+    const left = boundingRect.left - anchorLeft;
+    debugHighlightRef.current.style.border = '2px solid green';
+    debugHighlightRef.current.style.boxSizing = 'border-box';
+    debugHighlightRef.current.style.height = height + 'px';
+    debugHighlightRef.current.style.pointerEvents = 'none';
+    debugHighlightRef.current.style.position = 'absolute';
+    debugHighlightRef.current.style.top = top + 'px';
+    debugHighlightRef.current.style.left = left + 'px';
+    debugHighlightRef.current.style.width = width + 'px';
+    debugHighlightRef.current.style.zIndex = '1000';
+    debugHighlightRef.current.style.opacity = '0.5';
 }
+
 //# sourceMappingURL=highlightElemOriginalPosition.js.map