lexxy 0.9.19.alpha.2 → 0.9.19

data/app/assets/javascript/lexxy.js

@@ -6301,6 +6301,14 @@ class ListenerBin {
   }
 }
 
+function handlingDefault(handler) {
+  return event => {
+    const handled = handler(event);
+    if (handled) event.preventDefault();
+    return handled
+  }
+}
+
 function createElement(name, properties, content = "") {
   const element = document.createElement(name);
   for (const [ key, value ] of Object.entries(properties || {})) {
@@ -7642,7 +7650,8 @@ class CustomActionTextAttachmentNode extends Ji {
   }
 
   createDOM() {
-    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true });
+    const figure = createElement(this.tagName, { "content-type": this.contentType, "data-lexxy-decorator": true, draggable: true });
+    figure.dataset.lexicalNodeKey = this.__key;
 
     figure.insertAdjacentHTML("beforeend", sanitize(this.innerHtml));
 
@@ -7695,6 +7704,10 @@ class CustomActionTextAttachmentNode extends Ji {
   }
 }
 
+function $isCustomActionTextAttachmentNode(node) {
+  return node instanceof CustomActionTextAttachmentNode
+}
+
 function dasherize(value) {
   return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
 }
@@ -9189,6 +9202,30 @@ var theme = {
   }
 };
 
+class UploadRequests {
+  #requestsByKey = new Map()
+
+  track(key, request) {
+    this.#requestsByKey.set(key, request);
+  }
+
+  forget(key) {
+    this.#requestsByKey.delete(key);
+  }
+
+  abort(key) {
+    const request = this.#requestsByKey.get(key);
+    if (request) {
+      this.#requestsByKey.delete(key);
+      request.abort();
+    }
+  }
+
+  clear() {
+    this.#requestsByKey.clear();
+  }
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -10222,7 +10259,7 @@ class CommandDispatcher {
   }
 
   #isInternalDrag(event) {
-    return event.dataTransfer?.types.includes("application/x-lexxy-node-key")
+    return event.dataTransfer?.types.some((type) => type.startsWith("application/x-lexxy-"))
   }
 
   #handleTabKey(event) {
@@ -10276,14 +10313,14 @@ class Selection {
   }
 
   get cursorPosition() {
-    let position = { x: 0, y: 0 };
+    let position = null;
 
     this.editor.getEditorState().read(() => {
       const range = this.#getValidSelectionRange();
       if (!range) return
 
       const rect = this.#getReliableRectFromRange(range);
-      if (!rect) return
+      if (this.#isRectUnreliable(rect)) return
 
       position = this.#calculateCursorPosition(rect, range);
     });
@@ -10574,10 +10611,10 @@ class Selection {
 
   #processSelectionChangeCommands() {
     this.#listeners.track(
-      this.editor.registerCommand(Ne$1, this.#selectPreviousNode.bind(this), io),
-      this.editor.registerCommand(ke$2, this.#selectNextNode.bind(this), io),
-      this.editor.registerCommand(we$1, this.#selectPreviousTopLevelNode.bind(this), io),
-      this.editor.registerCommand(Ee$3, this.#selectNextTopLevelNode.bind(this), io),
+      this.editor.registerCommand(Ne$1, handlingDefault(this.#selectPreviousNode.bind(this)), io),
+      this.editor.registerCommand(ke$2, handlingDefault(this.#selectNextNode.bind(this)), io),
+      this.editor.registerCommand(we$1, handlingDefault(this.#selectPreviousTopLevelNode.bind(this)), io),
+      this.editor.registerCommand(Ee$3, handlingDefault(this.#selectNextTopLevelNode.bind(this)), io),
 
       this.editor.registerCommand(fe$4, this.#selectDecoratorNodeBeforeDeletion.bind(this), io),
 
@@ -10676,49 +10713,58 @@ class Selection {
     }
   }
 
-  async #selectPreviousNode(event) {
-    if (event?.shiftKey) return false
+  #selectPreviousNode(event) {
+    if (event.shiftKey) {
+      return this.#withCurrentNodeSelectionNode((currentNode) => {
+        const selection = this.#rangeSelectDecorator(currentNode, "forward");
 
-    if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.selectPrevious())
+        // Can't rely on native pass-through with Playwright on firefox
+        selection.modify("extend", true, "character");
+        return true
+      })
     } else {
-      return this.#selectInLexical(this.nodeBeforeCursor)
+      return this.#withCurrentNodeSelectionNode((currentNode) => currentNode.selectPrevious())
+        || this.#selectInLexical(this.nodeBeforeCursor)
     }
   }
 
-  async #selectNextNode(event) {
-    if (event?.shiftKey) return false
+  #selectNextNode(event) {
+    if (event.shiftKey) {
+      return this.#withCurrentNodeSelectionNode((currentNode) => {
+        const selection = this.#rangeSelectDecorator(currentNode, "forward");
 
-    if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0))
+        // Can't rely on native pass-through with Playwright on firefox
+        selection.modify("extend", false, "character");
+        return true
+      })
     } else {
-      return this.#selectInLexical(this.nodeAfterCursor)
+      return this.#withCurrentNodeSelectionNode((currentNode) => currentNode.selectNext(0, 0))
+        || this.#selectInLexical(this.nodeAfterCursor)
     }
   }
 
-  async #selectPreviousTopLevelNode() {
-    if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.getTopLevelElement().selectPrevious())
-    } else {
-      return this.#selectInLexical(this.topLevelNodeBeforeCursor)
-    }
+  #selectPreviousTopLevelNode() {
+    return this.#withCurrentNodeSelectionNode((currentNode) => currentNode.getTopLevelElement().selectPrevious())
+      || this.#selectInLexical(this.topLevelNodeBeforeCursor)
+  }
+
+  #selectNextTopLevelNode() {
+    return this.#withCurrentNodeSelectionNode((currentNode) => currentNode.getTopLevelElement().selectNext(0, 0))
+      || this.#selectInLexical(this.topLevelNodeAfterCursor)
   }
 
-  async #selectNextTopLevelNode() {
+  #withCurrentNodeSelectionNode(fn) {
     if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.getTopLevelElement().selectNext(0, 0))
-    } else {
-      return this.#selectInLexical(this.topLevelNodeAfterCursor)
+      return fn(Qr().getNodes()[0])
     }
   }
 
