lexxy 0.9.19.alpha.3 → 0.9.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf2150a951764595691835dfe6bb97aa8a0bf4be41600e611f94156646aaba51
-  data.tar.gz: f24a3dc76fec3b0d924b3f9cd2839c1faa747ff9a051e5c57075530c6ca0abbd
+  metadata.gz: b6868388203b7cfd6a7026208872b75268aafab61e5e29abc57ed35825dfdb8d
+  data.tar.gz: cdbb2c3702b5d204c2820a8a0fdf5c2c851c4d8272b1aa32e9dd8680adae409d
 SHA512:
-  metadata.gz: 9e1e04f1e9bd1f32513f1c64efbd69ca49519307906851d6c11958232a3a0307a0dd31f512007df583bee752c52e97dac2fa87be8bc13dcd2d1d7ef57aa0dc06
-  data.tar.gz: 231f6d4ad4a687800ac5ed43941af7cdea2386549cbc26c3df538db628a6847406013065f0c452c0bc2acfa093afa759a7007cce0639ecbdd9953ecd727da77f
+  metadata.gz: 6a0ced04355235c795d5329b620f75e39ead9abfb64e4111939c2ce40c0a099b6d8aeed6222105d9e17aa909be1cc1e7a83037b2b9ff2fc8c49849f61f21a346
+  data.tar.gz: 26d5669519354092c672bc86bfe37f0939c16bc24336f3242e87ef4d9a5e7416bd856b275238c1bca32b5dd20a98f2c20784aee6c064a86033cc6edb34ced695

data/app/assets/javascript/lexxy.js

@@ -7650,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));
 
@@ -7703,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()}`)
 }
@@ -10254,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) {
@@ -10308,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);
     });
@@ -11885,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) {
@@ -12083,8 +12088,15 @@ 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);
@@ -12278,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.#findReplacementStart(anchorNode, offset, stringToReplace);
     if (lastIndex === -1) return
 
-    this.#performTextReplacement(anchorNode, selection, lastIndex, stringToReplace, replacementNodes);
+    this.#performTextReplacement(anchorNode, lastIndex, stringToReplace, replacementNodes);
   }
 
   uploadFiles(files, { selectLast } = {}) {
@@ -12425,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();
   }
@@ -12608,13 +12628,13 @@ class Contents {
     }
   }
 
-  #performTextReplacement(anchorNode, selection, startIndex, stringToReplace, replacementNodes) {
+  #performTextReplacement(anchorNode, startIndex, stringToReplace, replacementNodes) {
     const fullText = anchorNode.getTextContent();
     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, textAfterString || " ");
+    const textNodeBefore = this.#cloneTextNodeFormatting(anchorNode, textBeforeString);
+    const textNodeAfter = this.#cloneTextNodeFormatting(anchorNode, textAfterString || " ");
 
     anchorNode.replace(textNodeBefore);
 
@@ -12626,18 +12646,12 @@ class Contents {
     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) {
@@ -12927,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) {
@@ -13542,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
@@ -13589,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
@@ -14369,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
@@ -14525,7 +14818,8 @@ class LexicalEditorElement extends HTMLElement {
       AttachmentsExtension,
       FormatEscapeExtension,
       LinkOpenerExtension,
-      PreventLexicalTripleClickExtension
+      PreventLexicalTripleClickExtension,
+      CustomAttachmentDragAndDropExtension
     ]
   }
 
@@ -15561,7 +15855,9 @@ class LexicalPromptElement extends HTMLElement {
         if (!node) return
 
         if (this.#cursorIsTypingSearchTerm(node, offset)) {
-          return
+          if (!this.popoverElement.hasAttribute("data-anchored")) {
+            this.#positionPopover();
+          }
         } else {
           this.#hidePopover();
         }
@@ -15692,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;
@@ -17132,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