@37signals/lexxy 0.9.24 → 0.9.26

package/README.md

@@ -21,6 +21,7 @@ A modern rich text editor for Rails.
 
 - Bug reports and pull requests are welcome on [GitHub Issues](https://github.com/basecamp/lexxy/issues). Help is especially welcome with [those tagged as "Help Wanted"](https://github.com/basecamp/lexxy/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22help%20wanted%22).
 - For questions and general Lexxy discussion, please use the [Discussions section](https://github.com/basecamp/lexxy/discussions)
+- To build with a development version of Lexical, use `bin/link-to-local-lexical`.
 
 ## License
 

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,13 +5920,27 @@ class PastedContentFormatter {
   }
 
   format() {
+    this.#stripStyleElements();
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
+    this.#unwrapWrappedListChildren();
     this.#nestStrayListChildren();
     this.#stripStrayListChildren();
     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
@@ -5907,6 +5965,29 @@ class PastedContentFormatter {
     }
   }
 
+  // Some sources wrap runs of <li>s in a stray element (e.g. a <div> directly
+  // inside the list). Dissolve such wrappers so their items become direct
+  // list children and any nested list they hide becomes visible to
+  // #nestStrayListChildren below.
+  #unwrapWrappedListChildren() {
+    for (const list of this.doc.querySelectorAll("ol, ul")) {
+      let wrapper = this.#wrappedListChild(list);
+      while (wrapper) {
+        wrapper.replaceWith(...wrapper.childNodes);
+        wrapper = this.#wrappedListChild(list);
+      }
+    }
+  }
+
+  #wrappedListChild(list) {
+    for (const child of list.children) {
+      if (child.tagName !== "LI" && !this.#isNestedList(child) && this.#containsListItems(child)) {
+        return child
+      }
+    }
+    return null
+  }
+
   // 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.
@@ -5923,15 +6004,40 @@ class PastedContentFormatter {
     }
   }
 
-  // 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.
+  // Only <li> is a valid child of a list. Unwrap remaining stray children
+  // that still hold list items (a nested list with no preceding <li> to nest
+  // under) so the items survive, and drop stray <br>/whitespace so the import
+  // doesn't wrap them into an empty leading item.
   #stripStrayListChildren() {
     for (const list of this.doc.querySelectorAll("ol, ul")) {
-      for (const child of Array.from(list.childNodes)) {
-        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "LI") continue
-        list.removeChild(child);
+      let stray = this.#firstStrayListChild(list);
+      while (stray) {
+        if (this.#containsListItems(stray)) {
+          stray.replaceWith(...stray.childNodes);
+        } else {
+          stray.remove();
+        }
+
+        stray = this.#firstStrayListChild(list);
+      }
+    }
+  }
+
+  #firstStrayListChild(list) {
+    for (const child of list.childNodes) {
+      if (child.nodeType !== Node.ELEMENT_NODE || child.tagName !== "LI") {
+        return child
       }
     }
+    return null
+  }
+
+  #isNestedList(node) {
+    return node.nodeType === Node.ELEMENT_NODE && (node.tagName === "OL" || node.tagName === "UL")
+  }
+
+  #containsListItems(node) {
+    return node.nodeType === Node.ELEMENT_NODE && node.querySelector("li") !== null
   }
 }
 
@@ -9412,7 +9518,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/dist/stylesheets/lexxy-editor.css

@@ -9,6 +9,9 @@
   }
   --lexxy-toolbar-gap: 2px;
   --lexxy-toolbar-spacing: 0.5ch;
+  --lexxy-toolbar-padding: 2px;
+  --lexxy-toolbar-border-size: 1px;
+  --lexxy-toolbar-height: calc(var(--lexxy-toolbar-button-size) + 2 * var(--lexxy-toolbar-padding) + var(--lexxy-toolbar-border-size));
 
   border: 1px solid var(--lexxy-color-ink-lighter);
   border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
@@ -408,6 +411,11 @@
   }
 }
 
+/* Reserve the mounted height before upgrade so it doesn't shift layout on mount. */
+:where(lexxy-editor:not(:defined)) {
+  min-block-size: calc(var(--lexxy-toolbar-height) + var(--lexxy-editor-rows) + 2 * var(--lexxy-editor-padding));
+}
+
 /* Placeholder */
 :where(.lexxy-editor--empty) {
   .lexxy-editor__content:not(:has(h1, h2, h3, h4, h5, h6, table, ul, ol, figure, .attachment-gallery))::before {
@@ -461,13 +469,13 @@
 :where(lexxy-toolbar) {
   --lexxy-toolbar-icon-size: 1.125em;
 
-  border-block-end: 1px solid var(--lexxy-color-ink-lighter);
+  border-block-end: var(--lexxy-toolbar-border-size) solid var(--lexxy-color-ink-lighter);
   color: currentColor;
   display: flex;
   font-size: inherit;
   gap: var(--lexxy-toolbar-gap);
   max-inline-size: 100%;
-  padding: 2px;
+  padding: var(--lexxy-toolbar-padding);
   position: relative;
 
   @container (width < 300px) {

package/package.json

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