@svgrid/grid 2.6.22 → 2.6.23

package/src/number-editor-literal.test.ts

@@ -0,0 +1,84 @@
+/**
+ * Typing a decimal into an `editorType: 'number'` cell.
+ *
+ * `<input type="number">` applies the HTML value-sanitization algorithm: the
+ * element only reports a value it can parse as a valid floating-point number.
+ * Every intermediate state on the way to "12.5" - "12." - is not one, so the
+ * element reports "" and the keystroke vanishes. The same applies to a lone
+ * "-" on the way to a negative, and to "1e" on the way to "1e3".
+ *
+ * jsdom implements that sanitization, so this is reproducible here rather than
+ * only in a browser.
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  getCellEditorInputType,
+  getEditorInputType,
+  isNumericEditorInput,
+} from './SvGrid.helpers'
+
+describe('what a bare number input does to intermediate values', () => {
+  // This is the browser behaviour the editor has to work around, pinned so the
+  // reasoning below cannot quietly stop being true.
+  const sanitized = (raw: string) => {
+    const el = document.createElement('input')
+    el.type = 'number'
+    el.value = raw
+    return el.value
+  }
+
+  it('throws away a trailing decimal point', () => {
+    expect(sanitized('12.')).toBe('')
+  })
+
+  it('throws away a lone minus sign', () => {
+    expect(sanitized('-')).toBe('')
+  })
+
+  it('throws away a half-typed exponent', () => {
+    expect(sanitized('1e')).toBe('')
+  })
+
+  it('keeps values that are already valid', () => {
+    expect(sanitized('12.5')).toBe('12.5')
+    expect(sanitized('-3')).toBe('-3')
+    expect(sanitized('1e3')).toBe('1e3')
+  })
+})
+
+describe('getCellEditorInputType', () => {
+  it('does NOT hand the number editor a type=number input', () => {
+    // The whole point: a text input keeps the raw keystrokes, and the value is
+    // coerced at commit by parseEditorValue - which the editor already did.
+    expect(getCellEditorInputType('number')).toBe('text')
+  })
+
+  it('leaves every other editor on its native input type', () => {
+    for (const t of ['text', 'date', 'datetime', 'time', 'password', 'color'] as const) {
+      expect(getCellEditorInputType(t), t).toBe(getEditorInputType(t))
+    }
+  })
+
+  it('does not change the FILTER inputs, which share the other helper', () => {
+    // The filter row and filter menu still ask getEditorInputType. They have
+    // the same defect, but changing them is a separate decision - this pins
+    // that they were not swept along by accident.
+    expect(getEditorInputType('number')).toBe('number')
+  })
+})
+
+describe('isNumericEditorInput', () => {
+  it('accepts every state on the way to a number', () => {
+    // Rejecting these is the exact bug this replaces.
+    for (const v of ['', '-', '12', '12.', '12.5', '-3', '.5', '1e', '1e3', '1e-3']) {
+      expect(isNumericEditorInput(v), JSON.stringify(v)).toBe(true)
+    }
+  })
+
+  it('rejects what can never become a number', () => {
+    // The guarantee type="number" used to provide, now that it is gone.
+    for (const v of ['abc', '12x', '12..5', '--3', '1 2', '12,5']) {
+      expect(isNumericEditorInput(v), JSON.stringify(v)).toBe(false)
+    }
+  })
+})

package/src/number-editor.grid.test.ts

@@ -0,0 +1,160 @@
+/**
+ * End-to-end: typing a decimal into an `editorType: 'number'` cell keeps every
+ * keystroke, and the value still commits as a NUMBER.
+ *
+ * The unit half of this lives in `number-editor-literal.test.ts` - the browser
+ * sanitization that caused it, and the helpers that route around it. This
+ * drives the real editor, which is what actually regressed for users: typing
+ * "12.5" produced 125, because the "." was dropped and the digits ran together.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import { createCoreRowModel, tableFeatures } from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; label: string; amount: number }
+const features = tableFeatures({})
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'label', header: 'Label', width: 160 },
+  { field: 'amount', header: 'Amount', width: 140, editorType: 'number' },
+]
+
+function mountGrid() {
+  return new Promise<{
+    api: SvGridApi<typeof features, Row>
+    target: HTMLElement
+    changes: Array<{ newValue: unknown }>
+    destroy: () => void
+  }>((res, rej) => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const changes: Array<{ newValue: unknown }> = []
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: [{ id: 1, label: 'One', amount: 5 }],
+        columns: cols,
+        features,
+        _rowModels: { coreRowModel: createCoreRowModel() },
+        getRowId: (r: Row) => String(r.id),
+        containerHeight: 200,
+        virtualization: false,
+        editable: true,
+        onCellValueChange: (e: { newValue: unknown }) => changes.push(e),
+        onApiReady(api: SvGridApi<typeof features, Row>) {
+          res({ api, target, changes, destroy: () => { unmount(app); target.remove() } })
+        },
+      } as any,
+    })
+    queueMicrotask(() => { if (!target.querySelector('[role="grid"]')) rej(new Error('no grid')) })
+  })
+}
+
+/** Start editing the amount cell and return its input, once the lazy chunk lands. */
+async function editAmount(api: SvGridApi<typeof features, Row>, target: HTMLElement) {
+  api.startEditing(0, 'amount')
+  await vi.waitFor(() => {
+    expect(target.querySelector('.sv-grid-cell-editing input')).not.toBeNull()
+  })
+  return target.querySelector('.sv-grid-cell-editing input') as HTMLInputElement
+}
+
+/** Type `text` one character at a time, as a user does. */
+function typeInto(input: HTMLInputElement, text: string) {
+  let sofar = ''
+  for (const ch of text) {
+    sofar += ch
+    input.value = sofar
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    // Read back what survived - the element may have rewritten it.
+    sofar = input.value
+  }
+  return input.value
+}
+
+describe('number editor - decimals survive being typed', () => {
+  it('keeps the trailing decimal point mid-entry', async () => {
+    const { api, target, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      // The bug: with type="number" this read back "" and the dot was gone.
+      expect(typeInto(input, '12.')).toBe('12.')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('commits 12.5 as the number 12.5, not 125', async () => {
+    const { api, target, changes, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      typeInto(input, '12.5')
+      input.dispatchEvent(new Event('blur', { bubbles: true }))
+
+      await vi.waitFor(() => expect(changes.length).toBeGreaterThan(0))
+      expect(changes.at(-1)!.newValue).toBe(12.5)
+      expect(typeof changes.at(-1)!.newValue).toBe('number')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('keeps a lone minus sign on the way to a negative', async () => {
+    const { api, target, changes, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      expect(typeInto(input, '-')).toBe('-')
+      typeInto(input, '-4.25')
+      input.dispatchEvent(new Event('blur', { bubbles: true }))
+
+      await vi.waitFor(() => expect(changes.length).toBeGreaterThan(0))
+      expect(changes.at(-1)!.newValue).toBe(-4.25)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('carries the mobile decimal keypad hint', async () => {
+    // Losing type="number" also loses the numeric soft keyboard, which is what
+    // inputmode restores.
+    const { api, target, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      expect(input.getAttribute('type')).toBe('text')
+      expect(input.getAttribute('inputmode')).toBe('decimal')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('refuses characters that can never be part of a number', async () => {
+    // type="number" used to block these; a text input does not, so the editor
+    // has to. Without the guard "12x" would reach the commit and coerce to null.
+    const { api, target, destroy } = await mountGrid()
+    try {
+      const input = await editAmount(api, target)
+      typeInto(input, '12')
+      input.value = '12x'
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+      expect(input.value).toBe('12')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('leaves a text column alone', async () => {
+    const { api, target, destroy } = await mountGrid()
+    try {
+      api.startEditing(0, 'label')
+      await vi.waitFor(() => {
+        expect(target.querySelector('.sv-grid-cell-editing input')).not.toBeNull()
+      })
+      const input = target.querySelector('.sv-grid-cell-editing input') as HTMLInputElement
+      expect(input.getAttribute('inputmode')).toBeNull()
+      expect(typeInto(input, 'hello.')).toBe('hello.')
+    } finally {
+      destroy()
+    }
+  })
+})

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')
+  })
+})

package/src/sanitize-html.ts

@@ -0,0 +1,235 @@
+/**
+ * sanitize-html - a dependency-free HTML sanitizer and a small Markdown
+ * renderer, sized for what a grid cell needs to display.
+ *
+ * A rich-text cell has to paint markup that came from a user, which is the one
+ * place a data grid can hand an attacker script execution. Everything rendered
+ * through `SvRichCell` goes through `sanitizeHtml` first, and the allowlist is
+ * deliberately narrower than a general-purpose sanitizer: it covers the tags
+ * `SvRichText` can produce, plus links and images.
+ *
+ * The parse uses the platform parser where there is one (`DOMParser`, which
+ * neither executes scripts nor runs loaders on a detached document) and a
+ * conservative regex stripper during SSR, where there is no DOM. The SSR path
+ * is stricter by design: when in doubt it drops markup rather than passing it
+ * through, and the hydrated client re-sanitizes with the real parser anyway.
+ *
+ * This is not a general-purpose sanitizer for arbitrary third-party HTML. It is
+ * a narrow allowlist for cell content. To render something outside the
+ * allowlist, extend it explicitly rather than widening the defaults.
+ */
+
+/** Tags that survive sanitization. Everything else is unwrapped or dropped. */
+const ALLOWED_TAGS = new Set([
+  'a', 'b', 'blockquote', 'br', 'code', 'del', 'div', 'em', 'h1', 'h2', 'h3',
+  'h4', 'h5', 'h6', 'i', 'img', 'li', 'mark', 'ol', 'p', 'pre', 's', 'small',
+  'span', 'strong', 'sub', 'sup', 'u', 'ul',
+])
+
+/** Tags whose whole subtree is removed rather than unwrapped. What sits inside
+ *  a <script> or <style> is code, so keeping its text would be worse than
+ *  losing it. */
+const DROP_SUBTREE = new Set([
+  'script', 'style', 'iframe', 'object', 'embed', 'noscript', 'template',
+  'svg', 'math', 'form', 'input', 'button', 'textarea', 'select', 'link',
+  'meta', 'base', 'title', 'head',
+])
+
+/** Attributes allowed per tag. `*` applies to every allowed tag. A `style`
+ *  attribute is never allowed: it is the classic sanitizer hole (url(...)
+ *  payloads, position tricks that let a cell cover the page chrome), and cell
+ *  styling belongs to the column rather than to the data. */
+const ALLOWED_ATTRS: Record<string, Set<string>> = {
+  '*': new Set(['class', 'dir', 'lang', 'title']),
+  a: new Set(['href', 'target', 'rel']),
+  img: new Set(['src', 'alt', 'width', 'height']),
+  ol: new Set(['start']),
+}
+
+/** URL schemes a href/src may use. Anything else, `javascript:` and
+ *  `vbscript:` included, is dropped. `data:` is allowed only on an image src
+ *  and only for image media types, because `data:text/html` is a script
+ *  vector. */
+const SAFE_URL = /^(?:https?:|mailto:|tel:|\/|\.\/|\.\.\/|#)/i
+const SAFE_IMG_DATA_URL = /^data:image\/(?:png|jpe?g|gif|webp|avif);base64,[a-z0-9+/=]*$/i
+
+function isSafeUrl(value: string, tag: string, attr: string): boolean {
+  // Strip control characters and whitespace first: "java\tscript:" and
+  // "java\nscript:" are both read as javascript: by browsers.
+  // Matching control characters is the whole point here, hence the disable.
+  // eslint-disable-next-line no-control-regex
+  const url = value.replace(/[\u0000-\u0020\u007f]/g, '')
+  if (tag === 'img' && attr === 'src' && SAFE_IMG_DATA_URL.test(url)) return true
+  return SAFE_URL.test(url)
+}
+
+function attrAllowed(tag: string, attr: string): boolean {
+  if (attr.startsWith('on')) return false // every event handler, in one rule
+  if (ALLOWED_ATTRS['*']!.has(attr)) return true
+  return ALLOWED_ATTRS[tag]?.has(attr) ?? false
+}
+
+/** DOM path: walk the parsed tree and strip anything off the allowlist. */
+function sanitizeWithDom(html: string): string {
+  const doc = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html')
+  const walk = (node: Element): void => {
+    // Snapshot the child list: the loop mutates it as it unwraps and removes.
+    for (const child of [...node.children]) {
+      const tag = child.tagName.toLowerCase()
+      if (DROP_SUBTREE.has(tag)) {
+        child.remove()
+        continue
+      }
+      if (!ALLOWED_TAGS.has(tag)) {
+        // Unwrap rather than drop, so an unknown wrapper does not cost the user
+        // the text inside it.
+        walk(child)
+        child.replaceWith(...child.childNodes)
+        continue
+      }
+      for (const attr of [...child.attributes]) {
+        const name = attr.name.toLowerCase()
+        if (!attrAllowed(tag, name)) {
+          child.removeAttribute(attr.name)
+          continue
+        }
+        if ((name === 'href' || name === 'src') && !isSafeUrl(attr.value, tag, name)) {
+          child.removeAttribute(attr.name)
+        }
+      }
+      // A link that opens a new tab gets rel="noopener", so the opened page
+      // cannot reach back through window.opener.
+      if (tag === 'a' && child.getAttribute('target')) {
+        child.setAttribute('rel', 'noopener noreferrer')
+      }
+      walk(child)
+    }
+  }
+  walk(doc.body)
+  return doc.body.innerHTML
+}
+
+/**
+ * SSR path: no DOM, so drop dangerous subtrees outright and keep only
+ * allowlisted tags in their attribute-free form. Stricter than the DOM path on
+ * purpose - the client re-sanitizes on hydration, so the cost is a moment of
+ * plainer markup rather than a hole.
+ */
+function sanitizeWithoutDom(html: string): string {
+  let out = html
+  for (const tag of DROP_SUBTREE) {
+    out = out.replace(new RegExp(`<${tag}\\b[\\s\\S]*?</${tag}\\s*>`, 'gi'), '')
+    out = out.replace(new RegExp(`<${tag}\\b[^>]*/?>`, 'gi'), '')
+  }
+  return out.replace(/<\/?([a-z0-9-]+)([^>]*)>/gi, (match, rawTag: string, attrs: string) => {
+    const tag = rawTag.toLowerCase()
+    if (!ALLOWED_TAGS.has(tag)) return ''
+    if (match.startsWith('</')) return `</${tag}>`
+    return attrs.trim() ? `<${tag}>` : match
+  })
+}
+
+/**
+ * Return `html` with everything outside the allowlist removed. Idempotent, so
+ * it is safe to call on already-sanitized markup.
+ */
+export function sanitizeHtml(html: string | null | undefined): string {
+  const input = String(html ?? '')
+  if (!input) return ''
+  if (!input.includes('<')) return input // no angle bracket, no markup to strip
+  return typeof DOMParser === 'undefined' ? sanitizeWithoutDom(input) : sanitizeWithDom(input)
+}
+
+/** Escape text so it embeds in HTML as literal characters. */
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+/** A sentinel that cannot occur in escaped input, used to park inline-code
+ *  spans while the emphasis and link passes run over the rest. */
+const MARK = '\u0000'
+
+/** Inline Markdown. Code is extracted first so backticks protect their
+ *  contents from the emphasis and link passes. */
+function renderInline(text: string): string {
+  const code: string[] = []
+  let out = escapeHtml(text).replace(/`([^`]+)`/g, (_m, c: string) => {
+    code.push(c)
+    return `${MARK}${code.length - 1}${MARK}`
+  })
+  out = out
+    .replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, '<img src="$2" alt="$1">')
+    .replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, '<a href="$2">$1</a>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/(^|[^*])\*([^*]+)\*/g, '$1<em>$2</em>')
+    .replace(/~~([^~]+)~~/g, '<del>$1</del>')
+  return out.replace(new RegExp(`${MARK}(\\d+)${MARK}`, 'g'), (_m, i: string) => `<code>${code[Number(i)]}</code>`)
+}
+
+/**
+ * Render a common Markdown subset to HTML: headings, bold, italic,
+ * strikethrough, inline code, links, images, and bullet / ordered lists.
+ *
+ * Deliberately not a full CommonMark implementation - a grid cell shows a line
+ * or two, and a complete parser is a dependency this package does not take. The
+ * output is sanitized, so a Markdown link cannot smuggle `javascript:`.
+ */
+export function renderMarkdown(markdown: string | null | undefined): string {
+  const src = String(markdown ?? '')
+  if (!src) return ''
+  const out: string[] = []
+  let list: 'ul' | 'ol' | null = null
+  const closeList = () => {
+    if (list) out.push(`</${list}>`)
+    list = null
+  }
+  for (const line of src.split(/\r?\n/)) {
+    const heading = line.match(/^(#{1,6})\s+(.*)$/)
+    const bullet = line.match(/^\s*[-*+]\s+(.*)$/)
+    const ordered = line.match(/^\s*\d+[.)]\s+(.*)$/)
+    if (heading) {
+      closeList()
+      const level = heading[1]!.length
+      out.push(`<h${level}>${renderInline(heading[2]!)}</h${level}>`)
+    } else if (bullet || ordered) {
+      const want = bullet ? 'ul' : 'ol'
+      if (list !== want) {
+        closeList()
+        out.push(`<${want}>`)
+        list = want
+      }
+      out.push(`<li>${renderInline((bullet ?? ordered)![1]!)}</li>`)
+    } else if (!line.trim()) {
+      closeList()
+    } else {
+      closeList()
+      out.push(`<p>${renderInline(line)}</p>`)
+    }
+  }
+  closeList()
+  return sanitizeHtml(out.join(''))
+}
+
+/** Strip markup down to readable text, for exports, aria labels and tooltips
+ *  where a cell's HTML has to collapse to one plain string. */
+export function htmlToText(html: string | null | undefined): string {
+  const clean = sanitizeHtml(html)
+  if (!clean) return ''
+  const spaced = clean
+    .replace(/<\/(p|div|h[1-6]|li|blockquote|pre)>/gi, ' ')
+    .replace(/<br\s*\/?>/gi, ' ')
+  return spaced
+    .replace(/<[^>]*>/g, '')
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/&lt;/gi, '<')
+    .replace(/&gt;/gi, '>')
+    .replace(/&quot;/gi, '"')
+    .replace(/&#39;/gi, "'")
+    .replace(/&amp;/gi, '&')
+    .replace(/\s+/g, ' ')
+    .trim()
+}