-  async #withCurrentNode(fn) {
-    await nextFrame();
-    if (this.hasNodeSelection) {
-      this.editor.update(() => {
-        fn(Qr().getNodes()[0]);
-        this.editor.focus();
-      });
+  #rangeSelectDecorator(node, direction = "forward") {
+    if (ji(node)) {
+        const [ anchorOffset, focusOffset ] = direction === "forward" ? [ 0, 1 ] : [ 1, 0 ];
+        const indexAtNode = node.getIndexWithinParent();
+
+        return node.getParent().select(indexAtNode + anchorOffset, indexAtNode + focusOffset)
     }
   }
 
@@ -11340,9 +11386,9 @@ function $findOrCreateGalleryForImage(node) {
 class Uploader {
   #files
 
-  static for(editorElement, files) {
+  static for(editorElement, files, options = {}) {
     const UploaderKlass = GalleryUploader.handle(editorElement, files) ? GalleryUploader : Uploader;
-    return new UploaderKlass(editorElement, files)
+    return new UploaderKlass(editorElement, files, options)
   }
 
   constructor(editorElement, files, options = {}) {
@@ -11364,7 +11410,13 @@ class Uploader {
   }
 
   $createUploadNodes() {
-    this.nodes = this.files.map(file => this.contents.$createUploadNode(file));
+    this.nodes = this.files.map(file => this.#createUploadNode(file));
+  }
+
+  #createUploadNode(file) {
+    return this.options.pending
+      ? this.contents.$createPendingUploadNode(file)
+      : this.contents.$createUploadNode(file)
   }
 
   $insertUploadNodes() {
@@ -11622,6 +11674,8 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     this.#dispatchEvent("lexxy:upload-start", { file: this.file });
 
     upload.create((error, blob) => {
+      this.#forgetUploadRequest();
+
       if (error) {
         this.#dispatchEvent("lexxy:upload-end", { file: this.file, error });
         this.#handleUploadError(error);
@@ -11644,12 +11698,26 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
       directUploadWillStoreFileWithXHR: (request) => {
         if (shouldAuthenticateUploads) request.withCredentials = true;
 
+        this.#rememberUploadRequest(request);
+
         const uploadProgressHandler = (event) => this.#handleUploadProgress(event, request);
         request.upload.addEventListener("progress", uploadProgressHandler);
       }
     }
   }
 
+  #forgetUploadRequest() {
+    this.#editorElement.uploadRequests.forget(this.getKey());
+  }
+
+  #rememberUploadRequest(request) {
+    this.#editorElement.uploadRequests.track(this.getKey(), request);
+  }
+
+  get #editorElement() {
+    return this.editor.getRootElement()?.closest("lexxy-editor")
+  }
+
   #setUploadStarted() {
     this.#setProgress(1);
   }
@@ -11822,7 +11890,7 @@ class ShadowRootNodeInserter extends BaseNodeInserter {
 
 class NodeSelectionNodeInserter extends BaseNodeInserter {
   static handles(selection) {
-    return Ir(selection)
+    return Ir(selection) && selection.getNodes().length > 0
   }
 
   insertNodes(nodes) {
@@ -12020,18 +12088,20 @@ class Contents {
     }, { tag });
   }
 
+  insertText(text, { tag } = {}) {
+    this.editor.update(() => {
+      const paragraph = eo().append(kr(text));
+      this.insertAtCursor(paragraph);
+    }, { tag });
+  }
+
   insertAtCursor(...nodes) {
-    const selection = Qr() ?? Zo().selectEnd();
+    const selection = this.#insertableSelection();
     const inserter = BaseNodeInserter.for(selection);
 
     inserter.insertNodes(nodes);
   }
 
-  insertAtCursorEnsuringLineBelow(node) {
-    this.insertAtCursor(node);
-    this.#insertLineBelowIfLastNode(node);
-  }
-
   applyParagraphFormat() {
     const selection = Qr();
     if (!Fr(selection)) return
@@ -12173,17 +12243,27 @@ class Contents {
       const fullText = anchorNode.getTextContent();
       const offset = anchor.offset;
 
-      const textBeforeCursor = fullText.slice(0, offset);
-
-      const lastIndex = textBeforeCursor.lastIndexOf(string);
+      const lastIndex = fullText.slice(0, offset).lastIndexOf(string);
       if (lastIndex !== -1) {
-        result = textBeforeCursor.slice(lastIndex + string.length);
+        result = fullText.slice(lastIndex + string.length, this.#endOffsetAt(fullText, offset));
       }
     });
 
     return result
   }
 
+  // The query runs from the trigger up to the next whitespace, even when the
+  // cursor sits inside an existing word — inserting "@" before "Jack" must
+  // filter by "Jack" rather than treating the prompt as empty.
+  #endOffsetAt(fullText, cursorOffset) {
+    const whitespaceOffset = fullText.slice(cursorOffset).search(/\s/);
+    if (whitespaceOffset === -1) {
+      return fullText.length
+    } else {
+      return cursorOffset + whitespaceOffset
+    }
+  }
+
   containsTextBackUntil(string) {
     let result = false;
 
@@ -12210,14 +12290,13 @@ class Contents {
   replaceTextBackUntil(stringToReplace, replacementNodes) {
     replacementNodes = Array.isArray(replacementNodes) ? replacementNodes : [ replacementNodes ];
 
-    const selection = Qr();
     const { anchorNode, offset } = this.#getTextAnchorData();
     if (!anchorNode) return
 
-    const lastIndex = this.#findLastIndexBeforeCursor(anchorNode, offset, stringToReplace);
+    const lastIndex = this.#findReplacementStart(anchorNode, offset, stringToReplace);
     if (lastIndex === -1) return
 
-    this.#performTextReplacement(anchorNode, selection, offset, lastIndex, replacementNodes);
+    this.#performTextReplacement(anchorNode, lastIndex, stringToReplace, replacementNodes);
   }
 
   uploadFiles(files, { selectLast } = {}) {
@@ -12250,24 +12329,46 @@ class Contents {
     })
   }
 
+  $createPendingUploadNode(file) {
+    return $createActionTextAttachmentUploadNode({
+      file,
+      uploadUrl: null,
+      blobUrlTemplate: this.editorElement.blobUrlTemplate,
+      contentType: file.type,
+    })
+  }
+
   insertPendingAttachment(file) {
     if (!this.editorElement.supportsAttachments) return null
 
     let nodeKey = null;
     this.editor.update(() => {
-      const uploadNode = new ActionTextAttachmentUploadNode({
-        file,
-        uploadUrl: null,
-        blobUrlTemplate: this.editorElement.blobUrlTemplate,
-        editor: this.editor
-      });
+      const uploadNode = this.$createPendingUploadNode(file);
       this.insertAtCursor(uploadNode);
       nodeKey = uploadNode.getKey();
-    }, { tag: Jn });
+    });
 
-    if (!nodeKey) return null
+    return nodeKey ? this.#pendingAttachmentHandle(nodeKey) : null
+  }
 
+  insertPendingAttachments(files) {
+    const fileList = Array.from(files);
+    if (!this.editorElement.supportsAttachments || fileList.length === 0) return []
+
+    let nodeKeys = [];
+    this.editor.update(() => {
+      const uploader = Uploader.for(this.editorElement, fileList, { pending: true });
+      uploader.$uploadFiles();
+      nodeKeys = (uploader.nodes ?? []).map(node => node.getKey());
+    });
+
+    return nodeKeys.map(nodeKey => this.#pendingAttachmentHandle(nodeKey))
+  }
+
+  #pendingAttachmentHandle(initialNodeKey) {
     const editor = this.editor;
+    let nodeKey = initialNodeKey;
+
     return {
       setAttributes(blob) {
         editor.update(() => {
@@ -12335,6 +12436,15 @@ class Contents {
     });
   }
 
+  #insertableSelection() {
+    const selection = Qr();
+    if (Ir(selection) && selection.getNodes().length === 0) {
+      return Zo().selectEnd()
+    }
+
+    return selection ?? Zo().selectEnd()
+  }
+
   #formatPastedDOM(doc) {
     new PastedContentFormatter(doc).format();
   }
@@ -12472,17 +12582,6 @@ class Contents {
     }
   }
 
-  #insertLineBelowIfLastNode(node) {
-    this.editor.update(() => {
-      const nextSibling = node.getNextSibling();
-      if (!nextSibling) {
-        const newParagraph = eo();
-        node.insertAfter(newParagraph);
-        newParagraph.selectStart();
-      }
-    });
-  }
-
   #unwrap(node) {
     const children = node.getChildren();
 
