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

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

@@ -1,218 +1,201 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $findMatchingParent, mergeRegister } from '@lexical/utils';
 import { $createNodeSelection, $getEditor, $getNearestNodeFromDOMNode, $getSelection, $isDecoratorNode, $isElementNode, $isLineBreakNode, $isNodeSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, SELECTION_CHANGE_COMMAND } from 'lexical';
 import { useEffect } from 'react';
+import './index.scss';
 // TODO: This should ideally be fixed in Lexical. See
 // https://github.com/facebook/lexical/pull/7072
 export function DecoratorPlugin() {
-  const $ = _c(3);
-  const [editor] = useLexicalComposerContext();
-  const $onDelete = _temp2;
-  let t0;
-  let t1;
-  if ($[0] !== editor) {
-    t0 = () => mergeRegister(editor.registerCommand(CLICK_COMMAND, _temp3, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(SELECTION_CHANGE_COMMAND, _temp4, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_UP_COMMAND, _temp6, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_DOWN_COMMAND, _temp8, COMMAND_PRIORITY_LOW));
-    t1 = [editor];
-    $[0] = editor;
-    $[1] = t0;
-    $[2] = t1;
-  } else {
-    t0 = $[1];
-    t1 = $[2];
-  }
-  useEffect(t0, t1);
-  return null;
-}
-function _temp8(event_2) {
-  const selection_1 = $getSelection();
-  if ($isNodeSelection(selection_1)) {
-    event_2.preventDefault();
-    const nextSibling = selection_1.getNodes()[0]?.getNextSibling();
-    if ($isDecoratorNode(nextSibling)) {
-      const element_0 = $getEditor().getElementByKey(nextSibling.getKey());
-      if (element_0) {
-        $selectDecorator({
-          element: element_0,
-          node: nextSibling
+    const [editor] = useLexicalComposerContext();
+    const $onDelete = (event)=>{
+        const selection = $getSelection();
+        if (!$isNodeSelection(selection)) {
+            return false;
+        }
+        event.preventDefault();
+        selection.getNodes().forEach((node)=>{
+            node.remove();
         });
-      }
-      return true;
-    }
-    if (!$isElementNode(nextSibling)) {
-      return true;
-    }
-    const firstDescendant = nextSibling.getFirstDescendant() ?? nextSibling;
-    if (!firstDescendant) {
-      return true;
-    }
-    const block_0 = $findMatchingParent(firstDescendant, INTERNAL_$isBlock);
-    block_0?.selectEnd();
-    event_2.preventDefault();
-    return true;
-  }
-  if (!$isRangeSelection(selection_1)) {
-    return false;
-  }
-  const lastPoint = selection_1.isBackward() ? selection_1.anchor : selection_1.focus;
-  const lastNode = lastPoint.getNode();
-  const lastSelectedBlock = $findMatchingParent(lastNode, _temp7);
-  const nextBlock = lastSelectedBlock?.getNextSibling();
-  if (!lastSelectedBlock || nextBlock !== findLaterSiblingBlock(lastSelectedBlock)) {
-    return false;
-  }
-  if ($isDecoratorNode(nextBlock)) {
-    const nextBlockElement = $getEditor().getElementByKey(nextBlock.getKey());
-    if (nextBlockElement) {
-      $selectDecorator({
-        element: nextBlockElement,
-        node: nextBlock
-      });
-      event_2.preventDefault();
-      return true;
-    }
-  }
-  return false;
-}
-function _temp7(node_1) {
-  return findLaterSiblingBlock(node_1) !== null;
-}
-function _temp6(event_1) {
-  const selection_0 = $getSelection();
-  if ($isNodeSelection(selection_0)) {
-    const prevSibling = selection_0.getNodes()[0]?.getPreviousSibling();
-    if ($isDecoratorNode(prevSibling)) {
-      const element = $getEditor().getElementByKey(prevSibling.getKey());
-      if (element) {
-        $selectDecorator({
-          element,
-          node: prevSibling
-        });
-        event_1.preventDefault();
         return true;
-      }
-      return false;
-    }
-    if (!$isElementNode(prevSibling)) {
-      return false;
-    }
-    const lastDescendant = prevSibling.getLastDescendant() ?? prevSibling;
-    if (!lastDescendant) {
-      return false;
-    }
-    const block = $findMatchingParent(lastDescendant, INTERNAL_$isBlock);
-    block?.selectStart();
-    event_1.preventDefault();
-    return true;
-  }
-  if (!$isRangeSelection(selection_0)) {
-    return false;
-  }
-  const firstPoint = selection_0.isBackward() ? selection_0.anchor : selection_0.focus;
-  const firstNode = firstPoint.getNode();
-  const firstSelectedBlock = $findMatchingParent(firstNode, _temp5);
-  const prevBlock = firstSelectedBlock?.getPreviousSibling();
-  if (!firstSelectedBlock || prevBlock !== findFirstSiblingBlock(firstSelectedBlock)) {
-    return false;
-  }
-  if ($isDecoratorNode(prevBlock)) {
-    const prevBlockElement = $getEditor().getElementByKey(prevBlock.getKey());
-    if (prevBlockElement) {
-      $selectDecorator({
-        element: prevBlockElement,
-        node: prevBlock
-      });
-      event_1.preventDefault();
-      return true;
-    }
-  }
-  return false;
-}
-function _temp5(node_0) {
-  return findFirstSiblingBlock(node_0) !== null;
-}
-function _temp4() {
-  const decorator_0 = $getSelectedDecorator();
-  document.querySelector(".decorator-selected")?.classList.remove("decorator-selected");
-  if (decorator_0) {
-    decorator_0.element?.classList.add("decorator-selected");
-    return true;
-  }
-  return false;
-}
-function _temp3(event_0) {
-  document.querySelector(".decorator-selected")?.classList.remove("decorator-selected");
-  const decorator = $getDecoratorByMouseEvent(event_0);
-  if (!decorator) {
-    return true;
-  }
-  const {
-    target
-  } = event_0;
-  const isInteractive = !(target instanceof HTMLElement) || target.isContentEditable || target.closest("button, textarea, input, .react-select, .code-editor, .no-select-decorator, [role=\"button\"]");
-  if (isInteractive) {
-    $setSelection(null);
-  } else {
-    $selectDecorator(decorator);
-  }
-  return true;
-}
-function _temp2(event) {
-  const selection = $getSelection();
-  if (!$isNodeSelection(selection)) {
-    return false;
-  }
-  event.preventDefault();
-  selection.getNodes().forEach(_temp);
-  return true;
-}
-function _temp(node) {
-  node.remove();
+    };
+    useEffect(()=>{
+        return mergeRegister(editor.registerCommand(CLICK_COMMAND, (event)=>{
+            document.querySelector('.decorator-selected')?.classList.remove('decorator-selected');
+            const decorator = $getDecoratorByMouseEvent(event);
+            if (!decorator) {
+                return true;
+            }
+            const { target } = event;
+            const isInteractive = !(target instanceof HTMLElement) || target.isContentEditable || target.closest('button, textarea, input, .react-select, .code-editor, .no-select-decorator, [role="button"]');
+            if (isInteractive) {
+                $setSelection(null);
+            } else {
+                $selectDecorator(decorator);
+            }
+            return true;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(SELECTION_CHANGE_COMMAND, ()=>{
+            const decorator = $getSelectedDecorator();
+            document.querySelector('.decorator-selected')?.classList.remove('decorator-selected');
+            if (decorator) {
+                decorator.element?.classList.add('decorator-selected');
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_UP_COMMAND, (event)=>{
+            // CASE 1: Node selection
+            const selection = $getSelection();
+            if ($isNodeSelection(selection)) {
+                const prevSibling = selection.getNodes()[0]?.getPreviousSibling();
+                if ($isDecoratorNode(prevSibling)) {
+                    const element = $getEditor().getElementByKey(prevSibling.getKey());
+                    if (element) {
+                        $selectDecorator({
+                            element,
+                            node: prevSibling
+                        });
+                        event.preventDefault();
+                        return true;
+                    }
+                    return false;
+                }
+                if (!$isElementNode(prevSibling)) {
+                    return false;
+                }
+                const lastDescendant = prevSibling.getLastDescendant() ?? prevSibling;
+                if (!lastDescendant) {
+                    return false;
+                }
+                const block = $findMatchingParent(lastDescendant, INTERNAL_$isBlock);
+                block?.selectStart();
+                event.preventDefault();
+                return true;
+            }
+            if (!$isRangeSelection(selection)) {
+                return false;
+            }
+            // CASE 2: Range selection
+            // Get first selected block
+            const firstPoint = selection.isBackward() ? selection.anchor : selection.focus;
+            const firstNode = firstPoint.getNode();
+            const firstSelectedBlock = $findMatchingParent(firstNode, (node)=>{
+                return findFirstSiblingBlock(node) !== null;
+            });
+            const prevBlock = firstSelectedBlock?.getPreviousSibling();
+            if (!firstSelectedBlock || prevBlock !== findFirstSiblingBlock(firstSelectedBlock)) {
+                return false;
+            }
+            if ($isDecoratorNode(prevBlock)) {
+                const prevBlockElement = $getEditor().getElementByKey(prevBlock.getKey());
+                if (prevBlockElement) {
+                    $selectDecorator({
+                        element: prevBlockElement,
+                        node: prevBlock
+                    });
+                    event.preventDefault();
+                    return true;
+                }
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (event)=>{
+            // CASE 1: Node selection
+            const selection = $getSelection();
+            if ($isNodeSelection(selection)) {
+                event.preventDefault();
+                const nextSibling = selection.getNodes()[0]?.getNextSibling();
+                if ($isDecoratorNode(nextSibling)) {
+                    const element = $getEditor().getElementByKey(nextSibling.getKey());
+                    if (element) {
+                        $selectDecorator({
+                            element,
+                            node: nextSibling
+                        });
+                    }
+                    return true;
+                }
+                if (!$isElementNode(nextSibling)) {
+                    return true;
+                }
+                const firstDescendant = nextSibling.getFirstDescendant() ?? nextSibling;
+                if (!firstDescendant) {
+                    return true;
+                }
+                const block = $findMatchingParent(firstDescendant, INTERNAL_$isBlock);
+                block?.selectEnd();
+                event.preventDefault();
+                return true;
+            }
+            if (!$isRangeSelection(selection)) {
+                return false;
+            }
+            // CASE 2: Range selection
+            // Get last selected block
+            const lastPoint = selection.isBackward() ? selection.anchor : selection.focus;
+            const lastNode = lastPoint.getNode();
+            const lastSelectedBlock = $findMatchingParent(lastNode, (node)=>{
+                return findLaterSiblingBlock(node) !== null;
+            });
+            const nextBlock = lastSelectedBlock?.getNextSibling();
+            if (!lastSelectedBlock || nextBlock !== findLaterSiblingBlock(lastSelectedBlock)) {
+                return false;
+            }
+            if ($isDecoratorNode(nextBlock)) {
+                const nextBlockElement = $getEditor().getElementByKey(nextBlock.getKey());
+                if (nextBlockElement) {
+                    $selectDecorator({
+                        element: nextBlockElement,
+                        node: nextBlock
+                    });
+                    event.preventDefault();
+                    return true;
+                }
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW));
+    }, [
+        editor
+    ]);
+    return null;
 }
 function $getDecoratorByMouseEvent(event) {
-  if (!(event.target instanceof HTMLElement)) {
-    return undefined;
-  }
-  const element = event.target.closest('[data-lexical-decorator="true"]');
-  if (!(element instanceof HTMLElement)) {
-    return undefined;
-  }
-  const node = $getNearestNodeFromDOMNode(element);
-  return $isDecoratorNode(node) ? {
-    element,
-    node
-  } : undefined;
+    if (!(event.target instanceof HTMLElement)) {
+        return undefined;
+    }
+    const element = event.target.closest('[data-lexical-decorator="true"]');
+    if (!(element instanceof HTMLElement)) {
+        return undefined;
+    }
+    const node = $getNearestNodeFromDOMNode(element);
+    return $isDecoratorNode(node) ? {
+        element,
+        node
+    } : undefined;
 }
 function $getSelectedDecorator() {
-  const selection = $getSelection();
-  if (!$isNodeSelection(selection)) {
-    return undefined;
-  }
-  const nodes = selection.getNodes();
-  if (nodes.length !== 1) {
-    return undefined;
-  }
-  const node = nodes[0];
-  return $isDecoratorNode(node) ? {
-    decorator: node,
-    element: $getEditor().getElementByKey(node.getKey())
-  } : undefined;
+    const selection = $getSelection();
+    if (!$isNodeSelection(selection)) {
+        return undefined;
+    }
+    const nodes = selection.getNodes();
+    if (nodes.length !== 1) {
+        return undefined;
+    }
+    const node = nodes[0];
+    return $isDecoratorNode(node) ? {
+        decorator: node,
+        element: $getEditor().getElementByKey(node.getKey())
+    } : undefined;
 }
-function $selectDecorator({
-  element,
-  node
-}) {
-  document.querySelector('.decorator-selected')?.classList.remove('decorator-selected');
-  const selection = $createNodeSelection();
-  selection.add(node.getKey());
-  $setSelection(selection);
-  element.scrollIntoView({
-    behavior: 'smooth',
-    block: 'nearest'
-  });
-  element.classList.add('decorator-selected');
+function $selectDecorator({ element, node }) {
+    document.querySelector('.decorator-selected')?.classList.remove('decorator-selected');
+    const selection = $createNodeSelection();
+    selection.add(node.getKey());
+    $setSelection(selection);
+    element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+    });
+    element.classList.add('decorator-selected');
 }
 /**
  * Copied from https://github.com/facebook/lexical/blob/main/packages/lexical/src/LexicalUtils.ts
@@ -223,36 +206,36 @@ function $selectDecorator({
  * - not inline
  * - can't be empty
  * - has no children or an inline first child
- */
-export function INTERNAL_$isBlock(node) {
-  if ($isDecoratorNode(node) && !node.isInline()) {
-    return true;
-  }
-  if (!$isElementNode(node) || $isRootOrShadowRoot(node)) {
-    return false;
-  }
-  const firstChild = node.getFirstChild();
-  const isLeafElement = firstChild === null || $isLineBreakNode(firstChild) || $isTextNode(firstChild) || firstChild.isInline();
-  return !node.isInline() && node.canBeEmpty() !== false && isLeafElement;
+ */ export function INTERNAL_$isBlock(node) {
+    if ($isDecoratorNode(node) && !node.isInline()) {
+        return true;
+    }
+    if (!$isElementNode(node) || $isRootOrShadowRoot(node)) {
+        return false;
+    }
+    const firstChild = node.getFirstChild();
+    const isLeafElement = firstChild === null || $isLineBreakNode(firstChild) || $isTextNode(firstChild) || firstChild.isInline();
+    return !node.isInline() && node.canBeEmpty() !== false && isLeafElement;
 }
 function findLaterSiblingBlock(node) {
-  let current = node.getNextSibling();
-  while (current !== null) {
-    if (INTERNAL_$isBlock(current)) {
-      return current;
+    let current = node.getNextSibling();
+    while(current !== null){
+        if (INTERNAL_$isBlock(current)) {
+            return current;
+        }
+        current = current.getNextSibling();
     }
-    current = current.getNextSibling();
-  }
-  return null;
+    return null;
 }
 function findFirstSiblingBlock(node) {
-  let current = node.getPreviousSibling();
-  while (current !== null) {
-    if (INTERNAL_$isBlock(current)) {
-      return current;
+    let current = node.getPreviousSibling();
+    while(current !== null){
+        if (INTERNAL_$isBlock(current)) {
+            return current;
+        }
+        current = current.getPreviousSibling();
     }
-    current = current.getPreviousSibling();
-  }
-  return null;
+    return null;
 }
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","$findMatchingParent","mergeRegister","$createNodeSelection","$getEditor","$getNearestNodeFromDOMNode","$getSelection","$isDecoratorNode","$isElementNode","$isLineBreakNode","$isNodeSelection","$isRangeSelection","$isRootOrShadowRoot","$isTextNode","$setSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","KEY_ARROW_DOWN_COMMAND","KEY_ARROW_UP_COMMAND","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","SELECTION_CHANGE_COMMAND","useEffect","DecoratorPlugin","$","editor","$onDelete","_temp2","t0","t1","registerCommand","_temp3","_temp4","_temp6","_temp8","event_2","selection_1","selection","event","preventDefault","nextSibling","getNodes","getNextSibling","element_0","getElementByKey","getKey","element","$selectDecorator","node","firstDescendant","getFirstDescendant","block_0","INTERNAL_$isBlock","block","selectEnd","lastPoint","isBackward","anchor","focus","lastNode","getNode","lastSelectedBlock","_temp7","nextBlock","findLaterSiblingBlock","nextBlockElement","node_1","event_1","selection_0","prevSibling","getPreviousSibling","lastDescendant","getLastDescendant","selectStart","firstPoint","firstNode","firstSelectedBlock","_temp5","prevBlock","findFirstSiblingBlock","prevBlockElement","node_0","decorator_0","$getSelectedDecorator","document","querySelector","classList","remove","decorator","add","event_0","$getDecoratorByMouseEvent","target","isInteractive","HTMLElement","isContentEditable","closest","forEach","_temp","undefined","nodes","length","scrollIntoView","behavior","isInline","firstChild","getFirstChild","isLeafElement","canBeEmpty","current"],"sources":["../../../../src/lexical/plugins/DecoratorPlugin/index.tsx"],"sourcesContent":["'use client'\n\nimport type { DecoratorNode, ElementNode, LexicalNode } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport {\n  $createNodeSelection,\n  $getEditor,\n  $getNearestNodeFromDOMNode,\n  $getSelection,\n  $isDecoratorNode,\n  $isElementNode,\n  $isLineBreakNode,\n  $isNodeSelection,\n  $isRangeSelection,\n  $isRootOrShadowRoot,\n  $isTextNode,\n  $setSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n  KEY_ARROW_DOWN_COMMAND,\n  KEY_ARROW_UP_COMMAND,\n  KEY_BACKSPACE_COMMAND,\n  KEY_DELETE_COMMAND,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport { useEffect } from 'react'\n\nimport './index.scss'\n\n// TODO: This should ideally be fixed in Lexical. See\n// https://github.com/facebook/lexical/pull/7072\nexport function DecoratorPlugin() {\n  const [editor] = useLexicalComposerContext()\n\n  const $onDelete = (event: KeyboardEvent) => {\n    const selection = $getSelection()\n    if (!$isNodeSelection(selection)) {\n      return false\n    }\n    event.preventDefault()\n    selection.getNodes().forEach((node) => {\n      node.remove()\n    })\n    return true\n  }\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand(\n        CLICK_COMMAND,\n        (event) => {\n          document.querySelector('.decorator-selected')?.classList.remove('decorator-selected')\n          const decorator = $getDecoratorByMouseEvent(event)\n          if (!decorator) {\n            return true\n          }\n          const { target } = event\n          const isInteractive =\n            !(target instanceof HTMLElement) ||\n            target.isContentEditable ||\n            target.closest(\n              'button, textarea, input, .react-select, .code-editor, .no-select-decorator, [role=\"button\"]',\n            )\n          if (isInteractive) {\n            $setSelection(null)\n          } else {\n            $selectDecorator(decorator)\n          }\n          return true\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n      editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          const decorator = $getSelectedDecorator()\n          document.querySelector('.decorator-selected')?.classList.remove('decorator-selected')\n          if (decorator) {\n            decorator.element?.classList.add('decorator-selected')\n            return true\n          }\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      editor.registerCommand(\n        KEY_ARROW_UP_COMMAND,\n        (event) => {\n          // CASE 1: Node selection\n          const selection = $getSelection()\n          if ($isNodeSelection(selection)) {\n            const prevSibling = selection.getNodes()[0]?.getPreviousSibling()\n            if ($isDecoratorNode(prevSibling)) {\n              const element = $getEditor().getElementByKey(prevSibling.getKey())\n              if (element) {\n                $selectDecorator({ element, node: prevSibling })\n                event.preventDefault()\n                return true\n              }\n              return false\n            }\n            if (!$isElementNode(prevSibling)) {\n              return false\n            }\n            const lastDescendant = prevSibling.getLastDescendant() ?? prevSibling\n            if (!lastDescendant) {\n              return false\n            }\n            const block = $findMatchingParent(lastDescendant, INTERNAL_$isBlock)\n            block?.selectStart()\n            event.preventDefault()\n            return true\n          }\n          if (!$isRangeSelection(selection)) {\n            return false\n          }\n\n          // CASE 2: Range selection\n          // Get first selected block\n          const firstPoint = selection.isBackward() ? selection.anchor : selection.focus\n          const firstNode = firstPoint.getNode()\n          const firstSelectedBlock = $findMatchingParent(firstNode, (node) => {\n            return findFirstSiblingBlock(node) !== null\n          })\n          const prevBlock = firstSelectedBlock?.getPreviousSibling()\n          if (!firstSelectedBlock || prevBlock !== findFirstSiblingBlock(firstSelectedBlock)) {\n            return false\n          }\n\n          if ($isDecoratorNode(prevBlock)) {\n            const prevBlockElement = $getEditor().getElementByKey(prevBlock.getKey())\n            if (prevBlockElement) {\n              $selectDecorator({ element: prevBlockElement, node: prevBlock })\n              event.preventDefault()\n              return true\n            }\n          }\n\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      editor.registerCommand(\n        KEY_ARROW_DOWN_COMMAND,\n        (event) => {\n          // CASE 1: Node selection\n          const selection = $getSelection()\n          if ($isNodeSelection(selection)) {\n            event.preventDefault()\n            const nextSibling = selection.getNodes()[0]?.getNextSibling()\n            if ($isDecoratorNode(nextSibling)) {\n              const element = $getEditor().getElementByKey(nextSibling.getKey())\n              if (element) {\n                $selectDecorator({ element, node: nextSibling })\n              }\n              return true\n            }\n            if (!$isElementNode(nextSibling)) {\n              return true\n            }\n            const firstDescendant = nextSibling.getFirstDescendant() ?? nextSibling\n            if (!firstDescendant) {\n              return true\n            }\n            const block = $findMatchingParent(firstDescendant, INTERNAL_$isBlock)\n            block?.selectEnd()\n            event.preventDefault()\n            return true\n          }\n          if (!$isRangeSelection(selection)) {\n            return false\n          }\n\n          // CASE 2: Range selection\n          // Get last selected block\n          const lastPoint = selection.isBackward() ? selection.anchor : selection.focus\n          const lastNode = lastPoint.getNode()\n          const lastSelectedBlock = $findMatchingParent(lastNode, (node) => {\n            return findLaterSiblingBlock(node) !== null\n          })\n          const nextBlock = lastSelectedBlock?.getNextSibling()\n          if (!lastSelectedBlock || nextBlock !== findLaterSiblingBlock(lastSelectedBlock)) {\n            return false\n          }\n\n          if ($isDecoratorNode(nextBlock)) {\n            const nextBlockElement = $getEditor().getElementByKey(nextBlock.getKey())\n            if (nextBlockElement) {\n              $selectDecorator({ element: nextBlockElement, node: nextBlock })\n              event.preventDefault()\n              return true\n            }\n          }\n\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    )\n  }, [editor])\n\n  return null\n}\n\nfunction $getDecoratorByMouseEvent(\n  event: MouseEvent,\n): { element: HTMLElement; node: DecoratorNode<unknown> } | undefined {\n  if (!(event.target instanceof HTMLElement)) {\n    return undefined\n  }\n  const element = event.target.closest('[data-lexical-decorator=\"true\"]')\n  if (!(element instanceof HTMLElement)) {\n    return undefined\n  }\n  const node = $getNearestNodeFromDOMNode(element)\n  return $isDecoratorNode(node) ? { element, node } : undefined\n}\n\nfunction $getSelectedDecorator() {\n  const selection = $getSelection()\n  if (!$isNodeSelection(selection)) {\n    return undefined\n  }\n  const nodes = selection.getNodes()\n  if (nodes.length !== 1) {\n    return undefined\n  }\n  const node = nodes[0]\n  return $isDecoratorNode(node)\n    ? {\n        decorator: node,\n        element: $getEditor().getElementByKey(node.getKey()),\n      }\n    : undefined\n}\n\nfunction $selectDecorator({\n  element,\n  node,\n}: {\n  element: HTMLElement\n  node: DecoratorNode<unknown>\n}) {\n  document.querySelector('.decorator-selected')?.classList.remove('decorator-selected')\n  const selection = $createNodeSelection()\n  selection.add(node.getKey())\n  $setSelection(selection)\n  element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })\n  element.classList.add('decorator-selected')\n}\n\n/**\n * Copied from https://github.com/facebook/lexical/blob/main/packages/lexical/src/LexicalUtils.ts\n *\n * This function returns true for a DecoratorNode that is not inline OR\n * an ElementNode that is:\n * - not a root or shadow root\n * - not inline\n * - can't be empty\n * - has no children or an inline first child\n */\nexport function INTERNAL_$isBlock(node: LexicalNode): node is DecoratorNode<unknown> | ElementNode {\n  if ($isDecoratorNode(node) && !node.isInline()) {\n    return true\n  }\n  if (!$isElementNode(node) || $isRootOrShadowRoot(node)) {\n    return false\n  }\n\n  const firstChild = node.getFirstChild()\n  const isLeafElement =\n    firstChild === null ||\n    $isLineBreakNode(firstChild) ||\n    $isTextNode(firstChild) ||\n    firstChild.isInline()\n\n  return !node.isInline() && node.canBeEmpty() !== false && isLeafElement\n}\n\nfunction findLaterSiblingBlock(node: LexicalNode): LexicalNode | null {\n  let current = node.getNextSibling()\n  while (current !== null) {\n    if (INTERNAL_$isBlock(current)) {\n      return current\n    }\n    current = current.getNextSibling()\n  }\n  return null\n}\n\nfunction findFirstSiblingBlock(node: LexicalNode): LexicalNode | null {\n  let current = node.getPreviousSibling()\n  while (current !== null) {\n    if (INTERNAL_$isBlock(current)) {\n      return current\n    }\n    current = current.getPreviousSibling()\n  }\n  return null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../src/lexical/plugins/DecoratorPlugin/index.tsx"],"sourcesContent":["'use client'\n\nimport type { DecoratorNode, ElementNode, LexicalNode } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\nimport {\n  $createNodeSelection,\n  $getEditor,\n  $getNearestNodeFromDOMNode,\n  $getSelection,\n  $isDecoratorNode,\n  $isElementNode,\n  $isLineBreakNode,\n  $isNodeSelection,\n  $isRangeSelection,\n  $isRootOrShadowRoot,\n  $isTextNode,\n  $setSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n  KEY_ARROW_DOWN_COMMAND,\n  KEY_ARROW_UP_COMMAND,\n  KEY_BACKSPACE_COMMAND,\n  KEY_DELETE_COMMAND,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport { useEffect } from 'react'\n\nimport './index.scss'\n\n// TODO: This should ideally be fixed in Lexical. See\n// https://github.com/facebook/lexical/pull/7072\nexport function DecoratorPlugin() {\n  const [editor] = useLexicalComposerContext()\n\n  const $onDelete = (event: KeyboardEvent) => {\n    const selection = $getSelection()\n    if (!$isNodeSelection(selection)) {\n      return false\n    }\n    event.preventDefault()\n    selection.getNodes().forEach((node) => {\n      node.remove()\n    })\n    return true\n  }\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerCommand(\n        CLICK_COMMAND,\n        (event) => {\n          document.querySelector('.decorator-selected')?.classList.remove('decorator-selected')\n          const decorator = $getDecoratorByMouseEvent(event)\n          if (!decorator) {\n            return true\n          }\n          const { target } = event\n          const isInteractive =\n            !(target instanceof HTMLElement) ||\n            target.isContentEditable ||\n            target.closest(\n              'button, textarea, input, .react-select, .code-editor, .no-select-decorator, [role=\"button\"]',\n            )\n          if (isInteractive) {\n            $setSelection(null)\n          } else {\n            $selectDecorator(decorator)\n          }\n          return true\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n      editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          const decorator = $getSelectedDecorator()\n          document.querySelector('.decorator-selected')?.classList.remove('decorator-selected')\n          if (decorator) {\n            decorator.element?.classList.add('decorator-selected')\n            return true\n          }\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      editor.registerCommand(\n        KEY_ARROW_UP_COMMAND,\n        (event) => {\n          // CASE 1: Node selection\n          const selection = $getSelection()\n          if ($isNodeSelection(selection)) {\n            const prevSibling = selection.getNodes()[0]?.getPreviousSibling()\n            if ($isDecoratorNode(prevSibling)) {\n              const element = $getEditor().getElementByKey(prevSibling.getKey())\n              if (element) {\n                $selectDecorator({ element, node: prevSibling })\n                event.preventDefault()\n                return true\n              }\n              return false\n            }\n            if (!$isElementNode(prevSibling)) {\n              return false\n            }\n            const lastDescendant = prevSibling.getLastDescendant() ?? prevSibling\n            if (!lastDescendant) {\n              return false\n            }\n            const block = $findMatchingParent(lastDescendant, INTERNAL_$isBlock)\n            block?.selectStart()\n            event.preventDefault()\n            return true\n          }\n          if (!$isRangeSelection(selection)) {\n            return false\n          }\n\n          // CASE 2: Range selection\n          // Get first selected block\n          const firstPoint = selection.isBackward() ? selection.anchor : selection.focus\n          const firstNode = firstPoint.getNode()\n          const firstSelectedBlock = $findMatchingParent(firstNode, (node) => {\n            return findFirstSiblingBlock(node) !== null\n          })\n          const prevBlock = firstSelectedBlock?.getPreviousSibling()\n          if (!firstSelectedBlock || prevBlock !== findFirstSiblingBlock(firstSelectedBlock)) {\n            return false\n          }\n\n          if ($isDecoratorNode(prevBlock)) {\n            const prevBlockElement = $getEditor().getElementByKey(prevBlock.getKey())\n            if (prevBlockElement) {\n              $selectDecorator({ element: prevBlockElement, node: prevBlock })\n              event.preventDefault()\n              return true\n            }\n          }\n\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n      editor.registerCommand(\n        KEY_ARROW_DOWN_COMMAND,\n        (event) => {\n          // CASE 1: Node selection\n          const selection = $getSelection()\n          if ($isNodeSelection(selection)) {\n            event.preventDefault()\n            const nextSibling = selection.getNodes()[0]?.getNextSibling()\n            if ($isDecoratorNode(nextSibling)) {\n              const element = $getEditor().getElementByKey(nextSibling.getKey())\n              if (element) {\n                $selectDecorator({ element, node: nextSibling })\n              }\n              return true\n            }\n            if (!$isElementNode(nextSibling)) {\n              return true\n            }\n            const firstDescendant = nextSibling.getFirstDescendant() ?? nextSibling\n            if (!firstDescendant) {\n              return true\n            }\n            const block = $findMatchingParent(firstDescendant, INTERNAL_$isBlock)\n            block?.selectEnd()\n            event.preventDefault()\n            return true\n          }\n          if (!$isRangeSelection(selection)) {\n            return false\n          }\n\n          // CASE 2: Range selection\n          // Get last selected block\n          const lastPoint = selection.isBackward() ? selection.anchor : selection.focus\n          const lastNode = lastPoint.getNode()\n          const lastSelectedBlock = $findMatchingParent(lastNode, (node) => {\n            return findLaterSiblingBlock(node) !== null\n          })\n          const nextBlock = lastSelectedBlock?.getNextSibling()\n          if (!lastSelectedBlock || nextBlock !== findLaterSiblingBlock(lastSelectedBlock)) {\n            return false\n          }\n\n          if ($isDecoratorNode(nextBlock)) {\n            const nextBlockElement = $getEditor().getElementByKey(nextBlock.getKey())\n            if (nextBlockElement) {\n              $selectDecorator({ element: nextBlockElement, node: nextBlock })\n              event.preventDefault()\n              return true\n            }\n          }\n\n          return false\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    )\n  }, [editor])\n\n  return null\n}\n\nfunction $getDecoratorByMouseEvent(\n  event: MouseEvent,\n): { element: HTMLElement; node: DecoratorNode<unknown> } | undefined {\n  if (!(event.target instanceof HTMLElement)) {\n    return undefined\n  }\n  const element = event.target.closest('[data-lexical-decorator=\"true\"]')\n  if (!(element instanceof HTMLElement)) {\n    return undefined\n  }\n  const node = $getNearestNodeFromDOMNode(element)\n  return $isDecoratorNode(node) ? { element, node } : undefined\n}\n\nfunction $getSelectedDecorator() {\n  const selection = $getSelection()\n  if (!$isNodeSelection(selection)) {\n    return undefined\n  }\n  const nodes = selection.getNodes()\n  if (nodes.length !== 1) {\n    return undefined\n  }\n  const node = nodes[0]\n  return $isDecoratorNode(node)\n    ? {\n        decorator: node,\n        element: $getEditor().getElementByKey(node.getKey()),\n      }\n    : undefined\n}\n\nfunction $selectDecorator({\n  element,\n  node,\n}: {\n  element: HTMLElement\n  node: DecoratorNode<unknown>\n}) {\n  document.querySelector('.decorator-selected')?.classList.remove('decorator-selected')\n  const selection = $createNodeSelection()\n  selection.add(node.getKey())\n  $setSelection(selection)\n  element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })\n  element.classList.add('decorator-selected')\n}\n\n/**\n * Copied from https://github.com/facebook/lexical/blob/main/packages/lexical/src/LexicalUtils.ts\n *\n * This function returns true for a DecoratorNode that is not inline OR\n * an ElementNode that is:\n * - not a root or shadow root\n * - not inline\n * - can't be empty\n * - has no children or an inline first child\n */\nexport function INTERNAL_$isBlock(node: LexicalNode): node is DecoratorNode<unknown> | ElementNode {\n  if ($isDecoratorNode(node) && !node.isInline()) {\n    return true\n  }\n  if (!$isElementNode(node) || $isRootOrShadowRoot(node)) {\n    return false\n  }\n\n  const firstChild = node.getFirstChild()\n  const isLeafElement =\n    firstChild === null ||\n    $isLineBreakNode(firstChild) ||\n    $isTextNode(firstChild) ||\n    firstChild.isInline()\n\n  return !node.isInline() && node.canBeEmpty() !== false && isLeafElement\n}\n\nfunction findLaterSiblingBlock(node: LexicalNode): LexicalNode | null {\n  let current = node.getNextSibling()\n  while (current !== null) {\n    if (INTERNAL_$isBlock(current)) {\n      return current\n    }\n    current = current.getNextSibling()\n  }\n  return null\n}\n\nfunction findFirstSiblingBlock(node: LexicalNode): LexicalNode | null {\n  let current = node.getPreviousSibling()\n  while (current !== null) {\n    if (INTERNAL_$isBlock(current)) {\n      return current\n    }\n    current = current.getPreviousSibling()\n  }\n  return null\n}\n"],"names":["useLexicalComposerContext","$findMatchingParent","mergeRegister","$createNodeSelection","$getEditor","$getNearestNodeFromDOMNode","$getSelection","$isDecoratorNode","$isElementNode","$isLineBreakNode","$isNodeSelection","$isRangeSelection","$isRootOrShadowRoot","$isTextNode","$setSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","KEY_ARROW_DOWN_COMMAND","KEY_ARROW_UP_COMMAND","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","SELECTION_CHANGE_COMMAND","useEffect","DecoratorPlugin","editor","$onDelete","event","selection","preventDefault","getNodes","forEach","node","remove","registerCommand","document","querySelector","classList","decorator","$getDecoratorByMouseEvent","target","isInteractive","HTMLElement","isContentEditable","closest","$selectDecorator","$getSelectedDecorator","element","add","prevSibling","getPreviousSibling","getElementByKey","getKey","lastDescendant","getLastDescendant","block","INTERNAL_$isBlock","selectStart","firstPoint","isBackward","anchor","focus","firstNode","getNode","firstSelectedBlock","findFirstSiblingBlock","prevBlock","prevBlockElement","nextSibling","getNextSibling","firstDescendant","getFirstDescendant","selectEnd","lastPoint","lastNode","lastSelectedBlock","findLaterSiblingBlock","nextBlock","nextBlockElement","undefined","nodes","length","scrollIntoView","behavior","isInline","firstChild","getFirstChild","isLeafElement","canBeEmpty","current"],"mappings":"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"}

package/dist/lexical/plugins/DecoratorPlugin/index.scss

@@ -0,0 +1,13 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  [data-lexical-decorator='true'] {
+    width: fit-content;
+    border-radius: $style-radius-m;
+  }
+
+  .decorator-selected {
+    box-shadow: $focus-box-shadow !important;
+    outline: none !important;
+  }
+}