@xoong/richtext 0.0.0-stage → 0.0.35

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Duong Tran Xuan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,28 @@
-# Temporary Holding Version
+# @xoong/richtext
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A small rich text editor for xoong forms: sanitised HTML in and out, an accessible toolbar in two sizes, a media hook. Only depends on `@xoong/core`.
+
+## Install
+
+```bash
+npm install @xoong/richtext
+```
+
+## Use
+
+```js
+import '@xoong/richtext';
+```
+```html
+<xo-richtext name="body" label="Body" media></xo-richtext>
+```
+`@xoong/richtext/sanitize` exports the sanitiser, so your server can clean the HTML again on save.
+
+## More
+
+* Documentation and demos: https://github.com/fpt-duongtx/xoong#readme
+* Source: https://github.com/fpt-duongtx/xoong/tree/main/packages/richtext
+* All packages share one version number and are released together: https://github.com/fpt-duongtx/xoong/releases
+* xoong is a working prototype (0.0.x): the HTML syntax is still Draft.
+
+MIT licence.

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@xoong/richtext",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.35",
+  "description": "A small rich text editor for xoong forms: contenteditable, no dependencies besides @xoong/core, sanitised HTML in and out. Toolbar, headings, bold, italic, lists, quote, links (http, https, mailto, tel only), media hook.",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": {
+      "default": "./src/index.js"
+    },
+    "./sanitize": "./src/sanitize.js",
+    "./richtext.css": "./src/richtext.css"
+  },
+  "sideEffects": true,
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "xoong",
+    "richtext",
+    "editor",
+    "contenteditable",
+    "sanitize"
+  ],
+  "license": "MIT",
+  "author": "Duong Tran Xuan <duongtx1505@icloud.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fpt-duongtx/xoong.git",
+    "directory": "packages/richtext"
+  },
+  "bugs": {
+    "url": "https://github.com/fpt-duongtx/xoong/issues"
+  },
+  "homepage": "https://github.com/fpt-duongtx/xoong#readme",
+  "dependencies": {
+    "@xoong/core": "0.0.35"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=22.12"
+  }
+}

package/src/index.js

@@ -0,0 +1,3 @@
+// Importing the package registers <xo-richtext>.
+import './richtext.js';
+export { sanitizeHtml, isSafeLink, isSafeImage, textOf } from './sanitize.js';

package/src/richtext.css

