collavre 0.20.3 → 0.22.0

data/app/javascript/lib/lexical/__tests__/color_import.test.js

@@ -0,0 +1,318 @@
+import { createEditor, $getRoot, $isTextNode, $createParagraphNode } from "lexical"
+import { $generateNodesFromDOM } from "@lexical/html"
+import { lexicalHtmlConfig, normalizeColoredContainers } from "../color_import"
+
+// Parse an inline style string into a plain object so order doesn't matter.
+function parseStyleMap(styleText) {
+  const map = {}
+  ;(styleText || "").split(";").forEach((decl) => {
+    const idx = decl.indexOf(":")
+    if (idx === -1) return
+    const key = decl.slice(0, idx).trim()
+    if (key) map[key] = decl.slice(idx + 1).trim()
+  })
+  return map
+}
+
+// Reproduces InlineLexicalEditor's InitialContentPlugin import path: parse the
+// stored HTML, generate nodes, and read back each text node's color style.
+function importColors(html, { withConfig }) {
+  const editor = createEditor({
+    namespace: "test",
+    onError(error) {
+      throw error
+    },
+    html: withConfig ? lexicalHtmlConfig : undefined
+  })
+
+  let result = []
+  editor.update(
+    () => {
+      const root = $getRoot()
+      root.getChildren().forEach((child) => child.remove())
+      const doc = new DOMParser().parseFromString(html, "text/html")
+      if (withConfig) normalizeColoredContainers(doc.body)
+      const nodes = $generateNodesFromDOM(editor, doc.body)
+      nodes.forEach((node) => {
+        if ($isTextNode(node)) {
+          const paragraph = $createParagraphNode()
+          paragraph.append(node)
+          root.append(paragraph)
+        } else {
+          root.append(node)
+        }
+      })
+      result = root.getAllTextNodes().map((node) => ({
+        text: node.getTextContent(),
+        style: node.getStyle(),
+        formats: ["bold", "italic", "underline", "strikethrough", "subscript", "superscript"].filter(
+          (f) => node.hasFormat(f)
+        )
+      }))
+    },
+    { discrete: true }
+  )
+  return result
+}
+
+describe("colorAwareSpanImport", () => {
+  it("keeps the color on the correct node when stored HTML has inter-block whitespace", () => {
+    // Lexical-exported HTML re-serialized by the server keeps a newline between
+    // block tags. Lexical drops that whitespace-only text node on import, which
+    // shifted positional color re-application onto the wrong node.
+    const html =
+      '<p><span style="white-space: pre-wrap;">hello</span></p>\n' +
+      '<p><span style="color: rgb(255, 0, 0); white-space: pre-wrap;">RED</span></p>'
+
+    const nodes = importColors(html, { withConfig: true })
+    expect(nodes).toEqual([
+      { text: "hello", style: "", formats: [] },
+      { text: "RED", style: "color: rgb(255, 0, 0)", formats: [] }
+    ])
+  })
+
+  it("keeps the color on the right node when a neighbouring pre-wrap span splits on a newline", () => {
+    // `white-space: pre-wrap` makes Lexical split this span's text into two
+    // nodes on the "\n", turning one DOM text node into two lexical nodes.
+    const html =
+      '<p><span style="white-space: pre-wrap;">line one\nline two</span></p>' +
+      '<p><span style="color: rgb(0, 128, 0); white-space: pre-wrap;">GREEN</span></p>'
+
+    const nodes = importColors(html, { withConfig: true })
+    expect(nodes.map((n) => n.text)).toEqual(["line one", "line two", "GREEN"])
+    expect(nodes.find((n) => n.text === "GREEN").style).toBe("color: rgb(0, 128, 0)")
+    expect(nodes.find((n) => n.text === "line two").style).toBe("")
+  })
+
+  it("preserves background-color", () => {
+    const html =
+      '<p><span style="background-color: rgb(255, 255, 0); white-space: pre-wrap;">hi</span></p>'
+
+    const nodes = importColors(html, { withConfig: true })
+    expect(nodes).toEqual([
+      { text: "hi", style: "background-color: rgb(255, 255, 0)", formats: [] }
+    ])
+  })
+
+  it("preserves inline-style text formatting on a span that also carries color", () => {
+    // Pasted content (Google Docs / Word) encodes bold/italic/underline as
+    // inline span styles, not <b>/<i> tags. The custom span import must compose
+    // those formats with the color binding instead of dropping them.
+    const html =
+      '<p><span style="color: rgb(255, 0, 0); font-weight: 700; font-style: italic; ' +
+      'text-decoration: underline line-through; white-space: pre-wrap;">styled</span></p>'
+
+    const nodes = importColors(html, { withConfig: true })
+    expect(nodes).toHaveLength(1)
+    expect(nodes[0].text).toBe("styled")
+    expect(nodes[0].style).toBe("color: rgb(255, 0, 0)")
+    expect(nodes[0].formats.sort()).toEqual(
+      ["bold", "italic", "strikethrough", "underline"].sort()
+    )
+  })
+
+  it("preserves non-format text styles (font-size/family/transform) on a colored span", () => {
+    // The custom span import must carry the span's FULL style, not just color:
+    // a colored span can also set font-size / font-family / text-transform /
+    // letter-spacing, and Lexical's default conversion ignores them, so cherry-
+    // picking color alone drops the rest on reopen.
+    const html =
+      '<p><span style="color: rgb(255, 0, 0); font-size: 20px; font-family: Georgia; ' +
+      'text-transform: uppercase; letter-spacing: 2px; white-space: pre-wrap;">big</span></p>'
+
+    const nodes = importColors(html, { withConfig: true })
+    expect(nodes).toHaveLength(1)
+    expect(nodes[0].text).toBe("big")
+    // white-space (Lexical's own artifact) is intentionally dropped; everything
+    // else survives.
+    expect(parseStyleMap(nodes[0].style)).toEqual({
+      color: "rgb(255, 0, 0)",
+      "font-size": "20px",
+      "font-family": "Georgia",
+      "text-transform": "uppercase",
+      "letter-spacing": "2px"
+    })
+    expect(nodes[0].formats).toEqual([])
+  })
+
+  it("carries an unmapped font-weight/font-style/vertical-align value instead of dropping it", () => {
+    // applyTextFormatFromStyle only maps font-weight 700/bold, font-style italic
+    // and vertical-align sub/super to Lexical formats. A value it does NOT map
+    // (font-weight:800, font-style:oblique, vertical-align:middle) is not a
+    // format, so it must survive as carried inline style — the old positional
+    // collector copied the full style string and kept these.
+    const nodes = importColors(
+      '<p><span style="color: rgb(255, 0, 0); font-weight: 800; font-style: oblique; ' +
+        'vertical-align: middle; white-space: pre-wrap;">heavy</span></p>',
+      { withConfig: true }
+    )
+    expect(nodes).toHaveLength(1)
+    expect(nodes[0].text).toBe("heavy")
+    expect(parseStyleMap(nodes[0].style)).toEqual({
+      color: "rgb(255, 0, 0)",
+      "font-weight": "800",
+      "font-style": "oblique",
+      "vertical-align": "middle"
+    })
+    // None of these unmapped values map to a Lexical format.
+    expect(nodes[0].formats).toEqual([])
+  })
+
+  it("does NOT carry a mapped font-weight/font-style value (it becomes a format)", () => {
+    // Guards the value-aware exclusion: 700/bold/italic still convert to Lexical
+    // formats and must not also appear in the carried node style (double-represent).
+    const nodes = importColors(
+      '<p><span style="color: rgb(255, 0, 0); font-weight: 700; font-style: italic; ' +
+        'white-space: pre-wrap;">styled</span></p>',
+      { withConfig: true }
+    )
+    expect(nodes).toHaveLength(1)
+    expect(parseStyleMap(nodes[0].style)).toEqual({ color: "rgb(255, 0, 0)" })
+    expect(nodes[0].formats.sort()).toEqual(["bold", "italic"].sort())
+  })
+
+  it("preserves non-format text styles on a non-span colored block element", () => {
+    // Same generality for the block path: a colored <p>/<li> carrying font-size
+    // etc. must keep those styles when normalizeColoredContainers wraps its text.
+    const html = '<p style="color: rgb(255, 0, 0); font-size: 20px;">big block</p>'
+
+    const nodes = importColors(html, { withConfig: true })
+    expect(nodes).toHaveLength(1)
+    expect(nodes[0].text).toBe("big block")
+    expect(parseStyleMap(nodes[0].style)).toEqual({
+      color: "rgb(255, 0, 0)",
+      "font-size": "20px"
+    })
+  })
+
+  it("keeps an inner span's own color instead of inheriting the outer color", () => {
+    // Pasted content nests colored spans. The outer span's after-callback runs
+    // after the inner span is converted, so it must merge (inner color wins)
+    // rather than clobber every descendant with the outer color.
+    const html =
+      '<p><span style="color: rgb(255, 0, 0);">outer ' +
+      '<span style="color: rgb(0, 0, 255);">inner</span></span></p>'
+
+    const nodes = importColors(html, { withConfig: true })
+    expect(nodes.find((n) => n.text === "outer ").style).toBe("color: rgb(255, 0, 0)")
+    expect(nodes.find((n) => n.text === "inner").style).toBe("color: rgb(0, 0, 255)")
+  })
+
+  it("preserves an inner span's background-color while inheriting the outer color", () => {
+    const html =
+      '<p><span style="color: rgb(255, 0, 0);">outer ' +
+      '<span style="background-color: rgb(255, 255, 0);">inner</span></span></p>'
+
+    const nodes = importColors(html, { withConfig: true })
+    const inner = nodes.find((n) => n.text === "inner")
+    expect(parseStyleMap(inner.style)).toEqual({
+      "background-color": "rgb(255, 255, 0)",
+      color: "rgb(255, 0, 0)"
+    })
+  })
+
+  it("imports color carried on a non-span block element (e.g. <p style=color>)", () => {
+    // Legacy / Trix-migrated / pasted content can put color on a block element
+    // instead of a span. The span importer can't see it; normalizeColoredContainers
+    // wraps the block's direct text in a span so the color survives reopen.
+    const html = '<p style="color: rgb(255, 0, 0);">red paragraph</p>'
+
+    const nodes = importColors(html, { withConfig: true })
+    expect(nodes).toEqual([
+      { text: "red paragraph", style: "color: rgb(255, 0, 0)", formats: [] }
+    ])
+  })
+
+  it("preserves a non-span block element's own text formatting alongside its color", () => {
+    // Pasted content can put color AND text formatting on a block element, e.g.
+    // <p style="color:red; font-weight:700; font-style:italic">. The wrapper span
+    // must carry those format styles too, or normalization drops the bold/italic.
+    const html =
+      '<p style="color: rgb(255, 0, 0); font-weight: 700; font-style: italic; ' +
+      'text-decoration: underline;">styled block</p>'
+
+    const nodes = importColors(html, { withConfig: true })
+    expect(nodes).toHaveLength(1)
+    expect(nodes[0].text).toBe("styled block")
+    expect(nodes[0].style).toBe("color: rgb(255, 0, 0)")
+    expect(nodes[0].formats.sort()).toEqual(["bold", "italic", "underline"].sort())
+  })
+
+  it("lets an inner colored span override the color of its non-span block parent", () => {
+    const html =
+      '<p style="color: rgb(255, 0, 0);">outer ' +
+      '<span style="color: rgb(0, 0, 255);">inner</span></p>'
+
+    const nodes = importColors(html, { withConfig: true })
+    expect(nodes.find((n) => n.text === "outer ").style).toBe("color: rgb(255, 0, 0)")
+    expect(nodes.find((n) => n.text === "inner").style).toBe("color: rgb(0, 0, 255)")
+  })
+
+  it("lets a nested span reset a text format the outer span turned on", () => {
+    // applyTextFormatFromStyle only turns formats ON, so without dimension
+    // tracking the outer span's after-callback re-bolds the inner text even
+    // though the inner span explicitly reset font-weight. The nearer span must
+    // win: an inner font-weight:normal un-bolds, while an inner span with no
+    // weight declaration still inherits the outer bold.
+    const reset = importColors(
+      '<p><span style="color: rgb(255, 0, 0); font-weight: 700;">bold ' +
+        '<span style="color: rgb(0, 0, 255); font-weight: normal;">normal</span></span></p>',
+      { withConfig: true }
+    )
+    expect(reset.find((n) => n.text === "bold ").formats).toEqual(["bold"])
+    expect(reset.find((n) => n.text === "normal").formats).toEqual([])
+
+    const inherit = importColors(
+      '<p><span style="color: rgb(255, 0, 0); font-weight: 700;">bold ' +
+        '<span style="color: rgb(0, 0, 255);">still</span></span></p>',
+      { withConfig: true }
+    )
+    expect(inherit.find((n) => n.text === "still").formats).toEqual(["bold"])
+  })
+
+  it("clears a tag-applied format when a colored span resets it", () => {
+    // Lexical's default conversion toggles bold on for the <b> tag before the
+    // colored span's after-callback runs. A reset value on the span (an
+    // inherited CSS property) must actively un-bold the text, not just claim the
+    // dimension — otherwise reopened/pasted content reopens as bold.
+    const nodes = importColors(
+      '<p><b><span style="color: rgb(255, 0, 0); font-weight: normal;">normal</span></b></p>',
+      { withConfig: true }
+    )
+    expect(nodes).toEqual([
+      { text: "normal", style: "color: rgb(255, 0, 0)", formats: [] }
+    ])
+
+    // Same for italic via <i> + font-style: normal.
+    const italic = importColors(
+      '<p><i><span style="color: rgb(255, 0, 0); font-style: normal;">upright</span></i></p>',
+      { withConfig: true }
+    )
+    expect(italic.find((n) => n.text === "upright").formats).toEqual([])
+  })
+
+  it("keeps an inherited strikethrough when a colored span only adds underline", () => {
+    // text-decoration propagates to descendants additively in CSS: an inner
+    // `text-decoration: underline` does NOT remove an ancestor's line-through.
+    // So a colored span must keep the tag-applied strikethrough and add underline
+    // (add-only), unlike the inherited font-weight/font-style reset above.
+    const nodes = importColors(
+      '<p><s><span style="color: rgb(255, 0, 0); text-decoration: underline;">both</span></s></p>',
+      { withConfig: true }
+    )
+    expect(nodes.find((n) => n.text === "both").formats.sort()).toEqual(
+      ["strikethrough", "underline"].sort()
+    )
+  })
+
+  it("demonstrates the drift the fix removes (no config = color on wrong/lost node)", () => {
+    const html =
+      '<p><span style="white-space: pre-wrap;">hello</span></p>\n' +
+      '<p><span style="color: rgb(255, 0, 0); white-space: pre-wrap;">RED</span></p>'
+
+    // Without the color-aware import, Lexical's default span conversion ignores
+    // color entirely, so "RED" comes back uncolored.
+    const nodes = importColors(html, { withConfig: false })
+    expect(nodes.find((n) => n.text === "RED").style).not.toContain("color: rgb(255, 0, 0)")
+  })
+})

