@bygghammar/cms-platform 0.94.0 → 0.96.0

package/src/cms/page-visibility.ts

@@ -0,0 +1,206 @@
+/**
+ * Page listing and the public policy built from it.
+ *
+ * Two independent properties decide how a page appears to visitors:
+ *
+ * - **Publication** — can a visitor open it at all? Publication windows answer
+ *   that (`cms/page-publication`); Unpublish closes them.
+ * - **Listing** — is it advertised? A `listed` page appears in menus, footers
+ *   and the sitemap like any other. A `link-only` page is just as reachable,
+ *   but only for someone who has its address: it is left out of navigation and
+ *   the sitemap and asks search engines not to index it.
+ *
+ * Listing never publishes, unpublishes, replaces or reschedules anything, and
+ * nothing that publishes changes listing. It is not access control either:
+ * a link-only address can be shared, guessed or found, and `noindex` is a
+ * request to crawlers, not a removal from results that already exist.
+ */
+import type { PublicationState } from "./page-publication";
+import { isPubliclyVisible } from "./page-publication";
+
+export const PAGE_LISTINGS = ["listed", "link-only"] as const;
+export type PageListing = (typeof PAGE_LISTINGS)[number];
+
+/** Pages are listed unless somebody decided otherwise. */
+export const DEFAULT_PAGE_LISTING: PageListing = "listed";
+
+export function normalizePageListing(raw: unknown): PageListing {
+  return raw === "link-only" ? "link-only" : "listed";
+}
+
+/** The three answers the screens lead with, in a visitor's terms. */
+export type PageVisibility = "published" | "link-only" | "offline";
+
+export const PAGE_VISIBILITY_LABELS: Record<PageVisibility, string> = {
+  published: "Published",
+  "link-only": "Link only",
+  offline: "Offline",
+};
+
+export const PAGE_VISIBILITY_DESCRIPTIONS: Record<PageVisibility, string> = {
+  published: "Visible on the public website and listed in menus, footer and sitemap.",
+  "link-only":
+    "Visible to anyone who has the exact address, but left out of menus, footer and sitemap, " +
+    "and search engines are asked not to index it. It is not private: the address can be shared.",
+  offline: "Not on the public website. Visitors get “page not found”.",
+};
+
+/**
+ * The headline answer for one page, from both properties.
+ *
+ * Only the headline: schedules and editorial status keep their own badges,
+ * because "offline" says nothing about a window that opens tomorrow.
+ */
+export function pageVisibility(publication: PublicationState, listing: PageListing): PageVisibility {
+  if (!isPubliclyVisible(publication)) return "offline";
+  return listing === "link-only" ? "link-only" : "published";
+}
+
+/* ------------------------------------------------------------------------ */
+/* Confirmation copy                                                         */
+/* ------------------------------------------------------------------------ */
+
+export type VisibilityConfirmation = {
+  title: string;
+  body: string[];
+  confirmLabel: string;
+};
+
+/** What Make link-only does to this page, said before it happens. */
+export function linkOnlyConfirmation(page: {
+  name: string;
+  path: string;
+  live: boolean;
+}): VisibilityConfirmation {
+  return {
+    title: `Make “${page.name}” link-only?`,
+    body: [
+      page.live
+        ? `${page.path} stays online for anyone who has the address.`
+        : `${page.path} is offline now; once published it will only be reachable by its address.`,
+      "It disappears from the menu, the footer and the sitemap, and search engines are asked not to index it.",
+      "This is not a password: anyone with the link can open it, and it can be shared.",
+    ],
+    confirmLabel: "Make link-only",
+  };
+}
+
+/** What Show on website does: listing only, never a publish. */
+export function showOnWebsiteConfirmation(page: {
+  name: string;
+  path: string;
+  live: boolean;
+}): VisibilityConfirmation {
+  return {
+    title: `Show “${page.name}” on the website?`,
+    body: [
+      "Menu and footer links to it reappear, it is added to the sitemap, and search engines may index it.",
+      page.live
+        ? `${page.path} is already online; nothing about its content changes.`
+        : `${page.path} is offline: this does not publish it. It is listed again once it is published.`,
+    ],
+    confirmLabel: "Show on website",
+  };
+}
+
+/** The extra sentences Unpublish adds to the existing schedule-aware warning. */
+export function unpublishConsequences(page: { path: string; listing: PageListing }): string[] {
+  const lines = [
+    `Visitors to ${page.path} will get “page not found”.`,
+    "Menu and footer links to it are hidden until it is published again; the menu itself is not changed.",
+  ];
+  if (page.listing === "link-only") {
+    lines.push("It stays link-only, so publishing it again will not list it.");
+  }
+  return lines;
+}
+
+/** Why a protected page offers neither action. */
+export const PROTECTED_PAGE_REASON =
+  "This page is protected: the start page and the contact page always stay published and listed.";
+
+/* ------------------------------------------------------------------------ */
+/* Public policy                                                             */
+/* ------------------------------------------------------------------------ */
+
+/** One page, as public rendering needs to know it. */
+export type PolicyPage = {
+  id: string;
+  key: string;
+  /** Can a visitor open it right now (publication windows, trash excluded)? */
+  live: boolean;
+  listing: PageListing;
+  /** Booking links in this page's own content stay while booking is off. */
+  bookingException: boolean;
+};
+
+/**
+ * Everything public rendering decides from, read once on the server.
+ *
+ * `known: false` is a read that failed. It is never a default: every question
+ * below then gets its restrictive answer — booking hidden, nothing indexable,
+ * no page reported offline (a failed read is not proof a page is gone).
+ */
+export type PublicPolicySnapshot = {
+  known: boolean;
+  bookingEnabled: boolean;
+  pages: PolicyPage[];
+  /** The next instant any of this changes on its own (a publication boundary). */
+  revalidateAt: number | null;
+};
+
+export const UNKNOWN_PUBLIC_POLICY: PublicPolicySnapshot = Object.freeze({
+  known: false,
+  bookingEnabled: false,
+  pages: [],
+  revalidateAt: null,
+}) as PublicPolicySnapshot;
+
+export function policyPage(policy: PublicPolicySnapshot, key: string): PolicyPage | null {
+  return policy.pages.find((page) => page.key === key) ?? null;
+}
+
+/** May search engines index this page? Only a live, listed page, read successfully. */
+export function pageIsIndexable(policy: PublicPolicySnapshot, key: string): boolean {
+  const page = policyPage(policy, key);
+  return policy.known && page !== null && page.live && page.listing === "listed";
+}
+
+/**
+ * Is this page positively known to be offline?
+ *
+ * Only a successful read that found the page and found it not live says so.
+ * An unknown page (no CMS row) or a failed read is not offline — the caller
+ * renders what it always rendered, or reports the error.
+ */
+export function pageIsKnownOffline(policy: PublicPolicySnapshot, key: string): boolean {
+  if (!policy.known) return false;
+  const page = policyPage(policy, key);
+  return page !== null && !page.live;
+}
+
+/** Booking in site-wide chrome: header button, menu, footer, popups. */
+export function chromeBookingVisible(policy: PublicPolicySnapshot): boolean {
+  return policy.known && policy.bookingEnabled;
+}
+
+/** Booking in one page's own content: on when booking is on, or the page is an exception. */
+export function pageBookingVisible(policy: PublicPolicySnapshot, key: string | null): boolean {
+  if (!policy.known) return false;
+  if (policy.bookingEnabled) return true;
+  return key !== null && policyPage(policy, key)?.bookingException === true;
+}
+
+export type HiddenPageReason = "offline" | "link-only";
+
+/** Pages navigation must not point at, and why. */
+export function unlistedPages(
+  policy: PublicPolicySnapshot,
+): Array<{ key: string; reason: HiddenPageReason }> {
+  const out: Array<{ key: string; reason: HiddenPageReason }> = [];
+  for (const page of policy.pages) {
+    if (!page.live) out.push({ key: page.key, reason: "offline" });
+    else if (page.listing === "link-only") out.push({ key: page.key, reason: "link-only" });
+  }
+  return out;
+}

