@svgrid/grid 2.6.21 → 2.7.0

package/src/builtin-editors.grid.test.ts

@@ -1,83 +1,83 @@
-/**
- * End-to-end: after registerBuiltinEditors(), a column with editorType 'duration'
- * mounts SvDurationInput in the editing cell (proving the built-in registration +
- * the SvGrid registry wiring together).
- */
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGrid from './SvGrid.svelte'
-import {
-  registerBuiltinEditors,
-  unregisterCellEditor,
-  registeredCellEditorTypes,
-  createCoreRowModel,
-  createFilteredRowModel,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  sortFns,
-  tableFeatures,
-  columnFilteringFeature,
-  rowSortingFeature,
-} from './index'
-import type { ColumnDef, SvGridApi } from './index'
-
-type Row = { id: number; task: string; estimate: number }
-
-const features = tableFeatures({ columnFilteringFeature, rowSortingFeature })
-const rows: Row[] = [
-  { id: 1, task: 'Design', estimate: 90 },
-  { id: 2, task: 'Build', estimate: 240 },
-]
-const cols: ColumnDef<typeof features, Row>[] = [
-  { field: 'task', header: 'Task', width: 200, editorType: 'text' },
-  { field: 'estimate', header: 'Estimate', width: 160, editorType: 'duration' },
-]
-
-
-function mountGrid() {
-  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>(
-    (res) => {
-      const target = document.createElement('div')
-      document.body.appendChild(target)
-      const app = mount(SvGrid, {
-        target,
-        props: {
-          data: rows,
-          columns: cols,
-          features,
-          _rowModels: {
-            coreRowModel: createCoreRowModel(),
-            filteredRowModel: createFilteredRowModel(),
-            sortedRowModel: createSortedRowModel(sortFns),
-            paginatedRowModel: createPaginatedRowModel(),
-          },
-          rowHeight: 36,
-          containerHeight: 300,
-          virtualization: false,
-          enableInlineEditing: true,
-          onApiReady(api: SvGridApi<typeof features, Row>) {
-            res({ api, target, destroy: () => { unmount(app); target.remove() } })
-          },
-        } as any,
-      })
-    },
-  )
-}
-
-afterEach(() => {
-  for (const t of registeredCellEditorTypes()) unregisterCellEditor(t)
-})
-
-describe('registerBuiltinEditors in SvGrid', () => {
-  it("mounts SvDurationInput for an editorType 'duration' cell", async () => {
-    registerBuiltinEditors()
-    const { api, target, destroy } = await mountGrid()
-    try {
-      api.startEditing(0, 'estimate')
-      // SvGridCellEditor is a lazy chunk; poll instead of fixing a tick count.
-      await vi.waitFor(() => expect(target.querySelector('.sv-dur__input')).not.toBeNull())
-    } finally {
-      destroy()
-    }
-  })
-})
+/**
+ * End-to-end: after registerBuiltinEditors(), a column with editorType 'duration'
+ * mounts SvDurationInput in the editing cell (proving the built-in registration +
+ * the SvGrid registry wiring together).
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  registerBuiltinEditors,
+  unregisterCellEditor,
+  registeredCellEditorTypes,
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  columnFilteringFeature,
+  rowSortingFeature,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; task: string; estimate: number }
+
+const features = tableFeatures({ columnFilteringFeature, rowSortingFeature })
+const rows: Row[] = [
+  { id: 1, task: 'Design', estimate: 90 },
+  { id: 2, task: 'Build', estimate: 240 },
+]
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'task', header: 'Task', width: 200, editorType: 'text' },
+  { field: 'estimate', header: 'Estimate', width: 160, editorType: 'duration' },
+]
+
+
+function mountGrid() {
+  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>(
+    (res) => {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGrid, {
+        target,
+        props: {
+          data: rows,
+          columns: cols,
+          features,
+          _rowModels: {
+            coreRowModel: createCoreRowModel(),
+            filteredRowModel: createFilteredRowModel(),
+            sortedRowModel: createSortedRowModel(sortFns),
+            paginatedRowModel: createPaginatedRowModel(),
+          },
+          rowHeight: 36,
+          containerHeight: 300,
+          virtualization: false,
+          enableInlineEditing: true,
+          onApiReady(api: SvGridApi<typeof features, Row>) {
+            res({ api, target, destroy: () => { unmount(app); target.remove() } })
+          },
+        } as any,
+      })
+    },
+  )
+}
+
+afterEach(() => {
+  for (const t of registeredCellEditorTypes()) unregisterCellEditor(t)
+})
+
+describe('registerBuiltinEditors in SvGrid', () => {
+  it("mounts SvDurationInput for an editorType 'duration' cell", async () => {
+    registerBuiltinEditors()
+    const { api, target, destroy } = await mountGrid()
+    try {
+      api.startEditing(0, 'estimate')
+      // SvGridCellEditor is a lazy chunk; poll instead of fixing a tick count.
+      await vi.waitFor(() => expect(target.querySelector('.sv-dur__input')).not.toBeNull())
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/builtin-editors.test.ts

@@ -30,9 +30,26 @@ afterEach(() => {
 describe('registerBuiltinEditors', () => {
   it('registers the config-free editor types', () => {
     const types = registerBuiltinEditors()
-    expect(types).toEqual(['otp', 'duration'])
+    expect(types).toEqual(['otp', 'duration', 'richtext'])
     expect(hasCellEditor('otp')).toBe(true)
     expect(hasCellEditor('duration')).toBe(true)
+    expect(hasCellEditor('richtext')).toBe(true)
+  })
+
+  it('sanitizes the rich-text value on the way in and on the way out', () => {
+    registerBuiltinEditors()
+    const onChange = vi.fn()
+    // Markup already sitting in the row data is cleaned before the editor sees
+    // it, so opening a poisoned cell cannot execute anything either.
+    const props = resolveEditorProps(
+      getCellEditor('richtext')!,
+      ctx({ value: '<p onclick="alert(1)">hi</p><script>alert(2)</script>', onChange }),
+    )
+    expect(props.value).toBe('<p>hi</p>')
+    ;(props.onChange as (v: string) => void)('<b>ok</b><img src=x onerror="alert(3)">')
+    const stored = onChange.mock.calls[0]![0] as string
+    expect(stored).toContain('<b>ok</b>')
+    expect(stored).not.toContain('onerror')
   })
 
   it("maps the OTP editor's onComplete to commit", () => {

package/src/builtin-editors.ts

@@ -25,10 +25,12 @@
 import { registerCellEditor } from './editor-registry'
 import SvOtpInput from './SvOtpInput.svelte'
 import SvDurationInput from './SvDurationInput.svelte'
+import SvRichText from './SvRichText.svelte'
+import { sanitizeHtml } from './sanitize-html'
 
 /**
- * Register the config-free UI-kit editors (`otp`, `duration`) as grid cell
- * editors. Idempotent. Returns the list of type names it registered.
+ * Register the config-free UI-kit editors (`otp`, `duration`, `richtext`) as
+ * grid cell editors. Idempotent. Returns the list of type names it registered.
  */
 export function registerBuiltinEditors(): string[] {
   registerCellEditor('otp', {
@@ -52,5 +54,19 @@ export function registerBuiltinEditors(): string[] {
       onCancel: () => ctx.onCancel(),
     }),
   })