@@ -12515,19 +12614,27 @@ class Contents {
     return { anchorNode, offset: anchor.offset }
   }
 
-  #findLastIndexBeforeCursor(anchorNode, offset, stringToReplace) {
+  // The replaced span can straddle the cursor (e.g. "@Jack" when "@" was just
+  // inserted before "Jack"), so we anchor on the trigger before the cursor and
+  // verify the whole string matches there rather than searching text up to it.
+  #findReplacementStart(anchorNode, offset, stringToReplace) {
     const fullText = anchorNode.getTextContent();
-    const textBeforeCursor = fullText.slice(0, offset);
-    return textBeforeCursor.lastIndexOf(stringToReplace)
+    const triggerIndex = fullText.slice(0, offset).lastIndexOf(stringToReplace[0]);
+
+    if (triggerIndex !== -1 && fullText.startsWith(stringToReplace, triggerIndex)) {
+      return triggerIndex
+    } else {
+      return -1
+    }
   }
 
-  #performTextReplacement(anchorNode, selection, offset, lastIndex, replacementNodes) {
+  #performTextReplacement(anchorNode, startIndex, stringToReplace, replacementNodes) {
     const fullText = anchorNode.getTextContent();
-    const textBeforeString = fullText.slice(0, lastIndex);
-    const textAfterCursor = fullText.slice(offset);
+    const textBeforeString = fullText.slice(0, startIndex);
+    const textAfterString = fullText.slice(startIndex + stringToReplace.length);
 