@@ -0,0 +1,45 @@
+/* Optional styles for @xoong/richtext, in one @layer, using the --xo-* tokens of @xoong/ui with fallbacks. */
+@layer xoong-richtext {
+  xo-richtext { display: block; }
+  .xo-richtext-box { border: 1px solid var(--xo-color-control-border, #838c9b); border-radius: var(--xo-radius, 6px); background: var(--xo-color-surface, #fff); }
+  .xo-richtext-box:has(.xo-richtext-editable:focus) { outline: 2px solid var(--xo-color-accent, #0969da); outline-offset: 1px; }
+  /* one row, never wrapped and never scrolled sideways: the full toolbar fits from 580px of the editor's width, the compact one below it (the More menu holds the rest) */
+  .xo-richtext-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: var(--xo-space-1, .25rem); border-bottom: 1px solid var(--xo-color-border, #d8dee4); }
+  .xo-richtext-toolbar [hidden] { display: none !important; }
+  .xo-richtext-toolbar select { height: 2rem; border: 1px solid transparent; border-radius: 4px; background: none; font: inherit; color: inherit; cursor: pointer; max-width: 9rem; }
+  .xo-richtext-toolbar select:hover:not(:disabled) { background: var(--xo-color-hover, rgb(127 127 127 / .18)); }
+  .xo-richtext-toolbar button { flex: none; }
+  .xo-richtext-toolbar[data-size="compact"] select { width: 4.25rem; } /* P, H2, H3, Mixed */
+  .xo-richtext-toolbar button[data-face]::before { content: attr(data-face); }
+  .xo-richtext-more [data-face]::before { content: attr(data-face) "  "; white-space: pre; }
+  .xo-richtext-morewrap { position: relative; flex: none; }
+  .xo-richtext-more { position: absolute; inset-inline-end: 0; top: 100%; z-index: 10; min-width: 11rem; padding: var(--xo-space-1, .25rem); background: var(--xo-color-surface, #fff); border: 1px solid var(--xo-color-border, #d8dee4); border-radius: var(--xo-radius, 6px); box-shadow: 0 6px 18px rgb(0 0 0 / .15); }
+  .xo-richtext-more [role^="menuitem"]:focus-visible { outline: var(--xo-focus-thin, 2px solid var(--xo-color-accent, #0969da)); outline-offset: -2px; }
+  .xo-richtext-more [role^="menuitem"] { display: block; width: 100%; height: auto; padding: var(--xo-space-2, .5rem) var(--xo-space-3, .75rem); text-align: start; font-weight: 400; white-space: nowrap; }
+  .xo-richtext-toolbar button { min-width: 1.75rem; min-height: 0; height: 2rem; padding-block: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; font: inherit; font-weight: 600; color: inherit; }
+  .xo-richtext-toolbar button:hover:not(:disabled) { background: var(--xo-color-hover, rgb(127 127 127 / .18)); }
+  .xo-richtext-toolbar button[aria-pressed="true"], .xo-richtext-more [aria-checked="true"] { background: var(--xo-color-hover, rgb(127 127 127 / .3)); }
+  .xo-richtext-toolbar button:disabled { opacity: .4; cursor: not-allowed; }
+  .xo-richtext-link { display: flex; flex-wrap: wrap; gap: var(--xo-space-2, .5rem); align-items: center; padding: var(--xo-space-2, .5rem); border-bottom: 1px solid var(--xo-color-border, #d8dee4); }
+  .xo-richtext-link[hidden] { display: none; }
+  .xo-richtext-link input { flex: 1 1 14rem; font: inherit; }
+  .xo-richtext-error { flex-basis: 100%; color: var(--xo-color-danger, #cf222e); }
+  .xo-richtext-error:empty { display: none; }
+  .xo-richtext-editable { min-height: 10rem; padding: var(--xo-space-3, .75rem); outline: none; overflow-wrap: anywhere; }
+  .xo-richtext-editable[data-empty]::before { content: attr(data-placeholder); opacity: .55; pointer-events: none; position: absolute; }
+  .xo-richtext-editable > :first-child { margin-top: 0; }
+  .xo-richtext-editable > :last-child { margin-bottom: 0; }
+  .xo-richtext-editable blockquote { margin-inline: 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--xo-color-border, #d8dee4); }
+  .xo-richtext-editable img { max-width: 100%; height: auto; }
+  xo-richtext[data-invalid] .xo-richtext-box { border-color: var(--xo-color-danger, #cf222e); }
+
+  /* expanded: the same editor in a dialog, 960px wide, the whole screen on narrow ones */
+  .xo-richtext-dialog { box-sizing: border-box; width: min(960px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); padding: 0; display: none; flex-direction: column; border: 1px solid var(--xo-color-border, #d8dee4); border-radius: var(--xo-radius, 6px); background: var(--xo-color-surface, #fff); color: inherit; }
+  .xo-richtext-dialog[open] { display: flex; }
+  .xo-richtext-dialog-bar { display: flex; justify-content: flex-end; padding: var(--xo-space-2, .5rem); border-bottom: 1px solid var(--xo-color-border, #d8dee4); }
+  .xo-richtext-dialog .xo-richtext-box { border: 0; border-radius: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; }
+  .xo-richtext-dialog .xo-richtext-editable { flex: 1; min-height: 50dvh; overflow: auto; }
+  @media (max-width: 767px) {
+    .xo-richtext-dialog { width: 100vw; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
+  }
+}

package/src/richtext.js

@@ -0,0 +1,637 @@
+// @ts-check
+/**
+ * <xo-richtext> is a small rich text editor and a form control: its value is sanitised HTML.
+ *
+ *   <xo-richtext name="body" label="Body" placeholder="Write something"></xo-richtext>
+ *   <xo-richtext name="body" media tools="bold italic h2 ul ol quote link image undo redo"></xo-richtext>
+ *
+ * - A `contenteditable` area with a toolbar (`role="toolbar"`, one tab stop, Left/Right/Home/End move inside it). Tools: undo, redo, style (a select: Paragraph,
+ *   Heading 2, Heading 3), bold, italic, underline, ul, ol, quote, link, image (h2 as a toggle is also available); the `tools` attribute picks and orders them.
+ *   `image` is only shown with the `media` attribute.
+ * - The toolbar has two sizes and never wraps or scrolls sideways, chosen by the editor's own width (not the viewport's): Full from 580px, Compact below it
+ *   (style, bold, italic, bulleted list, link, image and a More menu that holds underline, numbered list, quote, undo, redo). `toolbar="full"` or
+ *   `"compact"` forces one.
+ * - `expand()` opens the same editor in a 960px dialog (the whole screen under 768px); Done and Escape close it, `collapse()` too. Events `xo-richtext-expand`
+ *   and `xo-richtext-done`. Nothing is saved by it: the host places its own Expand button and calls `expand()`.
+ * - Typing and the toolbar use the browser's own editing commands, so undo, redo, IME, spell checking, Ctrl/Cmd+B and +I and the platform's
+ *   shortcuts all work. Ctrl/Cmd+K opens the link box.
+ * - The value is `sanitizeHtml()` of the content (see sanitize.js): p, h2, h3, strong, em, ul, ol, li, blockquote, br, a, img only. Paste and drop are
+ *   sanitised before they enter the editor; formatting from Word or a web page does not come along.
+ * - Links: the link box accepts http, https, mailto and tel (an address without a scheme becomes https:// or mailto:); anything else is refused.
+ * - Media: the image tool fires a cancelable `xo-pick-media` event with `detail.insert({ src, alt })`. Open your media library in a listener, call
+ *   `preventDefault()`, and call `insert` when the person has chosen (now or later). `el.insertImage(src, alt)` does the same from code.
+ * - It is an `XoControl`: `name`, `required` (an empty editor is empty), `disabled`, `readonly`, `dirty`, `touched`, validity. `maxlength` counts text characters.
+ */
+import { XoControl, define, text } from '@xoong/core';
+import { sanitizeHtml, isSafeLink, textOf } from './sanitize.js';
+
+let counter = 0;
+
+const TOOLS = {
+  bold: { label: () => text('xoong.richtext.bold', 'Bold'), face: 'B', state: () => query('bold') },
+  italic: { label: () => text('xoong.richtext.italic', 'Italic'), face: 'I', state: () => query('italic') },
+  underline: { label: () => text('xoong.richtext.underline', 'Underline'), face: 'U', state: () => query('underline') },
+  style: { label: () => text('xoong.richtext.style', 'Text style') },
+  more: { label: () => text('xoong.richtext.more', 'More'), face: '⋯' },
+  h2: { label: () => text('xoong.richtext.h2', 'Heading'), face: 'H2', state: () => block() === 'h2' },
+  ul: { label: () => text('xoong.richtext.ul', 'Bulleted list'), face: '•', state: () => query('insertUnorderedList') },
+  ol: { label: () => text('xoong.richtext.ol', 'Numbered list'), face: '1.', state: () => query('insertOrderedList') },
+  quote: { label: () => text('xoong.richtext.quote', 'Quote'), face: '“', state: () => block() === 'blockquote' },
+  link: { label: () => text('xoong.richtext.link', 'Link'), face: '🔗', state: () => !!anchorAtSelection() },
+  image: { label: () => text('xoong.richtext.image', 'Image'), face: '🖼' },
+  undo: { label: () => text('xoong.richtext.undo', 'Undo'), face: '↶' },
+  redo: { label: () => text('xoong.richtext.redo', 'Redo'), face: '↷' },
+};
+const DEFAULT_TOOLS = 'undo redo style bold italic underline ul ol quote link image';
+/** In the compact toolbar these tools move into the "More" menu (in this order). */
+const MORE_ITEMS = ['underline', 'ol', 'quote', 'undo', 'redo'];
+/** The editor is "full" from this width (its own width, not the viewport's). */
+const FULL_FROM = 580;
+const STYLE_OPTIONS = /** @type {[string, () => string, string][]} */ ([
+  ['p', () => text('xoong.richtext.paragraph', 'Paragraph'), 'P'],
+  ['h2', () => text('xoong.richtext.heading2', 'Heading 2'), 'H2'],
+  ['h3', () => text('xoong.richtext.heading3', 'Heading 3'), 'H3'],
+  ['mixed', () => text('xoong.richtext.mixed', 'Mixed'), 'Mixed'],
+]);
+
+const query = (/** @type {string} */ command) => { try { return document.queryCommandState?.(command) ?? false; } catch { return false; } };
+const block = () => { try { return String(document.queryCommandValue?.('formatBlock') ?? '').toLowerCase().replace(/[<>]/g, ''); } catch { return ''; } };
+const exec = (/** @type {string} */ command, /** @type {string} */ value = '') => { try { return document.execCommand?.(command, false, value) ?? false; } catch { return false; } };
+const esc = (/** @type {string} */ s) => s.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c] ?? c);
+/** The position of a node inside `root` as child indexes, and back: a selection that survives the editor being moved (a moved node loses its ranges). */
+const pathOf = (/** @type {Node} */ root, /** @type {Node | null} */ node) => { /** @type {number[]} */ const path = []; for (let n = node; n && n !== root; n = n.parentNode) path.unshift([.../** @type {Node} */ (n.parentNode).childNodes].indexOf(/** @type {ChildNode} */ (n))); return path; };
+const nodeAt = (/** @type {Node} */ root, /** @type {number[]} */ path) => path.reduce((/** @type {Node | undefined} */ n, i) => n?.childNodes[i], root);
+function anchorAtSelection() {
+  const node = getSelection()?.anchorNode;
+  const el = node instanceof Element ? node : node?.parentElement;
+  return el?.closest('a') ?? null;
+}
+
+class XoRichtext extends XoControl {
+  static props = { ...XoControl.props, label: String, placeholder: String, tools: String, toolbar: String, media: Boolean, maxlength: Number };
+
+  /** @type {HTMLElement | null} */ #editor = null;
+  /** @type {HTMLElement | null} */ #toolbar = null;
+  /** @type {HTMLElement | null} */ #box = null;
+  /** @type {HTMLElement | null} */ #more = null;
+  /** @type {ResizeObserver | null} */ #resize = null;
+  #size = '';
+  #moving = false;
+  /** @type {HTMLDialogElement | null} */ #dialog = null;
+  /** @type {Comment | null} */ #marker = null;
+  /** @type {HTMLElement | null} */ #linkBox = null;
+  /** @type {HTMLInputElement | null} */ #linkInput = null;
+  /** @type {HTMLElement | null} */ #linkError = null;
+  /** @type {Range | null} */ #saved = null;
+  #fromUser = false;
+  #built = false;
+  #id = `xo-richtext-${++counter}`;
+  #onPointer = (/** @type {Event} */ event) => { if (this.#more && !this.#more.hidden && !/** @type {Element} */ (event.target).closest('.xo-richtext-morewrap')) this.#closeMore(); };
+  #onSelection = () => { if (this.#editor && this.#box?.contains(getSelection()?.anchorNode ?? null)) this.#refreshState(); };
+
+  get focusTarget() { return this.#editor; }
+
+  /** Moving the editor into or out of its dialog moves the focus too, which is not the person leaving the field. */
+  markTouched() {
+    if (this.#dialog || this.#moving) return;
+    super.markTouched();
+  }
+
+  setValue(v) {
+    const clean = sanitizeHtml(typeof v === 'string' ? v : v == null ? '' : String(v));
+    super.setValue(clean);
+    if (this.#built && !this.#fromUser && this.#editor) this.#show(clean);
+  }
+
+  /** Back to the start value, in the editor too (the base class resets the value without going through setValue). */
+  reset() {
+    super.reset();
+    if (this.#built) this.#show(String(this.value));
+  }
+
+  validate(value) {
+    const limit = this.maxlength;
+    if (limit > 0 && textOf(String(value)).length > limit) return text('xoong.richtext.tooLong', 'Use at most {max} characters.', { max: limit });
+    return '';
+  }
+
+  isEmpty(v) { return !v || (textOf(String(v)).trim() === '' && !/<img\b/.test(String(v))); }
+
+  // ---- lifecycle -----------------------------------------------------------------------------------------------------------
+
+  connected() {
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => this.#build(), { once: true });
+    else queueMicrotask(() => this.#build());
+    document.addEventListener('selectionchange', this.#onSelection);
+    document.addEventListener('pointerdown', this.#onPointer);
+  }
+
+  disconnected() { document.removeEventListener('selectionchange', this.#onSelection); document.removeEventListener('pointerdown', this.#onPointer); this.#resize?.disconnect(); }
+
+  #build() {
+    if (this.#built || !this.isConnected) return;
+    const initial = this.value !== '' ? String(this.value) : this.innerHTML.trim(); // markup inside the element is the start value
+    this.replaceChildren();
+
+    const box = document.createElement('div');
+    box.className = 'xo-richtext-box';
+    const toolbar = document.createElement('div');
+    toolbar.className = 'xo-richtext-toolbar';
+    toolbar.setAttribute('role', 'toolbar');
+    toolbar.setAttribute('aria-label', text('xoong.richtext.toolbar', 'Formatting'));
+    toolbar.setAttribute('aria-controls', `${this.#id}-editor`);
+    const names = (this.tools || DEFAULT_TOOLS).split(/[\s,]+/).filter((n) => n in TOOLS && n !== 'more' && (n !== 'image' || this.media));
+    names.forEach((name, i) => toolbar.append(this.#item(name, i === 0)));
+    const moved = MORE_ITEMS.filter((n) => names.includes(n));
+    if (moved.length) { // the compact toolbar keeps these in a menu
+      const wrap = document.createElement('div');
+      wrap.className = 'xo-richtext-morewrap';
+      wrap.hidden = true;
+      const more = this.#item('more', false);
+      const menu = document.createElement('div');
+      menu.className = 'xo-richtext-more';
+      menu.id = `${this.#id}-more`;
+      menu.setAttribute('role', 'menu');
+      menu.setAttribute('aria-label', TOOLS.more.label());
+      menu.hidden = true;
+      more.setAttribute('aria-haspopup', 'menu');
+      more.setAttribute('aria-expanded', 'false');
+      more.setAttribute('aria-controls', menu.id);
+      for (const name of moved) menu.append(this.#item(name, false, true));
+      wrap.append(more, menu);
+      toolbar.append(wrap);
+      this.#more = menu;
+    }
+
+    const linkBox = document.createElement('div');
+    linkBox.className = 'xo-richtext-link';
+    linkBox.hidden = true;
+    const linkInput = document.createElement('input');
+    linkInput.type = 'text';
+    linkInput.inputMode = 'url';
+    linkInput.setAttribute('aria-label', text('xoong.richtext.linkUrl', 'Link address'));
+    linkInput.placeholder = 'https://';
+    const apply = document.createElement('button');
+    apply.type = 'button'; apply.dataset.action = 'apply'; apply.textContent = text('xoong.richtext.apply', 'Apply');
+    const remove = document.createElement('button');
+    remove.type = 'button'; remove.dataset.action = 'remove'; remove.textContent = text('xoong.richtext.removeLink', 'Remove link');
+    const error = document.createElement('small');
+    error.className = 'xo-richtext-error';
+    error.setAttribute('role', 'alert');
+    linkBox.append(linkInput, apply, remove, error);
+
+    const editor = document.createElement('div');
+    editor.id = `${this.#id}-editor`;
+    editor.className = 'xo-richtext-editable';
+    editor.setAttribute('role', 'textbox');
+    editor.setAttribute('aria-multiline', 'true');
+    editor.setAttribute('aria-label', this.label || this.name || text('xoong.richtext.editor', 'Rich text'));
+    if (this.placeholder) editor.dataset.placeholder = this.placeholder;
+
+    box.append(toolbar, linkBox, editor);
+    this.append(box);
+    this.#box = box;
+    this.#toolbar = toolbar; this.#linkBox = linkBox; this.#linkInput = linkInput; this.#linkError = error; this.#editor = editor;
+    this.#built = true;
+    this.#wire(box, toolbar, linkBox, editor);
+    this.#applySize();
+    if (typeof ResizeObserver !== 'undefined') { this.#resize = new ResizeObserver(() => this.#applySize()); this.#resize.observe(box); }
+    this.setValue(initial);
+    this.#enable();
+    this.markPristine();
+  }
+
+  attributeChangedCallback(attr, old, value) {
+    super.attributeChangedCallback(attr, old, value);
+    if (this.#built && (attr === 'disabled' || attr === 'readonly')) this.#enable();
+    if (this.#built && attr === 'placeholder' && this.#editor) this.#editor.dataset.placeholder = value ?? '';
+  }
+
+  /** One toolbar item: a button, or the text style select. */
+  #item(/** @type {string} */ name, /** @type {boolean} */ first, /** @type {boolean} */ inMenu = false) {
+    const tool = /** @type {any} */ (TOOLS)[name];
+    const caption = tool.label();
+    if (name === 'style') {
+      const select = document.createElement('select');
+      select.dataset.tool = name;
+      select.tabIndex = first ? 0 : -1;
+      select.setAttribute('aria-label', caption);
+      select.title = caption;
+      for (const [value, label, short] of STYLE_OPTIONS) {
+        const option = document.createElement('option');
+        option.value = value;
+        option.dataset.short = short;
+        option.textContent = label();
+        if (value === 'mixed') option.disabled = true; // shown when the selection spans different blocks; not a choice
+        select.append(option);
+      }
+      return select;
+    }
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.dataset.tool = name;
+    button.tabIndex = first ? 0 : -1;
+    button.dataset.face = tool.face; // drawn by CSS (::before): the symbol is not text, so the accessible name is the caption alone (WCAG 2.5.3)
+    button.setAttribute('aria-label', caption);
+    button.title = caption;
+    if (inMenu) { button.setAttribute('role', tool.state ? 'menuitemcheckbox' : 'menuitem'); button.tabIndex = -1; button.textContent = caption; } // a menu item is checked, a toolbar button is pressed
+    if (tool.state) button.setAttribute(inMenu ? 'aria-checked' : 'aria-pressed', 'false');
+    return button;
+  }
+
+  /** The toolbar items that are shown, in order (the ones inside the More menu are not part of the toolbar's tab order). */
+  #items() {
+    return /** @type {HTMLElement[]} */ ([...(this.#toolbar?.querySelectorAll('[data-tool]') ?? [])]).filter((el) => !el.closest('.xo-richtext-more') && !el.hidden && !el.closest('[hidden]'));
+  }
+
+  /**
+   * Full (every tool) from 580px of the editor's own width, compact (the common tools and a More menu) below: never wrapped, never scrolled sideways.
+   * `toolbar="full"` or `toolbar="compact"` forces one; a width of 0 (not laid out) counts as full.
+   */
+  #applySize() {
+    const toolbar = this.#toolbar;
+    if (!toolbar || !this.#box) return;
+    const width = this.#box.getBoundingClientRect().width;
+    const size = this.toolbar === 'compact' || this.toolbar === 'full' ? this.toolbar : width > 0 && width < FULL_FROM ? 'compact' : 'full';
+    if (size === this.#size) return;
+    this.#size = size;
+    toolbar.dataset.size = size;
+    const compact = size === 'compact';
+    for (const el of /** @type {HTMLElement[]} */ ([...toolbar.children])) {
+      if (el.classList.contains('xo-richtext-morewrap')) el.hidden = !compact;
+      else el.hidden = compact && MORE_ITEMS.includes(/** @type {string} */ (el.dataset.tool));
+    }
+    for (const option of toolbar.querySelectorAll('select[data-tool=style] option')) {
+      const o = /** @type {HTMLOptionElement} */ (option);
+      const full = STYLE_OPTIONS.find(([v]) => v === o.value)?.[1]();
+      o.textContent = compact ? (o.dataset.short ?? '') : (full ?? '');
+    }
+    if (!compact) this.#closeMore();
+    const items = this.#items();
+    if (!items.some((el) => el.tabIndex === 0) && items[0]) items[0].tabIndex = 0; // always one tab stop
+    for (const el of items) if (el !== items.find((i) => i.tabIndex === 0)) el.tabIndex = -1;
+  }
+
+  #enable() {
+    const on = !this.isDisabled && !this.readonly;
+    this.#editor?.setAttribute('contenteditable', String(on));
+    this.#editor?.toggleAttribute('aria-readonly', !on);
+    for (const b of /** @type {NodeListOf<HTMLButtonElement>} */ (this.#box?.querySelectorAll('.xo-richtext-toolbar button, .xo-richtext-toolbar select') ?? [])) b.disabled = !on;
+  }
+
+  #show(/** @type {string} */ html) {
+    const editor = this.#editor;
+    if (!editor) return;
+    if (sanitizeHtml(editor.innerHTML) !== html) editor.innerHTML = html; // rewriting the content moves the caret: only when it really differs
+    editor.toggleAttribute('data-empty', this.isEmpty(html));
+  }
+
+  // ---- events ------------------------------------------------------------------------------------------------------------
+
+  #wire(/** @type {HTMLElement} */ box, /** @type {HTMLElement} */ toolbar, /** @type {HTMLElement} */ linkBox, /** @type {HTMLElement} */ editor) {
+    editor.addEventListener('focus', () => { exec('defaultParagraphSeparator', 'p'); exec('styleWithCSS', 'false'); });
+    // the editor's own input and change events are not the control's: only userInput speaks for the control
+    editor.addEventListener('input', (event) => { event.stopPropagation(); this.#commit(); });
+    editor.addEventListener('change', (event) => event.stopPropagation());
+    editor.addEventListener('paste', (event) => { event.preventDefault(); this.#insertFrom(/** @type {ClipboardEvent} */ (event).clipboardData); });
+    editor.addEventListener('drop', (event) => { event.preventDefault(); this.#insertFrom(/** @type {DragEvent} */ (event).dataTransfer); });
+    editor.addEventListener('dragover', (event) => event.preventDefault());
+    editor.addEventListener('keydown', (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k' && this.#tool('link')) { event.preventDefault(); this.#openLink(); }
+    });
+    // while expanded, focus leaving is the dialog closing, not the person leaving the field
+    editor.addEventListener('blur', () => { if (!this.#dialog && !this.contains(document.activeElement) && !this.#moving) this.markTouched(); });
+    editor.addEventListener('keyup', () => this.#refreshState());
+    editor.addEventListener('mouseup', () => this.#refreshState());
+
+    toolbar.addEventListener('mousedown', (event) => { if (/** @type {Element} */ (event.target).closest('button')) event.preventDefault(); }); // keep the selection in the editor
+    toolbar.addEventListener('click', (event) => {
+      const button = /** @type {Element} */ (event.target).closest('button');
+      if (!(button instanceof HTMLButtonElement) || button.disabled) return;
+      const name = /** @type {string} */ (button.dataset.tool);
+      if (name === 'more') { this.#more?.hidden ? this.#openMore() : this.#closeMore(); return; }
+      if (button.closest('.xo-richtext-more')) this.#closeMore();
+      this.#run(name);
+    });
+    // the text style select keeps the editor's selection from when it was opened, and applies the choice there
+    const style = /** @type {HTMLSelectElement | null} */ (toolbar.querySelector('select[data-tool=style]'));
+    const saveSelection = () => { const sel = getSelection(); if (sel?.rangeCount && editor.contains(sel.anchorNode)) this.#saved = sel.getRangeAt(0).cloneRange(); };
+    style?.addEventListener('mousedown', saveSelection);
+    style?.addEventListener('focus', saveSelection);
+    style?.addEventListener('change', () => {
+      const sel = getSelection();
+      if (this.#saved && sel) { sel.removeAllRanges(); sel.addRange(this.#saved); }
+      editor.focus();
+      exec('formatBlock', style.value);
+      this.#commit();
+      this.#refreshState();
+    });
+    toolbar.addEventListener('keydown', (event) => this.#toolbarKey(event));
+
+    linkBox.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') { event.preventDefault(); this.#applyLink(); }
+      else if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); this.#closeLink(); }
+    });
+    linkBox.addEventListener('click', (event) => {
+      const action = /** @type {HTMLElement | null} */ (/** @type {Element} */ (event.target).closest('button'))?.dataset.action;
+      if (action === 'apply') this.#applyLink();
+      else if (action === 'remove') { this.#restore(); exec('unlink'); this.#closeLink(); this.#commit(); }
+    });
+    void box;
+  }
+
+  #tool(/** @type {string} */ name) { return this.#toolbar?.querySelector(`[data-tool="${name}"]`) ?? null; }
+
+  #toolbarKey(/** @type {KeyboardEvent} */ event) {
+    const target = /** @type {HTMLElement} */ (event.target);
+    if (target.closest('.xo-richtext-more')) { this.#menuKey(event); return; }
+    const items = this.#items();
+    const at = items.indexOf(target);
+    if (at < 0) return;
+    if (target.dataset.tool === 'more' && event.key === 'ArrowDown') { event.preventDefault(); this.#openMore(true); return; }
+    if (target.localName === 'select' && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) return; // the select's own keys
+    const next = event.key === 'ArrowRight' ? (at + 1) % items.length : event.key === 'ArrowLeft' ? (at - 1 + items.length) % items.length
+      : event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : -1;
+    if (next < 0) return;
+    event.preventDefault();
+    items.forEach((b, i) => { b.tabIndex = i === next ? 0 : -1; });
+    items[next].focus();
+  }
+
+  // ---- the More menu (compact toolbar) -------------------------------------------------------------------------------------
+
+  #openMore(focusFirst = false) {
+    const menu = this.#more;
+    if (!menu) return;
+    if (menu.hidden) { menu.hidden = false; menu.previousElementSibling?.setAttribute('aria-expanded', 'true'); }
+    if (focusFirst) /** @type {HTMLElement | null} */ (menu.firstElementChild)?.focus();
+  }
+
+  #closeMore(focus = false) {
+    const menu = this.#more;
+    if (!menu || menu.hidden) return;
+    menu.hidden = true;
+    const trigger = /** @type {HTMLElement | null} */ (menu.previousElementSibling);
+    trigger?.setAttribute('aria-expanded', 'false');
+    if (focus) trigger?.focus();
+  }
+
+  #menuKey(/** @type {KeyboardEvent} */ event) {
+    const items = /** @type {HTMLElement[]} */ ([...(this.#more?.children ?? [])]);
+    const at = items.indexOf(/** @type {HTMLElement} */ (event.target));
+    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); this.#closeMore(true); return; }
+    if (event.key === 'Tab') { this.#closeMore(); return; }
+    const next = event.key === 'ArrowDown' ? (at + 1) % items.length : event.key === 'ArrowUp' ? (at - 1 + items.length) % items.length
+      : event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : -1;
+    if (next < 0) return;
+    event.preventDefault();
+    items[next].focus();
+  }
+
+  #run(/** @type {string} */ name) {
+    const editor = this.#editor;
+    if (!editor) return;
+    if (name === 'link') { this.#openLink(); return; }
+    if (name === 'image') { this.#pickMedia(); return; }
+    editor.focus();
+    if (name === 'bold') exec('bold');
+    else if (name === 'italic') exec('italic');
+    else if (name === 'underline') exec('underline');
+    else if (name === 'ul') exec('insertUnorderedList');
+    else if (name === 'ol') exec('insertOrderedList');
+    else if (name === 'undo') exec('undo');
+    else if (name === 'redo') exec('redo');
+    else if (name === 'h2') exec('formatBlock', block() === 'h2' ? 'p' : 'h2');
+    else if (name === 'quote') exec('formatBlock', block() === 'blockquote' ? 'p' : 'blockquote');
+    this.#commit();
+    this.#refreshState();
+  }
+
+  /** The editor's content became the value (sanitised); the editor itself is left alone so the caret stays. */
+  #commit() {
+    const editor = this.#editor;
+    if (!editor) return;
+    const clean = this.isEmpty(editor.innerHTML) ? '' : sanitizeHtml(editor.innerHTML);
+    editor.toggleAttribute('data-empty', clean === '');
+    if (clean === this.value) return;
+    this.#fromUser = true;
+    try { this.userInput(clean); } finally { this.#fromUser = false; }
+  }
+
+  #refreshState() {
+    for (const button of /** @type {NodeListOf<HTMLButtonElement>} */ (this.#box?.querySelectorAll('.xo-richtext-toolbar button[aria-pressed], .xo-richtext-more [aria-checked]') ?? [])) {
+      const tool = /** @type {any} */ (TOOLS)[/** @type {string} */ (button.dataset.tool)];
+      button.setAttribute(button.hasAttribute('aria-checked') ? 'aria-checked' : 'aria-pressed', String(!!tool?.state?.()));
+    }
+    const style = /** @type {HTMLSelectElement | null} */ (this.#box?.querySelector('select[data-tool=style]') ?? null);
+    if (style) style.value = this.#blockStyle();
+  }
+
+  /** The text style at the selection: p, h2 or h3, or `mixed` when it spans different blocks (or a list or a quote). */
+  #blockStyle() {
+    const editor = this.#editor;
+    const selection = getSelection();
+    if (!editor || !selection?.rangeCount || !editor.contains(selection.anchorNode)) return 'p';
+    const range = selection.getRangeAt(0);
+    const blocks = /** @type {Element[]} */ ([...editor.children]).filter((c) => (range.intersectsNode ? range.intersectsNode(c) : c.contains(selection.anchorNode)));
+    const kinds = new Set(blocks.map((c) => /** @type {Record<string, string>} */ ({ P: 'p', H2: 'h2', H3: 'h3' })[c.tagName] ?? 'other'));
+    if (!kinds.size) return 'p';
+    return kinds.size === 1 && !kinds.has('other') ? /** @type {string} */ ([...kinds][0]) : 'mixed';
+  }
+
+  // ---- expanding into a dialog -------------------------------------------------------------------------------------------
+
+  /** Whether the editor is open in its dialog. */
+  get expanded() { return !!this.#dialog; }
+
+  /**
+   * Open the same editor in a large dialog (960px; the whole screen under 768px). The editor moves, it is not copied: the value, the selection and the undo
+   * history are the same. Done and Escape close it. Nothing is saved by this: it only changes where the editor is shown. Fires `xo-richtext-expand`.
+   */
+  expand() {
+    const box = this.#box;
+    if (!box || this.#dialog) return;
+    const dialog = document.createElement('dialog');
+    dialog.className = 'xo-richtext-dialog';
+    dialog.setAttribute('aria-label', this.label || this.name || text('xoong.richtext.editor', 'Rich text'));
+    const bar = document.createElement('div');
+    bar.className = 'xo-richtext-dialog-bar';
+    const done = document.createElement('button');
+    done.type = 'button';
+    done.className = 'xo-richtext-done';
+    done.textContent = text('xoong.richtext.done', 'Done');
+    done.addEventListener('click', () => this.collapse());
+    bar.append(done);
+    const caret = this.#saveCaret();
+    this.#marker = document.createComment('xo-richtext');
+    this.#moving = true;
+    box.replaceWith(this.#marker);
+    dialog.append(bar, box);
+    document.body.append(dialog);
+    this.#dialog = dialog;
+    dialog.addEventListener('close', () => this.#restoreBox()); // Escape closes a native dialog, and so does collapse()
+    if (dialog.showModal) dialog.showModal(); else dialog.setAttribute('open', '');
+    this.#moving = false;
+    this.#applySize();
+    this.#editor?.focus();
+    this.#restoreCaret(caret);
+    this.dispatchEvent(new CustomEvent('xo-richtext-expand', { bubbles: true }));
+  }
+
+  /** Close the dialog and put the editor back (what Done and Escape do). Fires `xo-richtext-done`. */
+  collapse() {
+    const dialog = this.#dialog;
+    if (!dialog) return;
+    if (dialog.close) dialog.close(); else this.#restoreBox();
+  }
+
+  /** Where the caret or selection is in the editor, as paths, or null. */
+  #saveCaret() {
+    const editor = this.#editor;
+    const sel = getSelection();
+    if (!editor || !sel?.rangeCount || !editor.contains(sel.anchorNode) || !editor.contains(sel.focusNode)) return null;
+    return { a: pathOf(editor, sel.anchorNode), ao: sel.anchorOffset, f: pathOf(editor, sel.focusNode), fo: sel.focusOffset };
+  }
+
+  #restoreCaret(/** @type {{ a: number[], ao: number, f: number[], fo: number } | null} */ caret) {
+    const editor = this.#editor;
+    if (!caret || !editor) return;
+    const anchor = nodeAt(editor, caret.a);
+    const focus = nodeAt(editor, caret.f);
+    if (anchor && focus) getSelection()?.setBaseAndExtent(anchor, caret.ao, focus, caret.fo);
+  }
+
+  #restoreBox() {
+    const dialog = this.#dialog;
+    const box = this.#box;
+    if (!dialog || !box || !this.#marker) return;
+    this.#dialog = null;
+    this.#moving = true;
+    const caret = this.#saveCaret();
+    this.#marker.replaceWith(box);
+    this.#marker = null;
+    dialog.remove();
+    this.#moving = false;
+    this.#applySize();
+    this.#editor?.focus();
+    this.#restoreCaret(caret);
+    this.dispatchEvent(new CustomEvent('xo-richtext-done', { bubbles: true }));
+  }
+
+  // ---- paste, drop ---------------------------------------------------------------------------------------------------------
+
+  #insertFrom(/** @type {DataTransfer | null} */ data) {
+    if (!data || !this.#editor || this.readonly || this.isDisabled) return;
+    const html = data.getData('text/html');
+    const plain = data.getData('text/plain');
+    this.#editor.focus();
+    if (html) { exec('insertHTML', sanitizeHtml(html)); }
+    else if (plain) {
+      const paragraphs = plain.replace(/\r\n?/g, '\n').split(/\n{2,}/);
+      if (paragraphs.length === 1 && !plain.includes('\n')) exec('insertText', plain);
+      else exec('insertHTML', paragraphs.map((p) => `<p>${esc(p).replace(/\n/g, '<br>')}</p>`).join(''));
+    }
+    this.#commit();
+  }
+
+  // ---- links ---------------------------------------------------------------------------------------------------------------
+
+  #openLink() {
+    const input = this.#linkInput;
+    if (!input || !this.#linkBox) return;
+    const selection = getSelection();
+    this.#saved = selection && selection.rangeCount && this.#editor?.contains(selection.anchorNode) ? selection.getRangeAt(0).cloneRange() : null;
+    input.value = anchorAtSelection()?.getAttribute('href') ?? '';
+    this.#setLinkError('');
+    this.#linkBox.hidden = false;
+    input.focus();
+    input.select();
+  }
+
+  #closeLink() {
+    if (!this.#linkBox || this.#linkBox.hidden) return;
+    this.#linkBox.hidden = true;
+    this.#restore();
+    this.#editor?.focus();
+  }
+
+  #restore() {
+    const selection = getSelection();
+    if (this.#saved && selection) { selection.removeAllRanges(); selection.addRange(this.#saved); }
+    this.#editor?.focus();
+    const link = anchorAtSelection();
+    if (link && selection?.isCollapsed) selection.selectAllChildren(link); // a caret inside a link means the whole link
+  }
+
+  #setLinkError(/** @type {string} */ message) {
+    if (this.#linkError) this.#linkError.textContent = message;
+    if (message) this.#linkInput?.setAttribute('aria-invalid', 'true'); else this.#linkInput?.removeAttribute('aria-invalid');
+  }
+
+  /** A typed address made into a link target: "a@b.test" -> mailto:, "example.com" -> https://. */
+  static linkTarget(/** @type {string} */ raw) {
+    const url = raw.trim();
+    if (!url) return '';
+    if (/^[^\s@:/]+@[^\s@:/]+\.[^\s@:/]+$/.test(url)) return `mailto:${url}`;
+    if (!/^[a-z][a-z0-9+.-]*:/i.test(url) && /^[^\s/]+\.[a-z]{2,}([/?#]|$)/i.test(url)) return `https://${url}`;
+    return url;
+  }
+
+  #applyLink() {
+    const url = XoRichtext.linkTarget(this.#linkInput?.value ?? '');
+    if (!url) { this.#restore(); exec('unlink'); this.#closeLink(); this.#commit(); return; }
+    if (!isSafeLink(url)) { this.#setLinkError(text('xoong.richtext.linkInvalid', 'Use an address that starts with http://, https://, mailto: or tel:.')); this.#linkInput?.focus(); return; }
+    if (this.#linkBox) this.#linkBox.hidden = true;
+    this.#restore();
+    const selection = getSelection();
+    if (selection && selection.isCollapsed && !anchorAtSelection()) exec('insertHTML', `<a href="${esc(url)}">${esc(url)}</a>`);
+    else exec('createLink', url);
+    this.#commit();
+    this.#refreshState();
+  }
+
+  // ---- media ---------------------------------------------------------------------------------------------------------------
+
+  #pickMedia() {
+    const selection = getSelection();
+    const saved = selection && selection.rangeCount && this.#editor?.contains(selection.anchorNode) ? selection.getRangeAt(0).cloneRange() : null;
+    const insert = (/** @type {{ src: string, alt?: string } | string} */ media, /** @type {string} */ alt = '') => {
+      const { src, alt: a = alt } = typeof media === 'string' ? { src: media, alt } : media;
+      this.insertImage(src, a, saved);
+    };
+    this.dispatchEvent(new CustomEvent('xo-pick-media', { bubbles: true, cancelable: true, detail: { insert } }));
+  }
+
+  /** Insert an image (http, https or a relative URL) at the caret. */
+  insertImage(/** @type {string} */ src, alt = '', /** @type {Range | null} */ at = null) {
+    if (!this.#editor || this.readonly || this.isDisabled) return false;
+    const html = sanitizeHtml(`<img src="${esc(src)}" alt="${esc(alt)}">`);
+    if (!html.includes('<img')) return false;
+    this.#editor.focus();
+    const selection = getSelection();
+    if (at && selection) { selection.removeAllRanges(); selection.addRange(at); }
+    // A Range, not execCommand: Chromium's insertHTML copies computed styles into a style="" attribute, which a strict CSP reports.
+    const template = document.createElement('template');
+    template.innerHTML = html.replace(/^<p>|<\/p>$/g, '');
+    const img = template.content.firstChild;
+    const editor = this.#editor;
+    const range = selection && selection.rangeCount && editor.contains(selection.anchorNode) ? selection.getRangeAt(0) : null;
+    if (!img) return false;
+    let heading = range?.startContainer ?? null;
+    while (heading && heading.parentNode !== editor) heading = heading.parentNode;
+    if (range && heading && /^H[1-6]$/.test(heading.nodeName)) { // an image in a heading is rarely wanted: a paragraph of its own after it
+      const p = document.createElement('p');
+      p.append(img);
+      heading.after(p);
+      range.setStartAfter(img);
+    } else if (range) {
+      range.deleteContents();
+      range.insertNode(img);
+      range.setStartAfter(img);
+    } else editor.append(img);
+    if (selection && range) { range.collapse(true); selection.removeAllRanges(); selection.addRange(range); }
+    this.#commit();
+    return true;
+  }
+}
+define('xo-richtext', XoRichtext);

package/src/sanitize.js

@@ -0,0 +1,143 @@
+// @ts-check
+/**
+ * The HTML that <xo-richtext> keeps. Anything else is removed, whether it comes from a paste, from `value`, or from the server.
+ *
+ * Allowed: p, h2, h3, strong, em, u, ul, ol, li, blockquote, br, a (href, title) and img (src, alt, width, height).
+ * Mapped: b -> strong, i -> em, h1 -> h2, h4 to h6 -> h3, div -> p. Everything else is unwrapped (its text stays); script, style, iframe, object,
+ * embed, svg, math, template and noscript go with their content. No attribute other than the ones above survives (no style, class, id, on*).
+ * Links keep only http, https, mailto and tel; images keep only http, https and relative URLs. Loose text at the top level is wrapped in <p>.
+ * Non-breaking spaces become plain spaces; empty paragraphs at the very start or end are removed; a line break at the very end of a block
+ * (a browser's placeholder) is removed.
+ *
+ * The result is built as a string with its own escaping from an inert parse (`<template>`), so what is returned never goes through the parser again
+ * in a different shape than the one that was checked.
+ */
+
+const DROP = new Set(['SCRIPT', 'STYLE', 'IFRAME', 'OBJECT', 'EMBED', 'SVG', 'MATH', 'TEMPLATE', 'NOSCRIPT', 'HEAD', 'TITLE', 'META', 'LINK', 'BASE', 'INPUT', 'BUTTON', 'SELECT', 'TEXTAREA', 'CANVAS', 'AUDIO', 'VIDEO']);
+const RENAME = { B: 'strong', STRONG: 'strong', I: 'em', EM: 'em', U: 'u', H1: 'h2', H2: 'h2', H3: 'h3', H4: 'h3', H5: 'h3', H6: 'h3', DIV: 'p', P: 'p', UL: 'ul', OL: 'ol', LI: 'li', BLOCKQUOTE: 'blockquote' };
+const BLOCK = new Set(['p', 'h2', 'h3', 'ul', 'ol', 'blockquote', 'li']);
+const LINK_SCHEMES = /^(https?:|mailto:|tel:)/i;
+
+const esc = (/** @type {string} */ s) => s.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c] ?? c);
+
+/** A link target the editor allows: http, https, mailto or tel. */
+export function isSafeLink(/** @type {string} */ url) {
+  return LINK_SCHEMES.test(url.replace(/[\u0000- \u007f-\u009f]/g, ''));
+}
+
+/** An image source the editor allows: http, https, or a URL without a scheme (relative or root-relative). */
+export function isSafeImage(/** @type {string} */ url) {
+  const u = url.replace(/[\u0000- \u007f-\u009f]/g, '');
+  return /^https?:/i.test(u) || (!/^[a-z][a-z0-9+.-]*:/i.test(u) && !u.startsWith('//'));
+}
+
+/**
+ * @param {string} html
+ * @param {{ images?: boolean }} [options] `images: false` removes <img>
+ * @returns {string}
+ */
+export function sanitizeHtml(html, { images = true } = {}) {
+  const template = document.createElement('template');
+  template.innerHTML = String(html ?? '');
+
+  /** A line break at the very end of a block is a browser's placeholder, not content (`<li>text<br></li>`); a block with only a break is a blank line and keeps it. */
+  const trimBreak = (/** @type {string} */ body) => (body.endsWith('<br>') && body !== '<br>' ? body.slice(0, -4) : body);
+
+  /** Inline content of a node, as a string (no block tags inside: they are unwrapped). */
+  function inline(/** @type {Node} */ node) {
+    let out = '';
+    for (const child of node.childNodes) out += one(child, true);
+    return out;
+  }
+
+  /** @returns {string} */
+  function one(/** @type {Node} */ node, /** @type {boolean} */ inInline) {
+    if (node.nodeType === 3) return esc((node.nodeValue ?? '').replace(/\u00a0/g, ' ')); // browsers type non-breaking spaces and Word pastes them everywhere: plain spaces
+    if (node.nodeType !== 1) return '';
+    const el = /** @type {Element} */ (node);
+    const tag = el.tagName.toUpperCase();
+    if (DROP.has(tag)) return '';
+    if (tag === 'BR') return '<br>';
+    if (tag === 'IMG') {
+      const src = el.getAttribute('src') ?? '';
+      if (!images || !src || !isSafeImage(src)) return '';
+      const size = ['width', 'height'].map((k) => { const v = el.getAttribute(k); return v && /^\d{1,5}$/.test(v) ? ` ${k}="${v}"` : ''; }).join('');
+      return `<img src="${esc(src)}" alt="${esc(el.getAttribute('alt') ?? '')}"${size}>`;
+    }
+    if (tag === 'A') {
+      const href = el.getAttribute('href') ?? '';
+      const body = inline(el);
+      if (!href || !isSafeLink(href)) return body;
+      const title = el.getAttribute('title');
+      return `<a href="${esc(href.trim())}"${title ? ` title="${esc(title)}"` : ''} rel="noopener noreferrer">${body}</a>`;
+    }
+    const name = /** @type {Record<string, string>} */ (RENAME)[tag];
+    if (name === 'strong' || name === 'em' || name === 'u') { const body = inline(el); return body ? `<${name}>${body}</${name}>` : ''; }
+    if (name && BLOCK.has(name)) {
+      if (inInline) return inline(el); // a block inside inline content (a heading in a link, a list in a paragraph) becomes its text
+      return block(el, name);
+    }
+    return inline(el); // unknown element: keep what is inside
+  }
+
+  /** A block element with its content. */
+  function block(/** @type {Element} */ el, /** @type {string} */ name) {
+    if (name === 'ul' || name === 'ol') {
+      const items = [...el.childNodes].map((c) => (c.nodeType === 1 && /** @type {Element} */ (c).tagName === 'LI' ? block(/** @type {Element} */ (c), 'li') : '')).join('');
+      return items ? `<${name}>${items}</${name}>` : '';
+    }
+    if (name === 'li') {
+      let out = '';
+      for (const child of el.childNodes) {
+        const tag = child.nodeType === 1 ? /** @type {Element} */ (child).tagName : '';
+        out += tag === 'UL' || tag === 'OL' ? one(child, false) : one(child, true); // nested lists stay; other blocks flatten to text
+      }
+      return `<li>${trimBreak(out)}</li>`;
+    }
+    if (name === 'blockquote') {
+      const inner = blocks(el);
+      return inner ? `<blockquote>${inner}</blockquote>` : '';
+    }
+    const body = trimBreak(inline(el));
+    return body.replace(/<br>$/, '') === '' && !body.includes('<img') ? (name === 'p' ? '<p><br></p>' : '') : `<${name}>${body}</${name}>`;
+  }
+
+  /** The children of a container as blocks: loose inline runs are wrapped in a paragraph. */
+  function blocks(/** @type {Node} */ container) {
+    let out = '';
+    let run = '';
+    const flush = () => { if (run.replace(/<br>/g, '').trim() !== '' || run.includes('<img')) out += `<p>${run}</p>`; run = ''; };
+    for (const child of container.childNodes) {
+      const tag = child.nodeType === 1 ? /** @type {Element} */ (child).tagName.toUpperCase() : '';
+      const name = /** @type {Record<string, string>} */ (RENAME)[tag];
+      if (name && BLOCK.has(name) && name !== 'li') { flush(); out += one(child, false); }
+      else if (DROP.has(tag)) continue;
+      else if (tag && !name && hasBlock(child)) { flush(); out += blocks(child); } // an unknown wrapper around blocks: look inside
+      else run += one(child, true);
+    }
+    flush();
+    return out;
+  }
+
+  /** Whether an element has a block element somewhere inside (so an unknown wrapper such as <section> must not hide it). */
+  function hasBlock(/** @type {Node} */ node) {
+    for (const child of node.childNodes) {
+      if (child.nodeType !== 1) continue;
+      const tag = /** @type {Element} */ (child).tagName.toUpperCase();
+      if (DROP.has(tag)) continue;
+      const name = /** @type {Record<string, string>} */ (RENAME)[tag];
+      if ((name && BLOCK.has(name)) || hasBlock(child)) return true;
+    }
+    return false;
+  }
+
+  // blank lines at the very start or end are editor leftovers (a browser leaves them around a list); blank lines inside the text are the author's
+  return blocks(template.content).replace(/^(?:<p><br><\/p>)+|(?:<p><br><\/p>)+$/g, '');
+}
+
+/** The text of sanitised or raw HTML, for "is it empty" checks and length limits. */
+export function textOf(/** @type {string} */ html) {
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  return template.content.textContent ?? '';
+}