@payloadcms/richtext-lexical 4.0.0-internal.a0ef1b8 → 4.0.0-internal.a2d053c

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,"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;MAClE,IAAIC,eAAA,CAAAE,MAAsB,KAAK;QAAA;MAAA;MAE/B,OAMOL,MAAA,CAAAM,qBAA4B,CAACZ,QAAA,EAAUa,QAAA;QAC5CJ,eAAA,CAAAK,OAAuB,CAACC,cAAA;UACtB,IAAIF,QAAA,CAAAG,SAAkB,CAACD,cAAA;YACrBF,QAAA,CAAAI,YAAqB,CAACF,cAAA;UAAA;QACxB,CACF;MAAA,CACF;IAAA,CACF;IAAAX,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,CAAS;IAAAD,CAAA,MAAAE,MAAA;IAAAF,CAAA,MAAAC,QAAA;IAAAD,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAjBrBH,SAAA,CAAUM,EAiBV,EAAGW,EAAkB;EAAA,OAEd;AAAA;AAGT,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":[]}

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

@@ -5,8 +5,9 @@
     padding: 0;
     cursor: pointer;
     opacity: 0;
+    visibility: hidden;
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     top: 0;
     will-change: transform;
 

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

@@ -83,8 +83,8 @@ function useAddBlockHandle(editor, anchorElem, isEditable) {
     };
   }, [scrollerElem, anchorElem, editor, hoveredElement]);
   useEffect(() => {
-    if (menuRef.current && hoveredElement?.node) {
-      setHandlePosition(hoveredElement?.elem, menuRef.current, anchorElem, blockHandleHorizontalOffset);
+    if (menuRef.current) {
+      setHandlePosition(hoveredElement?.elem ?? null, menuRef.current, anchorElem, blockHandleHorizontalOffset);
     }
   }, [anchorElem, hoveredElement, blockHandleHorizontalOffset]);
   const handleAddClick = useCallback(event_0 => {

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.css'\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,"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.css'\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) {\n      setHandlePosition(\n        hoveredElement?.elem ?? null,\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":[]}

package/dist/lexical/plugins/handles/DraggableBlockPlugin/debounce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/debounce.ts"],"names":[],"mappings":"AACA,wBAAgB,QAAQ,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,SAAS,EAAE,KAAK,IAAI,EAAE,IAAI,EAAE,MAAM,IAExD,GAAG,MAAM,SAAS,EAAE,UAUtC"}
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/debounce.ts"],"names":[],"mappings":"AACA,wBAAgB,QAAQ,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,SAAS,EAAE,KAAK,IAAI,EAAE,IAAI,EAAE,MAAM,aAE/C,SAAS,EAAE,UAUtC"}

package/dist/lexical/plugins/handles/DraggableBlockPlugin/index.css

@@ -1,12 +1,29 @@
 @layer payload-default {
+  .draggable-block-menu__button {
+    border: 0;
+    padding: 0;
+    background: transparent;
+    cursor: grab;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
+  }
+
   .draggable-block-menu {
     border: none;
     border-radius: var(--radius-medium);
     padding: 0;
     cursor: grab;
     opacity: 0;
+    visibility: hidden;
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     top: 0;
     will-change: transform;
     background-color: var(--color-bg);
@@ -46,11 +63,12 @@
 
   .rich-text-lexical--show-gutter
     > .rich-text-lexical__wrap
+    > .rich-text-lexical__editor-content
     > .editor-container
     > .editor-scroller
     > .editor {
     > .draggable-block-target-line {
-      left: var(--spacer-5);
+      inset-inline-start: var(--spacer-5);
     }
   }
 
@@ -60,7 +78,7 @@
     border-radius: var(--radius-small);
     height: var(--spacer-1);
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     top: 0;
     opacity: 0;
     will-change: transform;

package/dist/lexical/plugins/handles/DraggableBlockPlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,aAAa,CAAA;AA6apB,wBAAgB,oBAAoB,CAAC,EACnC,UAA0B,GAC3B,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB,GAAG,KAAK,CAAC,YAAY,CAGrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,aAAa,CAAA;AA+hBpB,wBAAgB,oBAAoB,CAAC,EACnC,UAA0B,GAC3B,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB,GAAG,KAAK,CAAC,YAAY,CAGrB"}

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

@@ -3,9 +3,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { eventFiles } from '@lexical/rich-text';
+import { Popup, PopupList, useTranslation } from '@payloadcms/ui';
 import { $getNearestNodeFromDOMNode, $getNodeByKey, isHTMLElement } from 'lexical';
 import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js';
 import { Point } from '../../../utils/point.js';
@@ -16,7 +17,9 @@ import { isOnHandleElement } from '../utils/isOnHandleElement.js';
 import { setHandlePosition } from '../utils/setHandlePosition.js';
 import { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js';
 import './index.css';
+import { $moveBlock } from './moveBlock.js';
 import { setTargetLine } from './setTargetLine.js';
+import { useKeyboardReordering } from './useKeyboardReordering.js';
 const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
 const DRAG_DATA_FORMAT = 'application/x-lexical-drag-block';
 let prevIndex = Infinity;
@@ -53,7 +56,16 @@ function hideTargetLine(targetLineElem, lastTargetBlockElem) {
 }
 function useDraggableBlockMenu(editor, anchorElem, isEditable) {
   const scrollerElem = anchorElem.parentElement;
+  const instructionsID = useId();
+  const {
+    t
+  } = useTranslation();
+  useKeyboardReordering({
+    editor,
+    instructionsID
+  });
   const menuRef = useRef(null);
+  const isMenuOpenRef = useRef(false);
   const targetLineRef = useRef(null);
   const debugHighlightRef = useRef(null);
   const isDraggingBlockRef = useRef(false);
@@ -70,7 +82,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
     */
     function onDocumentMouseMove(event) {
       const target = event.target;
-      if (!isHTMLElement(target)) {
+      if (isMenuOpenRef.current || !isHTMLElement(target)) {
         return;
       }
       const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target);
@@ -111,9 +123,16 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
     // 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.
+    const onDocumentPointerDown = event_0 => {
+      if (event_0.pointerType === 'touch' || event_0.pointerType === 'pen') {
+        onDocumentMouseMove(event_0);
+      }
+    };
     document?.addEventListener('mousemove', onDocumentMouseMove);
+    document?.addEventListener('pointerdown', onDocumentPointerDown);
     return () => {
       document?.removeEventListener('mousemove', onDocumentMouseMove);
+      document?.removeEventListener('pointerdown', onDocumentPointerDown);
     };
   }, [scrollerElem, anchorElem, editor, draggableBlockElem]);
   useEffect(() => {
@@ -122,22 +141,22 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
     }
   }, [anchorElem, draggableBlockElem, blockHandleHorizontalOffset]);
   useEffect(() => {
-    function onDragover(event_0) {
+    function onDragover(event_1) {
       if (!isDraggingBlockRef.current) {
         return false;
       }
-      const [isFileTransfer] = eventFiles(event_0);
+      const [isFileTransfer] = eventFiles(event_1);
       if (isFileTransfer) {
         return false;
       }
       const {
         pageY,
         target: target_0
-      } = event_0;
+      } = event_1;
       if (!isHTMLElement(target_0)) {
         return false;
       }
-      const distanceFromScrollerElem_0 = calculateDistanceFromScrollerElem(scrollerElem, event_0.pageX, event_0.pageY, target_0, 100, 50);
+      const distanceFromScrollerElem_0 = calculateDistanceFromScrollerElem(scrollerElem, event_1.pageX, event_1.pageY, target_0, 100, 50);
       const topLevelNodeKeys_0 = getTopLevelNodeKeys(editor);
       const {
         blockElem: targetBlockElem,
@@ -148,7 +167,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
         editor,
         fuzzy: true,
         horizontalOffset: -distanceFromScrollerElem_0,
-        point: new Point(event_0.x, event_0.y),
+        point: new Point(event_1.x, event_1.y),
         startIndex: getCurrentIndex(topLevelNodeKeys_0.length),
         useEdgeAsDefault: true,
         verbose: true
@@ -160,13 +179,13 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
         return false;
       }
       // Always prevent default and set dropEffect during drag to maintain the move cursor
-      event_0.preventDefault();
-      event_0.dataTransfer.dropEffect = 'move';
+      event_1.preventDefault();
+      event_1.dataTransfer.dropEffect = 'move';
       if (draggableBlockElem !== targetBlockElem) {
         const {
           isBelow,
           willStayInSamePosition
-        } = setTargetLine(editorConfig?.admin?.hideGutter ? '0px' : 'var(--spacer-5)', blockHandleHorizontalOffset + (editorConfig?.admin?.hideGutter ? menuRef?.current?.getBoundingClientRect()?.width ?? 0 : -(menuRef?.current?.getBoundingClientRect()?.width ?? 0)), targetLineElem, targetBlockElem, lastTargetBlock, pageY, anchorElem, event_0, debugHighlightRef, isFoundNodeEmptyParagraph_0);
+        } = setTargetLine(editorConfig?.admin?.hideGutter ? '0px' : 'var(--spacer-5)', blockHandleHorizontalOffset + (editorConfig?.admin?.hideGutter ? menuRef?.current?.getBoundingClientRect()?.width ?? 0 : -(menuRef?.current?.getBoundingClientRect()?.width ?? 0)), targetLineElem, targetBlockElem, lastTargetBlock, pageY, anchorElem, event_1, debugHighlightRef, isFoundNodeEmptyParagraph_0);
         if (!willStayInSamePosition) {
           setLastTargetBlock({
             boundingBox: targetBlockElem.getBoundingClientRect(),
@@ -184,11 +203,11 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
       }
       return true;
     }
-    function onDrop(event_1) {
+    function onDrop(event_2) {
       if (!isDraggingBlockRef.current) {
         return false;
       }
-      const [isFileTransfer_0] = eventFiles(event_1);
+      const [isFileTransfer_0] = eventFiles(event_2);
       if (isFileTransfer_0) {
         return false;
       }
@@ -196,7 +215,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
         dataTransfer,
         pageY: pageY_0,
         target: target_1
-      } = event_1;
+      } = event_2;
       const dragData = dataTransfer?.getData(DRAG_DATA_FORMAT) || '';
       editor.update(() => {
         const draggedNode = $getNodeByKey(dragData);
@@ -206,7 +225,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
         if (!isHTMLElement(target_1)) {
           return false;
         }
-        const distanceFromScrollerElem_1 = calculateDistanceFromScrollerElem(scrollerElem, event_1.pageX, event_1.pageY, target_1, 100, 50);
+        const distanceFromScrollerElem_1 = calculateDistanceFromScrollerElem(scrollerElem, event_2.pageX, event_2.pageY, target_1, 100, 50);
         const {
           blockElem: targetBlockElem_0,
           isFoundNodeEmptyParagraph: isFoundNodeEmptyParagraph_1
@@ -215,7 +234,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
           editor,
           fuzzy: true,
           horizontalOffset: -distanceFromScrollerElem_1,
-          point: new Point(event_1.x, event_1.y),
+          point: new Point(event_2.x, event_2.y),
           useEdgeAsDefault: true
         });
         if (!targetBlockElem_0) {
@@ -271,7 +290,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
           }
           const highlightElem = document.createElement('div');
           highlightElem.className = 'lexical-block-highlighter';
-          highlightElem.style.backgroundColor = 'var(--theme-elevation-1000';
+          highlightElem.style.backgroundColor = 'var(--color-bg-inverse)';
           highlightElem.style.transition = 'opacity 0.5s ease-in-out';
           highlightElem.style.zIndex = '1';
           highlightElem.style.pointerEvents = 'none';
@@ -308,40 +327,123 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
       highlightTimersRef.current = [];
     };
   }, [scrollerElem, blockHandleHorizontalOffset, anchorElem, editor, lastTargetBlock, draggableBlockElem, editorConfig?.admin?.hideGutter]);
-  function onDragStart(event_2) {
-    const dataTransfer_0 = event_2.dataTransfer;
-    if (!dataTransfer_0 || !draggableBlockElem) {
+  const startDrag = useCallback(({
+    blockElem,
+    dataTransfer: dataTransfer_0
+  }) => {
+    if (!editor.isEditable() || !dataTransfer_0 || !blockElem) {
       return;
     }
-    setDragImage(dataTransfer_0, draggableBlockElem);
+    setDragImage(dataTransfer_0, blockElem);
     dataTransfer_0.effectAllowed = 'move';
-    let nodeKey = '';
-    editor.update(() => {
-      const node = $getNearestNodeFromDOMNode(draggableBlockElem);
+    editor.read(() => {
+      const node = $getNearestNodeFromDOMNode(blockElem)?.getTopLevelElement();
       if (node) {
-        nodeKey = node.getKey();
+        isDraggingBlockRef.current = true;
+        dataTransfer_0.setData(DRAG_DATA_FORMAT, node.getKey());
       }
     });
-    isDraggingBlockRef.current = true;
-    dataTransfer_0.setData(DRAG_DATA_FORMAT, nodeKey);
-  }
-  function onDragEnd() {
+  }, [editor]);
+  const onDragEnd = useCallback(() => {
     isDraggingBlockRef.current = false;
     if (lastTargetBlock?.elem) {
-      hideTargetLine(targetLineRef.current, lastTargetBlock?.elem);
+      hideTargetLine(targetLineRef.current, lastTargetBlock.elem);
     }
+  }, [lastTargetBlock]);
+  useEffect(() => {
+    const onHeaderDragStart = event_3 => {
+      const handle = event_3.target instanceof HTMLElement ? event_3.target.closest('.collapsible__drag[draggable="true"]') : null;
+      if (!handle || !editor.getRootElement()?.contains(handle)) {
+        return;
+      }
+      const blockElem_0 = editor.getElementByKey(handle.dataset.sortableId ?? '');
+      if (blockElem_0) {
+        setDraggableBlockElem(blockElem_0);
+        startDrag({
+          blockElem: blockElem_0,
+          dataTransfer: event_3.dataTransfer
+        });
+      }
+    };
+    document.addEventListener('dragstart', onHeaderDragStart);
+    document.addEventListener('dragend', onDragEnd);
+    return () => {
+      document.removeEventListener('dragstart', onHeaderDragStart);
+      document.removeEventListener('dragend', onDragEnd);
+    };
+  }, [editor, startDrag, onDragEnd]);
+  function moveBlock({
+    direction
+  }) {
+    if (!editor.isEditable() || !draggableBlockElem) {
+      return;
+    }
+    editor.update(() => {
+      const node_0 = $getNearestNodeFromDOMNode(draggableBlockElem)?.getTopLevelElement();
+      if (node_0) {
+        $moveBlock({
+          direction,
+          node: node_0
+        });
+      }
+    }, {
+      onUpdate: () => {
+        if (menuRef.current) {
+          setHandlePosition(draggableBlockElem, menuRef.current, anchorElem, blockHandleHorizontalOffset);
+        }
+      }
+    });
   }
   return /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx("button", {
-      "aria-label": "Drag to move",
-      className: "icon draggable-block-menu",
-      draggable: true,
-      onDragEnd: onDragEnd,
-      onDragStart: onDragStart,
+    children: [/*#__PURE__*/_jsxs("span", {
+      className: "sr-only",
+      id: instructionsID,
+      children: [t('general:moveUp'), ": Alt + Shift + ↑. ", t('general:moveDown'), ": Alt + Shift + ↓."]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "draggable-block-menu",
       ref: menuRef,
-      type: "button",
-      children: /*#__PURE__*/_jsx("div", {
-        className: isEditable ? 'icon' : ''
+      children: /*#__PURE__*/_jsx(Popup, {
+        caret: false,
+        disabled: !isEditable,
+        onToggleClose: () => {
+          isMenuOpenRef.current = false;
+        },
+        onToggleOpen: () => {
+          isMenuOpenRef.current = true;
+        },
+        popupType: "menu",
+        render: ({
+          close
+        }) => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+          children: [-1, 1].map(direction_0 => /*#__PURE__*/_jsx(PopupList.Button, {
+            onClick: () => {
+              moveBlock({
+                direction: direction_0
+              });
+              close();
+            },
+            children: t(direction_0 === -1 ? 'general:moveUp' : 'general:moveDown')
+          }, direction_0))
+        }),
+        renderButton: ({
+          active: _active,
+          ...buttonProps
+        }) => /*#__PURE__*/_jsx("button", {
+          ...buttonProps,
+          "aria-label": t('general:dragToMove'),
+          className: "draggable-block-menu__button",
+          disabled: !isEditable,
+          draggable: isEditable,
+          onDragEnd: onDragEnd,
+          onDragStart: event_4 => startDrag({
+            blockElem: draggableBlockElem,
+            dataTransfer: event_4.dataTransfer
+          }),
+          type: "button",
+          children: /*#__PURE__*/_jsx("div", {
+            className: isEditable ? 'icon' : ''
+          })
+        })
       })
     }), /*#__PURE__*/_jsx("div", {
       className: "draggable-block-target-line",