-    const textNodeBefore = this.#cloneTextNodeFormatting(anchorNode, selection, textBeforeString);
-    const textNodeAfter = this.#cloneTextNodeFormatting(anchorNode, selection, textAfterCursor || " ");
+    const textNodeBefore = this.#cloneTextNodeFormatting(anchorNode, textBeforeString);
+    const textNodeAfter = this.#cloneTextNodeFormatting(anchorNode, textAfterString || " ");
 
     anchorNode.replace(textNodeBefore);
 
@@ -12535,22 +12642,16 @@ class Contents {
     lastInsertedNode.insertAfter(textNodeAfter);
 
     this.#appendLineBreakIfNeeded(textNodeAfter.getParentOrThrow());
-    const cursorOffset = textAfterCursor ? 0 : 1;
+    const cursorOffset = textAfterString ? 0 : 1;
     textNodeAfter.select(cursorOffset, cursorOffset);
   }
 
-  #cloneTextNodeFormatting(anchorNode, selection, text) {
-    const parent = anchorNode.getParent();
-    const fallbackFormat = parent?.getTextFormat?.() || 0;
-    const fallbackStyle = parent?.getTextStyle?.() || "";
-    const format = Fr(selection) && selection.format ? selection.format : (anchorNode.getFormat() || fallbackFormat);
-    const style = Fr(selection) && selection.style ? selection.style : (anchorNode.getStyle() || fallbackStyle);
-
+  #cloneTextNodeFormatting(anchorNode, text) {
     return kr(text)
