@37signals/lexxy 0.8.2-beta → 0.8.5-beta

package/dist/lexxy.esm.js

@@ -10,7 +10,7 @@ import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-diff';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, DecoratorNode, $createNodeSelection, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createParagraphNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isDecoratorNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, ElementNode, $splitNode, $createLineBreakNode, $isRootNode, ParagraphNode, RootNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, DecoratorNode, $createNodeSelection, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createParagraphNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isDecoratorNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, ElementNode, $splitNode, $createLineBreakNode, $isRootNode, ParagraphNode, RootNode, DRAGSTART_COMMAND, DROP_COMMAND, CLEAR_HISTORY_COMMAND, $addUpdateTag, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode, $isListNode, $createListNode, registerList } from '@lexical/list';
 import { $createAutoLinkNode, $toggleLink, LinkNode, $createLinkNode, AutoLinkNode, $isLinkNode } from '@lexical/link';
@@ -632,7 +632,7 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   get #buttons() {
-    return Array.from(this.querySelectorAll(":scope > button"))
+    return Array.from(this.querySelectorAll(":scope > button:not([data-prevent-overflow='true'])"))
   }
 
   get #focusableItems() {
@@ -702,7 +702,7 @@ class LexicalToolbarElement extends HTMLElement {
         ${ToolbarIcons.ol}
       </button>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="upload" data-command="uploadAttachments" title="Upload file">
+      <button class="lexxy-editor__toolbar-button" type="button" name="upload" data-command="uploadAttachments" data-prevent-overflow="true" title="Upload file">
         ${ToolbarIcons.attachment}
       </button>
 
@@ -713,9 +713,9 @@ class LexicalToolbarElement extends HTMLElement {
       <button class="lexxy-editor__toolbar-button" type="button" name="divider" data-command="insertHorizontalDivider" title="Insert a divider">
         ${ToolbarIcons.hr}
       </button>
- 
+
       <div class="lexxy-editor__toolbar-spacer" role="separator"></div>
- 
+
       <button class="lexxy-editor__toolbar-button" type="button" name="undo" data-command="undo" title="Undo">
         ${ToolbarIcons.undo}
       </button>
@@ -1675,6 +1675,8 @@ class CommandDispatcher {
   }
 
   #handleDragEnter(event) {
+    if (this.#isInternalDrag(event)) return
+
     this.dragCounter++;
     if (this.dragCounter === 1) {
       this.#saveSelectionBeforeDrag();
@@ -1683,6 +1685,8 @@ class CommandDispatcher {
   }
 
   #handleDragLeave(event) {
+    if (this.#isInternalDrag(event)) return
+
     this.dragCounter--;
     if (this.dragCounter === 0) {
       this.#selectionBeforeDrag = null;
@@ -1691,10 +1695,14 @@ class CommandDispatcher {
   }
 
   #handleDragOver(event) {
+    if (this.#isInternalDrag(event)) return
+
     event.preventDefault();
   }
 
   #handleDrop(event) {
+    if (this.#isInternalDrag(event)) return
+
     event.preventDefault();
 
     this.dragCounter = 0;
@@ -1728,6 +1736,10 @@ class CommandDispatcher {
     this.#selectionBeforeDrag = null;
   }
 
+  #isInternalDrag(event) {
+    return event.dataTransfer?.types.includes("application/x-lexxy-node-key")
+  }
+
   #handleTabKey(event) {
     if (this.selection.isInsideList) {
       return this.#handleTabForList(event)
@@ -1976,6 +1988,8 @@ class ActionTextAttachmentNode extends DecoratorNode {
 
   createAttachmentFigure() {
     const figure = createAttachmentFigure(this.contentType, this.isPreviewableAttachment, this.fileName);
+    figure.draggable = true;
+    figure.dataset.lexicalNodeKey = this.__key;
 
     const deleteButton = createElement("lexxy-node-delete-button");
     figure.appendChild(deleteButton);
@@ -1993,7 +2007,9 @@ class ActionTextAttachmentNode extends DecoratorNode {
 
   #createDOMForImage(options = {}) {
     const img = createElement("img", { src: this.src, draggable: false, alt: this.altText, ...this.#imageDimensions, ...options });
-    return img
+    const container = createElement("div", { className: "attachment__container" });
+    container.appendChild(img);
+    return container
   }
 
   get #imageDimensions() {
@@ -2286,8 +2302,12 @@ class Selection {
     if (!anchorNode) return null
 
     if ($isTextNode(anchorNode)) {
-      if (offset < anchorNode.getTextContentSize()) return null
-      return this.#getNextNodeFromTextEnd(anchorNode)
+      if (offset === anchorNode.getTextContentSize()) return this.#getNextNodeFromTextEnd(anchorNode)
+      if (this.#isCursorOnLastVisualLineOfBlock(anchorNode)) {
+        const topLevelElement = anchorNode.getTopLevelElement();
+        return topLevelElement ? topLevelElement.getNextSibling() : null
+      }
+      return null
     }
 
     if ($isElementNode(anchorNode)) {
@@ -2317,8 +2337,12 @@ class Selection {
     if (!anchorNode) return null
 
     if ($isTextNode(anchorNode)) {
-      if (offset > 0) return null
-      return this.#getPreviousNodeFromTextStart(anchorNode)
+      if (offset === 0) return this.#getPreviousNodeFromTextStart(anchorNode)
+      if (this.#isCursorOnFirstVisualLineOfBlock(anchorNode)) {
+        const topLevelElement = anchorNode.getTopLevelElement();
+        return topLevelElement ? topLevelElement.getPreviousSibling() : null
+      }
+      return null
     }
 
     if ($isElementNode(anchorNode)) {
@@ -2542,7 +2566,7 @@ class Selection {
     const node = backwards ? this.nodeBeforeCursor : this.nodeAfterCursor;
     if (!$isDecoratorNode(node)) return false
 
-    if (this.#collapseListItemToParagraph()) return true
+    if (this.#collapseListItemToParagraph(node)) return true
 
     this.#removeEmptyElementAnchorNode();
 
@@ -2553,12 +2577,16 @@ class Selection {
   // When the cursor is inside a list item, collapse the list item into a
   // paragraph instead of selecting the decorator. This lets the user
   // delete a list that immediately follows an attachment without the
-  // attachment becoming selected.
-  #collapseListItemToParagraph() {
+  // attachment becoming selected. Only applies when the decorator is
+  // outside the list item (e.g. a block attachment before the list),
+  // not when it's an inline mention inside the list item.
+  #collapseListItemToParagraph(decoratorNode) {
     const anchorNode = $getSelection()?.anchor?.getNode();
     const listItem = anchorNode && $getNearestNodeOfType(anchorNode, ListItemNode);
     if (!listItem) return false
 
+    if (listItem.isParentOf(decoratorNode)) return false
+
     const listNode = $getNearestNodeOfType(listItem, ListNode);
     if (!listNode) return false
 
@@ -2743,6 +2771,63 @@ class Selection {
     }
     return current ? current.getPreviousSibling() : null
   }
+
+  #isCursorOnFirstVisualLineOfBlock(anchorNode) {
+    return this.#isCursorOnEdgeLineOfBlock(anchorNode, "first")
+  }
+
+  #isCursorOnLastVisualLineOfBlock(anchorNode) {
+    return this.#isCursorOnEdgeLineOfBlock(anchorNode, "last")
+  }
+
+  // Check whether the cursor sits on the first or last visual line of its
+  // top-level block by comparing the Y position of the cursor with the Y
+  // position of the block's start (first line) or end (last line).
+  #isCursorOnEdgeLineOfBlock(anchorNode, edge) {
+    const topLevelElement = anchorNode.getTopLevelElement();
+    if (!topLevelElement) return false
+
+    const domElement = this.editor.getElementByKey(topLevelElement.getKey());
+    if (!domElement) return false
+
+    const nativeSelection = window.getSelection();
+    if (!nativeSelection?.rangeCount) return false
+
+    const cursorRect = this.#getReliableRectFromRange(nativeSelection.getRangeAt(0));
+    if (!cursorRect || this.#isRectUnreliable(cursorRect)) return false
+
+    const edgeRect = this.#getEdgeCharRect(domElement, edge);
+    if (!edgeRect || this.#isRectUnreliable(edgeRect)) return false
+
+    const tolerance = edgeRect.height > 0 ? edgeRect.height * 0.5 : 5;
+    return Math.abs(cursorRect.top - edgeRect.top) < tolerance
+  }
+
+  // Get a reliable bounding rect for the first or last character in a DOM
+  // element by creating a non-collapsed range around it.
+  #getEdgeCharRect(element, edge) {
+    const walker = document.createTreeWalker(element, 4 /* NodeFilter.SHOW_TEXT */);
+    let textNode;
+
+    if (edge === "first") {
+      textNode = walker.nextNode();
+    } else {
+      while (walker.nextNode()) textNode = walker.currentNode;
+    }
+
+    if (!textNode || textNode.length === 0) return null
+
+    const range = document.createRange();
+    if (edge === "first") {
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, 1);
+    } else {
+      range.setStart(textNode, textNode.length - 1);
+      range.setEnd(textNode, textNode.length);
+    }
+
+    return range.getBoundingClientRect()
+  }
 }
 
 function sanitize(html) {
@@ -3636,14 +3721,12 @@ class ImageGalleryNode extends ElementNode {
   static importDOM() {
     return {
       div: (element) => {
-        const containsAttachment = element.querySelector(`:scope > :is(${this.#attachmentTags.join()})`);
-        if (!containsAttachment) return null
+        if (!this.#isGalleryElement(element)) return null
 
         return {
           conversion: () => {
             return {
-              node: $createImageGalleryNode(),
-              after: children => children
+              node: $createImageGalleryNode()
             }
           },
           priority: 2
@@ -3660,6 +3743,13 @@ class ImageGalleryNode extends ElementNode {
     return $isActionTextAttachmentNode(node) && node.isPreviewableImage
   }
 
+  static #isGalleryElement(element) {
+    const attachmentChildren = element.querySelectorAll(`:scope > :is(${this.#attachmentTags.join()})`);
+    return element.textContent.trim() === ""
+      && attachmentChildren.length > 0
+      && element.children.length === attachmentChildren.length
+  }
+
   static get #attachmentTags() {
     return Object.keys(ActionTextAttachmentNode.importDOM())
   }
@@ -5355,6 +5445,365 @@ class TablesExtension extends LexxyExtension {
   }
 }
 
+const MIME_TYPE = "application/x-lexxy-node-key";
+
+class AttachmentDragAndDrop {
+  #editor
+  #draggedNodeKey = null
+  #rafId = null
+  #draggingRafId = null
+  #cleanupFns = []
+
+  constructor(editor) {
+    this.#editor = editor;
+
+    // Register Lexical commands at HIGH priority to intercept before the
+    // base @lexical/rich-text handlers (which return true and consume the events).
+    this.#cleanupFns.push(
+      editor.registerCommand(DRAGSTART_COMMAND, (event) => this.#handleDragStart(event), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(DROP_COMMAND, (event) => this.#handleDrop(event), COMMAND_PRIORITY_HIGH),
+    );
+
+    // Use a root listener to register DOM-level dragover/dragend handlers
+    // (these events need throttled rAF handling that works better as DOM listeners).
+    const unregister = editor.registerRootListener((root, prevRoot) => {
+      if (prevRoot) {
+        prevRoot.removeEventListener("dragover", this.#onDragOver);
+        prevRoot.removeEventListener("dragend", this.#onDragEnd);
+      }
+      if (root) {
+        root.addEventListener("dragover", this.#onDragOver);
+        root.addEventListener("dragend", this.#onDragEnd);
+      }
+    });
+    this.#cleanupFns.push(unregister);
+  }
+
+  destroy() {
+    this.#cleanup();
+    for (const fn of this.#cleanupFns) fn();
+    this.#cleanupFns = [];
+  }
+
+  // -- Event handlers --------------------------------------------------------
+
+  #handleDragStart(event) {
+    if (event.target.closest("textarea")) return false
+
+    const figure = event.target.closest("figure.attachment[data-lexical-node-key]");
+    if (!figure) return false
+
+    this.#draggedNodeKey = figure.dataset.lexicalNodeKey;
+    event.dataTransfer.setData(MIME_TYPE, this.#draggedNodeKey);
+    event.dataTransfer.effectAllowed = "move";
+
+    // Add dragging class after a tick so it doesn't affect the drag image
+    this.#draggingRafId = requestAnimationFrame(() => {
+      this.#draggingRafId = null;
+      figure.classList.add("lexxy-dragging");
+    });
+
+    return true
+  }
+
+  #onDragOver = (event) => {
+    if (!this.#draggedNodeKey) return
+
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+
+    if (!this.#rafId) {
+      this.#rafId = requestAnimationFrame(() => {
+        this.#rafId = null;
+        this.#updateDropTarget(event);
+      });
+    }
+  }
+
+  #handleDrop(event) {
+    if (!this.#draggedNodeKey) return false
+
+    event.preventDefault();
+
+    const target = this.#resolveDropTarget(event);
+    const draggedKey = this.#draggedNodeKey;
+    this.#cleanup();
+
+    if (target) {
+      this.#performDrop(draggedKey, target);
+    }
+    return true
+  }
+
+  #onDragEnd = () => {
+    this.#cleanup();
+  }
+
+  // -- Drop target resolution -----------------------------------------------
+
+  #updateDropTarget(event) {
+    this.#clearDropIndicators();
+
+    const target = this.#resolveDropTarget(event);
+    if (!target) return
+
+    if (target.type === "gallery" || target.type === "gallery-reorder") {
+      target.element.classList.add(`lexxy-drop-target--gallery-${target.position}`);
+    } else if (target.type === "list-item") {
+      target.element.classList.add(`lexxy-drop-target--list-${target.position}`);
+    } else {
+      target.element.classList.add(`lexxy-drop-target--block-${target.position}`);
+    }
+  }
+
+  #resolveDropTarget(event) {
+    const element = document.elementFromPoint(event.clientX, event.clientY);
+    if (!element) return null
+
+    const rootElement = this.#editor.getRootElement();
+    if (!rootElement || !rootElement.contains(element)) return null
+
+    // Check if hovering over a previewable image (for gallery merge or reorder)
+    const targetFigure = element.closest("figure.attachment--preview[data-lexical-node-key]");
+    if (targetFigure && targetFigure.dataset.lexicalNodeKey !== this.#draggedNodeKey) {
+      const targetGallery = targetFigure.closest(".attachment-gallery");
+      if (targetGallery) {
+        // If the dragged image is in the same gallery, this is a reorder
+        const draggedFigure = rootElement.querySelector(`[data-lexical-node-key="${this.#draggedNodeKey}"]`);
+        if (draggedFigure && targetGallery.contains(draggedFigure)) {
+          const position = this.#computeHorizontalPosition(targetFigure, event.clientX);
+          return { type: "gallery-reorder", element: targetFigure, nodeKey: targetFigure.dataset.lexicalNodeKey, position }
+        }
+      }
+      const position = this.#computeHorizontalPosition(targetFigure, event.clientX);
+      return { type: "gallery", element: targetFigure, nodeKey: targetFigure.dataset.lexicalNodeKey, position }
+    }
+
+    // Hovering over the dragged image itself inside a gallery — treat as no-op
+    // to prevent fallthrough to the block handler, which would eject it from the gallery.
+    if (targetFigure && targetFigure.closest(".attachment-gallery")) return null
+
+    // Check if hovering over a gallery's empty space (for reorder within gallery)
+    const targetGallery = element.closest(".attachment-gallery");
+    if (targetGallery) {
+      let galleryFigure = element.closest("figure.attachment[data-lexical-node-key]");
+      if (!galleryFigure) {
+        galleryFigure = this.#findNearestFigureInGallery(targetGallery, event.clientX);
+      }
+      if (galleryFigure && galleryFigure.dataset.lexicalNodeKey !== this.#draggedNodeKey) {
+        const position = this.#computeHorizontalPosition(galleryFigure, event.clientX);
+        return { type: "gallery-reorder", element: galleryFigure, nodeKey: galleryFigure.dataset.lexicalNodeKey, position }
+      }
+      // Nearest figure is the dragged image — no-op to avoid block handler fallthrough
+      if (galleryFigure) return null
+    }
+
+    // Check if hovering over a list item (for list splitting)
+    const listItem = element.closest("li");
+    if (listItem && rootElement.contains(listItem)) {
+      const position = this.#computeVerticalPosition(listItem, event.clientY);
+      return { type: "list-item", element: listItem, position }
+    }
+
+    // Otherwise, find nearest block-level element for between-block insertion.
+    // Normalize so each gap has exactly one indicator: prefer "after" on the
+    // previous sibling, falling back to "before" only for the first block.
+    const block = this.#findNearestBlock(element, rootElement, event.clientY);
+    if (!block) return null
+
+    const position = this.#computeVerticalPosition(block, event.clientY);
+    if (position === "before" && block.previousElementSibling) {
+      return { type: "block", element: block.previousElementSibling, position: "after" }
+    }
+    return { type: "block", element: block, position }
+  }
+
+  #findNearestBlock(element, rootElement, clientY) {
+    let current = element;
+    while (current && current !== rootElement) {
+      if (current.parentElement === rootElement) return current
+      current = current.parentElement;
+    }
+
+    // elementFromPoint landed on the root itself (e.g. a margin gap between
+    // blocks). Fall back to the nearest child by vertical distance.
+    let nearest = null;
+    let minDistance = Infinity;
+    for (const child of rootElement.children) {
+      const rect = child.getBoundingClientRect();
+      const distance = Math.min(Math.abs(clientY - rect.top), Math.abs(clientY - rect.bottom));
+      if (distance < minDistance) {
+        minDistance = distance;
+        nearest = child;
+      }
+    }
+    return nearest
+  }
+
+  #computeVerticalPosition(element, clientY) {
+    const rect = element.getBoundingClientRect();
+    return clientY < rect.top + rect.height / 2 ? "before" : "after"
+  }
+
+  #computeHorizontalPosition(element, clientX) {
+    const rect = element.getBoundingClientRect();
+    return clientX < rect.left + rect.width / 2 ? "before" : "after"
+  }
+
+  #findNearestFigureInGallery(gallery, clientX) {
+    const figures = gallery.querySelectorAll("figure.attachment[data-lexical-node-key]");
+    let nearest = null;
+    let minDistance = Infinity;
+    for (const figure of figures) {
+      const rect = figure.getBoundingClientRect();
+      const center = rect.left + rect.width / 2;
+      const distance = Math.abs(clientX - center);
+      if (distance < minDistance) {
+        minDistance = distance;
+        nearest = figure;
+      }
+    }
+    return nearest
+  }
+
+  // -- Drop indicator --------------------------------------------------------
+
+  static #DROP_CLASSES = [
+    "lexxy-drop-target--gallery-before", "lexxy-drop-target--gallery-after",
+    "lexxy-drop-target--list-before", "lexxy-drop-target--list-after",
+    "lexxy-drop-target--block-before", "lexxy-drop-target--block-after",
+  ]
+
+  #clearDropIndicators() {
+    const rootElement = this.#editor.getRootElement();
+    if (!rootElement) return
+
+    for (const el of rootElement.querySelectorAll("[class*='lexxy-drop-target--']")) {
+      el.classList.remove(...AttachmentDragAndDrop.#DROP_CLASSES);
+    }
+  }
+
+  // -- Node operations -------------------------------------------------------
+
+  #performDrop(draggedKey, target) {
+    const draggedNode = $getNodeByKey(draggedKey);
+    if (!draggedNode || !$isActionTextAttachmentNode(draggedNode)) return
+
+    if (target.type === "gallery") {
+      this.#dropOntoImage(draggedNode, target.nodeKey, target.position);
+    } else if (target.type === "gallery-reorder") {
+      this.#reorderInGallery(draggedNode, target.nodeKey, target.position);
+    } else if (target.type === "list-item") {
+      this.#dropIntoList(draggedNode, target);
+    } else {
+      this.#dropBetweenBlocks(draggedNode, target);
+    }
+
+    // Clear selection to prevent a second history entry. Lexical dispatches
+    // SELECTION_CHANGE_COMMAND during commit for non-range selections, which
+    // creates a separate update. Null selection avoids that dispatch entirely
+    // and also prevents Firefox's follow-up selectionchange from dirtying nodes.
+    $setSelection(null);
+  }
+
+  #dropOntoImage(draggedNode, targetKey, position) {
+    const targetNode = $getNodeByKey(targetKey);
+    if (!targetNode || !$isActionTextAttachmentNode(targetNode)) return
+    if (draggedNode.is(targetNode)) return
+
+    draggedNode.remove();
+
+    const gallery = $findOrCreateGalleryForImage(targetNode);
+    if (gallery) {
+      if (position === "before") {
+        targetNode.insertBefore(draggedNode);
+      } else {
+        targetNode.insertAfter(draggedNode);
+      }
+    }
+  }
+
+  #reorderInGallery(draggedNode, targetKey, position) {
+    const targetNode = $getNodeByKey(targetKey);
+    if (!targetNode || draggedNode.is(targetNode)) return
+
+    draggedNode.remove();
+
+    if (position === "before") {
+      targetNode.insertBefore(draggedNode);
+    } else {
+      targetNode.insertAfter(draggedNode);
+    }
+  }
+
+  #dropIntoList(draggedNode, target) {
+    const listItemNode = $getNearestNodeFromDOMNode(target.element);
+    if (!listItemNode || !$isListItemNode(listItemNode)) return
+
+    const listNode = listItemNode.getParent();
+    if (!listNode || !$isListNode(listNode)) return
+
+    const children = listNode.getChildren();
+    const index = children.indexOf(listItemNode);
+    if (index === -1) return
+
+    const splitIndex = target.position === "before" ? index : index + 1;
+
+    draggedNode.remove();
+
+    if (splitIndex === 0) {
+      listNode.insertBefore(draggedNode);
+    } else if (splitIndex >= children.length) {
+      listNode.insertAfter(draggedNode);
+    } else {
+      const [ , listAfter ] = $splitNode(listNode, splitIndex);
+      listAfter.insertBefore(draggedNode);
+    }
+  }
+
+  #dropBetweenBlocks(draggedNode, target) {
+    const targetNode = $getNearestNodeFromDOMNode(target.element);
+    if (!targetNode) return
+
+    const topLevelTarget = targetNode.getTopLevelElement?.() || targetNode;
+    if (draggedNode.is(topLevelTarget)) return
+
+    draggedNode.remove();
+
+    if (target.position === "before") {
+      topLevelTarget.insertBefore(draggedNode);
+    } else {
+      topLevelTarget.insertAfter(draggedNode);
+    }
+  }
+
+  // -- Lifecycle helpers -----------------------------------------------------
+
+  #cleanup() {
+    this.#clearDropIndicators();
+
+    if (this.#draggedNodeKey) {
+      const rootElement = this.#editor.getRootElement();
+      if (rootElement) {
+        const figure = rootElement.querySelector(`[data-lexical-node-key="${this.#draggedNodeKey}"]`);
+        figure?.classList.remove("lexxy-dragging");
+      }
+    }
+
+    this.#draggedNodeKey = null;
+
+    if (this.#rafId) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
+
+    if (this.#draggingRafId) {
+      cancelAnimationFrame(this.#draggingRafId);
+      this.#draggingRafId = null;
+    }
+  }
+}
+
 class AttachmentsExtension extends LexxyExtension {
   get enabled() {
     return this.editorElement.supportsAttachments
@@ -5369,14 +5818,37 @@ class AttachmentsExtension extends LexxyExtension {
         ImageGalleryNode
       ],
       register(editor) {
+        const dragAndDrop = new AttachmentDragAndDrop(editor);
+
         return mergeRegister(
-          editor.registerCommand(DELETE_CHARACTER_COMMAND, $collapseIntoGallery, COMMAND_PRIORITY_NORMAL)
+          editor.registerNodeTransform(ActionTextAttachmentNode, $extractAttachmentFromParagraph),
+          editor.registerCommand(DELETE_CHARACTER_COMMAND, $collapseIntoGallery, COMMAND_PRIORITY_NORMAL),
+          () => dragAndDrop.destroy()
         )
       }
     })
   }
 }
 
+// Decorator nodes can be wrapped in a Paragraph Node by Lexical when contained in a <div>
+// We remove them, splitting the node as needed
+function $extractAttachmentFromParagraph(attachmentNode) {
+  const parentNode = attachmentNode.getParent();
+  if (!$isParagraphNode(parentNode)) return
+
+  if (parentNode.getChildrenSize() === 1) {
+    parentNode.replace(attachmentNode);
+  } else {
+    const index = attachmentNode.getIndexWithinParent();
+    const [ topParagraph, bottomParagraph ] = $splitNode(parentNode, index);
+    topParagraph.insertAfter(attachmentNode);
+
+    for (const p of [ topParagraph, bottomParagraph ]) {
+      if (p.isEmpty()) p.remove();
+    }
+  }
+}
+
 function $collapseIntoGallery(backwards) {
   const anchor = $getSelection()?.anchor;
   if (!anchor) return false
@@ -5623,7 +6095,6 @@ class LexicalEditorElement extends HTMLElement {
     return nodes
       .filter(this.#isNotWhitespaceOnlyNode)
       .map(this.#wrapTextNode)
-      .map(this.#unwrapDecoratorNode)
   }
 
   // Whitespace-only text nodes (e.g. "\n" between block elements like <div>) and stray line break
@@ -5645,18 +6116,6 @@ class LexicalEditorElement extends HTMLElement {
     return paragraph
   }
 
-  // Custom decorator block elements such as action-text-attachments get wrapped into <p> automatically by Lexical.
-  // We unwrap those.
-  #unwrapDecoratorNode(node) {
-    if ($isParagraphNode(node) && node.getChildrenSize() === 1) {
-      const child = node.getFirstChild();
-      if ($isDecoratorNode(child) && !child.isInline()) {
-        return child
-      }
-    }
-    return node
-  }
-
   #initialize() {
     this.#synchronizeWithChanges();
     this.#registerComponents();
@@ -6968,21 +7427,16 @@ class NodeDeleteButton extends HTMLElement {
     this.editor = this.editorElement.editor;
     this.classList.add("lexxy-floating-controls");
 
-    if (!this.deleteButton) {
+    if (!this.querySelector(".lexxy-node-delete")) {
       this.#attachDeleteButton();
     }
   }
 
   disconnectedCallback() {
-    if (this.deleteButton && this.handleDeleteClick) {
-      this.deleteButton.removeEventListener("click", this.handleDeleteClick);
-    }
-
-    this.handleDeleteClick = null;
-    this.deleteButton = null;
     this.editor = null;
     this.editorElement = null;
   }
+
   #attachDeleteButton() {
     const container = createElement("div", { className: "lexxy-floating-controls__group" });
 

package/dist/stylesheets/lexxy-content.css

@@ -419,16 +419,12 @@
     text-align: center;
 
     .attachment {
-      display: inline-block;
+      display: inline-flex;
+      flex-direction: column;
+      gap: 0;
       inline-size: calc(33.333% - 0.8ch);
       vertical-align: top;
 
-      img {
-        margin: auto;
-        max-block-size: 50rem;
-        object-fit: contain;
-      }
-
       .attachment__caption {
         padding-block-end: 1ch;
       }
@@ -451,10 +447,12 @@
     --lexxy-attachment-image-size: 1em;
     --lexxy-attachment-text-color: currentColor;
 
+    align-items: center;
     background: var(--lexxy-attachment-bg-color);
     border-radius: var(--lexxy-radius);
     color: var(--lexxy-attachment-text-color);
-    display: inline;
+    display: inline-flex;
+    gap: 0.25ch;
     margin: 0;
     padding: 0;
     position: relative;
@@ -464,8 +462,6 @@
       block-size: var(--lexxy-attachment-image-size);
       border-radius: 50%;
       inline-size: var(--lexxy-attachment-image-size);
-      margin-inline-end: 0.25ch;
-      vertical-align: middle;
     }
   }
 

package/dist/stylesheets/lexxy-editor.css

@@ -186,6 +186,8 @@
   }
 
   .attachment {
+    background-color: var(--lexxy-color-canvas);
+
     progress {
       max-inline-size: 10ch;
       margin: auto;
@@ -205,6 +207,93 @@
         inset-inline-start: unset;
       }
     }
+
+    &.attachment--error {
+      background: color-mix(var(--lexxy-color-red) 10%, transparent);
+      padding: 2ch;
+
+      &:before {
+        align-items: center;
+        aspect-ratio: 1;
+        background: var(--lexxy-color-red);
+        block-size: 1.5lh;
+        border-radius: 50%;
+        color: white;
+        content: "!";
+        display: flex;
+        justify-content: center;
+        margin: auto;
+      }
+
+      > div {
+        flex: 1;
+        font-size: 0.85em;
+        padding: 1ch;
+        text-align: start;
+      }
+    }
+  }
+
+  .attachment[draggable] {
+    cursor: grab;
+  }
+
+  .attachment.lexxy-dragging {
+    opacity: 0.4;
+  }
+
+  [class*="lexxy-drop-target--"] {
+    position: relative;
+  }
+
+  /* Horizontal line indicator for block and list drops */
+  .lexxy-drop-target--block-before::before,
+  .lexxy-drop-target--block-after::after,
+  .lexxy-drop-target--list-before::before,
+  .lexxy-drop-target--list-after::after {
+    background-color: var(--lexxy-focus-ring-color);
+    block-size: 3px;
+    border-radius: 1px;
+    content: "";
+    inset-inline: 0;
+    pointer-events: none;
+    position: absolute;
+    transform: translate(0, 0.5ch);
+  }
+
+  .lexxy-drop-target--block-before::before,
+  .lexxy-drop-target--list-before::before {
+    transform: translate(0, -0.5ch);
+  }
+
+  .lexxy-drop-target--block-before::before,
+  .lexxy-drop-target--list-before::before {
+    inset-block-start: -2px;
+  }
+
+  .lexxy-drop-target--block-after::after,
+  .lexxy-drop-target--list-after::after {
+    inset-block-end: -2px;
+  }
+
+  /* Vertical line indicator for gallery merge and reorder */
+  .lexxy-drop-target--gallery-before::before,
+  .lexxy-drop-target--gallery-after::after {
+    background-color: var(--lexxy-focus-ring-color);
+    border-radius: 1px;
+    content: "";
+    inset-block: 0;
+    inline-size: 3px;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  .lexxy-drop-target--gallery-before::before {
+    inset-inline-start: -4px;
+  }
+
+  .lexxy-drop-target--gallery-after::after {
+    inset-inline-end: -4px;
   }
 
   .attachment:hover:not(.node--selected) {
@@ -225,27 +314,35 @@
   /* ------------------------------------------------------------------------ */
 
   .attachment-gallery {
+    --lexxy-attachment-gallery-columns: 3;
     --lexxy-attachment-gallery-gap: 0.4ch;
     --lexxy-focus-ring-offset: -6px;
 
-    display: block;
     padding: 0;
 
     .attachment {
+      background: transparent;
+      box-sizing: border-box;
       margin: var(--lexxy-attachment-gallery-gap);
       padding: 0;
       padding-block-end: var(--lexxy-attachment-gap);
       vertical-align: top;
 
-      &.attachment--error {
-        padding: 2ch;
-      }
-
       img {
         box-sizing: border-box;
         padding: 1ch;
         padding-block-end: 0;
       }
+
+
+      &.attachment--error {
+        background: color-mix(var(--lexxy-color-red) 10%, transparent);
+        padding: 2ch;
+
+        > div {
+          text-align: center;
+        }
+      }
     }
   }
 
@@ -905,7 +1002,6 @@ action-text-attachment[content-type^="application/vnd.actiontext"] {
   }
 
   lexxy-node-delete-button {
-    display: none;
     inset-inline-start: 0;
     line-height: 1lh;
 
@@ -920,8 +1016,4 @@ action-text-attachment[content-type^="application/vnd.actiontext"] {
       }
     }
   }
-
-  &.node--selected lexxy-node-delete-button {
-    display: block;
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.8.2-beta",
+  "version": "0.8.5-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",