@37signals/lexxy 0.9.24 → 0.9.25

package/dist/lexxy.esm.js

@@ -1061,9 +1061,9 @@ class ToolbarDropdown extends HTMLElement {
 const HEADING_BUTTON_SELECTOR = "button.lexxy-heading-button";
 
 const HEADING_PRESETS = [
-  { label: "Large Heading", name: "heading-large" },
-  { label: "Medium Heading", name: "heading-medium" },
-  { label: "Small Heading", name: "heading-small" }
+  { label: "Large Heading", name: "heading-large", command: "setFormatHeadingLarge" },
+  { label: "Medium Heading", name: "heading-medium", command: "setFormatHeadingMedium" },
+  { label: "Small Heading", name: "heading-small", command: "setFormatHeadingSmall" }
 ];
 
 class HeadingDropdown extends HTMLElement {
@@ -1093,6 +1093,14 @@ class HeadingDropdown extends HTMLElement {
     }
   }
 
+  static commandFor(index) {
+    if (index < HEADING_PRESETS.length) {
+      return HEADING_PRESETS[index].command
+    } else {
+      return "applyHeadingFormat"
+    }
+  }
+
   #listeners = new ListenerBin()
 
   connectedCallback() {
@@ -1155,6 +1163,7 @@ class HeadingDropdown extends HTMLElement {
     const button = document.createElement("button");
     button.type = "button";
     button.dataset.heading = tag;
+    button.dataset.command = HeadingDropdown.commandFor(index);
     button.classList.add("lexxy-heading-button");
     button.name = name;
     button.title = label;
@@ -1169,7 +1178,7 @@ class HeadingDropdown extends HTMLElement {
         if (!this.#editor) return
 
         event.preventDefault();
-        this.#editor.dispatchCommand("applyHeadingFormat", button.dataset.heading);
+        this.#editor.dispatchCommand(button.dataset.command, button.dataset.heading);
         this.#editor.focus();
       }));
     });
@@ -1938,14 +1947,29 @@ function $shrinkSelectionPastBlockEdges(selection) {
   if (!anchorBlock || !focusBlock || anchorBlock.is(focusBlock)) return
 
   if ($isAtBlockEnd(selection.anchor, anchorBlock)) {
-    const nextBlock = anchorBlock.getNextSibling();
+    const nextBlock = $nearestElementSibling(anchorBlock, "next");
     if (nextBlock) selection.anchor.set(nextBlock.getKey(), 0, "element");
   }
 
   if ($isAtBlockStart(selection.focus, focusBlock)) {
-    const previousBlock = focusBlock.getPreviousSibling();
+    const previousBlock = $nearestElementSibling(focusBlock, "previous");
     if (previousBlock) selection.focus.set(previousBlock.getKey(), previousBlock.getChildrenSize(), "element");
   }
+
+  // Shrinking moves the endpoints toward each other, so they can cross when
+  // both were flush against block edges; callers assume a forward selection.
+  $ensureForwardRangeSelection(selection);
+}
+
+// Top-level decorator blocks (attachments, horizontal dividers) can't hold a
+// selection point, so walk past them to the nearest element sibling. Returns
+// null when no element sibling exists in that direction.
+function $nearestElementSibling(block, direction) {
+  let sibling = block;
+  do {
+    sibling = direction === "next" ? sibling.getNextSibling() : sibling.getPreviousSibling();
+  } while (sibling && !$isElementNode(sibling))
+  return sibling
 }
 
 function $isAtBlockEnd(point, block) {
@@ -3747,6 +3771,9 @@ const COMMANDS = [
   "unlink",
   "toggleHighlight",
   "removeHighlight",
+  "setFormatHeadingLarge",
+  "setFormatHeadingMedium",
+  "setFormatHeadingSmall",
   "setFormatParagraph",
   "applyHeadingFormat",
   "clearFormatting",
@@ -3940,6 +3967,18 @@ class CommandDispatcher {
     $insertNodeToNearestRoot(new HorizontalDividerNode);
   }
 
+  dispatchSetFormatHeadingLarge() {
+    this.#applyConfiguredHeadingFormat(0);
+  }
+
+  dispatchSetFormatHeadingMedium() {
+    this.#applyConfiguredHeadingFormat(1);
+  }
+
+  dispatchSetFormatHeadingSmall() {
+    this.#applyConfiguredHeadingFormat(2);
+  }
+
   dispatchSetFormatParagraph() {
     this.contents.applyParagraphFormat();
   }
@@ -3996,6 +4035,11 @@ class CommandDispatcher {
     this.#listeners.dispose();
   }
 
+  #applyConfiguredHeadingFormat(index) {
+    const tag = this.editorElement.config.get("headings")[index];
+    if (tag) this.contents.applyHeadingFormat(tag);
+  }
+
   #registerCommands() {
     for (const command of COMMANDS) {
       const methodName = `dispatch${capitalize(command)}`;
@@ -5566,11 +5610,11 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 
   #forgetUploadRequest() {
-    this.#editorElement.uploadRequests.forget(this.getKey());
+    this.#editorElement?.uploadRequests.forget(this.getKey());
   }
 
   #rememberUploadRequest(request) {
-    this.#editorElement.uploadRequests.track(this.getKey(), request);
+    this.#editorElement?.uploadRequests.track(this.getKey(), request);
   }
 
   get #editorElement() {
@@ -5876,6 +5920,7 @@ class PastedContentFormatter {
   }
 
   format() {
+    this.#stripStyleElements();
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
     this.#nestStrayListChildren();
@@ -5883,6 +5928,18 @@ class PastedContentFormatter {
     return this.doc
   }
 
+  // Spreadsheets (e.g. Excel) copy a <style> block whose rules (td { color:
+  // black }, .xlNN { ... }) cascade onto the imported text. That color rides
+  // in through the cascade rather than an inline style, so it slips past both
+  // the cell-level stripping below and the paste style canonicalizer, leaving
+  // pasted tables with foreign text colors that don't adapt to the theme. Drop
+  // foreign style sheets so nothing cascades into imported content.
+  #stripStyleElements() {
+    for (const style of this.doc.querySelectorAll("style")) {
+      style.remove();
+    }
+  }
+
   // Anchors with non-meaningful hrefs (e.g. "#", "") appear in content copied
   // from rendered views where mentions and interactive elements are wrapped in
   // <a href="#"> tags. Unwrap them so their text content pastes as plain text
@@ -9412,7 +9469,7 @@ class LexicalEditorElement extends HTMLElement {
       { label: "Normal", command: "setFormatParagraph", tag: null },
       ...headings.map((tag, index) => ({
         label: HeadingDropdown.labelFor(tag, index),
-        command: "applyHeadingFormat",
+        command: HeadingDropdown.commandFor(index),
         tag
       }))
     ]

package/package.json

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