-      .setFormat(format)
+      .setFormat(anchorNode.getFormat())
       .setDetail(anchorNode.getDetail())
       .setMode(anchorNode.getMode())
-      .setStyle(style)
+      .setStyle(anchorNode.getStyle())
   }
 
   #insertReplacementNodes(startNode, replacementNodes) {
@@ -12840,14 +12941,31 @@ class Clipboard {
   #pasteMarkdown(text) {
     const html = k(text, { breaks: true });
     const doc = parseHtml(html);
-    const detail = Object.freeze({
-      markdown: text,
-      document: doc,
-      addBlockSpacing: () => addBlockSpacing(doc)
-    });
 
-    dispatch(this.editorElement, "lexxy:insert-markdown", detail);
-    this.contents.insertDOM(doc, { tag: jn });
+    if (this.#isPlainTextWithoutMarkdown(doc)) {
+      this.contents.insertText(text, { tag: jn });
+    } else {
+      const detail = Object.freeze({
+        markdown: text,
+        document: doc,
+        addBlockSpacing: () => addBlockSpacing(doc)
+      });
+
+      dispatch(this.editorElement, "lexxy:insert-markdown", detail);
+      this.contents.insertDOM(doc, { tag: jn });
+    }
+  }
+
+  // Markdown conversion collapses runs of whitespace and unescapes backslashes,
+  // silently corrupting plain text such as Windows/UNC file paths. When the text
+  // carries no Markdown structure, paste it verbatim instead.
+  #isPlainTextWithoutMarkdown(doc) {
+    const elements = Array.from(doc.body.children);
+    if (elements.length !== 1) return false
+
+    const paragraph = elements[0];
+    return paragraph.nodeName === "P"
+      && Array.from(paragraph.childNodes).every((node) => node.nodeType === Node.TEXT_NODE)
   }
 
   #pasteRichText(clipboardData) {
@@ -13455,7 +13573,7 @@ class TablesExtension extends LexxyExtension {
   }
 }
 
