@37signals/lexxy 0.9.27 → 0.9.29

package/dist/lexxy.esm.js

@@ -1527,7 +1527,7 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     return Lexxy.global.get("attachmentTagName")
   }
 
-  constructor({ tagName, sgid, contentType, innerHtml, plainText }, key) {
+  constructor({ tagName, sgid, contentType, innerHtml, plainText } = {}, key) {
     super(key);
 
     const contentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
@@ -2328,7 +2328,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return Lexxy.global.get("attachmentTagName")
   }
 
-  constructor({ tagName, sgid, src, previewSrc, previewable, previewStatusUrl, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError }, key) {
+  constructor({ tagName, sgid, src, previewSrc, previewable, previewStatusUrl, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError } = {}, key) {
     super(key);
 
     this.tagName = tagName || ActionTextAttachmentNode.TAG_NAME;
@@ -5472,7 +5472,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     return null
   }
 
-  constructor(node, key) {
+  constructor(node = {}, key) {
     const { file, uploadUrl, blobUrlTemplate, progress, width, height, uploadError, fileName, contentType } = node;
     super({ ...node, contentType: file?.type ?? contentType }, key);
     this.file = file ?? null;
@@ -5493,9 +5493,10 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     // node is reloaded from saved state such as from history.
     this.#startUploadIfNeeded();
 
-    // Bridge-managed uploads (uploadUrl is null) don't have file data to show
-    // an image preview, so always show the file icon during upload.
-    const canPreviewFile = this.isPreviewableAttachment && this.uploadUrl != null;
+    // Bridge-managed uploads (uploadUrl is null) and restored or remote
+    // instances (no local File) don't have file data to show an image
+    // preview, so always show the file icon during upload.
+    const canPreviewFile = this.isPreviewableAttachment && this.uploadUrl != null && this.file != null;
     const figure = this.createAttachmentFigure(canPreviewFile);
 
     if (canPreviewFile) {
@@ -5566,9 +5567,12 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     const figcaption = createElement("figcaption", { className: "attachment__caption" });
 
     const nameSpan = createElement("span", { className: "attachment__name", textContent: this.caption || this.fileName || "" });
-    const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.file?.size) });
     figcaption.appendChild(nameSpan);
-    figcaption.appendChild(sizeSpan);
+
+    if (this.file) {
+      const sizeSpan = createElement("span", { className: "attachment__size", textContent: bytesToHumanSize(this.file.size) });
+      figcaption.appendChild(sizeSpan);
+    }
 
     return figcaption
   }
@@ -5590,6 +5594,7 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   async #startUploadIfNeeded() {
     if (this.#uploadStarted) return
     if (!this.uploadUrl) return // Bridge-managed upload — skip DirectUpload
+    if (!this.file) return // Restored or remote instance — no local File to upload
 
     this.#setUploadStarted();
 
@@ -5938,21 +5943,191 @@ BaseNodeInserter.for = (selection) => {
   return inserterClass ? new inserterClass(selection) : selection
 };
 
+// Word and Outlook never emit <ul>/<ol>/<li>. They simulate lists with flat
+// paragraphs that declare their depth in an inline `mso-list:l0 level2 lfo1`
+// and carry the bullet or number glyph in a <span style="mso-list:Ignore">.
+// Nothing downstream understands either, so the items land as plain paragraphs
+// with the marker baked into the text. Rebuild real lists from the level each
+// paragraph declares.
+//
+// Everything this reads lives in inline attributes, so it stays correct after
+// the pasted content formatter has dropped Office's style sheet.
+class OfficeFormatter {
+  constructor(doc) {
+    this.doc = doc;
+  }
+
+  format() {
+    for (const run of this.#listRuns()) {
+      this.#replaceWithLists(run);
+    }
+  }
+
+  // A run is a stretch of Office list paragraphs that are siblings with nothing
+  // but whitespace and Word's conditional comments between them. Anything else
+  // in between (a heading, a plain paragraph) ends one list and starts another.
+  #listRuns() {
+    const runs = [];
+    const claimed = new Set();
+
+    for (const paragraph of this.doc.querySelectorAll("p[style*='mso-list']")) {
+      if (claimed.has(paragraph) || this.#listLevel(paragraph) === null) continue
+
+      const run = [];
+      let node = paragraph;
+      while (node) {
+        run.push(node);
+        claimed.add(node);
+        node = this.#nextListParagraph(node);
+      }
+      runs.push(run);
+    }
+
+    return runs
+  }
+
+  #nextListParagraph(paragraph) {
+    let sibling = paragraph.nextSibling;
+    while (sibling && this.#isIgnorableBetweenListParagraphs(sibling)) {
+      sibling = sibling.nextSibling;
+    }
+
+    if (sibling && sibling.nodeType === Node.ELEMENT_NODE && this.#listLevel(sibling) !== null) {
+      return sibling
+    }
+
+    return null
+  }
+
+  #isIgnorableBetweenListParagraphs(node) {
+    if (node.nodeType === Node.COMMENT_NODE) {
+      return true
+    }
+    return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === ""
+  }
+
+  // Word numbers levels from 1, but a copied selection often starts partway down
+  // a list, so every paragraph declares level3 with no level1 above it. Anchoring
+  // the run at its own shallowest level is what keeps the result from arriving
+  // needlessly deep.
+  #replaceWithLists(paragraphs) {
+    const levels = paragraphs.map((paragraph) => this.#listLevel(paragraph));
+    const baseLevel = Math.min(...levels);
+    const roots = [];
+    const stack = [];
+
+    paragraphs.forEach((paragraph, index) => {
+      const depth = levels[index] - baseLevel + 1;
+      const tagName = this.#listTagName(paragraph);
+
+      while (stack.length > depth) {
+        stack.pop();
+      }
+      if (stack.length === depth && stack[depth - 1].tagName !== tagName.toUpperCase()) {
+        stack.pop();
+      }
+
+      while (stack.length < depth) {
+        const list = this.doc.createElement(tagName);
+        if (stack.length === 0) {
+          roots.push(list);
+        } else {
+          this.#lastItemOf(stack[stack.length - 1]).appendChild(list);
+        }
+        stack.push(list);
+      }
+
+      stack[stack.length - 1].appendChild(this.#createListItem(paragraph));
+    });
+
+    paragraphs[0].replaceWith(...roots);
+    for (const paragraph of paragraphs.slice(1)) {
+      paragraph.remove();
+    }
+  }
+
+  #lastItemOf(list) {
+    if (!list.lastElementChild) {
+      list.appendChild(this.doc.createElement("li"));
+    }
+    return list.lastElementChild
+  }
+
+  // Word writes bullets as the raw glyph of the marker font (Symbol's "·",
+  // Wingdings' "§", Courier New's "o") and numbers as the rendered counter
+  // ("1.", "a)", "iv)"). A bare letter with no delimiter after it is Courier
+  // New's bullet, not a counter, so the delimiter is what tells them apart.
+  #listTagName(paragraph) {
+    const marker = paragraph.querySelector("[style*='mso-list:Ignore']");
+    const text = marker?.textContent || "";
+
+    if (/\d/.test(text) || /^\(?[A-Za-z]+[.)]/.test(text)) {
+      return "ol"
+    }
+    return "ul"
+  }
+
+  #createListItem(paragraph) {
+    for (const marker of paragraph.querySelectorAll("[style*='mso-list:Ignore']")) {
+      marker.remove();
+    }
+
+    const item = this.doc.createElement("li");
+    item.append(...paragraph.childNodes);
+    return item
+  }
+
+  #listLevel(element) {
+    const match = /mso-list:[^;"']*\blevel(\d+)/.exec(element.getAttribute("style") || "");
+    if (match) {
+      return parseInt(match[1], 10)
+    }
+    return null
+  }
+}
+
+// Properties worth rescuing from a foreign style sheet before #stripStyleElements
+// drops it, keyed by the elements that carry them. Word and Outlook declare
+// paragraph spacing in the sheet (p.MsoNormal { margin: 0cm }) and never inline,
+// so once the sheet goes there is nothing left to say how tightly the author's
+// paragraphs sat, and hosts that turn pasted paragraph margins into explicit
+// blank lines read tight Office paragraphs as spaced ones and multiply every
+// line break.
+const PRESERVABLE_STYLES = {
+  p: [ "margin-top", "margin-bottom" ]
+};
+
 class PastedContentFormatter {
   constructor(doc) {
     this.doc = doc;
   }
 
   format() {
+    this.#inlinePreservableStyles();
     this.#stripStyleElements();
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
+    new OfficeFormatter(this.doc).format();
     this.#unwrapWrappedListChildren();
     this.#nestStrayListChildren();
     this.#stripStrayListChildren();
+    this.#replaceGmailEmojiImgTags();
     return this.doc
   }
 
+  // Runs before #stripStyleElements, to inline anything we still need
+  // from an external style before we remove it
+  #inlinePreservableStyles() {
+    const rules = this.#styleRules();
+    if (rules.length === 0) return
+
+    for (const [ selector, properties ] of Object.entries(PRESERVABLE_STYLES)) {
+      for (const element of this.doc.querySelectorAll(selector)) {
+        this.#inlineDeclaredStyles(element, properties, rules);
+      }
+    }
+  }
+
   // 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
