lexxy 0.9.27 → 0.9.28

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1ef504d8ff6c3ee45519815bb36ea8c2d21316f8032c87967602138c88f4457b
-  data.tar.gz: 95e79bbbccdffe031d6938acce662d7d466fc248c63b609d0b6a058e9f586da1
+  metadata.gz: afb455253a99563e4938f9f1634f997fdb3231f52e7b760e53cb590eb4873934
+  data.tar.gz: 8334d0fb26282b75e340e5d5c5eeb65000a876700038331d2f58347865ef6232
 SHA512:
-  metadata.gz: d600ab9f59fa036b56143d081ecadecde64c24f674639d64067add0bebb276ab4da142c0022802e6cfe5c656902f866ae4fecc80a37ba63e8385d567e3517caa
-  data.tar.gz: a0eb4b38a69a6f436a611f5023e078bfff26b37152603f2f3d923256c1e57672845c0bed337cec6c38989582e400be3a24ff7d9e803782d0c56dc94bb5f7995f
+  metadata.gz: 46e58bf9d6993735988227cea4c883a8cb8f6e485626c8a7a28cce6e128b2d417faaef93ff404b0d0c64505263df7424ef909c91fe463576f9fe0087a823ef31
+  data.tar.gz: 9c5250b597e25d858378e6b219fab8b3c09b6e472f224fff879b22a7b02c85313b3c74a574142566aca9dcc645ceb0691793d30c8b86e1f1cc2c3d5f69382261

data/app/assets/javascript/lexxy.js

@@ -12500,6 +12500,149 @@ 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
+  }
+}
+
 class PastedContentFormatter {
   constructor(doc) {
     this.doc = doc;
@@ -12509,6 +12652,7 @@ class PastedContentFormatter {
     this.#stripStyleElements();
     this.#unwrapPlaceholderAnchors();
     this.#stripTableCellColorStyles();
+    new OfficeFormatter(this.doc).format();
     this.#unwrapWrappedListChildren();
     this.#nestStrayListChildren();
     this.#stripStrayListChildren();
@@ -12667,6 +12811,20 @@ 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);
@@ -15730,6 +15888,7 @@ class LexicalEditorElement extends HTMLElement {
   #initialize() {
     this.#registerComponents();
     this.#handleEnter();
+    this.#handleReplacementText();
     this.#registerFocusEvents();
     this.#registerHistoryEvents();
     this.#registerFileAcceptFilter();
@@ -15993,6 +16152,14 @@ 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),