lexxy 0.9.28 → 0.9.29

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: afb455253a99563e4938f9f1634f997fdb3231f52e7b760e53cb590eb4873934
-  data.tar.gz: 8334d0fb26282b75e340e5d5c5eeb65000a876700038331d2f58347865ef6232
+  metadata.gz: 3c6392cdd1a3fd5cc9535778cb84e544b5864e6d75378af4e19b6d7c6c0a5628
+  data.tar.gz: 88bccc783d7e3de2f7650e2d80ad7899369053182de3fbe4b51c50f7566421fc
 SHA512:
-  metadata.gz: 46e58bf9d6993735988227cea4c883a8cb8f6e485626c8a7a28cce6e128b2d417faaef93ff404b0d0c64505263df7424ef909c91fe463576f9fe0087a823ef31
-  data.tar.gz: 9c5250b597e25d858378e6b219fab8b3c09b6e472f224fff879b22a7b02c85313b3c74a574142566aca9dcc645ceb0691793d30c8b86e1f1cc2c3d5f69382261
+  metadata.gz: 0aa7bf890d287539720cb79cd58cee9e32833c26ed4bd0d6418ab7f94c0bed4fee739a14299093a3333e8337d23a0d4cd00fe1524defefa8f14842ceb0b278a9
+  data.tar.gz: c0dfc34fee283b34b76281b77b9dd24a57fcd7ef8d488e70628107fb1aa7a537c8811986e1a5f77d5df2573e6d040214a62f037c5f3845de136f44b813f2e71c

data/app/assets/javascript/lexxy.js

@@ -8029,7 +8029,7 @@ class CustomActionTextAttachmentNode extends Ji {
     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");
@@ -8840,7 +8840,7 @@ class ActionTextAttachmentNode extends Ji {
     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;
@@ -12034,7 +12034,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;
@@ -12055,9 +12055,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) {
@@ -12128,9 +12129,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
   }
@@ -12152,6 +12156,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();
 
@@ -12643,12 +12648,24 @@ class OfficeFormatter {
   }
 }
 
+// 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();
@@ -12656,9 +12673,23 @@ class PastedContentFormatter {
     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
@@ -12753,6 +12784,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") {
@@ -12769,6 +12866,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 {
@@ -12811,20 +12918,6 @@ class Contents {
     }, { tag });
   }
 
-  // A literal "\n" stays visible in the editor, which Lexical renders with white-space: pre-wrap,
-  // but collapses to a space once serialized to HTML, so it has to become line break nodes.
-  insertTextWithLineBreaks(text) {
-    const normalizedText = text?.replace(/\r\n?/g, "\n");
-    const selection = Qr();
-
-    if (normalizedText?.includes("\n") && Fr(selection)) {
-      selection.insertRawText(normalizedText);
-      return true
-    } else {
-      return false
-    }
-  }
-
   insertAtCursor(...nodes) {
     const selection = this.#insertableSelection();
     const inserter = BaseNodeInserter.for(selection);
@@ -15542,6 +15635,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(gr, $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(or());
+  }
+}
+
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = false
@@ -15700,7 +15826,8 @@ class LexicalEditorElement extends HTMLElement {
       FormatEscapeExtension,
       LinkOpenerExtension,
       PreventLexicalTripleClickExtension,
-      CustomAttachmentDragAndDropExtension
+      CustomAttachmentDragAndDropExtension,
+      LineSeparatorsExtension
     ]
   }
 
@@ -15888,7 +16015,6 @@ class LexicalEditorElement extends HTMLElement {
   #initialize() {
     this.#registerComponents();
     this.#handleEnter();
-    this.#handleReplacementText();
     this.#registerFocusEvents();
     this.#registerHistoryEvents();
     this.#registerFileAcceptFilter();
@@ -16152,14 +16278,6 @@ class LexicalEditorElement extends HTMLElement {
     ));
   }
 
-  #handleReplacementText() {
-    this.#listeners.track(this.editor.registerCommand(
-      ge$3,
-      (event) => event instanceof InputEvent && this.contents.insertTextWithLineBreaks(event.data),
-      oo
-    ));
-  }
-
   #registerFocusEvents() {
     this.#listeners.track(
       registerEventListener(this, "focusin", this.#handleFocusIn),