lexxy 0.9.19 → 0.9.20

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6868388203b7cfd6a7026208872b75268aafab61e5e29abc57ed35825dfdb8d
-  data.tar.gz: cdbb2c3702b5d204c2820a8a0fdf5c2c851c4d8272b1aa32e9dd8680adae409d
+  metadata.gz: 3e6fda495d92cad60dac933e1fbe6466f0813def098debbe4bea232130db0721
+  data.tar.gz: 0e579b377be3610f91228422dcd3480bae586942aee4294c5d3bd580f60f0de4
 SHA512:
-  metadata.gz: 6a0ced04355235c795d5329b620f75e39ead9abfb64e4111939c2ce40c0a099b6d8aeed6222105d9e17aa909be1cc1e7a83037b2b9ff2fc8c49849f61f21a346
-  data.tar.gz: 26d5669519354092c672bc86bfe37f0939c16bc24336f3242e87ef4d9a5e7416bd856b275238c1bca32b5dd20a98f2c20784aee6c064a86033cc6edb34ced695
+  metadata.gz: 4527448422497989de11f0173dbaab24f357c477e8661f7511f8b1d3f9794b60e0073496266205ae641975a08439cabbbe084a435f6b9499e3d9675a394959bf
+  data.tar.gz: f43f34d4a40a05f0fdd13d29afa67c68abb9e55b13f0d3703e36181af4f7e1d12fcb4ddf29d706bdf301d877cd95147cb734310f9b5110fd449556984b35293f

data/app/assets/javascript/lexxy.js