-const MIME_TYPE = "application/x-lexxy-node-key";
+const MIME_TYPE$1 = "application/x-lexxy-node-key";
 
 class AttachmentDragAndDrop {
   #editor
@@ -13502,7 +13620,7 @@ class AttachmentDragAndDrop {
     if (!figure) return false
 
     this.#draggedNodeKey = figure.dataset.lexicalNodeKey;
-    event.dataTransfer.setData(MIME_TYPE, this.#draggedNodeKey);
+    event.dataTransfer.setData(MIME_TYPE$1, this.#draggedNodeKey);
     event.dataTransfer.effectAllowed = "move";
 
     // Add dragging class after a tick so it doesn't affect the drag image
@@ -13851,11 +13969,12 @@ class AttachmentsExtension extends LexxyExtension {
 
   #handleUploadMutations(mutations) {
     const previousUploadsCount = this.#uploadsCount;
-    for (const [ , mutation ] of mutations) {
+    for (const [ key, mutation ] of mutations) {
       if (mutation === "created") {
         this.#uploadsCount++;
       } else if (mutation === "destroyed") {
         this.#uploadsCount--;
+        this.editorElement.uploadRequests.abort(key);
       }
     }
 
@@ -14281,6 +14400,268 @@ class PreventLexicalTripleClickExtension extends LexxyExtension {
   }
 }
 
+function caretRect(node, offset) {
+  const range = document.createRange();
+  range.setStart(node, offset);
+  range.collapse(true);
+
+  const rect = range.getBoundingClientRect();
+  if (rect.height > 0) {
+    return rect
+  } else {
+    return null
+  }
+}
+
+function caretFromPoint(clientX, clientY) {
+  if (document.caretPositionFromPoint) {
+    const position = document.caretPositionFromPoint(clientX, clientY);
+    if (position) return { node: position.offsetNode, offset: position.offset }
+  } else if (document.caretRangeFromPoint) {
+    const range = document.caretRangeFromPoint(clientX, clientY);
+    if (range) return { node: range.startContainer, offset: range.startOffset }
+  }
+
+  return null
+}
+
+const MIME_TYPE = "application/x-lexxy-custom-attachment-key";
+
+// Custom inline attachments reorder by dropping at a text caret, unlike block
+// attachments which insert between blocks or into galleries.
+class CustomAttachmentDragAndDrop {
+  #editor
+  #draggedNodeKey = null
+  #draggingRafId = null
+  #dragOverRafId = null
+  #dropIndicator = null
+  #listeners = new ListenerBin()
+
+  constructor(editor) {
+    this.#editor = editor;
+
+    // Register at HIGH priority to intercept before the base @lexical/rich-text
+    // handlers, which consume drag events. The block-attachment handler also
+    // registers here but bails for inline custom attachments, so we get our turn.
+    this.#listeners.track(
+      editor.registerCommand(Be$2, (event) => this.#handleDragStart(event), so),
+      editor.registerCommand(ze$2, (event) => this.#handleDrop(event), so)
+    );
+
+    this.#listeners.track(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);
+      }
+    }));
+  }
+
+  destroy() {
+    this.#cleanup();
+    this.#dropIndicator?.remove();
+    this.#dropIndicator = null;
+    this.#listeners.dispose();
+  }
+
+  #handleDragStart(event) {
+    const attachment = this.#customAttachmentElementFrom(event.target);
+    if (!attachment) return false
+
+    this.#draggedNodeKey = attachment.dataset.lexicalNodeKey;
+    event.dataTransfer.setData(MIME_TYPE, this.#draggedNodeKey);
+    event.dataTransfer.effectAllowed = "move";
+
+    this.#draggingRafId = requestAnimationFrame(() => {
+      this.#draggingRafId = null;
+      attachment.classList.add("lexxy-dragging");
+    });
+
+    return true
+  }
+
+  #onDragOver = (event) => {
+    if (!this.#draggedNodeKey) return
+
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+
+    if (!this.#dragOverRafId) {
+      this.#dragOverRafId = requestAnimationFrame(() => {
+        this.#dragOverRafId = null;
+        this.#updateDropIndicator(event);
+      });
+    }
+  }
+
+  #onDragEnd = () => {
+    this.#cleanup();
+  }
+
+  #handleDrop(event) {
+    if (!this.#draggedNodeKey) return false
+
+    event.preventDefault();
+
+    const dropPoint = this.#resolveDropPoint(event);
+    const draggedKey = this.#draggedNodeKey;
+    this.#cleanup();
+
+    if (dropPoint) {
+      this.#moveAttachment(draggedKey, dropPoint);
+    }
+
+    return true
+  }
+
+  #resolveDropPoint(event) {
+    const rootElement = this.#editor.getRootElement();
+    if (!rootElement) return null
+
+    const caret = caretFromPoint(event.clientX, event.clientY);
+    if (!caret || !rootElement.contains(caret.node)) return null
+
+    // A caret on the root itself points between blocks. Mentions behave like text:
+    // they only drop onto an existing line, so snap to the nearest one.
+    if (caret.node === rootElement) {
+      return this.#nearestLineCaret(rootElement, event.clientY)
+    } else {
+      return caret
+    }
+  }
+
+  #nearestLineCaret(rootElement, clientY) {
+    let nearestLine = null;
+    let nearestDistance = Infinity;
+
+    for (const line of rootElement.children) {
+      const rect = line.getBoundingClientRect();
+      const distance = Math.min(Math.abs(clientY - rect.top), Math.abs(clientY - rect.bottom));
+      if (distance < nearestDistance) {
+        nearestDistance = distance;
+        nearestLine = line;
+      }
+    }
+
+    if (!nearestLine) return null
+
+    const rect = nearestLine.getBoundingClientRect();
+    if (clientY < rect.top) {
+      return { node: nearestLine, offset: 0 }
+    } else {
+      return { node: nearestLine, offset: nearestLine.childNodes.length }
+    }
+  }
+
+  #moveAttachment(draggedKey, dropPoint) {
+    this.#editor.update(() => {
+      const draggedNode = Yo(draggedKey);
+      if (!$isCustomActionTextAttachmentNode(draggedNode)) return
+
+      const selection = Gr({
+        anchorNode: dropPoint.node,
+        anchorOffset: dropPoint.offset,
+        focusNode: dropPoint.node,
+        focusOffset: dropPoint.offset
+      }, this.#editor);
+      if (!selection) return
+
+      es(selection);
+
+      draggedNode.remove();
+      selection.insertNodes([ draggedNode ]);
+    });
+  }
+
+  #updateDropIndicator(event) {
+    this.#hideCaret();
+
+    const dropPoint = this.#resolveDropPoint(event);
+    if (dropPoint) this.#showCaret(this.#caretRectFor(dropPoint));
+  }
+
+  #caretRectFor({ node, offset }) {
+    const rect = caretRect(node, offset);
+    if (rect) return rect
+
+    // A blank line has no text to measure, so fall back to the line's own box.
+    const line = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+    if (!line) return null
+
+    const lineRect = line.getBoundingClientRect();
+    return { left: lineRect.left, top: lineRect.top, height: lineRect.height }
+  }
+
+  #showCaret(rect) {
+    if (!rect) return
+
+    const caret = this.#ensureCaretIndicator();
+    caret.style.blockSize = `${rect.height}px`;
+    caret.style.insetInlineStart = `${rect.left}px`;
+    caret.style.insetBlockStart = `${rect.top}px`;
+  }
+
+  #ensureCaretIndicator() {
+    this.#dropIndicator ||= createElement("div", { className: "lexxy-drop-caret" });
+
+    this.#editorElement().appendChild(this.#dropIndicator);
+    this.#dropIndicator.style.display = "block";
+    return this.#dropIndicator
+  }
+
+  #editorElement() {
+    return this.#editor.getRootElement().closest("lexxy-editor")
+  }
+
+  #hideCaret() {
+    if (this.#dropIndicator) this.#dropIndicator.style.display = "none";
+  }
+
+  #customAttachmentElementFrom(target) {
+    return target?.closest?.("[data-lexxy-decorator][data-lexical-node-key]")
+  }
+
+  #cleanup() {
+    if (this.#draggedNodeKey) {
+      const rootElement = this.#editor.getRootElement();
+      const attachment = rootElement?.querySelector(`[data-lexical-node-key="${this.#draggedNodeKey}"]`);
+      attachment?.classList.remove("lexxy-dragging");
+    }
+
+    this.#hideCaret();
+    this.#draggedNodeKey = null;
+
+    if (this.#draggingRafId) {
+      cancelAnimationFrame(this.#draggingRafId);
+      this.#draggingRafId = null;
+    }
+
+    if (this.#dragOverRafId) {
+      cancelAnimationFrame(this.#dragOverRafId);
+      this.#dragOverRafId = null;
+    }
+  }
+}
+
+class CustomAttachmentDragAndDropExtension extends LexxyExtension {
+  get enabled() {
+    return this.editorElement.supportsRichText
+  }
+
+  get lexicalExtension() {
+    return dc({
+      name: "lexxy/custom-attachment-drag-and-drop",
+      register: (editor) => {
+        const dragAndDrop = new CustomAttachmentDragAndDrop(editor);
+        return () => dragAndDrop.destroy()
+      }
+    })
+  }
+}
+
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = false
@@ -14299,6 +14680,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #validity = new Map()
   #validationTextArea = document.createElement("textarea")
