@payload-onpage/react 0.0.0-stage → 0.1.0

package/src/editors/useDebouncedSearch.ts

@@ -0,0 +1,54 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+/**
+ * Run `search(query, page)` 250ms after the inputs settle; results accumulate
+ * across pages and reset when the query changes. Stale responses are ignored.
+ */
+export function useDebouncedSearch<T>(
+  search: ((query: string, page: number) => Promise<{ items: T[]; hasMore: boolean }>) | null,
+  deps: unknown[],
+) {
+  const [query, setQuery] = useState('')
+  const [page, setPage] = useState(1)
+  const [items, setItems] = useState<T[]>([])
+  const [hasMore, setHasMore] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!search) return
+    let live = true
+    const timer = setTimeout(() => {
+      setBusy(true)
+      search(query, page)
+        .then((res) => {
+          if (!live) return
+          setItems((prev) => (page === 1 ? res.items : [...prev, ...res.items]))
+          setHasMore(res.hasMore)
+          setError(null)
+        })
+        .catch((e: unknown) => live && setError(e instanceof Error ? e.message : String(e)))
+        .finally(() => live && setBusy(false))
+    }, 250)
+    return () => {
+      live = false
+      clearTimeout(timer)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [search, query, page, ...deps])
+
+  return {
+    query,
+    setQuery: (q: string) => {
+      setQuery(q)
+      setPage(1)
+    },
+    items,
+    hasMore,
+    more: () => setPage((p) => p + 1),
+    busy,
+    error,
+  }
+}

package/src/hub.ts

@@ -0,0 +1,32 @@
+/**
+ * The editor hub: a module-level store holding the mounted editor, so
+ * components anywhere on the page (client-mode documents, custom UI) can reach
+ * it without being rendered inside it. That keeps `<OnPage />` a sibling in the
+ * layout, not a wrapper. Kept on `globalThis` so two copies of the package
+ * (a bundling mistake) still share one editor.
+ */
+import type { OnPageContextValue } from './types.ts'
+
+interface Hub {
+  current: OnPageContextValue | null
+  listeners: Set<() => void>
+}
+
+const KEY = Symbol.for('payload-onpage.hub')
+const store: Hub = ((globalThis as Record<symbol, Hub | undefined>)[KEY] ??= {
+  current: null,
+  listeners: new Set(),
+})
+
+export const hub = {
+  get: (): OnPageContextValue | null => store.current,
+  set: (value: OnPageContextValue | null): void => {
+    if (value === store.current) return
+    store.current = value
+    for (const fn of store.listeners) fn()
+  },
+  subscribe: (fn: () => void): (() => void) => {
+    store.listeners.add(fn)
+    return () => store.listeners.delete(fn)
+  },
+}

package/src/index.ts

@@ -0,0 +1,55 @@
+/**
+ * @payload-onpage/react — the on-page editor UI.
+ *
+ *   <OnPageEditor dataSource={payloadRest()} media={payloadUploads()} links={{ exit: '/api/onpage/exit' }} />
+ *
+ * Framework adapters (e.g. @payload-onpage/next) mount it for you. Building a
+ * field editor? See `@payload-onpage/react/editor-kit`.
+ */
+export { OnPageEditor, type OnPageEditorProps } from './editor/OnPageEditor.tsx'
+export { OnPageClient, type OnPageClientProps } from './OnPageClient.tsx'
+export {
+  PreviewToolbar,
+  inPreviewFrame,
+  FRAME_PARAM,
+  type PreviewToolbarProps,
+} from './ui/PreviewToolbar.tsx'
+export { useOnPage, useOnPageOptional } from './context.tsx'
+export type {
+  EditorRegistry,
+  FieldEditorDef,
+  FieldEditorProps,
+  Links,
+  OnPageContextValue,
+  TargetIndex,
+} from './types.ts'
+export {
+  defaultEditors,
+  CheckboxEditor,
+  ColorEditor,
+  DateEditor,
+  InlineText,
+  NumberEditor,
+  RelationshipEditor,
+  SelectEditor,
+  UploadEditor,
+} from './editors/index.ts'
+export { resolveEditor, mergeEditors } from './registry.ts'
+export { annotations, stega, composite, rowPrefixes } from './locators.ts'
+export {
+  editable,
+  editableOff,
+  p,
+  ATTR,
+  type Editable,
+  type EditableTarget,
+  type FieldKind,
+} from './annotations.ts'
+export { clientState, fullReload } from './renderers.ts'
+export {
+  defaultMessages,
+  createTranslate,
+  type Messages,
+  type MessageKey,
+  type Translate,
+} from './messages.ts'