package/src/forms/form-audit.ts

@@ -2,6 +2,8 @@
 // Every backoffice change to a form (settings + fields) is turned into a list
 // of short change descriptions so the Activity view answers who/what/when.
 
+import { redactUrl } from "../util/redact-url";
+
 export type FormAuditChange = {
   /** Machine scope: "form" | "settings" | "field" */
   scope: "form" | "settings" | "field";
@@ -26,6 +28,24 @@ export type FormSnapshotInput = {
 
 const MAX_LEN = 160;
 
+/** Delivery settings whose value is a credential: the audit says it changed, never what to. */
+const SECRET_SETTING = /secret|token|password|apikey|api_key/i;
+
+/** An address as the audit shows it: its origin only — keys travel in paths and query strings. */
+function addressOnly(v: unknown): unknown {
+  if (typeof v !== "string" || v.trim() === "") return v;
+  const redacted = redactUrl(v.trim());
+  return redacted === "(invalid address)" ? "(not a valid address)" : redacted;
+}
+
+/** A delivery setting's value as the audit may record it. */
+function auditable(group: string, key: string, v: unknown): unknown {
+  if (group !== "private_settings") return v;
+  if (SECRET_SETTING.test(key)) return v == null || v === "" ? v : "(hidden)";
+  if (/url$/i.test(key)) return addressOnly(v);
+  return v;
+}
+
 function short(v: unknown): string {
   if (v == null) return "—";
   if (typeof v === "string") return v.length > MAX_LEN ? `${v.slice(0, MAX_LEN)}…` : v || "—";
@@ -143,8 +163,8 @@ export function diffForms(
       out.push({
         scope: "settings",
         label: `${label}: ${humanKey(k)}`,
-        from: short(a[k]),
-        to: short(b[k]),
+        from: short(auditable(group, k, a[k])),
+        to: short(auditable(group, k, b[k])),
       });
     }
   }

package/src/html/html-tokenizer.ts

@@ -0,0 +1,254 @@
+/**
+ * An HTML tokenizer for the sanitizer, following the WHATWG tokenizer states
+ * that matter for a fragment of body content. No DOM is needed, so it runs the
+ * same on the server and in the browser.
+ *
+ * It splits markup into text, start tags and end tags, the way a browser
+ * would. Comments, DOCTYPEs, CDATA sections and processing instructions are
+ * consumed and produce nothing. A tag that runs into the end of the input is
+ * dropped, as a browser drops it. The content of raw-text and RCDATA elements
+ * (`<script>`, `<style>`, `<textarea>`, …) is returned as one text token, as
+ * the browser's tree builder makes the tokenizer read it.
+ *
+ * Values are returned exactly as written — text and attribute values are not
+ * decoded here. The sanitizer re-serializes everything it keeps, so nothing
+ * from the input reaches its output without being re-encoded.
+ */
+
+export type HtmlToken =
+  | { kind: "text"; raw: string }
+  | {
+      kind: "start";
+      name: string;
+      /** In source order; a repeated name keeps its first value, as browsers do. */
+      attrs: Array<{ name: string; raw: string }>;
+      selfClosing: boolean;
+    }
+  | { kind: "end"; name: string };
+
+/** Elements whose content the browser reads as text up to their own end tag. */
+const RAW_TEXT = new Set([
+  "script",
+  "style",
+  "xmp",
+  "iframe",
+  "noembed",
+  "noframes",
+  "noscript",
+  "title",
+  "textarea",
+]);
+
+const isWhitespace = (c: string) =>
+  c === " " || c === "\t" || c === "\n" || c === "\f" || c === "\r";
+const isAlpha = (c: string) => (c >= "a" && c <= "z") || (c >= "A" && c <= "Z");
+
+/** Lower-cases ASCII only, as the HTML tokenizer does for names. */
+function asciiLower(value: string): string {
+  return value.replace(/[A-Z]+/g, (m) => m.toLowerCase());
+}
+
+export function tokenizeHtml(input: string): HtmlToken[] {
+  const html = input.replace(/\r\n?/g, "\n").replace(/\u0000/g, "�");
+  const tokens: HtmlToken[] = [];
+  const n = html.length;
+  let lower: string | undefined;
+  let i = 0;
+  let textStart = 0;
+
+  const flushText = (end: number) => {
+    if (end > textStart) tokens.push({ kind: "text", raw: html.slice(textStart, end) });
+  };
+
+  /** Skips a bogus comment: everything up to and including the next `>`. */
+  const skipBogusComment = (from: number): number => {
+    const end = html.indexOf(">", from);
+    return end < 0 ? n : end + 1;
+  };
+
+  /** Skips a comment whose `<!--` ends at `from`. */
+  const skipComment = (from: number): number => {
+    if (html.startsWith(">", from)) return from + 1; // <!-->
+    if (html.startsWith("->", from)) return from + 2; // <!--->
+    let j = from;
+    while (j < n) {
+      if (html.startsWith("-->", j)) return j + 3;
+      if (html.startsWith("--!>", j)) return j + 4;
+      j++;
+    }
+    return n;
+  };
+
+  /**
+   * Reads a tag whose name starts at `from`. Returns the token and the index
+   * after the tag, or null when the input ends inside it.
+   */
+  const readTag = (
+    from: number,
+    closing: boolean,
+  ): { token: HtmlToken; next: number } | null => {
+    let j = from;
+    while (j < n && !isWhitespace(html[j]!) && html[j] !== "/" && html[j] !== ">") j++;
+    const name = asciiLower(html.slice(from, j));
+    const attrs: Array<{ name: string; raw: string }> = [];
+    const seen = new Set<string>();
+    let selfClosing = false;
+
+    for (;;) {
+      // Before attribute name.
+      while (j < n && (isWhitespace(html[j]!) || html[j] === "/")) {
+        if (html[j] === "/") {
+          // Self-closing start tag state.
+          if (html[j + 1] === ">") {
+            selfClosing = true;
+            j++;
+            break;
+          }
+        }
+        j++;
+      }
+      if (j >= n) return null;
+      if (html[j] === ">") {
+        j++;
+        break;
+      }
+      // Attribute name: a leading `=` is part of the name.
+      const nameStart = j;
+      j++;
+      while (j < n && !isWhitespace(html[j]!) && html[j] !== "/" && html[j] !== ">" && html[j] !== "=") {
+        j++;
+      }
+      const attrName = asciiLower(html.slice(nameStart, j));
+      // After attribute name.
+      while (j < n && isWhitespace(html[j]!)) j++;
+      let raw = "";
+      if (j < n && html[j] === "=") {
+        j++;
+        while (j < n && isWhitespace(html[j]!)) j++;
+        if (j >= n) return null;
+        const quote = html[j];
+        if (quote === '"' || quote === "'") {
+          const end = html.indexOf(quote, j + 1);
+          if (end < 0) return null;
+          raw = html.slice(j + 1, end);
+          j = end + 1;
+        } else if (html[j] !== ">") {
+          const start = j;
+          while (j < n && !isWhitespace(html[j]!) && html[j] !== ">") j++;
+          raw = html.slice(start, j);
+        }
+      }
+      if (j >= n) return null;
+      if (!seen.has(attrName)) {
+        seen.add(attrName);
+        attrs.push({ name: attrName, raw });
+      }
+    }
+
+    const token: HtmlToken = closing
+      ? { kind: "end", name }
+      : { kind: "start", name, attrs, selfClosing };
+    return { token, next: j };
+  };
+
+  while (i < n) {
+    const lt = html.indexOf("<", i);
+    if (lt < 0) break;
+    const c = html[lt + 1] ?? "";
+
+    if (isAlpha(c)) {
+      const tag = readTag(lt + 1, false);
+      flushText(lt);
+      if (!tag) {
+        // The input ends inside the tag: the browser drops it.
+        i = textStart = n;
+        break;
+      }
+      tokens.push(tag.token);
+      i = textStart = tag.next;
+      const name = tag.token.kind === "start" ? tag.token.name : "";
+      if (name === "plaintext") {
+        flushText(n);
+        textStart = n;
+        i = n;
+        break;
+      }
+      if (RAW_TEXT.has(name)) {
+        // Read the content as text, up to `</name` followed by a delimiter.
+        // ASCII-only lower-casing keeps every index the same as in `html`.
+        lower ??= asciiLower(html);
+        let j = i;
+        let end = -1;
+        while ((j = lower.indexOf(`</${name}`, j)) >= 0) {
+          const after = html[j + 2 + name.length] ?? "";
+          if (after === "" || isWhitespace(after) || after === "/" || after === ">") {
+            end = j;
+            break;
+          }
+          j += 2 + name.length;
+        }
+        if (end < 0) {
+          if (i < n) tokens.push({ kind: "text", raw: html.slice(i) });
+          i = textStart = n;
+          break;
+        }
+        if (end > i) tokens.push({ kind: "text", raw: html.slice(i, end) });
+        const close = readTag(end + 2, true);
+        tokens.push({ kind: "end", name });
+        i = textStart = close ? close.next : n;
+      }
+      continue;
+    }
+
+    if (c === "/") {
+      const d = html[lt + 2] ?? "";
+      if (isAlpha(d)) {
+        const tag = readTag(lt + 2, true);
+        flushText(lt);
+        if (!tag) {
+          i = textStart = n;
+          break;
+        }
+        tokens.push(tag.token);
+        i = textStart = tag.next;
+        continue;
+      }
+      if (d === ">") {
+        flushText(lt);
+        i = textStart = lt + 3;
+        continue;
+      }
+      if (d === "") {
+        // `</` at the end of the input is text.
+        i = n;
+        break;
+      }
+      flushText(lt);
+      i = textStart = skipBogusComment(lt + 2);
+      continue;
+    }
+
+    if (c === "!") {
+      flushText(lt);
+      if (html.startsWith("--", lt + 2)) {
+        i = textStart = skipComment(lt + 4);
+      } else {
+        // DOCTYPE, CDATA and anything else after `<!` end at the next `>`.
+        i = textStart = skipBogusComment(lt + 2);
+      }
+      continue;
+    }
+
+    if (c === "?") {
+      flushText(lt);
+      i = textStart = skipBogusComment(lt + 1);
+      continue;
+    }
+
+    // A `<` that starts nothing is text.
+    i = lt + 1;
+  }
+
+  flushText(n);
+  return tokens;
+}

package/src/html/sanitize-html.ts

@@ -5,7 +5,16 @@
  * only staff can author it, the output is sanitized on every render so a
  * pasted `<script>`, inline event handler or `javascript:` URL can never end
  * up in a page.
+ *
+ * The input is tokenized the way a browser tokenizes it (`html-tokenizer`),
+ * and the output is written from scratch: allowed elements with allowed,
+ * re-encoded attributes, and text with every `<` and `>` escaped. Nothing from
+ * the input is ever copied through as written, so markup the sanitizer does
+ * not recognise — an unterminated tag, a stray `<` — reaches the page as
+ * visible text and can never be completed into an element by the markup that
+ * follows it.
  */
+import { tokenizeHtml } from "./html-tokenizer";
 
 const ALLOWED_TAGS = new Set([
   "p", "br", "hr", "span", "div",
@@ -19,9 +28,13 @@ const ALLOWED_TAGS = new Set([
 
 /** Tags whose entire contents are dropped. */
 const DROP_WITH_CONTENT = new Set([
-  "script", "style", "iframe", "object", "embed", "noscript", "template", "svg", "math",
+  "script", "style", "iframe", "object", "noscript", "template", "svg", "math",
+  "textarea", "title", "xmp", "noembed", "noframes", "plaintext",
 ]);
 
+/** Dropped elements that can contain themselves, so their end tags are counted. */
+const NESTING = new Set(["svg", "math", "object", "template"]);
+
 const VOID_TAGS = new Set(["br", "hr", "img", "col"]);
 
 const GLOBAL_ATTRS = new Set(["class", "style", "id", "title", "dir", "lang"]);
@@ -58,10 +71,13 @@ const ALLOWED_CSS = new Set([
 
 const SAFE_URL = /^(https?:\/\/|mailto:|tel:|\/|#|\.\/|\.\.\/)/i;
 
-function safeUrl(raw: string): string | null {
+function safeUrl(raw: string, attribute: string): string | null {
   const value = raw.trim().replace(/[\u0000-\u001f]/g, "");
   if (!value) return null;
-  if (/^data:image\/(png|jpe?g|gif|webp|avif);base64,/i.test(value)) return value;
+  // An inline image is an image source, never a link target.
+  if (/^data:image\/(png|jpe?g|gif|webp|avif);base64,/i.test(value)) {
+    return attribute === "src" ? value : null;
+  }
   if (!SAFE_URL.test(value)) return null;
   if (/^\s*javascript:/i.test(value)) return null;
   return value;
@@ -114,7 +130,7 @@ const NAMED_REFERENCES: Record<string, string> = {
  * was checked: `&#106;avascript:` is judged as `javascript:`, and an
  * undecoded `javascript&colon;` never becomes one.
  */
-function decodeAttr(value: string): string {
+export function decodeAttr(value: string): string {
   return value.replace(
     /&(?:#([0-9]{1,7})|#[xX]([0-9a-fA-F]{1,6})|([a-zA-Z][a-zA-Z0-9]{0,31}));/g,
     (reference, decimal?: string, hex?: string, name?: string) => {
@@ -127,21 +143,17 @@ function decodeAttr(value: string): string {
   );
 }
 
-const ATTR_RE = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>]+))/g;
-
-function sanitizeAttrs(tag: string, raw: string): string {
-  const allowed = TAG_ATTRS[tag];
+function sanitizeAttrs(tag: string, attrs: ReadonlyArray<{ name: string; raw: string }>): string {
+  const allowed = Object.prototype.hasOwnProperty.call(TAG_ATTRS, tag) ? TAG_ATTRS[tag] : undefined;
   const parts: string[] = [];
-  let m: RegExpExecArray | null;
-  ATTR_RE.lastIndex = 0;
-  while ((m = ATTR_RE.exec(raw))) {
-    const name = m[1].toLowerCase();
-    let value = decodeAttr(m[3] ?? m[4] ?? m[5] ?? "");
+  for (const attr of attrs) {
+    const name = attr.name;
+    let value = decodeAttr(attr.raw);
     if (name.startsWith("on")) continue;
     if (!GLOBAL_ATTRS.has(name) && !allowed?.has(name)) continue;
     if (name === "href" || name === "src" || name === "srcset") {
       if (name === "srcset") continue;
-      const url = safeUrl(value);
+      const url = safeUrl(value, name);
       if (!url) continue;
       value = url;
     }
@@ -164,30 +176,56 @@ function sanitizeAttrs(tag: string, raw: string): string {
   return parts.length ? " " + parts.join(" ") : "";
 }
 
+/** A character reference as written in text: kept, since it can only decode to text. */
+const CHAR_REF = /^&(?:#[0-9]{1,7}|#[xX][0-9a-fA-F]{1,6}|[a-zA-Z][a-zA-Z0-9]{0,31});/;
+
+/** Text as written, made safe to emit: no `<` or `>`, and every `&` a reference. */
+function escapeText(raw: string): string {
+  let out = "";
+  for (let i = 0; i < raw.length; i++) {
+    const c = raw[i]!;
+    if (c === "<") out += "&lt;";
+    else if (c === ">") out += "&gt;";
+    else if (c === "&") out += CHAR_REF.test(raw.slice(i, i + 42)) ? "&" : "&amp;";
+    else out += c;
+  }
+  return out;
+}
+
 /** Sanitize an HTML fragment down to the editor's allowlist. */
 export function sanitizeHtml(input: string | undefined | null): string {
   if (!input) return "";
-  // Remove comments and any element whose content must go with it.
-  let html = input.replace(/<!--[\s\S]*?-->/g, "");
-  for (const tag of DROP_WITH_CONTENT) {
-    html = html.replace(new RegExp(`<${tag}[\\s\\S]*?<\\/${tag}\\s*>`, "gi"), "");
-    html = html.replace(new RegExp(`<${tag}\\b[^>]*\\/?>`, "gi"), "");
-  }
-
   const open: string[] = [];
   let out = "";
-  let last = 0;
-  const tagRe = /<\s*(\/)?\s*([a-zA-Z][a-zA-Z0-9-]*)((?:[^>"']|"[^"]*"|'[^']*')*)>/g;
-  let m: RegExpExecArray | null;
-
-  while ((m = tagRe.exec(html))) {
-    out += html.slice(last, m.index);
-    last = m.index + m[0].length;
-    const closing = Boolean(m[1]);
-    const tag = m[2].toLowerCase();
+  /** The dropped element being skipped, and how deep inside it we are. */
+  let skipping: { tag: string; depth: number } | null = null;
+
+  for (const token of tokenizeHtml(input)) {
+    if (skipping) {
+      if (token.kind === "start" && token.name === skipping.tag && NESTING.has(token.name)) {
+        if (!token.selfClosing) skipping.depth++;
+      } else if (token.kind === "end" && token.name === skipping.tag) {
+        if (--skipping.depth === 0) skipping = null;
+      }
+      continue;
+    }
+
+    if (token.kind === "text") {
+      out += escapeText(token.raw);
+      continue;
+    }
+
+    const tag = token.name;
+    if (token.kind === "start" && DROP_WITH_CONTENT.has(tag)) {
+      // A self-closing <svg/> or <math/> is empty; every other one has content.
+      if (!(token.selfClosing && (tag === "svg" || tag === "math"))) {
+        skipping = { tag, depth: 1 };
+      }
+      continue;
+    }
     if (!ALLOWED_TAGS.has(tag)) continue;
 
-    if (closing) {
+    if (token.kind === "end") {
       if (VOID_TAGS.has(tag)) continue;
       const at = open.lastIndexOf(tag);
       if (at < 0) continue;
@@ -197,22 +235,19 @@ export function sanitizeHtml(input: string | undefined | null): string {
     }
 
     if (VOID_TAGS.has(tag)) {
-      out += `<${tag}${sanitizeAttrs(tag, m[3] ?? "")} />`;
+      out += `<${tag}${sanitizeAttrs(tag, token.attrs)} />`;
       continue;
     }
-    out += `<${tag}${sanitizeAttrs(tag, m[3] ?? "")}>`;
+    out += `<${tag}${sanitizeAttrs(tag, token.attrs)}>`;
     open.push(tag);
   }
-  out += html.slice(last);
   while (open.length) out += `</${open.pop()}>`;
   return out;
 }
 
 /** Plain-text preview of rich text (used for thumbnails and summaries). */
 export function htmlToText(input: string | undefined | null): string {
-  return sanitizeHtml(input)
-    .replace(/<[^>]+>/g, " ")
-    .replace(/&nbsp;/g, " ")
+  return decodeAttr(sanitizeHtml(input).replace(/<[^>]+>/g, " "))
     .replace(/\s+/g, " ")
     .trim();
 }