+  #uploadRequests
 
   constructor() {
     super();
@@ -14306,6 +14688,10 @@ class LexicalEditorElement extends HTMLElement {
     this.internals.role = "presentation";
   }
 
+  get uploadRequests() {
+    return this.#uploadRequests
+  }
+
   connectedCallback() {
     this.id ||= generateDomId("lexxy-editor");
     this.config = new EditorConfiguration(this);
@@ -14326,6 +14712,7 @@ class LexicalEditorElement extends HTMLElement {
     this.#disposables.push(this.clipboard);
 
     this.adapter = new BrowserAdapter();
+    this.#uploadRequests = new UploadRequests();
 
     const commandDispatcher = CommandDispatcher.configureFor(this);
     this.#disposables.push(commandDispatcher);
@@ -14431,7 +14818,8 @@ class LexicalEditorElement extends HTMLElement {
       AttachmentsExtension,
       FormatEscapeExtension,
       LinkOpenerExtension,
-      PreventLexicalTripleClickExtension
+      PreventLexicalTripleClickExtension,
+      CustomAttachmentDragAndDropExtension
     ]
   }
 
@@ -15099,6 +15487,7 @@ class LexicalEditorElement extends HTMLElement {
   #reset() {
     this.#dispose();
     this.#resetValidity();
+    this.#uploadRequests?.clear();
     this.editorContentElement?.remove();
     this.editorContentElement = null;
 
@@ -15465,24 +15854,35 @@ class LexicalPromptElement extends HTMLElement {
         const { node, offset } = this.#selection.selectedNodeWithOffset();
         if (!node) return
 
-        if (Tr(node) && offset > 0) {
-          const fullText = node.getTextContent();
-          const textBeforeCursor = fullText.slice(0, offset);
-          const lastTriggerIndex = textBeforeCursor.lastIndexOf(this.trigger);
-          const triggerEndIndex = lastTriggerIndex + this.trigger.length - 1;
-
-          // If trigger is not found, or cursor is at or before the trigger end position, hide popover
-          if (lastTriggerIndex === -1 || offset <= triggerEndIndex) {
-            this.#hidePopover();
+        if (this.#cursorIsTypingSearchTerm(node, offset)) {
+          if (!this.popoverElement.hasAttribute("data-anchored")) {
+            this.#positionPopover();
           }
         } else {
-          // Cursor is not in a text node or at offset 0, hide popover
           this.#hidePopover();
         }
       });
     }));
   }
 