package/src/layout.ts

@@ -0,0 +1,83 @@
+'use client'
+
+/**
+ * Layout change notifications for everything drawn over the page. Event
+ * driven (capture-phase scroll, resize, ResizeObserver on the document and on
+ * tracked elements), batched to one callback per animation frame: no polling.
+ */
+import { useEvent } from './useEvent.ts'
+import { useEffect, useState } from 'react'
+
+const listeners = new Set<() => void>()
+let frame = 0
+let observer: ResizeObserver | undefined
+
+function emit() {
+  if (frame) return
+  frame = requestAnimationFrame(() => {
+    frame = 0
+    for (const fn of listeners) fn()
+  })
+}
+
+function install() {
+  window.addEventListener('scroll', emit, { capture: true, passive: true })
+  window.addEventListener('resize', emit, { passive: true })
+  observer = new ResizeObserver(emit)
+  observer.observe(document.documentElement)
+}
+
+function uninstall() {
+  window.removeEventListener('scroll', emit, { capture: true })
+  window.removeEventListener('resize', emit)
+  observer?.disconnect()
+  observer = undefined
+  if (frame) cancelAnimationFrame(frame)
+  frame = 0
+}
+
+/** Run `fn` (batched per frame) whenever the page may have moved. Returns an unsubscribe. */
+export function onLayoutChange(fn: () => void): () => void {
+  if (!listeners.size) install()
+  listeners.add(fn)
+  return () => {
+    listeners.delete(fn)
+    if (!listeners.size) uninstall()
+  }
+}
+
+/** Tell overlays to re-measure (after the editor changed the page itself). */
+export const notifyLayout = (): void => {
+  if (listeners.size) emit()
+}
+
+/** Re-render on layout changes. */
+export function useLayoutTick(): number {
+  const [tick, setTick] = useState(0)
+  useEffect(() => onLayoutChange(() => setTick((t) => t + 1)), [])
+  return tick
+}
+
+/**
+ * Call `fn(el)` now and whenever `el` may have moved or resized (page layout
+ * changes, or the element itself resizing, e.g. live re-render while typing).
+ */
+export function useTrackElement(getElement: () => Element | null, fn: (el: Element) => void): void {
+  const run = useEvent(() => {
+    const el = getElement()
+    if (el) fn(el)
+  })
+  useEffect(() => {
+    run()
+    const off = onLayoutChange(run)
+    const el = getElement()
+    const ro = el ? new ResizeObserver(() => run()) : undefined
+    if (el) ro!.observe(el)
+    return () => {
+      off()
+      ro?.disconnect()
+    }
+    // getElement identity may change per render; tracking follows the element via run().
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}

package/src/locators.ts

@@ -0,0 +1,210 @@
+/**
+ * Locators — the Locator port's default adapters. Each scans the DOM and
+ * returns targets: { el, ref, path, kind }.
+ *
+ *   annotations()  data-onpage-* attributes (precise, opt-in)
+ *   stega()        invisible markers in text and <img alt> (automatic), plus
+ *                  inferred rows and lists for array/blocks content
+ *   composite()    merge several; earlier locators win for the same element+path
+ */
+import {
+  parseRefKey,
+  targetKey,
+  stegaDecode,
+  type DocRef,
+  type Locator,
+  type Target,
+  type TargetKind,
+} from '@payload-onpage/core'
+import { ATTR } from './annotations.ts'
+import { UI } from './dom.ts'
+
+export function annotations(): Locator {
+  return {
+    name: 'annotations',
+    scan(root) {
+      const out: Target[] = []
+      root.querySelectorAll(`[${ATTR.ref}]`).forEach((el) => {
+        const ref = parseRefKey(el.getAttribute(ATTR.ref) ?? '')
+        if (!ref) return
+        const label = el.getAttribute(ATTR.label) ?? undefined
+        const field = el.getAttribute(ATTR.field)
+        if (field)
+          out.push({
+            el,
+            ref,
+            path: field,
+            kind: (el.getAttribute(ATTR.kind) as TargetKind) || 'field',
+            label,
+            source: 'annotation',
+          })
+        const row = el.getAttribute(ATTR.row)
+        if (row) out.push({ el, ref, path: row, kind: 'item', label, source: 'annotation' })
+        const list = el.getAttribute(ATTR.list)
+        if (list) out.push({ el, ref, path: list, kind: 'list', label, source: 'annotation' })
+      })
+      return out
+    },
+  }
+}
+
+const SKIP_TAGS = new Set(['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEMPLATE', 'TEXTAREA', 'TITLE'])
+
+/** Lowest common ancestor of a set of elements. */
+function commonAncestor(els: Element[]): Element | null {
+  if (!els.length) return null
+  let anc: Element | null = els[0]
+  for (const el of els.slice(1)) {
+    while (anc && !anc.contains(el)) anc = anc.parentElement
+    if (!anc) return null
+  }
+  return anc
+}
+
+/** "layout.2.items.0.title" → ["layout.2", "layout.2.items.0"] (row paths, outermost first). */
+export function rowPrefixes(path: string): string[] {
+  const segs = path.split('.')
+  const out: string[] = []
+  for (let i = 1; i < segs.length; i++)
+    if (/^\d+$/.test(segs[i]) && i < segs.length - 1) out.push(segs.slice(0, i + 1).join('.'))
+  return out
+}
+
+export function stega(opts: { inferRows?: boolean } = {}): Locator {
+  const inferRows = opts.inferRows ?? true
+  return {
+    name: 'stega',
+    scan(root) {
+      const fields: Target[] = []
+      const seen = new Set<string>()
+      const ids = new WeakMap<Element, number>()
+      let nextId = 0
+      const add = (el: Element, ref: DocRef, path: string, kind: TargetKind) => {
+        let id = ids.get(el)
+        if (id === undefined) ids.set(el, (id = nextId++))
+        const k = `${id}|${targetKey(ref, path)}|${kind}`
+        if (seen.has(k)) return // several text nodes of one field in one element
+        seen.add(k)
+        fields.push({ el, ref, path, kind, source: 'stega' })
+      }
+
+      const doc = (root as Node).ownerDocument ?? (root as Document)
+      const walker = doc.createTreeWalker(root, 4 /* NodeFilter.SHOW_TEXT */)
+      for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+        const text = n.nodeValue
+        if (!text || !text.includes('\u2063\u2062')) continue
+        const parent = n.parentElement
+        if (!parent || SKIP_TAGS.has(parent.tagName) || parent.closest(`[${UI}]`)) continue
+        for (const m of stegaDecode(text)) {
+          const ref = parseRefKey(m.ref)
+          if (!ref) continue
+          // Rich text: map the block that holds all of the field's text (resolved below).
+          add(parent, ref, m.path, m.kind === 'richtext' ? 'richtext' : m.kind)
+        }
+      }
+      root.querySelectorAll('img[alt]').forEach((img) => {
+        for (const m of stegaDecode(img.getAttribute('alt') ?? '')) {
+          const ref = parseRefKey(m.ref)
+          if (ref) add(img.closest('picture') ?? img, ref, m.path, 'media')
+        }
+      })
+
+      // Rich text: one target per field = the common ancestor of all its text.
+      const out: Target[] = []
+      const rich = new Map<string, Target[]>()
+      for (const t of fields) {
+        if (t.kind !== 'richtext') {
+          out.push(t)
+          continue
+        }
+        const k = targetKey(t.ref, t.path)
+        rich.set(k, [...(rich.get(k) ?? []), t])
+      }
+      for (const group of rich.values()) {
+        const el = commonAncestor(group.map((t) => t.el))
+        if (el) out.push({ ...group[0], el })
+      }
+
+      if (!inferRows) return out
+
+      // Rows: for each row path, the common ancestor of its fields — accepted
+      // only if it doesn't also contain a sibling row's fields.
+      // Precompute, for every ancestor of a field, the field keys under it (one pass).
+      const under = new Map<Element, string[]>()
+      for (const t of out) {
+        const key = targetKey(t.ref, t.path)
+        for (let el: Element | null = t.el; el && el !== root; el = el.parentElement) {
+          const list = under.get(el)
+          if (list) list.push(key)
+          else under.set(el, [key])
+        }
+      }
+      const byRow = new Map<string, { ref: DocRef; path: string; els: Element[] }>()
+      for (const t of out) {
+        for (const row of rowPrefixes(t.path)) {
+          const k = targetKey(t.ref, row)
+          const entry = byRow.get(k) ?? { ref: t.ref, path: row, els: [] }
+          entry.els.push(t.el)
+          byRow.set(k, entry)
+        }
+      }
+      const rows: Target[] = []
+      for (const [rowKey, { ref, path, els }] of byRow) {
+        let anc = commonAncestor(els)
+        if (!anc || anc === root) continue
+        const foreignInside = (el: Element) =>
+          (under.get(el) ?? []).some((k) => k !== rowKey && !k.startsWith(`${rowKey}.`))
+        if (foreignInside(anc)) continue // two rows share one element: can't tell them apart
+        // Grow to the row's wrapper: the largest ancestor holding only this row's fields.
+        while (anc.parentElement && anc.parentElement !== root && !foreignInside(anc.parentElement))
+          anc = anc.parentElement
+        rows.push({ el: anc, ref, path, kind: 'item', source: 'stega' })
+      }
+      // Lists: the common ancestor of a list's rows.
+      const byList = new Map<string, { ref: DocRef; path: string; els: Element[] }>()
+      for (const r of [...rows]) {
+        const list = r.path.slice(0, r.path.lastIndexOf('.'))
+        const k = targetKey(r.ref, list)
+        const entry = byList.get(k) ?? { ref: r.ref, path: list, els: [] }
+        entry.els.push(r.el)
+        byList.set(k, entry)
+      }
+      for (const { ref, path, els } of byList.values()) {
+        const anc = els.length > 1 ? commonAncestor(els) : els[0].parentElement
+        if (anc && anc !== root) rows.push({ el: anc, ref, path, kind: 'list', source: 'stega' })
+      }
+      return [...out, ...rows]
+    },
+  }
+}
+
+/** Merge locators; for the same element and path the earlier locator wins. Rows/lists: one element per path, first wins. */
+export function composite(...locators: Locator[]): Locator {
+  return {
+    name: `composite(${locators.map((l) => l.name).join(',')})`,
+    scan(root) {
+      const out: Target[] = []
+      const byPath = new Set<string>()
+      const byElPath = new Set<string>()
+      const elIds = new WeakMap<Element, number>()
+      let next = 0
+      const id = (el: Element) => {
+        let v = elIds.get(el)
+        if (v === undefined) elIds.set(el, (v = next++))
+        return v
+      }
+      for (const loc of locators) {
+        for (const t of loc.scan(root)) {
+          const pathKey = `${targetKey(t.ref, t.path)}|${t.kind}`
+          if ((t.kind === 'item' || t.kind === 'list') && byPath.has(pathKey)) continue
+          const k = `${id(t.el)}|${pathKey}`
+          if (byElPath.has(k)) continue
+          byElPath.add(k)
+          byPath.add(pathKey)
+          out.push(t)
+        }
+      }
+      return out
+    },
+  }
+}

package/src/messages.ts

@@ -0,0 +1,120 @@
+/**
+ * Every string the editor shows, with English defaults. Override any subset
+ * with the `messages` prop (e.g. from your site's translations). `{name}`
+ * placeholders are filled from the variables passed to `t()`.
+ */
+export const defaultMessages = {
+  'dock.label': 'Page editor',
+  'dock.loading': 'Loading editor…',
+  'dock.unavailable': '{doc}: {error}',
+  'dock.nothing': 'Nothing editable on this page',
+  'dock.conflict': '{doc}: changed by someone else',
+  'dock.saving': 'Saving draft…',
+  'dock.updating': 'Updating page…',
+  'dock.saved': 'Draft saved {ago}',
+  'dock.editing': 'Editing draft',
+  'dock.documents': '{count} documents',
+  'dock.localeNotice':
+    'Editing {locale}: text changes apply to this language only; adding, moving or removing sections changes every language.',
+  'dock.reload': 'Reload latest',
+  'dock.retry': 'Retry',
+  'dock.undo': 'Undo',
+  'dock.redo': 'Redo',
+  'dock.preview': 'Preview',
+  'dock.previewHint': 'See the draft without editing tools',
+  'dock.share': 'Share',
+  'dock.shareHint': 'Copy a read-only link to this draft',
+  'dock.discard': 'Discard',
+  'dock.discardConfirm': 'Confirm discard?',
+  'dock.discardHint': 'Throw away draft changes and return to the published content',
+  'dock.admin': 'Admin',
+  'dock.exit': 'Exit',
+  'dock.publish': 'Publish',
+  'dock.publishing': 'Publishing…',
+  'notify.published': 'Published ✓',
+  'notify.nothingToPublish': 'Nothing to publish',
+  'notify.publishFailed': 'Publish failed: {message}',
+  'notify.discarded': 'Draft reset to the published version',
+  'notify.linkCopied': 'Preview link copied — valid until {date}',
+  'notify.linkFailed': "Couldn't create a preview link: {message}",
+  'notify.loading': 'Loading the editor…',
+  'notify.cantEdit': "Can't edit: {message}",
+  'row.moveUp': 'Move up',
+  'row.moveDown': 'Move down',
+  'row.duplicate': 'Duplicate',
+  'row.settings': 'Settings',
+  'row.delete': 'Delete (undo with ⌘Z)',
+  'row.addSection': 'Add section',
+  'row.addFirstSection': 'Add a section',
+  'row.addItem': 'Add {item}',
+  'row.toolbar': '{label} actions',
+  'settings.title': '{label} settings',
+  'settings.close': 'Close settings',
+  'settings.chooseImage': 'Choose image…',
+  'settings.changeImage': 'Change image…',
+  'blocks.title': 'Add section',
+  'common.close': 'Close',
+  'common.apply': 'Apply',
+  'common.clear': 'Clear',
+  'common.remove': 'Remove',
+  'common.none': '—',
+  'common.selected': '{count} selected',
+  'search.placeholder': 'Search…',
+  'search.unsupported': "This data source can't search documents.",
+  'media.search': 'Search images…',
+  'media.upload': 'Upload…',
+  'media.empty': 'No images found.',
+  'media.more': 'Load more',
+  'media.loading': 'Loading…',
+  'inline.label': 'Edit {field}',
+  'preview.label': 'Draft preview',
+  'preview.badge': 'Draft',
+  'preview.shared': 'Shared preview — not published yet',
+  'preview.own': 'Previewing the draft',
+  'preview.phone': 'Phone',
+  'preview.tablet': 'Tablet',
+  'preview.desktop': 'Desktop',
+  'preview.edit': 'Edit',
+  'preview.exit': 'Exit',
+  'preview.viewPublished': 'View published',
+  'rt.toolbar': 'Text formatting',
+  'rt.bold': 'Bold',
+  'rt.italic': 'Italic',
+  'rt.underline': 'Underline',
+  'rt.link': 'Link',
+  'rt.h2': 'Heading 2',
+  'rt.h3': 'Heading 3',
+  'rt.ul': 'Bulleted list',
+  'rt.ol': 'Numbered list',
+  'rt.quote': 'Quote',
+  'rt.done': 'Done',
+  'rt.linkPlaceholder': 'https://… or /page (empty removes the link)',
+  'rt.linkInvalid': 'Use an https://, mailto:, tel: or relative link',
+} as const
+
+export type MessageKey = keyof typeof defaultMessages
+export type Messages = Partial<Record<MessageKey, string>>
+/** Translate a message key (unknown keys are returned as-is, so plain text works too). */
+export type Translate = (
+  key: MessageKey | (string & {}),
+  vars?: Record<string, string | number>,
+) => string
+
+export function createTranslate(overrides: Messages = {}): Translate {
+  const table: Record<string, string> = { ...defaultMessages, ...overrides }
+  return (key, vars) => {
+    const template = table[key] ?? key
+    return vars
+      ? template.replace(/\{(\w+)\}/g, (m, name: string) => (name in vars ? String(vars[name]) : m))
+      : template
+  }
+}
+
+/** "5 seconds ago", "2 minutes ago", in the browser's language. */
+export function relativeTime(ts: number, now = Date.now(), locale?: string): string {
+  const s = Math.round((ts - now) / 1000)
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+  if (Math.abs(s) < 60) return rtf.format(s, 'second')
+  if (Math.abs(s) < 3600) return rtf.format(Math.round(s / 60), 'minute')
+  return rtf.format(Math.round(s / 3600), 'hour')
+}

package/src/registry.ts

@@ -0,0 +1,43 @@
+/**
+ * Field-editor resolution. For a field shown on the page, the editor is:
+ *   1. the field's own choice: admin.custom.onpage.editor ("color", "my-editor")
+ *   2. what the element says it shows: an annotation/marker kind of text,
+ *      textarea, richtext or media
+ *   3. the editor registered for the field's type ("select", "date", "json"…)
+ * No match: the field isn't edited in place (it may still be in the row's
+ * settings panel).
+ */
+import type { SchemaField, TargetKind } from '@payload-onpage/core'
+import type { EditorRegistry } from './types.ts'
+
+const KIND_EDITOR: Partial<Record<TargetKind, string>> = { richtext: 'richText', media: 'upload' }
+const TEXTUAL = new Set(['text', 'textarea', 'email'])
+
+export function resolveEditor(
+  editors: EditorRegistry,
+  field: SchemaField,
+  kind?: TargetKind,
+): string | null {
+  if (field.editor && editors[field.editor]) return field.editor
+  // A marker/annotation saying "text" keeps the field's own textual type (email stays email).
+  if ((kind === 'text' || kind === 'textarea') && TEXTUAL.has(field.type) && editors[field.type])
+    return field.type
+  const byKind = kind ? KIND_EDITOR[kind] : undefined
+  if (byKind && editors[byKind] && (byKind !== 'upload' || field.type === 'upload')) return byKind
+  return editors[field.type] ? field.type : null
+}
+
+/** Merge registries left to right; `null` removes a default. */
+export function mergeEditors(
+  ...regs: Array<Record<string, EditorRegistry[string] | null> | undefined>
+): EditorRegistry {
+  const out: EditorRegistry = {}
+  for (const r of regs) {
+    if (!r) continue
+    for (const [k, v] of Object.entries(r)) {
+      if (v) out[k] = v
+      else delete out[k]
+    }
+  }
+  return out
+}

package/src/renderers.ts

@@ -0,0 +1,15 @@
+/** Framework-free Renderer adapters. Next.js's router.refresh() renderer lives in @payload-onpage/next. */
+import type { Renderer } from '@payload-onpage/core'
+
+/** The page renders from editor state (OnPageClient everywhere): nothing to do after a save. */
+export const clientState = (): Renderer => ({ name: 'client', live: true, afterSave() {} })
+
+/** Reload the whole page after each save. A last resort for frameworks without a soft refresh. */
+export const fullReload = (): Renderer => ({
+  name: 'reload',
+  live: false,
+  afterSave() {
+    window.location.reload()
+    return new Promise(() => {}) // never resolves: the page goes away
+  },
+})

package/src/sanitize.ts

@@ -0,0 +1,52 @@
+/**
+ * Minimal HTML sanitizer for editor-generated markup shown in ghosts (the
+ * stand-in content kept on screen until a server refresh lands). Drops active
+ * elements, event handlers and unsafe URLs.
+ */
+import { safeLinkUrl } from '@payload-onpage/core'
+
+const DROP = new Set([
+  'SCRIPT',
+  'STYLE',
+  'IFRAME',
+  'OBJECT',
+  'EMBED',
+  'LINK',
+  'META',
+  'BASE',
+  'FORM',
+  'INPUT',
+  'TEXTAREA',
+  'BUTTON',
+  'SELECT',
+  'TEMPLATE',
+  'SVG',
+  'MATH',
+])
+const URL_ATTRS = new Set(['href', 'src', 'xlink:href', 'action', 'formaction', 'srcset', 'poster'])
+
+export function sanitizeHtml(html: string): string {
+  const tpl = document.createElement('template')
+  tpl.innerHTML = html
+  const walk = (node: ParentNode) => {
+    for (const el of Array.from(node.children)) {
+      if (DROP.has(el.tagName.toUpperCase())) {
+        el.remove()
+        continue
+      }
+      for (const attr of Array.from(el.attributes)) {
+        const name = attr.name.toLowerCase()
+        if (
+          name.startsWith('on') ||
+          name === 'style' ||
+          (URL_ATTRS.has(name) && !safeLinkUrl(attr.value))
+        ) {
+          el.removeAttribute(attr.name)
+        }
+      }
+      walk(el)
+    }
+  }
+  walk(tpl.content)
+  return tpl.innerHTML
+}