@@ -6348,8 +6348,8 @@ function dispatch(element, eventName, detail = null, cancelable = false) {
 }
 
 function addBlockSpacing(doc) {
-  const blocks = doc.querySelectorAll("body > :not(h1, h2, h3, h4, h5, h6) + *");
-  for (const block of blocks) {
+  const selector = "body > :not(h1, h2, h3, h4, h5, h6) + *, blockquote > :not(h1, h2, h3, h4, h5, h6) + *";
+  for (const block of doc.querySelectorAll(selector)) {
     const spacer = doc.createElement("p");
     spacer.appendChild(doc.createElement("br"));
     block.before(spacer);
@@ -8018,6 +8018,7 @@ function $splitSelectedParagraphsAtInnerLineBreaks(selection) {
 
 function $expandSelectionToLineBreaksAndSplitAtEdges(selection, fallbackAncestor = (node) => node.getTopLevelElement()) {
   j$6(selection);
+  $shrinkSelectionPastBlockEdges(selection);
 
   const focusCaret = ql(selection.focus, "next");
   const anchorCaret = ql(selection.anchor, "previous");
@@ -8049,6 +8050,52 @@ function $expandSelectionToLineBreaksAndSplitAtEdges(selection, fallbackAncestor
   ));
 }
 
+// A selection whose anchor sits at the very end of one block while its focus
+// lives in a later block (e.g. selecting a pasted paragraph when the browser
+// anchors at the end of the line above) contributes nothing from the anchor's
+// block. Pull each endpoint that is flush against a block edge into the block
+// that actually holds the selected content, so we don't wrap the empty edge
+// block too.
+function $shrinkSelectionPastBlockEdges(selection) {
+  if (selection.isCollapsed()) return
+
+  const anchorBlock = selection.anchor.getNode().getTopLevelElement();
+  const focusBlock = selection.focus.getNode().getTopLevelElement();
+  if (!anchorBlock || !focusBlock || anchorBlock.is(focusBlock)) return
+
+  if ($isAtBlockEnd(selection.anchor, anchorBlock)) {
+    const nextBlock = anchorBlock.getNextSibling();
+    if (nextBlock) selection.anchor.set(nextBlock.getKey(), 0, "element");
+  }
+
+  if ($isAtBlockStart(selection.focus, focusBlock)) {
+    const previousBlock = focusBlock.getPreviousSibling();
+    if (previousBlock) selection.focus.set(previousBlock.getKey(), previousBlock.getChildrenSize(), "element");
+  }
+}
+
+function $isAtBlockEnd(point, block) {
+  return $isAtBlockBoundary(ql(point, "next"), block)
+}
+
+function $isAtBlockStart(point, block) {
+  return $isAtBlockBoundary(ql(point, "previous"), block)
+}
+
+// A text point sitting mid-node still has content ahead of it in the caret's
+// direction, even though that content is not a sibling node. $getNodeAtCaret
+// only sees siblings, so check the text edge before walking the block.
+function $isAtBlockBoundary(caret, block) {
+  if (vl(caret) && ic(caret)) return false
+
+  let cursor = rc(caret);
+  while (cursor && block.isParentOf(cursor.origin)) {
+    if (cursor.getNodeAtCaret()) return false
+    cursor = cursor.getParentCaret();
+  }
+  return true
+}
+
 function $getCaretAtLineBreakBoundary(caret, skipInwardEdge = false) {
   const paragraph = caret.origin.getTopLevelElement();
   if (!paragraph || !no(paragraph)) return null
@@ -9469,7 +9516,7 @@ function $registerPreConversion(editor) {
 // and applied after retokenization via a mutation listener.
 function $preConversionWithHighlightsFactory(editor) {
   return function $preConversionWithHighlights(domNode) {
-    const highlights = extractHighlightRanges$1(domNode);
+    const highlights = extractHighlightRanges(domNode);
     if (highlights.length === 0) return null
 
     return {
@@ -9486,7 +9533,7 @@ function $preConversionWithHighlightsFactory(editor) {
 
 // Walk the DOM tree inside a <pre> element and build a list of
 // { start, end, style } ranges for every <mark> element found.
-function extractHighlightRanges$1(preElement) {
+function extractHighlightRanges(preElement) {
   const ranges = [];
   const codeElement = preElement.querySelector("code") || preElement;
 
@@ -12019,6 +12066,7 @@ class PastedContentFormatter {
   format() {
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
+    this.#nestStrayListChildren();
     this.#stripStrayListChildren();
     return this.doc
   }
@@ -12047,6 +12095,22 @@ class PastedContentFormatter {
     }
   }
 
+  // Some sources (e.g. Gmail) nest a sublist as a direct child of the parent
+  // <ol>/<ul> instead of inside a <li>. Move each nested list into its
+  // preceding <li> so the import preserves the nesting instead of dropping it.
+  #nestStrayListChildren() {
+    for (const list of this.doc.querySelectorAll("ol, ul")) {
+      for (const child of Array.from(list.children)) {
+        if (child.tagName !== "OL" && child.tagName !== "UL") continue
+
+        const previousItem = child.previousElementSibling;
+        if (previousItem && previousItem.tagName === "LI") {
+          previousItem.appendChild(child);
+        }
+      }
+    }
+  }
+
   // Only <li> is a valid child of a list; drop stray <br>/whitespace so the
   // import doesn't wrap them into an empty leading item.
   #stripStrayListChildren() {
@@ -12090,7 +12154,11 @@ class Contents {
 
   insertText(text, { tag } = {}) {
     this.editor.update(() => {
-      const paragraph = eo().append(kr(text));
+      const paragraph = eo();
+      text.split("\n").forEach((line, index) => {
+        if (index > 0) paragraph.append(or());
+        paragraph.append(kr(line));
+      });
       this.insertAtCursor(paragraph);
     }, { tag });
   }
@@ -12958,14 +13026,16 @@ class Clipboard {
 
   // 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.
+  // carries no Markdown structure, paste it verbatim instead. A path that wrapped
+  // across lines renders as a single paragraph with <br> line breaks (marked runs
+  // with breaks: true), which is still plain text we should preserve untouched.
   #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)
+      && Array.from(paragraph.childNodes).every((node) => node.nodeType === Node.TEXT_NODE || node.nodeName === "BR")
   }
 
   #pasteRichText(clipboardData) {
@@ -14253,24 +14323,46 @@ class FormatEscapeExtension extends LexxyExtension {
 }
 
 function $escapeFromBlockquote() {
+  return $escapeBeforeBlockquoteStart() || $escapeFromBlankBlockquoteParagraph()
+}
+
+function $escapeBeforeBlockquoteStart() {
+  const selection = Qr();
+  if (!Fr(selection) || !selection.isCollapsed() || selection.anchor.offset !== 0) return false
+
+  const paragraph = At$2(selection.anchor.getNode(), Zi);
+  if (paragraph && !$isBlankNode(paragraph) && !paragraph.getPreviousSibling()) {
+    const blockquote = paragraph.getParent();
+    if (Mt$2(blockquote)) {
+      blockquote.insertBefore(eo());
+      return true
+    }
+  }
+
+  return false
+}
+
+function $escapeFromBlankBlockquoteParagraph() {
   const anchorNode = Qr().anchor.getNode();
 
   const paragraph = At$2(anchorNode, Zi);
   if (!paragraph || !$isBlankNode(paragraph)) return false
 
   const blockquote = paragraph.getParent();
-  if (!blockquote || !Mt$2(blockquote)) return false
+  if (Mt$2(blockquote)) {
+    const nonEmptySiblings = paragraph.getNextSiblings().filter(sibling => !$isBlankNode(sibling));
 
-  const nonEmptySiblings = paragraph.getNextSiblings().filter(sibling => !$isBlankNode(sibling));
+    if (nonEmptySiblings.length > 0) {
+      $splitQuoteNode(blockquote, paragraph);
+    } else {
+      blockquote.insertAfter(paragraph);
+      paragraph.selectStart();
+    }
 
-  if (nonEmptySiblings.length > 0) {
-    $splitQuoteNode(blockquote, paragraph);
-  } else {
-    blockquote.insertAfter(paragraph);
-    paragraph.selectStart();
+    return true
   }
 
-  return true
+  return false
 }
 
 function $splitQuoteNode(node, paragraph) {
@@ -14528,6 +14620,15 @@ class CustomAttachmentDragAndDrop {
     // they only drop onto an existing line, so snap to the nearest one.
     if (caret.node === rootElement) {
       return this.#nearestLineCaret(rootElement, event.clientY)
+    }
+
+    // When mentions sit next to each other with no text between them, the caret
+    // lands inside the neighbouring decorator's DOM. Lexical can't resolve a point
+    // inside a decorator to an editable position, and the cursor has no business
+    // showing there anyway, so snap to just before or after that mention.
+    const decorator = this.#decoratorElementContaining(caret.node);
+    if (decorator) {
+      return this.#dropPointBesideDecorator(decorator, event.clientX)
     } else {
       return caret
     }
@@ -14556,24 +14657,55 @@ class CustomAttachmentDragAndDrop {
     }
   }
 
+  #decoratorElementContaining(node) {
+    const element = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    return element?.closest("[data-lexxy-decorator][data-lexical-node-key]")
+  }
+
+  #dropPointBesideDecorator(decorator, clientX) {
+    const rect = decorator.getBoundingClientRect();
+    const placement = clientX > rect.left + rect.width / 2 ? "after" : "before";
+    return { decoratorKey: decorator.dataset.lexicalNodeKey, placement }
+  }
+
   #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
+      if (dropPoint.decoratorKey) {
+        this.#moveBesideNode(draggedNode, dropPoint);
+      } else {
+        this.#moveToCaret(draggedNode, dropPoint);
+      }
+    });
+  }
 
-      es(selection);
+  #moveBesideNode(draggedNode, { decoratorKey, placement }) {
+    const targetNode = Yo(decoratorKey);
+    if (!targetNode || targetNode === draggedNode) return
 
-      draggedNode.remove();
-      selection.insertNodes([ draggedNode ]);
-    });
+    draggedNode.remove();
+    if (placement === "after") {
+      targetNode.insertAfter(draggedNode);
+    } else {
+      targetNode.insertBefore(draggedNode);
+    }
+  }
+
+  #moveToCaret(draggedNode, dropPoint) {
+    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) {
@@ -14583,7 +14715,12 @@ class CustomAttachmentDragAndDrop {
     if (dropPoint) this.#showCaret(this.#caretRectFor(dropPoint));
   }
 
-  #caretRectFor({ node, offset }) {
+  #caretRectFor(dropPoint) {
+    if (dropPoint.decoratorKey) {
+      return this.#decoratorEdgeRect(dropPoint)
+    }
+
+    const { node, offset } = dropPoint;
     const rect = caretRect(node, offset);
     if (rect) return rect
 
@@ -14595,6 +14732,15 @@ class CustomAttachmentDragAndDrop {
     return { left: lineRect.left, top: lineRect.top, height: lineRect.height }
   }
 
+  #decoratorEdgeRect({ decoratorKey, placement }) {
+    const decorator = this.#editor.getRootElement()?.querySelector(`[data-lexical-node-key="${decoratorKey}"]`);
+    if (!decorator) return null
+
+    const rect = decorator.getBoundingClientRect();
+    const left = placement === "after" ? rect.right : rect.left;
+    return { left, top: rect.top, height: rect.height }
+  }
+
   #showCaret(rect) {
     if (!rect) return
 
@@ -17209,16 +17355,16 @@ function highlightElement(preElement) {
   if (preElement.dataset.highlighted === "true") return
 
   const language = preElement.getAttribute("data-language");
-  let code = preElement.innerHTML.replace(/<br\s*\/?>/gi, "\n");
 
   const grammar = Prism$1.languages?.[language];
   if (!grammar) return
 
-  // Extract highlight ranges before Prism destroys <mark> elements
-  const highlights = extractHighlightRanges(preElement);
-
-  // unescape HTML entities in the code block
-  code = new DOMParser().parseFromString(code, "text/html").body.textContent || "";
+  // Read the source text and <mark> ranges in a single walk, before Prism
+  // rewrites the element. Sharing one traversal keeps the highlight offsets
+  // aligned with the code string and preserves leading whitespace — deriving
+  // either of them separately (e.g. textContent through DOMParser) collapses
+  // leading whitespace and shifts every range, re-indenting the rendered block.
+  const { code, highlights } = extractCodeAndHighlights(preElement);
 
   const highlightedHtml = Prism$1.highlight(code, grammar, language);
   preElement.innerHTML = highlightedHtml;
@@ -17230,34 +17376,35 @@ function highlightElement(preElement) {
   preElement.dataset.highlighted = "true";
 }
 
-// Walk the DOM tree inside a <pre> element and build a list of
-// { start, end, style } ranges for every <mark> element found.
-function extractHighlightRanges(preElement) {
-  const ranges = [];
+// Walk the <pre> once, building Prism's source text and the <mark> ranges
+// together: a text node contributes its text verbatim, a <br> contributes a
+// newline, and a <mark> records the slice of code it covers. Because both
+// outputs come from the same walk, every range offset is just a position in
+// `code` — so the highlights can't drift out of sync with the source, and the
+// block's leading whitespace survives (HTML parsing would collapse it).
+function extractCodeAndHighlights(preElement) {
   const root = preElement.querySelector("code") || preElement;
-
-  let offset = 0;
+  const highlights = [];
+  let code = "";
 
   function walk(node) {
     if (node.nodeType === Node.TEXT_NODE) {
-      offset += node.textContent.length;
+      code += node.textContent;
     } else if (node.nodeType === Node.ELEMENT_NODE) {
       if (node.tagName === "BR") {
-        offset += 1;
-        return
-      }
-
-      const isMark = node.tagName === "MARK";
-      const start = offset;
-
-      for (const child of node.childNodes) {
-        walk(child);
-      }
-
-      if (isMark) {
+        code += "\n";
+      } else if (node.tagName === "MARK") {
+        const start = code.length;
+        for (const child of node.childNodes) {
+          walk(child);
+        }
         const style = extractStyle(node);
         if (style) {
-          ranges.push({ start, end: offset, style });
+          highlights.push({ start, end: code.length, style });
+        }
+      } else {
+        for (const child of node.childNodes) {
+          walk(child);
         }
       }
     }
@@ -17267,7 +17414,7 @@ function extractHighlightRanges(preElement) {
     walk(child);
   }
 
-  return ranges
+  return { code, highlights }
 }
 
 function extractStyle(element) {
@@ -17436,5 +17583,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, $isCustomActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, NativeAdapter, configure, highlightCode, highlightElement };
+export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, $isCustomActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, NativeAdapter, REWRITE_HISTORY_COMMAND, configure, highlightCode, highlightElement };
 //# sourceMappingURL=lexxy.js.map