+  // The popover should stay open only while the cursor sits at the end of the
+  // trigger and its search term. When the cursor moves away — before the
+  // trigger, or past the token into later text — the text between the trigger
+  // and the cursor breaks that run and we dismiss. A newline always breaks the
+  // run; a space breaks it only for triggers that don't support spaces in
+  // searches, since those that do (e.g. `person:`) expect multi-word terms.
+  #cursorIsTypingSearchTerm(node, offset) {
+    if (!Tr(node) || offset === 0) return false
+
+    const textBeforeCursor = node.getTextContent().slice(0, offset);
+    const lastTriggerIndex = textBeforeCursor.lastIndexOf(this.trigger);
+    if (lastTriggerIndex === -1) return false
+
+    const searchTerm = textBeforeCursor.slice(lastTriggerIndex + this.trigger.length);
+    const breakPattern = this.supportsSpaceInSearches ? /\n/ : /[ \n]/;
+    return !breakPattern.test(searchTerm)
+  }
+
   get #editor() {
     return this.#editorElement.editor
   }
@@ -15588,8 +15988,16 @@ class LexicalPromptElement extends HTMLElement {
     }
   }
 
+  // Right after a Turbo history restore the editor reconnects before the DOM selection
+  // is re-established, so the cursor geometry is momentarily unavailable. Anchoring then
+  // would pin the menu to the editor's left edge for the rest of the open cycle, so we
+  // skip it and let a later reposition anchor it once the selection is ready. The menu
+  // stays hidden until anchored (see the `[data-anchored]` rule in the stylesheet).
   #positionPopover() {
-    const { x, y, fontSize } = this.#selection.cursorPosition;
+    const cursorPosition = this.#selection.cursorPosition;
+    if (!cursorPosition) return
+
+    const { x, y, fontSize } = cursorPosition;
     const editorRect = this.#editorElement.getBoundingClientRect();
     const contentRect = this.#editorContentElement.getBoundingClientRect();
     const verticalOffset = contentRect.top - editorRect.top;
@@ -17028,5 +17436,5 @@ const configure = Lexxy.configure;
 // Pushing elements definition to after the current call stack to allow global configuration to take place first
 setTimeout(defineElements, 0);
 
-export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, NativeAdapter, configure, highlightCode, highlightElement };
+export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, $isCustomActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, NativeAdapter, configure, highlightCode, highlightElement };
 //# sourceMappingURL=lexxy.js.map