@svgrid/grid 2.6.21 → 2.7.0

package/src/row-resize.ts

@@ -1,210 +1,228 @@
-/**
- * Row-resize Svelte action - drag the bottom edge of a row to grow /
- * shrink it. Pair with a function-valued `rowHeight` prop so the grid
- * reads per-row heights from a reactive store.
- *
- * The action is OFF until a consumer attaches it AND a row-header
- * gutter cell exists in each row. A row-header cell is either the
- * grid's built-in row-number gutter (enable `showRowNumbers`) or any
- * TD tagged with the `sv-row-gutter` class (set
- * `cellClass: 'sv-row-gutter'` on a custom gutter column).
- *
- *   <script>
- *     let heights = $state<Record<number, number>>({})
- *     let resizeOn = $state(false)
- *     const rowHeight = (i: number) => heights[i] ?? 32
- *     function onResize(i: number, h: number) { heights = { ...heights, [i]: h } }
- *   </script>
- *
- *   <div use:rowResize={{ onResize, disabled: !resizeOn }}>
- *     <SvGrid columns={[{ field:'rn', cellClass:'sv-row-gutter', ... }, ...]}
- *             rowHeight={rowHeight} ... />
- *   </div>
- *
- * Visual: the strip sits along the bottom edge of the row-header
- * cell, 5px tall, transparent by default, accent-tinted on hover -
- * matching the column resize handle's look. Cursor is `row-resize`.
- */
-
-const STRIP_CLASS = 'sv-grid-row-resize-handle'
-
-export type RowResizeOptions = {
-  /** Called when the user releases the drag with the final height. */
-  onResize: (rowIndex: number, height: number) => void
-  /** Optional callback fired during the drag (every pointermove). */
-  onResizeMove?: (rowIndex: number, height: number) => void
-  /** Min row height in px. Default 20. */
-  min?: number
-  /** Max row height in px. Default 320. */
-  max?: number
-  /** When true, the action removes its strips and ignores events. */
-  disabled?: boolean
-}
-
-type ActiveDrag = {
-  rowIndex: number
-  startY: number
-  startHeight: number
-  trEl: HTMLTableRowElement
-  strip: HTMLElement
-}
-
-export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
-  let current = opts
-  let drag: ActiveDrag | null = null
-
-  function rowIndexOf(tr: HTMLTableRowElement): number {
-    const dataRow = tr.querySelector<HTMLElement>('[data-svgrid-row]')
-    const val = dataRow?.dataset.svgridRow
-    return val != null ? Number(val) : NaN
-  }
-
-  function onPointerMove(e: PointerEvent) {
-    if (!drag) return
-    const min = current.min ?? 20
-    const max = current.max ?? 320
-    const next = Math.max(min, Math.min(max, drag.startHeight + (e.clientY - drag.startY)))
-    drag.trEl.style.height = `${Math.round(next)}px`
-    current.onResizeMove?.(drag.rowIndex, Math.round(next))
-  }
-  function onPointerUp(e: PointerEvent) {
-    if (!drag) return
-    const min = current.min ?? 20
-    const max = current.max ?? 320
-    const next = Math.max(min, Math.min(max, drag.startHeight + (e.clientY - drag.startY)))
-    current.onResize(drag.rowIndex, Math.round(next))
-    drag.strip.classList.remove('is-resizing')
-    try { drag.trEl.releasePointerCapture(e.pointerId) } catch { /* ignore */ }
-    drag = null
-    window.removeEventListener('pointermove', onPointerMove)
-    window.removeEventListener('pointerup', onPointerUp)
-    document.body.style.cursor = ''
-  }
-
-  /**
-   * Keyboard resize (#79). The strip is `role="separator"` acting as a
-   * splitter, so it has to be reachable by Tab and respond to arrow keys.
-   * Up/Down shrink/grow the row, Shift gives a fine 1px step - the same
-   * contract the column resize handle uses (Left/Right, Shift = 1px).
-   */
-  function onKeyDown(e: KeyboardEvent) {
-    if (current.disabled) return
-    const t = e.target as HTMLElement | null
-    if (!t?.classList.contains(STRIP_CLASS)) return
-    const step = e.shiftKey ? 1 : 10
-    let delta = 0
-    if (e.key === 'ArrowUp') delta = -step
-    else if (e.key === 'ArrowDown') delta = step
-    else return
-    const tr = t.closest<HTMLTableRowElement>('tr.sv-grid-row')
-    if (!tr) return
-    const rowIndex = rowIndexOf(tr)
-    if (!Number.isFinite(rowIndex)) return
-    e.preventDefault()
-    e.stopPropagation()
-    const min = current.min ?? 20
-    const max = current.max ?? 320
-    const next = Math.round(
-      Math.max(min, Math.min(max, tr.getBoundingClientRect().height + delta)),
-    )
-    tr.style.height = `${next}px`
-    current.onResizeMove?.(rowIndex, next)
-    current.onResize(rowIndex, next)
-  }
-
-  function onPointerDown(e: PointerEvent) {
-    if (current.disabled) return
-    const t = e.target as HTMLElement | null
-    if (!t?.classList.contains(STRIP_CLASS)) return
-    const tr = t.closest<HTMLTableRowElement>('tr.sv-grid-row')
-    if (!tr) return
-    const rowIndex = rowIndexOf(tr)
-    if (!Number.isFinite(rowIndex)) return
-    e.preventDefault()
-    e.stopPropagation()
-    t.classList.add('is-resizing')
-    drag = {
-      rowIndex,
-      startY: e.clientY,
-      startHeight: tr.getBoundingClientRect().height,
-      trEl: tr,
-      strip: t,
-    }
-    try { tr.setPointerCapture(e.pointerId) } catch { /* ignore */ }
-    document.body.style.cursor = 'row-resize'
-    window.addEventListener('pointermove', onPointerMove)
-    window.addEventListener('pointerup', onPointerUp)
-  }
-
-  /** Inject one strip into every row's gutter cell. When disabled or
-   *  when a row lacks a `.sv-row-gutter` cell, no strip is added. */
-  function decorate() {
-    if (current.disabled) {
-      removeAllStrips()
-      return
-    }
-    const rows = node.querySelectorAll<HTMLTableRowElement>('tr.sv-grid-row')
-    for (const tr of rows) {
-      if (tr.classList.contains('sv-grid-header-row')) continue
-      if (tr.classList.contains('sv-grid-row-spacer')) continue
-      // A row-header gutter cell: either a user column tagged
-      // `sv-row-gutter`, or the grid's built-in row-number gutter
-      // (`showRowNumbers`), whose cell is `.sv-grid-row-number-cell`.
-      const gutter = tr.querySelector<HTMLTableCellElement>(
-        '.sv-grid-cell.sv-row-gutter, .sv-grid-cell.sv-grid-row-number-cell',
-      )
-      if (!gutter) continue
-      if (gutter.querySelector(`:scope > .${STRIP_CLASS}`)) continue
-      // Anchor the strip to the gutter cell + allow it to overflow
-      // downward into the row gap so the hit-area straddles the
-      // row boundary the way Excel does.
-      if (getComputedStyle(gutter).position === 'static') gutter.style.position = 'relative'
-      gutter.style.overflow = 'visible'
-      const strip = document.createElement('div')
-      strip.className = STRIP_CLASS
-      strip.setAttribute('role', 'separator')
-      strip.setAttribute('aria-orientation', 'horizontal')
-      strip.setAttribute('aria-label', 'Resize row')
-      // A separator used as an interactive splitter has to be focusable so
-      // keyboard-only users can reach it and drive `onKeyDown` (#79).
-      strip.tabIndex = 0
-      // Inline the geometry + pointer-events so the strip works even
-      // before SvGrid.css is parsed; the hover tint still comes from
-      // the stylesheet. We keep the strip fully inside the gutter
-      // cell (no negative offset) to avoid stacking-context surprises
-      // with pinned / virtualised neighbour cells.
-      // 5px tall + sitting flush with the row bottom matches the
-      // column resize handle's 5px width.
-      strip.style.cssText =
-        'position:absolute;left:0;right:0;bottom:0;height:5px;' +
-        'cursor:row-resize;user-select:none;z-index:60;pointer-events:auto;'
-      gutter.appendChild(strip)
-    }
-  }
-  function removeAllStrips() {
-    node.querySelectorAll(`.${STRIP_CLASS}`).forEach((el) => el.remove())
-  }
-
-  node.addEventListener('pointerdown', onPointerDown, { capture: true })
-  node.addEventListener('keydown', onKeyDown, { capture: true })
-  const observer = new MutationObserver(() => decorate())
-  observer.observe(node, { childList: true, subtree: true })
-  decorate()
-
-  return {
-    update(next: RowResizeOptions) {
-      const wasDisabled = current.disabled
-      current = next
-      // Toggle: when going from enabled <-> disabled, repaint immediately.
-      if (wasDisabled !== current.disabled) decorate()
-    },
-    destroy() {
-      node.removeEventListener('pointerdown', onPointerDown, { capture: true })
-      node.removeEventListener('keydown', onKeyDown, { capture: true })
-      window.removeEventListener('pointermove', onPointerMove)
-      window.removeEventListener('pointerup', onPointerUp)
-      observer.disconnect()
-      removeAllStrips()
-    },
-  }
-}
+/**
+ * Row-resize Svelte action - drag the bottom edge of a row to grow /
+ * shrink it. Pair with a function-valued `rowHeight` prop so the grid
+ * reads per-row heights from a reactive store.
+ *
+ * The action is OFF until a consumer attaches it AND a row-header
+ * gutter cell exists in each row. A row-header cell is either the
+ * grid's built-in row-number gutter (enable `showRowNumbers`) or any
+ * TD tagged with the `sv-row-gutter` class (set
+ * `cellClass: 'sv-row-gutter'` on a custom gutter column).
+ *
+ *   <script>
+ *     let heights = $state<Record<number, number>>({})
+ *     let resizeOn = $state(false)
+ *     const rowHeight = (i: number) => heights[i] ?? 32
+ *     function onResize(i: number, h: number) { heights = { ...heights, [i]: h } }
+ *   </script>
+ *
+ *   <div use:rowResize={{ onResize, disabled: !resizeOn }}>
+ *     <SvGrid columns={[{ field:'rn', cellClass:'sv-row-gutter', ... }, ...]}
+ *             rowHeight={rowHeight} ... />
+ *   </div>
+ *
+ * Visual: the strip sits along the bottom edge of the row-header
+ * cell, 5px tall, transparent by default, accent-tinted on hover -
+ * matching the column resize handle's look. Cursor is `row-resize`.
+ */
+
+const STRIP_CLASS = 'sv-grid-row-resize-handle'
+
+export type RowResizeOptions = {
+  /** Called when the user releases the drag with the final height. */
+  onResize: (rowIndex: number, height: number) => void
+  /** Optional callback fired during the drag (every pointermove). */
+  onResizeMove?: (rowIndex: number, height: number) => void
+  /** Min row height in px. Default 20. */
+  min?: number
+  /** Max row height in px. Default 320. */
+  max?: number
+  /** When true, the action removes its strips and ignores events. */
+  disabled?: boolean
+  /**
+   * Where the drag strip is anchored.
+   * - `'gutter'` (default) - only rows that have a row-header gutter cell get
+   *   a strip: the built-in row-number column (`showRowNumbers`) or a column
+   *   tagged `cellClass: 'sv-row-gutter'`. Rows without one are skipped, so on
+   *   a plain grid the action does nothing.
+   * - `'row'` - use the gutter when there is one, otherwise fall back to the
+   *   row's first body cell. This is what `<SvGrid rowResize>` passes, so the
+   *   prop works without also asking for a gutter column.
+   */
+  anchor?: 'gutter' | 'row'
+}
+
+type ActiveDrag = {
+  rowIndex: number
+  startY: number
+  startHeight: number
+  trEl: HTMLTableRowElement
+  strip: HTMLElement
+}
+
+export function rowResize(node: HTMLElement, opts: RowResizeOptions) {
+  let current = opts
+  let drag: ActiveDrag | null = null
+
+  function rowIndexOf(tr: HTMLTableRowElement): number {
+    const dataRow = tr.querySelector<HTMLElement>('[data-svgrid-row]')
+    const val = dataRow?.dataset.svgridRow
+    return val != null ? Number(val) : NaN
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!drag) return
+    const min = current.min ?? 20
+    const max = current.max ?? 320
+    const next = Math.max(min, Math.min(max, drag.startHeight + (e.clientY - drag.startY)))
+    drag.trEl.style.height = `${Math.round(next)}px`
+    current.onResizeMove?.(drag.rowIndex, Math.round(next))
+  }
+  function onPointerUp(e: PointerEvent) {
+    if (!drag) return
+    const min = current.min ?? 20
+    const max = current.max ?? 320
+    const next = Math.max(min, Math.min(max, drag.startHeight + (e.clientY - drag.startY)))
+    current.onResize(drag.rowIndex, Math.round(next))
+    drag.strip.classList.remove('is-resizing')
+    try { drag.trEl.releasePointerCapture(e.pointerId) } catch { /* ignore */ }
+    drag = null
+    window.removeEventListener('pointermove', onPointerMove)
+    window.removeEventListener('pointerup', onPointerUp)
+    document.body.style.cursor = ''
+  }
+
+  /**
+   * Keyboard resize (#79). The strip is `role="separator"` acting as a
+   * splitter, so it has to be reachable by Tab and respond to arrow keys.
+   * Up/Down shrink/grow the row, Shift gives a fine 1px step - the same
+   * contract the column resize handle uses (Left/Right, Shift = 1px).
+   */
+  function onKeyDown(e: KeyboardEvent) {
+    if (current.disabled) return
+    const t = e.target as HTMLElement | null
+    if (!t?.classList.contains(STRIP_CLASS)) return
+    const step = e.shiftKey ? 1 : 10
+    let delta = 0
+    if (e.key === 'ArrowUp') delta = -step
+    else if (e.key === 'ArrowDown') delta = step
+    else return
+    const tr = t.closest<HTMLTableRowElement>('tr.sv-grid-row')
+    if (!tr) return
+    const rowIndex = rowIndexOf(tr)
+    if (!Number.isFinite(rowIndex)) return
+    e.preventDefault()
+    e.stopPropagation()
+    const min = current.min ?? 20
+    const max = current.max ?? 320
+    const next = Math.round(
+      Math.max(min, Math.min(max, tr.getBoundingClientRect().height + delta)),
+    )
+    tr.style.height = `${next}px`
+    current.onResizeMove?.(rowIndex, next)
+    current.onResize(rowIndex, next)
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    if (current.disabled) return
+    const t = e.target as HTMLElement | null
+    if (!t?.classList.contains(STRIP_CLASS)) return
+    const tr = t.closest<HTMLTableRowElement>('tr.sv-grid-row')
+    if (!tr) return
+    const rowIndex = rowIndexOf(tr)
+    if (!Number.isFinite(rowIndex)) return
+    e.preventDefault()
+    e.stopPropagation()
+    t.classList.add('is-resizing')
+    drag = {
+      rowIndex,
+      startY: e.clientY,
+      startHeight: tr.getBoundingClientRect().height,
+      trEl: tr,
+      strip: t,
+    }
+    try { tr.setPointerCapture(e.pointerId) } catch { /* ignore */ }
+    document.body.style.cursor = 'row-resize'
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', onPointerUp)
+  }
+
+  /** Inject one strip into every row's gutter cell. When disabled or
+   *  when a row lacks a `.sv-row-gutter` cell, no strip is added. */
+  function decorate() {
+    if (current.disabled) {
+      removeAllStrips()
+      return
+    }
+    const rows = node.querySelectorAll<HTMLTableRowElement>('tr.sv-grid-row')
+    for (const tr of rows) {
+      if (tr.classList.contains('sv-grid-header-row')) continue
+      if (tr.classList.contains('sv-grid-row-spacer')) continue
+      // A row-header gutter cell: either a user column tagged
+      // `sv-row-gutter`, or the grid's built-in row-number gutter
+      // (`showRowNumbers`), whose cell is `.sv-grid-row-number-cell`.
+      const gutter =
+        tr.querySelector<HTMLTableCellElement>(
+          '.sv-grid-cell.sv-row-gutter, .sv-grid-cell.sv-grid-row-number-cell',
+        ) ??
+        // `anchor: 'row'` - no gutter on this grid, so hang the strip off the
+        // first body cell instead. Without this a grid with no row-number
+        // column would silently not resize.
+        (current.anchor === 'row'
+          ? tr.querySelector<HTMLTableCellElement>('.sv-grid-cell')
+          : null)
+      if (!gutter) continue
+      if (gutter.querySelector(`:scope > .${STRIP_CLASS}`)) continue
+      // Anchor the strip to the gutter cell + allow it to overflow
+      // downward into the row gap so the hit-area straddles the
+      // row boundary the way Excel does.
+      if (getComputedStyle(gutter).position === 'static') gutter.style.position = 'relative'
+      gutter.style.overflow = 'visible'
+      const strip = document.createElement('div')
+      strip.className = STRIP_CLASS
+      strip.setAttribute('role', 'separator')
+      strip.setAttribute('aria-orientation', 'horizontal')
+      strip.setAttribute('aria-label', 'Resize row')
+      // A separator used as an interactive splitter has to be focusable so
+      // keyboard-only users can reach it and drive `onKeyDown` (#79).
+      strip.tabIndex = 0
+      // Inline the geometry + pointer-events so the strip works even
+      // before SvGrid.css is parsed; the hover tint still comes from
+      // the stylesheet. We keep the strip fully inside the gutter
+      // cell (no negative offset) to avoid stacking-context surprises
+      // with pinned / virtualised neighbour cells.
+      // 5px tall + sitting flush with the row bottom matches the
+      // column resize handle's 5px width.
+      strip.style.cssText =
+        'position:absolute;left:0;right:0;bottom:0;height:5px;' +
+        'cursor:row-resize;user-select:none;z-index:60;pointer-events:auto;'
+      gutter.appendChild(strip)
+    }
+  }
+  function removeAllStrips() {
+    node.querySelectorAll(`.${STRIP_CLASS}`).forEach((el) => el.remove())
+  }
+
+  node.addEventListener('pointerdown', onPointerDown, { capture: true })
+  node.addEventListener('keydown', onKeyDown, { capture: true })
+  const observer = new MutationObserver(() => decorate())
+  observer.observe(node, { childList: true, subtree: true })
+  decorate()
+
+  return {
+    update(next: RowResizeOptions) {
+      const wasDisabled = current.disabled
+      current = next
+      // Toggle: when going from enabled <-> disabled, repaint immediately.
+      if (wasDisabled !== current.disabled) decorate()
+    },
+    destroy() {
+      node.removeEventListener('pointerdown', onPointerDown, { capture: true })
+      node.removeEventListener('keydown', onKeyDown, { capture: true })
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', onPointerUp)
+      observer.disconnect()
+      removeAllStrips()
+    },
+  }
+}