@@ -6047,6 +6222,72 @@ class PastedContentFormatter {
     }
   }
 
+  // Read the rules from a sheet we build rather than from this.doc.styleSheets: the
+  // document came from DOMParser, so it has no browsing context, and WebKit leaves
+  // its styleSheets empty. Parsing the text ourselves still expands the shorthands
+  // Word writes (margin: 0cm) into the longhands we ask for.
+  #styleRules() {
+    const css = Array.from(this.doc.querySelectorAll("style"), (style) => style.textContent).join("\n");
+    if (css.trim() === "") return []
+
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+
+    const rules = [];
+    for (const rule of sheet.cssRules) {
+      if (rule instanceof CSSStyleRule) {
+        rules.push(rule);
+      }
+    }
+    return rules
+  }
+
+  // A declaration the element already carries inline is the author's own and wins.
+  #inlineDeclaredStyles(element, properties, rules) {
+    for (const property of properties) {
+      if (element.style.getPropertyValue(property) === "") {
+        const value = this.#declaredValue(rules, element, property);
+        if (value) {
+          this.#appendStyleProperty(element, property, value);
+        }
+      }
+    }
+  }
+
+  // Source order alone doesn't decide the cascade, so when the matching rules
+  // disagree we can't say which value wins without resolving specificity. Skip
+  // the property rather than guess: guessing is permanent, since the sheet is
+  // about to go, and skipping only leaves the host on its own default.
+  #declaredValue(rules, element, property) {
+    const declared = new Set();
+    for (const rule of rules) {
+      const value = rule.style.getPropertyValue(property);
+      if (value !== "" && element.matches(rule.selectorText)) {
+        declared.add(value);
+      }
+    }
+
+    if (declared.size === 1) {
+      return declared.values().next().value
+    } else {
+      return null
+    }
+  }
+
+  // Assigning through element.style would reserialize the style attribute and
+  // drop the mso-* declarations Word leaves inline (they aren't valid CSS),
+  // and OfficeFormatter still needs to read mso-list from them. Append to the
+  // attribute instead so the original declarations survive untouched.
+  #appendStyleProperty(element, property, value) {
+    const style = element.getAttribute("style");
+    const declaration = `${property}:${value}`;
+    if (style === null || style.trim() === "") {
+      element.setAttribute("style", declaration);
+    } else {
+      element.setAttribute("style", `${style.replace(/;\s*$/, "")};${declaration}`);
+    }
+  }
+
   #firstStrayListChild(list) {
     for (const child of list.childNodes) {
       if (child.nodeType !== Node.ELEMENT_NODE || child.tagName !== "LI") {
@@ -6063,6 +6304,16 @@ class PastedContentFormatter {
   #containsListItems(node) {
     return node.nodeType === Node.ELEMENT_NODE && node.querySelector("li") !== null
   }
+
+  // Emoji in gmail: <img data-emoji="😂" class="an1" alt="😂" aria-label="😂" draggable="false" src="https://fonts.gstatic.com/s/e/notoemoji/17.0/1f602/32.png" loading="lazy" style="height: 1.2em; width: 1.2em; vertical-align: middle;">
+  #replaceGmailEmojiImgTags() {
+    for (const emojiImg of this.doc.querySelectorAll("img[data-emoji]")) {
+      const emoji = emojiImg.dataset.emoji;
+      if (emoji === emojiImg.alt) {
+        emojiImg.replaceWith(emoji);
+      }
+    }
+  }
 }
 
 class Contents {
@@ -8750,6 +9001,39 @@ class CustomAttachmentDragAndDropExtension extends LexxyExtension {
   }
 }
 