-  return ['otp', 'duration']
+  // Rich text carries a toolbar, so give the column a taller row (or edit it
+  // from a detail panel) - it does not fit a default single-line row.
+  //
+  // Both the value handed to the editor and the value coming back are
+  // sanitized. The stored string is the one SvRichCell later paints, so
+  // cleaning it on the way in means a pasted payload never reaches row data.
+  registerCellEditor('richtext', {
+    component: SvRichText,
+    props: (ctx) => ({
+      value: sanitizeHtml((ctx.value ?? '') as string),
+      autofocus: true,
+      onChange: (html: string) => ctx.onChange(sanitizeHtml(html)),
+    }),
+  })
+  return ['otp', 'duration', 'richtext']
 }

package/src/cell-formatting.ts

@@ -1,171 +1,171 @@
-/**
- * Helpers for SvGrid column `format` presets (numbers, currency, percent, date patterns).
- */
-
-/** Map shortcut date patterns to Intl options (merged with caller `options`). */
-export function resolveDatePattern(
-  pattern: string | undefined,
-  kind: 'date' | 'datetime',
-): Intl.DateTimeFormatOptions | undefined {
-  if (!pattern) return undefined
-
-  const p = pattern.trim()
-
-  switch (p) {
-    /** Short numeric local date (no weekday). */
-    case 'd':
-      return kind === 'datetime'
-        ? {
-            year: 'numeric',
-            month: 'numeric',
-            day: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-          }
-        : { year: 'numeric', month: 'numeric', day: 'numeric' }
-    /** Long spelled-out date (+ time if datetime). */
-    case 'D':
-      return kind === 'datetime'
-        ? {
-            weekday: 'long',
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-          }
-        : { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
-    /** ISO-friendly yyyy-mm-dd (with time when datetime). */
-    case 'y-m-d':
-      return kind === 'datetime'
-        ? {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: false,
-          }
-        : { year: 'numeric', month: '2-digit', day: '2-digit' }
-    case 'medium':
-      return { dateStyle: 'medium', timeStyle: kind === 'datetime' ? 'short' : undefined }
-    case 'short':
-      return { dateStyle: 'short', timeStyle: kind === 'datetime' ? 'short' : undefined }
-    case 'long':
-      return { dateStyle: 'long', timeStyle: kind === 'datetime' ? 'short' : undefined }
-    default:
-      return undefined
-  }
-}
-
-type NumericFormatInput = {
-  type: 'number' | 'currency' | 'percent'
-  locales?: string | readonly string[]
-  currency?: string
-  /** When type is percent: treat value as 0–100 instead of Intl’s 0–1 fraction */
-  valueIsPercentPoints?: boolean
-  options?: Intl.NumberFormatOptions
-}
-
-/**
- * `Intl.NumberFormat` is one of the most expensive constructors in the
- * platform - building one per cell on every scroll makes large grids
- * noticeably stutter. Cache instances by config signature (locale + style
- * + currency + options).
- */
-const numberFormatterCache = new Map<string, Intl.NumberFormat>()
-function getNumberFormatter(
-  locales: string | readonly string[] | undefined,
-  options: Intl.NumberFormatOptions,
-): Intl.NumberFormat {
-  // Stable key - for normal column configs the options object is reused
-  // (declared in module scope), so this stringifies a small static shape.
-  const key =
-    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
-    '|' +
-    (options.style ?? '') +
-    '|' +
-    (options.currency ?? '') +
-    '|' +
-    (options.minimumFractionDigits ?? '') +
-    '|' +
-    (options.maximumFractionDigits ?? '') +
-    '|' +
-    (options.useGrouping ?? '') +
-    '|' +
-    (options.currencyDisplay ?? '') +
-    '|' +
-    (options.notation ?? '')
-  let fmt = numberFormatterCache.get(key)
-  if (!fmt) {
-    fmt = new Intl.NumberFormat(locales as string | string[] | undefined, options)
-    numberFormatterCache.set(key, fmt)
-  }
-  return fmt
-}
-
-/** Cache of `Intl.DateTimeFormat` by `(locale, options)` signature. */
-const dateFormatterCache = new Map<string, Intl.DateTimeFormat>()
-/** A cached `Intl.DateTimeFormat` for the locale and options given. Cached because
- *  constructing one per cell is the dominant cost when formatting a date column. */
-export function getDateFormatter(
-  locales: string | readonly string[] | undefined,
-  options: Intl.DateTimeFormatOptions,
-): Intl.DateTimeFormat {
-  const key =
-    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
-    '|' +
-    (options.dateStyle ?? '') +
-    '|' +
-    (options.timeStyle ?? '') +
-    '|' +
-    (options.year ?? '') +
-    '|' +
-    (options.month ?? '') +
-    '|' +
-    (options.day ?? '') +
-    '|' +
-    (options.hour ?? '') +
-    '|' +
-    (options.minute ?? '') +
-    '|' +
-    (options.second ?? '') +
-    '|' +
-    (options.weekday ?? '') +
-    '|' +
-    (options.hour12 ?? '')
-  let fmt = dateFormatterCache.get(key)
-  if (!fmt) {
-    fmt = new Intl.DateTimeFormat(locales as string | string[] | undefined, options)
-    dateFormatterCache.set(key, fmt)
-  }
-  return fmt
-}
-
-/** Format a numeric value for number / currency / percent column formats. */
-export function formatNumericWithConfig(value: unknown, config: NumericFormatInput): string {
-  const n = typeof value === 'number' ? value : Number(value)
-  if (!Number.isFinite(n)) return String(value ?? '')
-
-  const locales = config.locales
-
-  if (config.type === 'currency') {
-    return getNumberFormatter(locales, {
-      style: 'currency',
-      currency: config.currency ?? 'USD',
-      ...config.options,
-    }).format(n)
-  }
-
-  if (config.type === 'percent') {
-    const frac = config.valueIsPercentPoints === true ? n / 100 : n
-    return getNumberFormatter(locales, {
-      style: 'percent',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2,
-      ...config.options,
-    }).format(frac)
-  }
-
-  return getNumberFormatter(locales, config.options ?? {}).format(n)
-}
+/**
+ * Helpers for SvGrid column `format` presets (numbers, currency, percent, date patterns).
+ */
+
+/** Map shortcut date patterns to Intl options (merged with caller `options`). */
+export function resolveDatePattern(
+  pattern: string | undefined,
+  kind: 'date' | 'datetime',
+): Intl.DateTimeFormatOptions | undefined {
+  if (!pattern) return undefined
+
+  const p = pattern.trim()
+
+  switch (p) {
+    /** Short numeric local date (no weekday). */
+    case 'd':
+      return kind === 'datetime'
+        ? {
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+          }
+        : { year: 'numeric', month: 'numeric', day: 'numeric' }
+    /** Long spelled-out date (+ time if datetime). */
+    case 'D':
+      return kind === 'datetime'
+        ? {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+          }
+        : { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+    /** ISO-friendly yyyy-mm-dd (with time when datetime). */
+    case 'y-m-d':
+      return kind === 'datetime'
+        ? {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+          }
+        : { year: 'numeric', month: '2-digit', day: '2-digit' }
+    case 'medium':
+      return { dateStyle: 'medium', timeStyle: kind === 'datetime' ? 'short' : undefined }
+    case 'short':
+      return { dateStyle: 'short', timeStyle: kind === 'datetime' ? 'short' : undefined }
+    case 'long':
+      return { dateStyle: 'long', timeStyle: kind === 'datetime' ? 'short' : undefined }
+    default:
+      return undefined
+  }
+}
+
+type NumericFormatInput = {
+  type: 'number' | 'currency' | 'percent'
+  locales?: string | readonly string[]
+  currency?: string
+  /** When type is percent: treat value as 0–100 instead of Intl’s 0–1 fraction */
+  valueIsPercentPoints?: boolean
+  options?: Intl.NumberFormatOptions
+}
+
+/**
+ * `Intl.NumberFormat` is one of the most expensive constructors in the
+ * platform - building one per cell on every scroll makes large grids
+ * noticeably stutter. Cache instances by config signature (locale + style
+ * + currency + options).
+ */
+const numberFormatterCache = new Map<string, Intl.NumberFormat>()
+function getNumberFormatter(
+  locales: string | readonly string[] | undefined,
+  options: Intl.NumberFormatOptions,
+): Intl.NumberFormat {
+  // Stable key - for normal column configs the options object is reused
+  // (declared in module scope), so this stringifies a small static shape.
+  const key =
+    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
+    '|' +
+    (options.style ?? '') +
+    '|' +
+    (options.currency ?? '') +
+    '|' +
+    (options.minimumFractionDigits ?? '') +
+    '|' +
+    (options.maximumFractionDigits ?? '') +
+    '|' +
+    (options.useGrouping ?? '') +
+    '|' +
+    (options.currencyDisplay ?? '') +
+    '|' +
+    (options.notation ?? '')
+  let fmt = numberFormatterCache.get(key)
+  if (!fmt) {
+    fmt = new Intl.NumberFormat(locales as string | string[] | undefined, options)
+    numberFormatterCache.set(key, fmt)
+  }
+  return fmt
+}
+
+/** Cache of `Intl.DateTimeFormat` by `(locale, options)` signature. */
+const dateFormatterCache = new Map<string, Intl.DateTimeFormat>()
+/** A cached `Intl.DateTimeFormat` for the locale and options given. Cached because
+ *  constructing one per cell is the dominant cost when formatting a date column. */
+export function getDateFormatter(
+  locales: string | readonly string[] | undefined,
+  options: Intl.DateTimeFormatOptions,
+): Intl.DateTimeFormat {
+  const key =
+    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
+    '|' +
+    (options.dateStyle ?? '') +
+    '|' +
+    (options.timeStyle ?? '') +
+    '|' +
+    (options.year ?? '') +
+    '|' +
+    (options.month ?? '') +
+    '|' +
+    (options.day ?? '') +
+    '|' +
+    (options.hour ?? '') +
+    '|' +
+    (options.minute ?? '') +
+    '|' +
+    (options.second ?? '') +
+    '|' +
+    (options.weekday ?? '') +
+    '|' +
+    (options.hour12 ?? '')
+  let fmt = dateFormatterCache.get(key)
+  if (!fmt) {
+    fmt = new Intl.DateTimeFormat(locales as string | string[] | undefined, options)
+    dateFormatterCache.set(key, fmt)
+  }
+  return fmt
+}
+
+/** Format a numeric value for number / currency / percent column formats. */
+export function formatNumericWithConfig(value: unknown, config: NumericFormatInput): string {
+  const n = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(n)) return String(value ?? '')
+
+  const locales = config.locales
+
+  if (config.type === 'currency') {
+    return getNumberFormatter(locales, {
+      style: 'currency',
+      currency: config.currency ?? 'USD',
+      ...config.options,
+    }).format(n)
+  }
+
+  if (config.type === 'percent') {
+    const frac = config.valueIsPercentPoints === true ? n / 100 : n
+    return getNumberFormatter(locales, {
+      style: 'percent',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+      ...config.options,
+    }).format(frac)
+  }
+
+  return getNumberFormatter(locales, config.options ?? {}).format(n)
+}