package/src/sanitize-html.test.ts

@@ -0,0 +1,182 @@
+import { describe, expect, it } from 'vitest'
+import { sanitizeHtml, renderMarkdown, htmlToText } from './sanitize-html'
+
+/**
+ * The sanitizer is the one part of the rich-text cell that has to be right:
+ * everything else costs a rendering glitch, this costs script execution in the
+ * host page. The XSS cases below are the standard vectors a cell renderer gets
+ * hit with, so a regression here fails loudly.
+ */
+describe('sanitizeHtml - script execution vectors', () => {
+  it('drops script tags and their contents', () => {
+    const out = sanitizeHtml('<p>hi</p><script>alert(1)</script>')
+    expect(out).toContain('hi')
+    expect(out).not.toContain('script')
+    expect(out).not.toContain('alert')
+  })
+
+  it('strips every inline event handler', () => {
+    for (const attr of ['onclick', 'onerror', 'onload', 'onmouseover', 'onfocus']) {
+      const out = sanitizeHtml(`<p ${attr}="alert(1)">x</p>`)
+      expect(out, attr).not.toContain(attr)
+      expect(out, attr).not.toContain('alert')
+    }
+  })
+
+  it('strips a javascript: href, including obfuscated forms', () => {
+    const vectors = [
+      'javascript:alert(1)',
+      'JaVaScRiPt:alert(1)',
+      ' javascript:alert(1)',
+      'java\tscript:alert(1)',
+      'java\nscript:alert(1)',
+      'vbscript:msgbox(1)',
+    ]
+    for (const href of vectors) {
+      const out = sanitizeHtml(`<a href="${href}">x</a>`)
+      expect(out.toLowerCase(), href).not.toContain('javascript:')
+      expect(out.toLowerCase(), href).not.toContain('vbscript:')
+      expect(out, href).not.toContain('href')
+    }
+  })
+
+  it('drops an img with an onerror payload but keeps a safe one', () => {
+    expect(sanitizeHtml('<img src=x onerror="alert(1)">')).not.toContain('onerror')
+    const safe = sanitizeHtml('<img src="/logo.png" alt="Logo">')
+    expect(safe).toContain('src="/logo.png"')
+    expect(safe).toContain('alt="Logo"')
+  })
+
+  it('allows a base64 image data URL but not data:text/html', () => {
+    const png = 'data:image/png;base64,iVBORw0KGgo='
+    expect(sanitizeHtml(`<img src="${png}">`)).toContain('src=')
+    expect(sanitizeHtml('<img src="data:text/html;base64,PHNjcmlwdD4=">')).not.toContain('src=')
+  })
+
+  it('removes style attributes and style/iframe subtrees', () => {
+    expect(sanitizeHtml('<p style="position:fixed;top:0">x</p>')).not.toContain('style')
+    expect(sanitizeHtml('<style>body{display:none}</style><p>x</p>')).not.toContain('display')
+    expect(sanitizeHtml('<iframe src="https://evil.test"></iframe>')).not.toContain('iframe')
+  })
+
+  it('unwraps unknown tags but keeps their text', () => {
+    const out = sanitizeHtml('<marquee>keep me</marquee>')
+    expect(out).toContain('keep me')
+    expect(out).not.toContain('marquee')
+  })
+
+  it('adds rel=noopener to links that open a new tab', () => {
+    const out = sanitizeHtml('<a href="https://x.test" target="_blank">x</a>')
+    expect(out).toContain('rel="noopener noreferrer"')
+  })
+})
+
+describe('sanitizeHtml - preserving legitimate content', () => {
+  it('keeps the formatting tags SvRichText produces', () => {
+    const html = '<p><strong>b</strong> <em>i</em> <u>u</u> <s>s</s> <code>c</code></p><ul><li>one</li></ul>'
+    expect(sanitizeHtml(html)).toBe(html)
+  })
+
+  it('is idempotent', () => {
+    const once = sanitizeHtml('<p onclick="x()">hi <b>there</b></p>')
+    expect(sanitizeHtml(once)).toBe(once)
+  })
+
+  it('passes plain text through untouched and handles empty input', () => {
+    expect(sanitizeHtml('just text')).toBe('just text')
+    expect(sanitizeHtml('')).toBe('')
+    expect(sanitizeHtml(null)).toBe('')
+    expect(sanitizeHtml(undefined)).toBe('')
+  })
+})
+
+describe('renderMarkdown', () => {
+  it('renders headings, emphasis, code and lists', () => {
+    expect(renderMarkdown('# Title')).toBe('<h1>Title</h1>')
+    expect(renderMarkdown('**bold**')).toContain('<strong>bold</strong>')
+    expect(renderMarkdown('*it*')).toContain('<em>it</em>')
+    expect(renderMarkdown('~~gone~~')).toContain('<del>gone</del>')
+    expect(renderMarkdown('`code`')).toContain('<code>code</code>')
+    expect(renderMarkdown('- a\n- b')).toBe('<ul><li>a</li><li>b</li></ul>')
+    expect(renderMarkdown('1. a\n2. b')).toBe('<ol><li>a</li><li>b</li></ol>')
+  })
+
+  it('does not let emphasis leak into inline code', () => {
+    expect(renderMarkdown('`**not bold**`')).toContain('<code>**not bold**</code>')
+  })
+
+  it('escapes raw HTML in the source instead of passing it through', () => {
+    const out = renderMarkdown('<script>alert(1)</script>')
+    expect(out).not.toContain('<script>')
+    expect(out).toContain('&lt;script&gt;')
+  })
+
+  it('will not smuggle javascript: through a Markdown link', () => {
+    const out = renderMarkdown('[click](javascript:alert(1))')
+    expect(out).toContain('click')
+    expect(out).not.toContain('href')
+  })
+
+  it('handles empty input', () => {
+    expect(renderMarkdown('')).toBe('')
+    expect(renderMarkdown(null)).toBe('')
+  })
+})
+
+describe('htmlToText', () => {
+  it('flattens markup to a single readable line', () => {
+    expect(htmlToText('<p>one</p><p>two</p>')).toBe('one two')
+    expect(htmlToText('<ul><li>a</li><li>b</li></ul>')).toBe('a b')
+    expect(htmlToText('a<br>b')).toBe('a b')
+  })
+
+  it('decodes entities and drops script content', () => {
+    expect(htmlToText('<p>a &amp; b</p>')).toBe('a & b')
+    expect(htmlToText('<script>alert(1)</script><p>safe</p>')).toBe('safe')
+  })
+
+  it('handles empty input', () => {
+    expect(htmlToText('')).toBe('')
+    expect(htmlToText(null)).toBe('')
+  })
+})
+
+describe('sanitizeHtml - SSR path (no DOMParser)', () => {
+  // During SSR there is no DOM, so a second, regex-based implementation runs.
+  // It is stricter than the DOM path, and it must not be the weak link: the
+  // server-rendered HTML reaches the browser before hydration re-sanitizes.
+  const withoutDom = (html: string): string => {
+    const real = globalThis.DOMParser
+    // @ts-expect-error - deleting a global for the duration of the assertion
+    delete globalThis.DOMParser
+    try {
+      return sanitizeHtml(html)
+    } finally {
+      globalThis.DOMParser = real
+    }
+  }
+
+  it('drops scripts, styles and iframes with their contents', () => {
+    expect(withoutDom('<p>hi</p><script>alert(1)</script>')).toBe('<p>hi</p>')
+    expect(withoutDom('<style>body{x:y}</style><p>hi</p>')).toBe('<p>hi</p>')
+    expect(withoutDom('<iframe src="https://evil.test"></iframe>ok')).toBe('ok')
+  })
+
+  it('strips every attribute, so no handler or URL survives', () => {
+    expect(withoutDom('<p onclick="alert(1)">x</p>')).toBe('<p>x</p>')
+    expect(withoutDom('<a href="javascript:alert(1)">x</a>')).toBe('<a>x</a>')
+    // The tag itself may stay, but with no src and no handler it is inert.
+    const img = withoutDom('<img src=x onerror="alert(1)">')
+    expect(img).toBe('<img>')
+    expect(img).not.toContain('onerror')
+    expect(img).not.toContain('src')
+  })
+
+  it('keeps plain allowlisted formatting', () => {
+    expect(withoutDom('<p><strong>b</strong> <em>i</em></p>')).toBe('<p><strong>b</strong> <em>i</em></p>')
+  })
+
+  it('removes unknown tags entirely', () => {
+    expect(withoutDom('<marquee>text</marquee>')).toBe('text')
+  })
+})