+const LINE_SEPARATORS = /\r\n|[\n\r\u2028\u2029]/;
+
+// A literal line separator inside a text node renders as a break in the editor, or not at all,
+// but never survives serialization to HTML. macOS text replacements deliver U+2028 LINE SEPARATOR,
+// and other insertions can carry "\n", so however the text arrives, a transform converts whatever
+// lands in a text node into line break nodes.
+class LineSeparatorsExtension extends LexxyExtension {
+  get lexicalExtension() {
+    return this.defineExtension({
+      name: "lexxy/line-separators",
+      register(editor) {
+        return editor.registerNodeTransform(TextNode, $replaceLineSeparatorWithLineBreak)
+      }
+    })
+  }
+}
+
+// Replaces the first separator only: the split leaves dirty text nodes behind, so Lexical re-runs
+// the transform until none remain.
+function $replaceLineSeparatorWithLineBreak(textNode) {
+  const match = textNode.getTextContent().match(LINE_SEPARATORS);
+
+  if (match) {
+    let separatorNode;
+    if (match.index === 0) {
+      [ separatorNode ] = textNode.splitText(match[0].length);
+    } else {
+      [ , separatorNode ] = textNode.splitText(match.index, match.index + match[0].length);
+    }
+    separatorNode.replace($createLineBreakNode());
+  }
+}
+
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = false
@@ -8908,7 +9192,8 @@ class LexicalEditorElement extends HTMLElement {
       FormatEscapeExtension,
       LinkOpenerExtension,
       PreventLexicalTripleClickExtension,
-      CustomAttachmentDragAndDropExtension
+      CustomAttachmentDragAndDropExtension,
+      LineSeparatorsExtension
     ]
   }
 

package/package.json

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