data/app/javascript/lib/lexical/__tests__/minimize_html.test.js

@@ -0,0 +1,259 @@
+/**
+ * @jest-environment jsdom
+ */
+import {
+  createEditor,
+  $getRoot,
+  $createParagraphNode,
+  $isElementNode,
+  $isLineBreakNode,
+  $isTextNode
+} from "lexical"
+import { HeadingNode, QuoteNode } from "@lexical/rich-text"
+import { CodeNode, CodeHighlightNode } from "@lexical/code"
+import { ListItemNode, ListNode } from "@lexical/list"
+import { LinkNode, AutoLinkNode } from "@lexical/link"
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html"
+import { minimizeContentHtml } from "../minimize_html"
+
+const theme = {
+  paragraph: "lexical-paragraph",
+  quote: "lexical-quote",
+  heading: { h1: "lexical-heading-h1", h2: "lexical-heading-h2", h3: "lexical-heading-h3" },
+  list: { ul: "lexical-list-ul", ol: "lexical-list-ol", listitem: "lexical-list-item" },
+  code: "lexical-code-block",
+  link: "lexical-link",
+  text: {
+    bold: "lexical-text-bold",
+    italic: "lexical-text-italic",
+    underline: "lexical-text-underline",
+    strikethrough: "lexical-text-strike",
+    code: "lexical-text-code"
+  }
+}
+
+function newEditor() {
+  return createEditor({
+    namespace: "test",
+    theme,
+    nodes: [HeadingNode, QuoteNode, CodeNode, CodeHighlightNode, ListItemNode, ListNode, LinkNode, AutoLinkNode],
+    onError: (e) => { throw e }
+  })
+}
+
+// Replicate the editor's serialize step: render input -> Lexical HTML.
+function serialize(inputHtml) {
+  const editor = newEditor()
+  editor.update(() => {
+    const root = $getRoot()
+    root.getChildren().forEach((c) => c.remove())
+    const doc = new DOMParser().parseFromString(inputHtml, "text/html")
+    root.append(...$generateNodesFromDOM(editor, doc.body))
+  }, { discrete: true })
+  let out = ""
+  editor.getEditorState().read(() => { out = $generateHtmlFromNodes(editor) })
+  return out
+}
+
+// Wrap raw Lexical HTML the way InlineLexicalEditor does, then minimize.
+function minimize(lexicalHtml) {
+  const doc = new DOMParser().parseFromString(`<div>${lexicalHtml}</div>`, "text/html")
+  return minimizeContentHtml(doc.body.firstElementChild)
+}
+
+// Re-import minimized HTML and re-serialize: the second pass must be identical
+// (stable round-trip) and preserve every text format flag.
+function reimportFormats(minimizedHtml) {
+  const editor = newEditor()
+  editor.update(() => {
+    const root = $getRoot()
+    root.getChildren().forEach((c) => c.remove())
+    const doc = new DOMParser().parseFromString(minimizedHtml, "text/html")
+    const nodes = $generateNodesFromDOM(editor, doc.body)
+    // Mirror InitialContentPlugin: group top-level inline/text runs into a <p>.
+    let pending = null
+    const flush = () => { if (pending) { root.append(pending); pending = null } }
+    nodes.forEach((node) => {
+      const inlineLeaf =
+        $isTextNode(node) ||
+        $isLineBreakNode(node) ||
+        ($isElementNode(node) && node.isInline())
+      if (inlineLeaf) {
+        if (!pending) pending = $createParagraphNode()
+        pending.append(node)
+        return
+      }
+      flush()
+      root.append(node)
+    })
+    flush()
+  }, { discrete: true })
+  let out = ""
+  editor.getEditorState().read(() => { out = $generateHtmlFromNodes(editor) })
+  return out
+}
+
+describe("minimizeContentHtml", () => {
+  test("plain single line -> bare text, no wrapper", () => {
+    expect(minimize(serialize("<p>Hello World</p>"))).toBe("Hello World")
+  })
+
+  test("strips the white-space:pre-wrap noise spans", () => {
+    const out = minimize(serialize("<p>Hello World</p>"))
+    expect(out).not.toContain("white-space")
+    expect(out).not.toContain("<span")
+  })
+
+  test("bold keeps a single semantic tag with its class", () => {
+    expect(minimize(serialize("<p><b>x</b></p>"))).toBe(
+      '<strong class="lexical-text-bold">x</strong>'
+    )
+  })
+
+  test("italic keeps a single em with its class", () => {
+    expect(minimize(serialize("<p><i>x</i></p>"))).toBe(
+      '<em class="lexical-text-italic">x</em>'
+    )
+  })
+
+  test("partially styled line keeps text + minimal styled tag", () => {
+    expect(minimize(serialize("<p>Hello <b>World</b></p>"))).toBe(
+      'Hello <strong class="lexical-text-bold">World</strong>'
+    )
+  })
+
+  test("nested bold+italic collapses outer duplicate but keeps both formats", () => {
+    expect(minimize(serialize("<p><b><i>x</i></b></p>"))).toBe(
+      '<i><strong class="lexical-text-bold lexical-text-italic">x</strong></i>'
+    )
+  })
+
+  test("multiple paragraphs keep one <p> per line", () => {
+    expect(minimize(serialize("<p>line1</p><p>line2</p>"))).toBe(
+      '<p class="lexical-paragraph">line1</p><p class="lexical-paragraph">line2</p>'
+    )
+  })
+
+  test("heading stays structural", () => {
+    expect(minimize(serialize("<h1>Title</h1>"))).toBe(
+      '<h1 class="lexical-heading-h1">Title</h1>'
+    )
+  })
+
+  test("list stays structural", () => {
+    expect(minimize(serialize("<ul><li>a</li><li>b</li></ul>"))).toBe(
+      '<ul class="lexical-list-ul"><li value="1" class="lexical-list-item">a</li>' +
+      '<li value="2" class="lexical-list-item">b</li></ul>'
+    )
+  })
+
+  test("link keeps href + class, drops inner span", () => {
+    const out = minimize(serialize('<p><a href="https://a.com">x</a></p>'))
+    expect(out).toContain('href="https://a.com"')
+    expect(out).toContain('class="lexical-link"')
+    expect(out).not.toContain("<span")
+    expect(out).not.toContain("white-space")
+  })
+
+  test("code block preserves structure and highlight classes", () => {
+    const out = minimize(serialize("<pre><code>const a = 1</code></pre>"))
+    expect(out).toContain("lexical-code-block")
+    expect(out).toContain("const a = 1")
+    expect(out).not.toContain("white-space")
+    expect(out).not.toContain("spellcheck")
+  })
+
+  test("empty paragraph minimizes to empty/near-empty", () => {
+    const out = minimize(serialize("<p></p>"))
+    expect(out.replace(/<br\s*\/?>/g, "").trim()).toBe("")
+  })
+
+  test("keeps pre-wrap span when text has 2+ consecutive spaces", () => {
+    // The render container has no `white-space: pre-wrap`, so significant
+    // whitespace must survive in the persisted markup.
+    const lexical =
+      '<p class="lexical-paragraph">' +
+      '<span style="white-space: pre-wrap;">foo  bar</span></p>'
+    const out = minimize(lexical)
+    expect(out).toContain("foo  bar")
+    expect(out).toContain("white-space")
+  })
+
+  test("keeps pre-wrap span for leading indentation", () => {
+    const lexical =
+      '<p class="lexical-paragraph">' +
+      '<span style="white-space: pre-wrap;">    indented</span></p>'
+    const out = minimize(lexical)
+    expect(out).toContain("    indented")
+    expect(out).toContain("white-space")
+  })
+
+  test("a single trailing space stays minimal (not significant)", () => {
+    // The "Hello " run has one trailing space — renders fine bare, so no span.
+    expect(minimize(serialize("<p>Hello <b>World</b></p>"))).toBe(
+      'Hello <strong class="lexical-text-bold">World</strong>'
+    )
+  })
+
+  test("keeps pre-wrap on both sides when a space run straddles a format boundary", () => {
+    // The live editor serializes a bolded " bar" (within a 2-space run) as
+    // `foo ` + `<b><strong> bar</strong></b>`: the second space is nested inside
+    // the bold. Each node holds one edge space, so dropping pre-wrap from both
+    // would collapse the pair. Both sides must keep pre-wrap.
+    const lexical =
+      '<p class="lexical-paragraph">' +
+      '<span style="white-space: pre-wrap;">foo </span>' +
+      '<b><strong class="lexical-text-bold" style="white-space: pre-wrap;"> bar</strong></b>' +
+      "</p>"
+    const out = minimize(lexical)
+    expect(out).toBe(
+      '<span style="white-space: pre-wrap;">foo </span>' +
+      '<strong class="lexical-text-bold" style="white-space: pre-wrap;"> bar</strong>'
+    )
+    // pre-wrap survives on both the plain run and the styled run.
+    expect(out.match(/white-space/g)).toHaveLength(2)
+  })
+
+  test("boundary space across a paragraph break does NOT keep pre-wrap", () => {
+    // Different blocks have separate inline contexts — trailing space of one
+    // line and leading space of the next never combine, so neither is significant.
+    const lexical =
+      '<p class="lexical-paragraph"><span style="white-space: pre-wrap;">foo </span></p>' +
+      '<p class="lexical-paragraph"><span style="white-space: pre-wrap;"> bar</span></p>'
+    const out = minimize(lexical)
+    expect(out).not.toContain("white-space")
+  })
+
+  test("soft line break keeps its <p> wrapper", () => {
+    const out = minimize(serialize("<p>line 1<br>line 2</p>"))
+    expect(out).toContain("<br>")
+    expect(out.startsWith("<p")).toBe(true)
+    expect(out).toContain("line 1")
+    expect(out).toContain("line 2")
+  })
+
+  // Round-trip stability: minimized HTML re-imported and re-serialized, then
+  // minimized again, must equal the first minimization (no format loss / drift).
+  const roundTripCases = [
+    "<p>Hello World</p>",
+    "<p>Hello <b>World</b></p>",
+    "<p><b>x</b></p>",
+    "<p><i>x</i></p>",
+    "<p><u>x</u></p>",
+    "<p><s>x</s></p>",
+    "<p><b><i>x</i></b></p>",
+    "<p><code>inline</code></p>",
+    "<h1>Title</h1>",
+    "<p>line1</p><p>line2</p>",
+    "<ul><li>a</li><li>b</li></ul>",
+    "<blockquote>quoted</blockquote>",
+    '<p><a href="https://a.com">link</a></p>',
+    "<p>line 1<br>line 2</p>"
+  ]
+
+  test.each(roundTripCases)("round-trip stable: %s", (input) => {
+    const first = minimize(serialize(input))
+    const second = minimize(reimportFormats(first))
+    expect(second).toBe(first)
+  })
+})