@createiq/htmldiff 1.2.0-beta.3 → 1.2.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@createiq/htmldiff",
-  "version": "1.2.0-beta.3",
+  "version": "1.2.0-beta.5",
   "description": "TypeScript port of htmldiff.net",
   "type": "module",
   "author": "Mathew Mannion <mathew.mannion@linklaters.com>",

package/src/HtmlDiff.ts

@@ -335,22 +335,6 @@ export default class HtmlDiff {
     return HtmlDiff.shouldUseContentProjections(oldWords, newWords, oldProj, newProj)
   }
 
-  /**
-   * Three-way HTML diff. Given V1 (the version Me last sent), V2 (the
-   * version CP sent back), and V3 (Me's current draft), produces a
-   * single attributed HTML output where CP's and Me's changes are
-   * distinguished by `data-author` ('cp' or 'me') and matching
-   * `class='diffins cp'` / `class='diffdel me'` etc. The "Me rejected
-   * CP's proposal" case (Me deleted text CP had inserted) gets a
-   * dedicated marker: `data-rejects='cp'` plus `class='... rejects-cp'`.
-   *
-   * Coordinates the symmetric-projection decision (D1) across both
-   * internal `analyze` calls so V2 tokenises identically on each side
-   * of the spine. When `useProjections` is left undefined, the decision
-   * is the conjunction of both pair-wise heuristics — project iff both
-   * pairs would project on their own. Pass an explicit boolean to
-   * override.
-   */
   /**
    * Three-way HTML diff against a shared genesis. Produces attributed
    * HTML that distinguishes CP's accumulated changes (genesis → cpLatest)
@@ -439,6 +423,17 @@ export default class HtmlDiff {
    * buffer. Reusing the instance keeps the formatting-tag stack
    * (`specialTagDiffStack`) coherent across segments — a `<strong>`
    * opened in one segment and closed in another stays balanced.
+   *
+   * Edge case: an ins/del segment can open a formatting wrap whose
+   * matching closer ends up in an equal segment (`<strong>` deleted
+   * by CP but `</strong>` kept by both — buildSegments emits the open
+   * as del-cp and the close as equal). Equal segments bypass
+   * `insertTag` and push raw, so the stack entry for the open is
+   * never popped. Rather than throw — which forces the caller's UI
+   * into an error boundary — close every leftover wrap with `</ins>`
+   * at the end of emission. The resulting HTML has an extra
+   * `</ins>` next to the formatting closer; DOMParser-normalisation
+   * downstream produces sensible nesting.
    */
   private static emitSegments(segments: Segment[]): string {
     const emitter = new HtmlDiff('', '')
@@ -451,18 +446,21 @@ export default class HtmlDiff {
       // insertTag mutates its `words` array; pass a copy.
       emitter.insertTag(tag, baseClass, [...seg.words], metadata)
     }
-    // Stack-balance invariant: every special-case opening tag pushed onto
-    // `specialTagDiffStack` during emission must have been matched by a
-    // closing tag. An unbalanced stack means the input had unbalanced
-    // formatting tags AND a Replace at an inconvenient position — the
-    // output would be silently malformed (half-closed `<ins>`). Fail
-    // loudly so the caller can investigate rather than ship broken HTML.
     if (emitter.specialTagDiffStack.length > 0) {
-      throw new Error(
+      // Log once so we can spot bad inputs in dev tools, but don't
+      // throw — the caller's only fallback was to crash the React
+      // tree, which is worse than emitting slightly-imperfect HTML.
+      // eslint-disable-next-line no-console
+      console.warn(
         `HtmlDiff.executeThreeWay: emission left ${emitter.specialTagDiffStack.length} ` +
-          'unclosed formatting tag(s) on the stack — input may have unbalanced ' +
-          '<strong>/<em>/etc. or there is a bug in segment emission.'
+          'unclosed formatting wrap(s) on the stack. Closing defensively. ' +
+          'This usually means a formatting tag opens in a del/ins segment ' +
+          'and its matching closer is in an equal segment.'
       )
+      while (emitter.specialTagDiffStack.length > 0) {
+        emitter.content.push('</ins>')
+        emitter.specialTagDiffStack.pop()
+      }
     }
     return emitter.content.join('')
   }

package/src/ThreeWayTable.ts

@@ -1,4 +1,4 @@
-import { lcsAlign, textSimilarity } from './Alignment'
+import { type Alignment, lcsAlign, pairSimilarUnmatched, textSimilarity } from './Alignment'
 import { injectClass, parseOpeningTagAt } from './HtmlScanner'
 import {
   type CellRange,
@@ -8,6 +8,7 @@ import {
   PLACEHOLDER_SUFFIX,
   type RowRange,
   rowKey,
+  rowText,
   sameDimensions,
   spliceString,
   type TableRange,
@@ -143,8 +144,14 @@ function preprocessByContent(
   const cKeys = cTables.map(t => tableKey(cpLatest, t))
   const mKeys = mTables.map(t => tableKey(meCurrent, t))
 
-  const alignCp = lcsAlign(gKeys, cKeys)
-  const alignMe = lcsAlign(gKeys, mKeys)
+  // Exact tableKey LCS, then fuzzy-pair unmatched runs by content
+  // similarity. Without this, a table whose cells were edited (but
+  // not its overall shape) fails the exact tableKey match and the
+  // table-level aligner pulls it apart into a whole-table del + a
+  // whole-table ins. Same fuzzy pass `TableDiff` uses for the 2-way
+  // path — `pairSimilarTablesThreeWay` is defined below.
+  const alignCp = pairSimilarTablesThreeWay(lcsAlign(gKeys, cKeys), genesis, cpLatest, gTables, cTables)
+  const alignMe = pairSimilarTablesThreeWay(lcsAlign(gKeys, mKeys), genesis, meCurrent, gTables, mTables)
 
   // Maps: genesisIdx → matching cpIdx (-1 if none); cpIdx → matching genesisIdx; etc.
   const gToCp = new Array<number>(gTables.length).fill(-1)
@@ -342,6 +349,76 @@ function tableKey(html: string, table: TableRange): string {
   return html.slice(table.tableStart, table.tableEnd).replace(/\s+/g, ' ').trim()
 }
 
+/**
+ * Character-level similarity above which the three-way aligner treats
+ * two rows / tables as "the same logical entry, edited" rather than
+ * an unrelated delete + insert. Matched to TableDiff's
+ * `ROW_FUZZY_THRESHOLD` / `CELL_FUZZY_THRESHOLD` so 2-way and 3-way
+ * agree on which pairings are reachable; if a row's content overlap
+ * is enough to fool the 2-way diff into pairing, it should also be
+ * enough for 3-way.
+ */
+const THREE_WAY_FUZZY_THRESHOLD = 0.5
+
+/**
+ * Run the same fuzzy-pairing pass `TableDiff.pairSimilarUnmatchedRows`
+ * applies after its exact-LCS, but against one side of the genesis
+ * spine (either cp or me). The genesis tables/rows are always the
+ * "old" side; `newTable` is the cp or me table being aligned. Returns
+ * the enriched alignment with additional paired entries.
+ *
+ * Cell-count guard: only fuzzy-pair when both rows have the same cell
+ * count. Without this guard an asymmetric restructure — e.g. CP and
+ * Me both added a different column — leads to ONE side fuzzy-pairing
+ * its row with genesis (content overlap above threshold) while the
+ * other side falls below threshold. That mismatch routes through
+ * `diffTableStructural`'s "Me dropped, CP kept" (or the mirror)
+ * branch, which emits CP's row as a Me-attributed deletion. In
+ * cp-only mode `stripMeAttributedMarkers` then removes the row
+ * entirely and CP's edit vanishes from the view — exactly the
+ * content-loss case we're meant to prevent. Restricting fuzzy
+ * pairing to same-shape rows preserves the common case (single cell
+ * edit, identical row shape) while pushing structural mismatches
+ * back to the boundary-insertion path that emits both sides
+ * explicitly.
+ */
+function pairSimilarRowsThreeWay(
+  alignment: Alignment[],
+  genesis: string,
+  newHtml: string,
+  oldTable: TableRange,
+  newTable: TableRange
+): Alignment[] {
+  const oldTexts = oldTable.rows.map(r => rowText(genesis, r))
+  const newTexts = newTable.rows.map(r => rowText(newHtml, r))
+  return pairSimilarUnmatched(alignment, THREE_WAY_FUZZY_THRESHOLD, (oldIdx, newIdx) => {
+    if (oldTable.rows[oldIdx].cells.length !== newTable.rows[newIdx].cells.length) return 0
+    return textSimilarity(oldTexts[oldIdx], newTexts[newIdx])
+  })
+}
+
+/**
+ * Table-level counterpart: after `lcsAlign(gKeys, otherKeys)` over
+ * full table HTML keys, fuzzy-pair unmatched table runs by their
+ * row-text-concatenated content. Without this, a table whose body
+ * was edited (but not its outer shape) fails the exact-key match
+ * and the preprocessing emits whole-table del + whole-table ins
+ * instead of recursing into per-cell three-way diffs.
+ */
+function pairSimilarTablesThreeWay(
+  alignment: Alignment[],
+  oldHtml: string,
+  newHtml: string,
+  oldTables: TableRange[],
+  newTables: TableRange[]
+): Alignment[] {
+  const oldTexts = oldTables.map(t => t.rows.map(r => rowText(oldHtml, r)).join(' '))
+  const newTexts = newTables.map(t => t.rows.map(r => rowText(newHtml, r)).join(' '))
+  return pairSimilarUnmatched(alignment, THREE_WAY_FUZZY_THRESHOLD, (oldIdx, newIdx) =>
+    textSimilarity(oldTexts[oldIdx], newTexts[newIdx])
+  )
+}
+
 // ────────────────────────────────────────────────────────────────────────────
 // Per-table diff: positional cells or row-level structural change.
 
@@ -426,8 +503,17 @@ function diffTableStructural(
   const cKeys = tC.rows.map(r => rowKey(cpLatest, r))
   const mKeys = tM.rows.map(r => rowKey(meCurrent, r))
 
-  const alignCp = lcsAlign(gKeys, cKeys)
-  const alignMe = lcsAlign(gKeys, mKeys)
+  // Exact LCS first, then fuzzy-pair remaining unmatched runs. Without
+  // the fuzzy pass, a row where CP edited just a single cell's text
+  // produces no key match — the row aligner emits the genesis row as
+  // CP-deleted AND CP's reshaped row as inserted, when a cell-level
+  // diff against the paired row would render the edit far more
+  // legibly. The 2-way path (`TableDiff.pairSimilarUnmatchedRows`)
+  // has done this since inception; bringing the three-way path in
+  // step removes the asymmetry where the cp-only / all-changes view
+  // looks markedly worse than plain 2-way for ordinary cell edits.
+  const alignCp = pairSimilarRowsThreeWay(lcsAlign(gKeys, cKeys), genesis, cpLatest, tG, tC)
+  const alignMe = pairSimilarRowsThreeWay(lcsAlign(gKeys, mKeys), genesis, meCurrent, tG, tM)
 
   // genesisIdx → matching cpIdx (-1 if cp deleted this row)
   const gToCp = new Array<number>(tG.rows.length).fill(-1)
@@ -535,9 +621,40 @@ function emitPreservedRow(
     return out.join('')
   }
   // Cell-count mismatch within a preserved row — cell-level structural
-  // change deferred. Fall back to me-attributed Replace (genesis row
-  // removed, me row inserted). Lossy for CP within that row.
-  return emitFullRowAttributed(genesis, rG, 'del', 'me') + emitFullRowAttributed(meCurrent, rM, 'ins', 'me')
+  // alignment is non-trivial (which Me cell maps to which CP cell when
+  // the counts diverge?). The previous fallback emitted only
+  // genesis-as-del + me-as-ins, which silently destroyed CP's row
+  // content whenever CP changed the cell count — a content-loss bug
+  // (a row where CP added a column would disappear from the rendered
+  // diff entirely). Emit each side's row as a distinct attributed
+  // block so neither party's restructure can vanish:
+  //   - if both restructured (different shapes on both sides) the
+  //     genesis row is settled-deleted (silent) and we emit cp + me
+  //     rows side by side, each attributed to its author;
+  //   - if only one restructured, the genesis row is del-attributed to
+  //     the restructuring author so the reader sees what was there
+  //     before, then the new shape ins-attributed to the same author.
+  //
+  // Content edits inside a side that DID keep the genesis cell count
+  // are not surfaced here (no positional path is available across
+  // mismatched shapes); the underlying data is still present in the
+  // source document but the visual diff doesn't decompose it. That is
+  // a degradation of detail, not content loss — symmetric for cp/me.
+  const cpRestructured = rC.cells.length !== rG.cells.length
+  const meRestructured = rM.cells.length !== rG.cells.length
+  const blocks: string[] = []
+  if (cpRestructured && meRestructured) {
+    // Both sides restructured; genesis shape retained by neither.
+    blocks.push(emitFullRowAttributed(cpLatest, rC, 'ins', 'cp'))
+    blocks.push(emitFullRowAttributed(meCurrent, rM, 'ins', 'me'))
+  } else if (cpRestructured) {
+    blocks.push(emitFullRowAttributed(genesis, rG, 'del', 'cp'))
+    blocks.push(emitFullRowAttributed(cpLatest, rC, 'ins', 'cp'))
+  } else {
+    blocks.push(emitFullRowAttributed(genesis, rG, 'del', 'me'))
+    blocks.push(emitFullRowAttributed(meCurrent, rM, 'ins', 'me'))
+  }
+  return blocks.join('')
 }
 
 /**

package/test/HtmlDiff.threeWay.spec.ts

@@ -120,11 +120,19 @@ describe('HtmlDiff.executeThreeWay (genesis-spine)', () => {
     })
 
     it('cp matches genesis (only Me changed)', () => {
-      expect(HtmlDiff.executeThreeWay('Hello world', 'Hello world', 'Hello brave world')).toContain("data-author='me'")
+      // Negative assertion is load-bearing: without `not.toContain`
+      // a cp↔me swap inside the genesis-spine merge would still
+      // emit `data-author='cp'` somewhere in the output and the
+      // positive assertion would silently pass.
+      const out = HtmlDiff.executeThreeWay('Hello world', 'Hello world', 'Hello brave world')
+      expect(out).toContain("data-author='me'")
+      expect(out).not.toContain("data-author='cp'")
     })
 
     it('me matches genesis (only CP changed)', () => {
-      expect(HtmlDiff.executeThreeWay('Hello world', 'Hello cruel world', 'Hello world')).toContain("data-author='cp'")
+      const out = HtmlDiff.executeThreeWay('Hello world', 'Hello cruel world', 'Hello world')
+      expect(out).toContain("data-author='cp'")
+      expect(out).not.toContain("data-author='me'")
     })
   })
 
@@ -163,10 +171,47 @@ describe('HtmlDiff.executeThreeWay (genesis-spine)', () => {
       const without = HtmlDiff.executeThreeWay('a  b', 'a  b', 'a b')
       const withFlag = HtmlDiff.executeThreeWay('a  b', 'a  b', 'a b', { ignoreWhitespaceDifferences: true })
       expect(without).toContain("data-author='me'")
+      // CP matches genesis — any cp attribution would be a mis-merge.
+      expect(without).not.toContain("data-author='cp'")
       expect(withFlag).not.toContain('data-author=')
     })
   })
 
+  describe('stack-balance defence', () => {
+    // The emission walks segments built by `buildSegments`: ins/del
+    // segments go through `insertTag` (which manages the formatting-
+    // tag stack), but equal segments push raw words straight to the
+    // content buffer. When a formatting opener is in a del segment
+    // and its matching closer falls in an equal segment, the stack
+    // entry never gets popped — the emitter used to throw "emission
+    // left 1 unclosed formatting tag(s) on the stack" and crash the
+    // caller. Now it closes the leftover wraps defensively with
+    // `</ins>` so the output stays renderable.
+
+    it('CP inserted a <strong> opener whose closer is matched as equal — does not throw', () => {
+      // Genesis has an orphan closer (`X</strong>`); CP wrapped X in
+      // a fresh `<strong>`. The opener is ins-cp (no genesis match)
+      // but the closer is shared by all three and emits as equal.
+      // The mod-`<ins>` opened on the strong push needs to be closed
+      // somehow; the defensive path emits a trailing `</ins>`.
+      expect(() => HtmlDiff.executeThreeWay('X</strong>', '<strong>X</strong>', 'X</strong>')).not.toThrow()
+    })
+
+    it('CP deleted only the <strong> opener — does not throw', () => {
+      // Symmetric: genesis had `<strong>X</strong>`, CP dropped the
+      // opener but kept the closer. The opener-delete pushes onto
+      // the stack and the closer arrives via an equal segment.
+      expect(() => HtmlDiff.executeThreeWay('<strong>X</strong>', 'X</strong>', '<strong>X</strong>')).not.toThrow()
+    })
+
+    it('produces non-empty output even when the stack is left unbalanced at end', () => {
+      const out = HtmlDiff.executeThreeWay('X</strong>', '<strong>X</strong>', 'X</strong>')
+      // The content is still there, the formatting wraps just close
+      // defensively. Sanity-check the visible content survives.
+      expect(out).toContain('X')
+    })
+  })
+
   describe('first-turn fallback', () => {
     it('cp == genesis means CP made no changes — Me-only attribution', () => {
       // Common case: this is the first turn where the counterparty hasn't

package/test/HtmlDiff.threeWay.tables.spec.ts

@@ -259,6 +259,75 @@ describe('HtmlDiff.executeThreeWay (tables, genesis-spine)', () => {
       const html = `<table>${rows}</table>`
       expect(HtmlDiff.executeThreeWay(html, html, html)).toBe(html)
     })
+
+    it('cell-count mismatch: CP added a column — CP row content is visible (not silently dropped)', () => {
+      // Regression: the previous fallback in emitPreservedRow emitted
+      // only `del me` + `ins me` for any cell-count mismatch, which
+      // silently destroyed CP's row content whenever CP changed the
+      // cell count. A reader in cp-only mode would see no trace of
+      // CP's added column — a content-loss bug that violates the
+      // "CP's changes always visible" invariant.
+      const out = HtmlDiff.executeThreeWay(
+        '<table><tr><td>a</td><td>b</td></tr></table>',
+        '<table><tr><td>a</td><td>X</td><td>b</td></tr></table>',
+        '<table><tr><td>a</td><td>b</td></tr></table>'
+      )
+      expect(out).toBe(
+        "<table><tr class='diffdel cp' data-author='cp'><td class='diffdel cp' data-author='cp'><del class='diffdel cp' data-author='cp'>a</del></td><td class='diffdel cp' data-author='cp'><del class='diffdel cp' data-author='cp'>b</del></td></tr><tr class='diffins cp' data-author='cp'><td class='diffins cp' data-author='cp'><ins class='diffins cp' data-author='cp'>a</ins></td><td class='diffins cp' data-author='cp'><ins class='diffins cp' data-author='cp'>X</ins></td><td class='diffins cp' data-author='cp'><ins class='diffins cp' data-author='cp'>b</ins></td></tr></table>"
+      )
+    })
+
+    it('cell-count mismatch: Me removed a column — symmetric to the CP case', () => {
+      const out = HtmlDiff.executeThreeWay(
+        '<table><tr><td>a</td><td>b</td></tr></table>',
+        '<table><tr><td>a</td><td>b</td></tr></table>',
+        '<table><tr><td>a</td></tr></table>'
+      )
+      expect(out).toBe(
+        "<table><tr class='diffdel me' data-author='me'><td class='diffdel me' data-author='me'><del class='diffdel me' data-author='me'>a</del></td><td class='diffdel me' data-author='me'><del class='diffdel me' data-author='me'>b</del></td></tr><tr class='diffins me' data-author='me'><td class='diffins me' data-author='me'><ins class='diffins me' data-author='me'>a</ins></td></tr></table>"
+      )
+    })
+
+    it('CP edited one cell in a row (same shape) — fuzzy-pairs and emits a cell-level diff, not whole-row del+ins', () => {
+      // Regression: the 3-way row aligner only did exact lcsAlign over
+      // rowKey, so a row where CP edited a single cell's text produced
+      // no key match and the algorithm split the row into a whole-row
+      // delete + whole-row insert. The 2-way path has always run a
+      // fuzzy-pairing pass after lcsAlign; bringing the 3-way path in
+      // step removes the asymmetry where cp-only / all-changes views
+      // looked materially worse than 2-way for ordinary cell edits.
+      //
+      // Same-shape genesis/cp/me; CP edited the middle cell's text.
+      // Me === genesis. Expect a paired row with cell-level cp-ins
+      // markup, NOT two distinct whole-row entries.
+      const out = HtmlDiff.executeThreeWay(
+        '<table><tr><td>Party A</td><td>old details</td><td>kept</td></tr></table>',
+        '<table><tr><td>Party A</td><td>new details</td><td>kept</td></tr></table>',
+        '<table><tr><td>Party A</td><td>old details</td><td>kept</td></tr></table>'
+      )
+      // CP's edit lives inside the row, not as a parallel whole-row
+      // delete-then-insert. Whole-row markers would carry `class='diffdel ...'`
+      // or `class='diffins ...'` on the `<tr>` itself.
+      expect(out).not.toMatch(/<tr [^>]*class=['"]diffdel/)
+      expect(out).not.toMatch(/<tr [^>]*class=['"]diffins/)
+      expect(out).toContain('Party A')
+      expect(out).toContain("data-author='cp'")
+      // Me === genesis so any me attribution would indicate a swap.
+      expect(out).not.toContain("data-author='me'")
+    })
+
+    it('cell-count mismatch: both sides restructured differently — both ins rows attributed', () => {
+      // Genesis 2 cells, CP 3 cells, Me 4 cells. Neither side keeps
+      // the genesis shape, so both restructures must be visible.
+      const out = HtmlDiff.executeThreeWay(
+        '<table><tr><td>a</td><td>b</td></tr></table>',
+        '<table><tr><td>a</td><td>X</td><td>b</td></tr></table>',
+        '<table><tr><td>a</td><td>b</td><td>Y</td><td>Z</td></tr></table>'
+      )
+      expect(out).toBe(
+        "<table><tr class='diffins cp' data-author='cp'><td class='diffins cp' data-author='cp'><ins class='diffins cp' data-author='cp'>a</ins></td><td class='diffins cp' data-author='cp'><ins class='diffins cp' data-author='cp'>X</ins></td><td class='diffins cp' data-author='cp'><ins class='diffins cp' data-author='cp'>b</ins></td></tr><tr class='diffins me' data-author='me'><td class='diffins me' data-author='me'><ins class='diffins me' data-author='me'>a</ins></td><td class='diffins me' data-author='me'><ins class='diffins me' data-author='me'>b</ins></td><td class='diffins me' data-author='me'><ins class='diffins me' data-author='me'>Y</ins></td><td class='diffins me' data-author='me'><ins class='diffins me' data-author='me'>Z</ins></td></tr></table>"
+      )
+    })
   })
 
   describe('nested tables', () => {
@@ -270,6 +339,9 @@ describe('HtmlDiff.executeThreeWay (tables, genesis-spine)', () => {
       )
       expect(out).toMatch(/<del[^>]*data-author='cp'[^>]*>inner<\/del>/)
       expect(out).toMatch(/<ins[^>]*data-author='cp'[^>]*>INNER<\/ins>/)
+      // me == genesis here, so any me attribution would indicate a
+      // cp↔me swap inside the table-cell merge.
+      expect(out).not.toContain("data-author='me'")
       expect(out.startsWith('<table><tr><td><table>')).toBe(true)
       expect(out.endsWith('</table></td></tr></table>')).toBe(true)
     })
@@ -320,6 +392,10 @@ describe('HtmlDiff.executeThreeWay (tables, genesis-spine)', () => {
       // whole-table del+ins wrapping the entire <table>.
       expect(out).not.toMatch(/<del[^>]*><table/)
       expect(out).toMatch(/data-author='cp'/)
+      // me === genesis, so any me-attribution markers would mean the
+      // diff swapped CP's edits onto Me. Negative assertion locks the
+      // attribution direction.
+      expect(out).not.toContain("data-author='me'")
       expect(out).toContain('Extra column')
       expect(out).toContain('Form/Document/Certificate')
     })

package/test/Utils.spec.ts

@@ -138,10 +138,10 @@ describe('Utils', () => {
     it('combines extraClasses and dataAttrs in one call', () => {
       expect(
         Utils.wrapText('hello', 'del', 'diffdel', {
-          extraClasses: 'me rejects-cp',
-          dataAttrs: { author: 'me', rejects: 'cp' },
+          extraClasses: 'me',
+          dataAttrs: { author: 'me', source: 'edit' },
         })
-      ).toBe("<del class='diffdel me rejects-cp' data-author='me' data-rejects='cp'>hello</del>")
+      ).toBe("<del class='diffdel me' data-author='me' data-source='edit'>hello</del>")
     })
 
     it('skips the metadata path entirely when neither extraClasses nor dataAttrs is set', () => {