mnfst 0.5.231 → 0.5.232

package/lib/{manifest.text.edit.js → manifest.rich.text.js}

@@ -1,55 +1,44 @@
-/* Manifest Text Edit — rich text editing.
-
-   One directive, two roles. Without a command modifier it marks the editable area
-   and binds its value: x-text-edit="post". With one, it turns any element into a
-   control for that area: <button x-text-edit.strong>. Controls need no wrapper and
-   no shared parent — they resolve to an area by containment, then by focus, so a
-   toolbar can sit anywhere and two dialogs in one DOM never cross wires.
-
-   Markdown by default (portable, and x-markdown renders it straight back);
-   .html stores sanitized HTML; .plain stores text.
-
-   Serialization is a closed round trip over exactly what the commands can produce —
-   headings, bold, italic, strike, code, links, lists, quote, rule. Markdown the
-   editor can't author (tables, footnotes) is not a silent lossy convert: use .html. */
+/* Manifest Rich Text */
 
 (function () {
 
     /* ---- Tag tables ----
-       Commands are named for the tag they produce, so there is no Manifest
-       vocabulary to map onto HTML: .blockquote makes a <blockquote>. `md` marks the
-       tags markdown can carry; the rest are available in .html mode only, where they
-       survive, rather than being written and silently dropped on the next save. */
+       Commands are tag names; `md` marks tags markdown can carry (others are .html only). */
     const INLINE_TAGS = {
         strong: { md: 1 }, b: { md: 1 }, em: { md: 1 }, i: { md: 1 }, s: { md: 1 }, del: { md: 1 }, code: { md: 1 },
-        u: {}, mark: {}, small: {}, sub: {}, sup: {}, kbd: {}, samp: {}, var: {}, abbr: {}, cite: {}, q: {}, ins: {}, dfn: {}, time: {}, span: {}
+        abbr: { attr: 'title' }, bdi: {}, bdo: { attr: 'dir', def: 'rtl' }, cite: {}, data: { attr: 'value' },
+        dfn: { attr: 'title' }, ins: {}, kbd: {}, mark: {}, q: {}, samp: {}, small: {}, span: {}, sub: {}, sup: {},
+        time: { attr: 'datetime' }, u: {}, var: {}
     };
     const BLOCK_TAGS = {
         p: { md: 1 }, h1: { md: 1 }, h2: { md: 1 }, h3: { md: 1 }, h4: { md: 1 }, h5: { md: 1 }, h6: { md: 1 },
-        blockquote: { md: 1 }, pre: { md: 1 },
-        address: {}, figure: {}, figcaption: {}, dl: {}, dt: {}, dd: {}
+        blockquote: { md: 1 }, pre: { md: 1 }, address: {}
     };
-    const BLOCK = [...Object.keys(BLOCK_TAGS), 'ul', 'ol', 'li', 'hr', 'table', 'td', 'th'].map(t => t.toUpperCase());
+    const BLOCK = [...Object.keys(BLOCK_TAGS), 'figure', 'figcaption', 'dl', 'dt', 'dd', 'ul', 'ol', 'li', 'hr', 'table', 'td', 'th'].map(t => t.toUpperCase());
+    const BLOCK_SEL = BLOCK.join(',');
     const MARKS = { STRONG: '**', B: '**', EM: '*', I: '*', S: '~~', DEL: '~~', CODE: '`' };
-    const INLINE_OK = new Set([...Object.keys(INLINE_TAGS).map(t => t.toUpperCase()), 'BR', 'A', 'IMG']);
+    const INLINE_OK = new Set([...Object.keys(INLINE_TAGS).map(t => t.toUpperCase()), 'BR', 'WBR', 'A', 'IMG']);
 
-    /* ---- URL policy ----
-       One rule for every href and src: no script schemes, data: only as an image.
-       URL parsers skip controls and whitespace inside a scheme, so this does too. */
+    /* ---- URL policy ---- */
+    // No script schemes; data: only as an image.
     function unsafeUrl(url, image) {
         const u = String(url == null ? '' : url).replace(/[\x00-\x20\x7f]/g, '');
         const scheme = (u.match(/^([a-z][a-z0-9+.-]*):/i) || [])[1];
         if (!scheme) return false;
         const s = scheme.toLowerCase();
         if (s === 'javascript' || s === 'vbscript') return true;
-        return s === 'data' && !(image && /^data:image\//i.test(u));
+        return s === 'data' && !(image && /^data:image\/(png|jpeg|gif|webp|avif)[;,]/i.test(u));   // raster only: an SVG can carry script
     }
 
     /* ---- HTML → Markdown ---- */
-    // < > and an entity-shaped & are escaped too, so typed markup stays text in any renderer.
     const ENTITY = /&(?=#?[a-z0-9]+;)/gi;
-    const esc = (t) => t.replace(/([\\`*_[\]<>])/g, '\\$1').replace(ENTITY, '\\&');
-    // A destination ends at whitespace or an unbalanced paren; < > would open raw HTML.
+    const esc = (t) => t.replace(/([\\`*_~[\]<>])/g, '\\$1').replace(ENTITY, '\\&');
+    // Line starts that would parse as a heading, list or rule
+    const escLead = (text) => text.split('\n').map(l => l
+        .replace(/^(\s*)(#{1,6})(?=\s|$)/, '$1\\$2')
+        .replace(/^(\s*)([-+])(?=\s)/, '$1\\$2')
+        .replace(/^(\s*)-(?=-{2,}\s*$)/, '$1\\-')
+        .replace(/^(\s*)(\d+)\.(?=\s)/, '$1$2\\.')).join('\n');
     const mdUrl = (u) => u.replace(/[\s()<>]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase().padStart(2, '0')).replace(ENTITY, '\\&');
 
     function inline(node) {
@@ -69,19 +58,18 @@
         return out;
     }
 
-    // <br> inside a <pre> is a line break; textContent alone would run the lines together.
     const preText = (n) => [...n.childNodes].map(c =>
         c.nodeName === 'BR' ? '\n' : c.nodeType === 3 ? c.nodeValue : preText(c)).join('');
 
     function block(node, depth) {
-        if (node.nodeType === 3) { const t = node.textContent.trim(); return t ? esc(t) : ''; }
+        if (node.nodeType === 3) { const t = node.textContent.trim(); return t ? escLead(esc(t)) : ''; }
         if (node.nodeType !== 1) return '';
         const tag = node.tagName;
         if (tag === 'HR') return '---';
         if (tag === 'PRE') return '```\n' + preText(node).replace(/\n+$/, '') + '\n```';
         if (/^H[1-6]$/.test(tag)) return '#'.repeat(+tag[1]) + ' ' + inline(node).trim();
         if (tag === 'BLOCKQUOTE') return blocks(node, depth).split('\n').map(l => ('> ' + l).trimEnd()).join('\n');
-        if (tag === 'TABLE') return tableLines(node).map(cells => cells.map(c => inline(c).trim()).join(CELL_SEP)).join('\n\n');
+        if (tag === 'TABLE') return tableLines(node).map(cells => escLead(cells.map(cellMarkdown).join(CELL_SEP))).join('\n\n');
         if (tag === 'UL' || tag === 'OL') {
             const pad = '    '.repeat(depth);
             return [...node.children].filter(li => li.tagName === 'LI').map((li, i) => {
@@ -93,10 +81,11 @@
                 return pad + bullet + own + (sub ? '\n' + sub : '');
             }).join('\n');
         }
-        return inline(node).trim();
+        // A container of blocks (dl, figure, a cell's paragraphs) keeps them apart
+        if ([...node.children].some(c => BLOCK.includes(c.tagName))) return blocks(node, depth);
+        return escLead(inline(node).trim());
     }
 
-    // A list item's own text is everything except its nested lists.
     function nestedStripped(li, nested) {
         if (!nested.length) return li;
         const c = li.cloneNode(true);
@@ -104,18 +93,41 @@
         return c;
     }
 
+    // Consecutive inline nodes (loose text, marks) are one paragraph, formatting kept
     function blocks(root, depth) {
         const parts = [];
-        root.childNodes.forEach(n => { const b = block(n, depth || 0); if (b) parts.push(b); });
+        let run = null;
+        const flush = () => { if (run) { const t = escLead(inline(run).trim()); if (t) parts.push(t); run = null; } };
+        root.childNodes.forEach(n => {
+            if (n.nodeType === 1 && (BLOCK.includes(n.tagName) || [...n.children].some(c => BLOCK.includes(c.tagName)))) {
+                flush();
+                const b = block(n, depth || 0); if (b) parts.push(b);
+                return;
+            }
+            if (n.nodeType === 1 || n.nodeType === 3) (run = run || document.createElement('div')).appendChild(n.cloneNode(true));
+        });
+        flush();
         return parts.join('\n\n');
     }
 
     const toMarkdown = (root) => blocks(root, 0).replace(/\n{3,}/g, '\n\n').trim();
+    // Single-line values never parse block syntax, so line starts need no escape
+    const inlineMarkdown = (root) => {
+        const flat = document.createElement('div');
+        flat.innerHTML = flattenLines(root.innerHTML, true);
+        return inline(flat).trim();
+    };
+
+    // A cell's blocks joined with a space
+    const cellMarkdown = (cell) => {
+        if (![...cell.children].some(c => BLOCK.includes(c.tagName))) return inline(cell).trim();
+        const c = cell.cloneNode(true);
+        [...c.children].forEach(b => { if (BLOCK.includes(b.tagName)) { b.before(' '); b.after(' '); } });
+        return inline(c).replace(/\s+/g, ' ').trim();
+    };
 
-    /* ---- Tables in markdown ----
-       Markdown here has no tables (they need .html), so a table becomes one line per
-       row, cells joined by " · " — readable, and unlike pipes or tabs not syntax
-       that re-parses as something else. */
+    /* ---- Tables in markdown ---- */
+    // One line per row, cells joined by " · ".
     const CELL_SEP = ' · ';
     const tableLines = (table) => [...table.rows].map(r => [...r.cells])
         .filter(cells => cells.some(c => c.textContent.trim() || c.querySelector('img')));
@@ -123,14 +135,13 @@
     function flattenTables(html, blocks) {
         const t = document.createElement('template');
         t.innerHTML = String(html == null ? '' : html);
-        // Innermost first, so a nested table is already text when its host is read.
         [...t.content.querySelectorAll('table')].reverse().forEach(table => {
             const frag = document.createDocumentFragment();
             tableLines(table).forEach((cells, i) => {
                 const line = blocks ? document.createElement('p') : frag;
                 if (!blocks && i) frag.appendChild(document.createElement('br'));
                 cells.forEach((cell, j) => {
-                    cell.querySelectorAll(BLOCK.join(',')).forEach(b => b.replaceWith(...b.childNodes, ' '));
+                    cell.querySelectorAll(BLOCK_SEL).forEach(b => b.replaceWith(...b.childNodes, ' '));
                     cell.normalize();
                     const a = cell.firstChild, z = cell.lastChild;
                     if (a && a.nodeType === 3) a.nodeValue = a.nodeValue.replace(/^\s+/, '');
@@ -145,17 +156,37 @@
         return t.innerHTML;
     }
 
+    // Html-only blocks become paragraphs for a markdown document
+    // Markdown keeps only its own marks: other inline tags (u, mark, sub, span...) are unwrapped
+    function markdownMarks(html) {
+        const t = document.createElement('template');
+        t.innerHTML = html;
+        [...t.content.querySelectorAll('*')].reverse().forEach(el => {
+            if (INLINE_OK.has(el.tagName) && !MARKS[el.tagName] && !/^(A|IMG|BR)$/.test(el.tagName)) el.replaceWith(...el.childNodes);
+        });
+        return t.innerHTML;
+    }
+
+    function markdownBlocks(html) {
+        const t = document.createElement('template');
+        t.innerHTML = html;
+        [...t.content.querySelectorAll('dt, dd, figcaption, address')].reverse().forEach(b => {
+            if ([...b.children].some(c => BLOCK.includes(c.tagName))) b.replaceWith(...b.childNodes);
+            else retagBlock(b, 'p');
+        });
+        [...t.content.querySelectorAll('dl, figure')].reverse().forEach(b => b.replaceWith(...b.childNodes));
+        return t.innerHTML;
+    }
+
     /* ---- Markdown → HTML ---- */
     const escHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
 
-    // Escapes are masked out before the mark passes and restored last, so a literal
-    // \* never gets read as emphasis and never comes back double-escaped.
-    const HOLD = '\uE000';
+    // Escapes and code spans (verbatim) are held out of the mark passes, left to right, and restored last
+    const HOLD = '';
     function inlineHtml(s) {
         const held = [];
         return escHtml(s)
-            .replace(/\\(&lt;|&gt;|&amp;|[\\`*_~[\]])/g, (_, c) => HOLD + (held.push(c) - 1) + HOLD)
-            .replace(/`([^`]+)`/g, (_, c) => `<code>${c}</code>`)
+            .replace(/\\(&lt;|&gt;|&amp;|[\\`*_~[\]#+.-])|`([^`]+)`/g, (_, c, code) => HOLD + (held.push(code != null ? `<code>${code}</code>` : c) - 1) + HOLD)
             .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
             .replace(/~~([^~]+)~~/g, '<s>$1</s>')
             .replace(/(^|[^*])\*([^*\n]+)\*/g, '$1<em>$2</em>')
@@ -165,7 +196,7 @@
             .replace(new RegExp(HOLD + '(\\d+)' + HOLD, 'g'), (_, i) => held[+i]);
     }
 
-    // Indented items nest. Depth is one level per four spaces — what the serializer emits.
+    // Four spaces per nesting level.
     function renderList(items, i, depth) {
         const tag = items[i].tag;
         let html = `<${tag}>`;
@@ -196,7 +227,7 @@
         const flushAll = () => { flushPara(); flushList(); flushQuote(); };
 
         for (const raw of lines) {
-            const line = raw.replace(/[^\S\n]+$/, m => m.length >= 2 ? '  ' : '');   // keep a hard break, drop stray trailing space
+            const line = raw.replace(/[^\S\n]+$/, m => m.length >= 2 ? '  ' : '');
             if (fence !== null) { if (/^```/.test(line)) { out.push(`<pre><code>${escHtml(fence.join('\n'))}</code></pre>`); fence = null; } else fence.push(raw); continue; }
             if (/^```/.test(line)) { flushAll(); fence = []; continue; }
             if (!line.trim()) { flushAll(); continue; }
@@ -219,32 +250,30 @@
         return out.join('');
     }
 
-    /* ---- Sanitize (paste, and .html round trips) ---- */
-    // Elements whose content IS the payload — removed outright. Everything else
-    // outside the allowlist is unwrapped, which keeps a pasted document's text and
-    // marks while dropping its markup.
+    /* ---- Sanitize ---- */
+    // Payload elements are dropped; anything else outside the allowlist is unwrapped.
     const DROP = new Set(['SCRIPT', 'STYLE', 'IFRAME', 'OBJECT', 'EMBED', 'LINK', 'META', 'NOSCRIPT', 'TEMPLATE', 'SVG', 'MATH']);
 
     function sanitize(html, allowBlocks, keepStyle) {
         const t = document.createElement('template');
         t.innerHTML = String(html == null ? '' : html);
-        const ok = new Set(allowBlocks ? [...INLINE_OK, ...BLOCK, 'INPUT', 'TR', 'TBODY', 'THEAD', 'CAPTION', 'DT', 'DD', 'COLGROUP', 'COL'] : INLINE_OK);
-        // Depth-first: children are cleaned before their parent unwraps, so nothing
-        // hoisted out of a stripped wrapper escapes the walk.
+        const ok = new Set(allowBlocks ? [...INLINE_OK, ...BLOCK, 'INPUT', 'TR', 'TBODY', 'THEAD', 'CAPTION', 'COLGROUP', 'COL'] : INLINE_OK);
+        // Depth-first, so nothing hoisted out of an unwrapped parent escapes the walk
         const walk = (node) => [...node.childNodes].forEach(c => {
             if (c.nodeType === 8) return c.remove();
             if (c.nodeType !== 1) return;
             if (DROP.has(c.tagName)) return c.remove();
             walk(c);
             if (!ok.has(c.tagName)) return c.replaceWith(...c.childNodes);
+            const meta = INLINE_TAGS[c.tagName.toLowerCase()];
             [...c.attributes].forEach(a => {
                 const n = a.name.toLowerCase();
                 if (c.tagName === 'A' && n === 'href' && !unsafeUrl(a.value)) return;
                 if (c.tagName === 'IMG' && (n === 'alt' || (n === 'src' && !unsafeUrl(a.value, true)))) return;
                 if (c.tagName === 'INPUT' && (n === 'type' || n === 'checked')) return;
-                // Without these a merged cell comes apart on the next save
                 if (/^(TD|TH)$/.test(c.tagName) && (n === 'colspan' || n === 'rowspan') && /^[1-9]\d{0,2}$/.test(a.value)) return;
-                if (n === 'style' && keepStyle && !/expression|url\s*\(|javascript:/i.test(a.value)) return;   // our own colour, font and alignment
+                if (meta && meta.attr === n && (n !== 'dir' || /^(ltr|rtl|auto)$/i.test(a.value))) return;
+                if (n === 'style' && keepStyle && !/expression|url\s*\(|javascript:|@import/i.test(a.value)) return;
                 c.removeAttribute(a.name);
             });
         });
@@ -252,36 +281,83 @@
         return t.innerHTML;
     }
 
-    // Markdown → HTML bound for the DOM: always through the sanitizer.
     const markdownHtml = (md) => sanitize(fromMarkdown(md), true);
 
+    // Pasted spans left bare once their styles are stripped carry nothing
+    function unwrapBareSpans(html) {
+        const t = document.createElement('template');
+        t.innerHTML = html;
+        [...t.content.querySelectorAll('span')].reverse().forEach(s => { if (!s.attributes.length) s.replaceWith(...s.childNodes); });
+        return t.innerHTML;
+    }
+
+    /* ---- Single-line content ---- */
+    const flatText = (s) => String(s == null ? '' : s).replace(/\s*\n\s*/g, ' ');
+
+    // Blocks and breaks become spaces, then inline-only and whitespace-collapsed.
+    function flattenLines(html, keepStyle) {
+        const t = document.createElement('template');
+        t.innerHTML = String(html == null ? '' : html);
+        t.content.querySelectorAll('br').forEach(b => b.replaceWith(' '));
+        t.content.querySelectorAll('*').forEach(el => { if (!INLINE_OK.has(el.tagName)) { el.before(' '); el.after(' '); } });
+        t.innerHTML = sanitize(t.innerHTML, false, keepStyle);
+        // One space per boundary, across element edges too
+        // Images and other replaced elements are content: the space after one stays
+        const walker = document.createTreeWalker(t.content, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+        let spaced = true, last = null;
+        for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+            if (n.nodeType === 1) { if (/^(IMG|WBR)$/.test(n.tagName)) { spaced = false; last = n; } continue; }
+            let v = n.nodeValue.replace(/[ \t\n\r\f]+/g, ' ');
+            if (spaced) v = v.replace(/^ /, '');
+            if (v) { spaced = v.endsWith(' '); last = n; }
+            n.nodeValue = v;
+        }
+        if (last && last.nodeType === 3) last.nodeValue = last.nodeValue.replace(/ $/, '');
+        return t.innerHTML;
+    }
+
+    // One line per block or <br> (.inline with breaks): boundaries become single <br>s, none at the ends.
+    const LINE = '\u2028', PARA = '\u2029';
+    function breakLines(html, keepStyle) {
+        const t = document.createElement('template');
+        t.innerHTML = String(html == null ? '' : html);
+        t.content.querySelectorAll('br').forEach(b => b.replaceWith(LINE));
+        t.content.querySelectorAll(BLOCK_SEL).forEach(b => { b.before(PARA); b.after(PARA); });
+        return flattenLines(t.innerHTML, keepStyle)
+            .replace(/ *([\u2028\u2029]) */g, '$1')
+            .replace(/\u2029+/g, PARA).replace(/\u2028\u2029|\u2029\u2028/g, LINE)
+            .replace(/^[\u2028\u2029]+|[\u2028\u2029]+$/g, '')
+            .replace(/[\u2028\u2029]/g, '<br>');
+    }
+    const textLines = (text) => String(text == null ? '' : text).split(/\r\n?|\n/).map(l => l.trim()).filter(Boolean)
+        .map(l => sanitize(inlineHtml(l), false)).join('<br>');
+
     /* ---- Selection primitives ---- */
     const sel = () => window.getSelection();
-    const range = () => { const s = sel(); return s && s.rangeCount ? s.getRangeAt(0) : null; };
+    // `probe` stands in for the live range while a control is judged against an area's saved one
+    let probe = null;
+    const liveRange = () => { const s = sel(); return s && s.rangeCount ? s.getRangeAt(0) : null; };
+    const range = () => probe || liveRange();
 
     function elementAt(node) { while (node && node.nodeType !== 1) node = node.parentNode; return node; }
 
-    // Stops at the editable area, like blockEl does. Without that boundary an area
-    // that is itself a formatting element — <strong x-text-edit> is a perfectly
-    // reasonable thing to write — reports its own tag as formatting on the text
-    // inside it, and toggling that tag off unwraps the editor.
+    // Bounded by the area: an area that is itself <strong> never reports as formatting
     function ancestor(match) {
         const r = range(); if (!r) return null;
         const el = elementAt(r.startContainer); if (!el) return null;
         const found = el.closest(match); if (!found) return null;
-        const area = el.closest('[data-text-edit]');
+        const area = el.closest('[data-rich-text]');
         if (area && (found === area || !area.contains(found))) return null;
         return found;
     }
 
     const withinArea = (node, found) => {
         if (!found) return false;
-        const el = elementAt(node), area = el && el.closest('[data-text-edit]');
+        const el = elementAt(node), area = el && el.closest('[data-rich-text]');
         return !area || (found !== area && area.contains(found));
     };
 
-    // Stops at the editable area. Without that boundary a caret sitting between blocks
-    // resolves to the area itself, and a block command replaces the whole editor.
+    // Bounded by the area, so a block command never replaces the editor
     function blockEl() {
         let n = elementAt(range() && range().startContainer);
         while (n && !areas.has(n)) {
@@ -291,8 +367,6 @@
         return null;
     }
 
-    // deleteContents can take the whole paragraph with it, leaving the caret loose in
-    // the area. Put it back in a block before any command reads it.
     function ensureBlock(area) {
         let b = blockEl();
         if (b) return b;
@@ -309,9 +383,7 @@
         r.selectNodeContents(node); s.removeAllRanges(); s.addRange(r);
     }
 
-    // Character offset of the caret within a root, and the inverse. Swapping a block
-    // element or restoring a history snapshot both rebuild nodes, so the caret has to
-    // be addressed by position in the text rather than by node identity.
+    // Caret as a character offset, so it survives rebuilt nodes
     function offsetIn(root) {
         const r = range(); if (!r || !root.contains(r.startContainer)) return null;
         const pre = document.createRange();
@@ -323,12 +395,7 @@
     function caretIn(root, offset) {
         const s = sel(), r = document.createRange();
         if (offset == null) offset = 0;
-        // An empty block accepts a caret only when a <br> holds the line open and the
-        // range is anchored on the element. Anchored on an empty text node instead,
-        // the browser normalizes the caret outward and the next keystroke lands as a
-        // sibling of the block rather than inside it. Verified in Chrome; the <br> is
-        // the same placeholder contenteditable inserts itself, and the serializer
-        // drops a block that holds only one.
+        // An empty block holds a caret only with a <br> and an element anchor
         if (!root.textContent.length) {
             [...root.childNodes].forEach(n => { if (n.nodeType === 3) n.remove(); });
             if (!root.querySelector('br')) root.appendChild(document.createElement('br'));
@@ -351,9 +418,7 @@
         s.removeAllRanges(); s.addRange(r);
     }
 
-    // Split the boundary text nodes so every node returned lies wholly inside the
-    // selection — wrapping node by node never crosses an element boundary, which is
-    // what keeps <code> from swallowing half a paragraph.
+    // Boundary text nodes are split so every node returned lies wholly inside the selection
     function selectedTextNodes() {
         const r = range(); if (!r || r.collapsed) return [];
         if (r.endContainer.nodeType === 3 && r.endOffset < r.endContainer.length) {
@@ -375,24 +440,22 @@
         return out.length ? out : (r.startContainer.nodeType === 3 ? [r.startContainer] : []);
     }
 
-    /* ---- Inline tags ----
-       One generic wrap/unwrap for every inline tag, rather than execCommand's fixed
-       handful — that is what lets the command set be the tag set. */
-    function wrapInline(tag, style) {
+    /* ---- Inline tags ---- */
+    function wrapInline(tag, style, attrs) {
         const nodes = selectedTextNodes(); if (!nodes.length) return [];
         const made = [];
         nodes.forEach(n => {
             if (!n.nodeValue.length) return;
             const el = document.createElement(tag);
             if (style) Object.assign(el.style, style);
+            if (attrs) Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
             n.parentNode.insertBefore(el, n);
             el.appendChild(n);
             made.push(el);
-            el.querySelectorAll(tag).forEach(dupe => dupe.replaceWith(...dupe.childNodes));   // no nesting the same tag
+            el.querySelectorAll(tag).forEach(dupe => dupe.replaceWith(...dupe.childNodes));
         });
         if (!made.length) return made;
-        // Land the boundaries INSIDE the new elements, not around them: everything
-        // downstream — active state, setting an href — asks what the caret is in.
+        // Boundaries land inside the new elements
         const s = sel(), r = document.createRange(), last = made[made.length - 1];
         r.setStart(made[0], 0); r.setEnd(last, last.childNodes.length);
         s.removeAllRanges(); s.addRange(r);
@@ -405,9 +468,7 @@
         nodes.forEach(n => { const el = elementAt(n) && elementAt(n).closest(tag); if (withinArea(n, el)) targets.add(el); });
         const host = ancestor(tag); if (host) targets.add(host);
         targets.forEach(el => el.replaceWith(...el.childNodes));
-        // replaceWith tears down the range, which left the caret parked in front of
-        // the text and nothing selected — so turning a style off lost the selection
-        // that turning it on had kept. The same text goes back under selection.
+        // Reselect the same text
         const live = nodes.filter(n => n.isConnected && n.length);
         if (!live.length) return;
         const r = document.createRange();
@@ -416,11 +477,7 @@
         const s = sel(); s.removeAllRanges(); s.addRange(r);
     }
 
-    // Whether EVERY part of the selection already carries the tag. Asking the range's
-    // start container instead — as this did — gets the wrong answer whenever the
-    // selection starts on an element rather than inside the text: a triple-clicked
-    // paragraph reports "not bold", so the toggle wraps what was already wrapped and
-    // the nesting cleanup quietly undoes it. Which reads as the button doing nothing.
+    // Every selected text node carries the tag
     function selectionMarked(tag) {
         const r = range(); if (!r) return false;
         if (r.collapsed) return !!ancestor(tag);
@@ -436,39 +493,68 @@
         return any;
     }
 
-    const toggleInline = (tag, style) => selectionMarked(tag) ? unwrapInline(tag) : wrapInline(tag, style);
+    const toggleInline = (tag, style, attrs) => selectionMarked(tag) ? unwrapInline(tag) : wrapInline(tag, style, attrs);
+
+    const attrsFor = (tag, v) => {
+        const m = INLINE_TAGS[tag], val = v != null && v !== '' ? String(v) : m.def;
+        return m.attr && val ? { [m.attr]: val } : null;
+    };
+
+    function insertVoid(tag) {
+        const r = range(); if (!r) return;
+        r.deleteContents();
+        const n = document.createElement(tag);
+        r.insertNode(n);
+        const s = sel(), nr = document.createRange();
+        nr.setStartAfter(n); nr.collapse(true);
+        s.removeAllRanges(); s.addRange(nr);
+    }
+
+    /* ---- Block tags ---- */
+    // A cell's loose content into a <p> inside it, so block commands nest rather than replace the cell
+    function innerBlock(cell) {
+        const off = offsetIn(cell), p = document.createElement('p');
+        while (cell.firstChild) p.appendChild(cell.firstChild);
+        cell.appendChild(p);
+        caretIn(p, off);
+        return p;
+    }
+
+    // The block a command may replace: never a cell, list item, term or container
+    function freeBlock() {
+        const b = blockEl(); if (!b) return null;
+        if (/^(UL|OL|DL|FIGURE|TABLE)$/.test(b.tagName)) return null;
+        if (/^(TD|TH)$/.test(b.tagName)) return innerBlock(b);
+        if (/^(LI|DT|DD)$/.test(b.tagName)) return liftItem(b);
+        return b;
+    }
 
-    /* ---- Block tags ----
-       Swapping the element outright covers every block tag, where formatBlock only
-       accepts a short list and disagrees between engines. */
     function setBlock(tag) {
         let b = blockEl(); if (!b) return;
+        if (/^(UL|OL|DL|FIGURE|TABLE)$/.test(b.tagName)) return;
+        if (/^(TD|TH)$/.test(b.tagName)) b = innerBlock(b);
         const want = (b.tagName === tag.toUpperCase() ? 'p' : tag).toLowerCase();
         if (b.tagName === want.toUpperCase()) return;
-        // A heading or quote cannot live inside a list — markdown has no
-        // <ul><h2> — so lift the item out of its list first, then retag.
-        // Retagging in place serialized to nothing: the content vanished.
-        // A NESTED item outdents to the top level first, or the lift would
-        // land the new block inside the outer <li>.
+        // Out of the list first (outdenting nested items to the top), then retag
         if (b.tagName === 'LI' && want !== 'li') {
-            const area = b.closest('[data-text-edit]');
+            const area = b.closest('[data-rich-text]');
             for (let guard = 0; guard < 8; guard++) {
                 const list = b && b.tagName === 'LI' && b.closest('ul, ol');
                 if (!list || !list.parentElement || !list.parentElement.closest('li')) break;
                 indent(-1, area);
                 b = blockEl(); if (!b) return;
             }
-            if (b.tagName === 'LI') { unwrapItem(b); b = blockEl(); if (!b) return; }
+            if (b.tagName === 'LI') { liftItem(b); b = blockEl(); if (!b) return; }
             if (b.tagName === want.toUpperCase()) return;
         }
+        if (/^(DT|DD)$/.test(b.tagName)) { b = liftItem(b); if (want === 'p') return; }
         const n = document.createElement(want);
         n.setAttribute('style', b.getAttribute('style') || '');
         if (!n.getAttribute('style')) n.removeAttribute('style');
         const off = offsetIn(b);
         while (b.firstChild) n.appendChild(b.firstChild);
         b.replaceWith(n);
-        // A sublist that rode along out of a list item cannot live inside a
-        // heading or quote — it steps out right after the new block.
+        // A sublist that rode along steps out after the new block
         [...n.querySelectorAll(':scope > ul, :scope > ol')].reverse().forEach(l => n.after(l));
         caretIn(n, off);
     }
@@ -476,28 +562,77 @@
     const styleBlock = (prop, value) => { const b = blockEl(); if (b) b.style[prop] = value; };
     const readBlockStyle = (prop) => { const b = blockEl(); return b ? getComputedStyle(b)[prop] : ''; };
 
+    function retagKeep(b, tag) { const off = offsetIn(b); caretIn(retagBlock(b, tag), off); }
+
+    /* ---- Figures and description lists ---- */
+    function toggleFigure() {
+        const existing = ancestor('figure');
+        if (existing) {
+            const caption = existing.querySelector(':scope > figcaption');
+            if (caption) caption.remove();
+            existing.replaceWith(...existing.childNodes);
+            return;
+        }
+        const b = freeBlock(); if (!b) return;
+        const fig = document.createElement('figure');
+        b.replaceWith(fig);
+        fig.appendChild(b);
+        const caption = document.createElement('figcaption');
+        caption.appendChild(document.createElement('br'));
+        fig.appendChild(caption);
+        caretIn(caption, 0);
+    }
+
+    // One caption per figure: an existing one takes the caret instead
+    function setCaption() {
+        const fig = ancestor('figure'), b = blockEl(); if (!fig || !b) return;
+        const caption = fig.querySelector(':scope > figcaption');
+        if (caption && caption !== b && !caption.contains(b)) return caretIn(caption, caption.textContent.length);
+        if (b.parentElement === fig) setBlock('figcaption');
+    }
+
+    function toggleDl() {
+        const dl = ancestor('dl');
+        if (dl) {
+            const term = ancestor('dt, dd'), off = term ? offsetIn(term) : 0;
+            let land = null;
+            [...dl.children].forEach(c => {
+                if ([...c.children].some(x => BLOCK.includes(x.tagName))) { if (c === term) land = c.firstElementChild; c.replaceWith(...c.childNodes); }
+                else { const p = retagBlock(c, 'p'); if (c === term) land = p; }
+            });
+            dl.replaceWith(...dl.childNodes);
+            if (land) caretIn(land, off);
+            return;
+        }
+        const b = freeBlock(); if (!b) return;
+        const list = document.createElement('dl'), dt = document.createElement('dt'), dd = document.createElement('dd');
+        while (b.firstChild) dt.appendChild(b.firstChild);
+        dd.appendChild(document.createElement('br'));
+        list.append(dt, dd);
+        b.replaceWith(list);
+        caretIn(dd, 0);
+    }
+
+    // Retags the term itself, never a block nested in one
+    const setTerm = (tag) => () => {
+        const term = ancestor('dt, dd');
+        if (!term || term.tagName === tag.toUpperCase()) return;
+        retagKeep(term, tag);
+    };
+    const termIs = (tag) => { const t = ancestor('dt, dd'); return !!t && t.tagName === tag; };
+
     /* ---- Lists, tables, indent ---- */
     const inList = () => !!ancestor('li');
-    const inTable = () => !!cellAt();          // caret in a cell, or a block picked by pointer
-
-    /* ---- Tables ----
-       A table is a small spreadsheet inside a document, and it needs the operations
-       one has: rows and columns added and removed where the caret is, cells merged
-       and split, and arrows that move the way the grid looks rather than the way the
-       markup is ordered. */
-    let cellDrag = null;                       // a rectangle of cells picked with the pointer
-    // A block of cells selected by pointer has no caret in it, so the table commands
-    // ask for either — otherwise selecting empty cells and pressing Merge does
-    // nothing, which is exactly how it looked.
+    const inTable = () => !!cellAt();
+
+    /* ---- Tables ---- */
+    let cellDrag = null;                       // pointer-picked block of cells
     const cellAt = () => ancestor('td, th') || (cellDrag && cellDrag.anchor.isConnected ? cellDrag.anchor : null);
     const tableAt = () => { const c = cellAt(); return c && c.closest('table'); };
     const rowsOf = (table) => [...table.rows];
     const emptyCell = () => { const td = document.createElement('td'); td.appendChild(document.createElement('br')); return td; };
 
-    /* The occupancy grid: every slot maps to the cell covering it, so a cell that
-       spans rows is present in each row it covers. Counting children instead — as
-       this did — loses track the moment anything is merged, which is how rows end up
-       with different lengths and cells appear to go missing. */
+    // Occupancy grid: every slot maps to the cell covering it, spans included
     function tableGrid(table) {
         const grid = [];
         rowsOf(table).forEach((row, r) => {
@@ -531,9 +666,7 @@
 
     const columnCount = (table) => Math.max(0, ...tableGrid(table).map(r => r.length));
 
-    // Rows left short by an edit are padded back out, which is what repairs a table
-    // whose cells look like they went missing — there is no way to click into a slot
-    // that does not exist, so it cannot be fixed by hand.
+    // Short rows are padded back out
     function normalizeTables(root) {
         root.querySelectorAll('table').forEach(table => {
             const rows = rowsOf(table); if (!rows.length) return;
@@ -543,7 +676,7 @@
                 const have = (grid[r] || []).filter(Boolean).length;
                 for (let i = have; i < width; i++) row.appendChild(emptyCell());
             });
-            if (!table.querySelector('tbody, thead')) {          // stray rows outside a section
+            if (!table.querySelector('tbody, thead')) {
                 const body = document.createElement('tbody');
                 while (table.firstChild) body.appendChild(table.firstChild);
                 table.appendChild(body);
@@ -566,7 +699,7 @@
         const seen = new Set();
         rowsOf(table).forEach((row, r) => {
             const at = (grid[r] || [])[col];
-            if (!at || seen.has(at)) return;                     // a row-spanning cell is handled once
+            if (!at || seen.has(at)) return;
             seen.add(at);
             const fresh = document.createElement(at.tagName === 'TH' ? 'th' : 'td');
             fresh.appendChild(document.createElement('br'));
@@ -602,15 +735,10 @@
         caretIn(p, 0);
     }
 
-    // Merge takes the cells the selection touches; with a collapsed caret it takes
-    // the one to the right, which is what a single "merge" press usually means.
-    // A merge covers a RECTANGLE, so the spans come from the block's bounds — summing
-    // the cells' own spans turns a 2x2 selection into one cell four rows tall.
+    // Selected cells merge as a rectangle; a lone caret merges with the cell to its right
     function mergeCells() {
         const cell = cellAt(); if (!cell) return;
         const picked = selectedCells();
-        // With nothing selected, merge with the neighbour to the right — the reading
-        // of a single "merge" press, and the only one available in an empty cell.
         const cells = picked.length > 1 ? picked : [cell, nextCell(cell)].filter(Boolean);
         if (cells.length < 2) return;
 
@@ -634,8 +762,8 @@
         tidyCell(first);
         const table = first.closest('table');
         normalizeTables(table.parentElement || table);
-        cellDrag = null;                       // the block has become one cell
-        paintCells(first.closest('[data-text-edit]') || table);
+        cellDrag = null;
+        paintCells(first.closest('[data-rich-text]') || table);
         caretIn(first, first.textContent.length);
     }
 
@@ -645,7 +773,6 @@
         return (grid[row] || [])[col + span] || null;
     };
 
-    // Joining cells leaves the placeholder breaks of the empty ones behind.
     const tidyCell = (cell) => {
         if (!cell.textContent.trim()) { cell.replaceChildren(document.createElement('br')); return; }
         cell.querySelectorAll(':scope > br').forEach(br => br.remove());
@@ -670,16 +797,11 @@
         caretIn(cell, 0);
     }
 
-    /* An empty cell holds no text, so a text selection can neither reach one nor
-       show one. Worse, dragging INTO a trailing empty cell leaves the selection's
-       focus clamped to the last position that holds text — which is why the final
-       empty cell was always the one left unhighlighted. The pointer is tracked
-       instead, and its cell is the far corner. */
-
+    // Empty cells hold no text, so cell selection follows the pointer
     const cellUnder = (x, y) => {
         const el = document.elementFromPoint(x, y);
         const cell = el && el.closest && el.closest('td, th');
-        return cell && cell.closest('[data-text-edit]') ? cell : null;
+        return cell && cell.closest('[data-rich-text]') ? cell : null;
     };
 
     function rectBetween(a, b) {
@@ -718,9 +840,7 @@
             if (c.rowSpan > 1) next.rowSpan = c.rowSpan;
             c.replaceWith(next);
         });
-        // A <thead> is a child of the table, never of the tbody. Inserted before the
-        // row it would land inside tbody, which is invalid — and table.rows then
-        // reports one row, so the next toggle rewrites the wrong one.
+        // <thead> is a child of the table, never of the tbody
         const head = table.querySelector('thead');
         if (!isHeader && !head) {
             const t = document.createElement('thead');
@@ -733,15 +853,11 @@
             body.prepend(first);
             head.remove();
         }
-        // Re-parenting the row detaches the caret, and without it the command reads
-        // as unavailable the next time — the header could be turned on but not off.
         caretIn(table.rows[0].firstElementChild, 0);
     }
 
     /* ---- Column and row sizing ----
-       Dragging a cell border, the way a spreadsheet does. Widths live on a <colgroup>
-       rather than on the first row's cells, so a merged or spanning cell in row one
-       cannot throw them off; heights live on the row. */
+       Widths on a <colgroup>, heights on the row. */
     const EDGE = 5;
 
     function ensureCols(table) {
@@ -750,26 +866,21 @@
         const want = columnCount(table);
         while (group.children.length < want) group.appendChild(document.createElement('col'));
         while (group.children.length > want) group.lastElementChild.remove();
-        // Freeze what is there now, so dragging one border does not reflow the rest.
-        const widths = [...table.rows[0].cells];
+        // Freeze current widths so one drag doesn't reflow the rest
         [...group.children].forEach((col, i) => {
             if (col.style.width) return;
             const at = (tableGrid(table)[0] || [])[i];
             if (at) col.style.width = Math.round(at.getBoundingClientRect().width / (at.colSpan || 1)) + 'px';
-            void widths;
         });
         return group;
     }
 
-    // Which border, if any, the pointer is over.
     function borderAt(x, y) {
         const el = document.elementFromPoint(x, y);
         let cell = el && el.closest && el.closest('td, th');
         if (!cell) {
-            // Aiming at the outer edge puts the pointer past the last cell — on the
-            // table if you are exact, on the page behind it if you overshoot. Both
-            // are where people aim, so both count.
-            const scope = el && el.closest && (el.closest('table') || el.closest('[data-text-edit]'));
+            // Outer edge: on the table, or just past it
+            const scope = el && el.closest && (el.closest('table') || el.closest('[data-rich-text]'));
             if (!scope) return null;
             const tables = scope.tagName === 'TABLE' ? [scope] : [...scope.querySelectorAll('table')];
             for (const table of tables) {
@@ -781,7 +892,7 @@
             }
             return null;
         }
-        if (!cell.closest('[data-text-edit]')) return null;
+        if (!cell.closest('[data-rich-text]')) return null;
         const b = cell.getBoundingClientRect();
         if (Math.abs(x - b.right) <= EDGE) return { axis: 'x', cell };
         if (Math.abs(x - b.left) <= EDGE) { const prev = previousCell(cell); return prev ? { axis: 'x', cell: prev } : null; }
@@ -792,9 +903,9 @@
 
     function startResize(e, hit) {
         const cell = hit.cell, table = cell.closest('table');
-        const area = cell.closest('[data-text-edit]');
+        const area = cell.closest('[data-rich-text]');
         e.preventDefault();
-        area.setAttribute('data-text-edit-resizing', hit.axis);
+        area.setAttribute('data-rich-text-resizing', hit.axis);
 
         let apply;
         if (hit.axis === 'x') {
@@ -804,9 +915,7 @@
             const target = group.children[index];
             const start = parseFloat(target.style.width) || cell.getBoundingClientRect().width;
             const from = e.clientX;
-            // The rightmost border is the table's own edge. Sizing only the column
-            // there does nothing visible — the table still fills its width and the
-            // other columns simply absorb the difference — so the table is sized too.
+            // The outer border sizes the table too
             const outer = index === group.children.length - 1;
             const tableStart = table.getBoundingClientRect().width;
             if (outer) table.style.width = Math.round(tableStart) + 'px';
@@ -825,14 +934,14 @@
         const up = () => {
             document.removeEventListener('pointermove', move);
             document.removeEventListener('pointerup', up);
-            area.removeAttribute('data-text-edit-resizing');
+            area.removeAttribute('data-rich-text-resizing');
             area.dispatchEvent(new Event('input', { bubbles: true }));
         };
         document.addEventListener('pointermove', move);
         document.addEventListener('pointerup', up);
     }
 
-    // Tab walks the grid and grows it at the end, the way every editor's tables do.
+    // Tab walks the grid and grows it at the end
     function moveCell(dir) {
         const cell = cellAt(); if (!cell) return false;
         const cells = [...cell.closest('table').querySelectorAll('td, th')];
@@ -848,7 +957,6 @@
         return true;
     }
 
-    // Where a caret would land at a point, whichever API the engine offers.
     function caretAtPoint(x, y) {
         if (document.caretPositionFromPoint) {
             const pos = document.caretPositionFromPoint(x, y);
@@ -872,13 +980,7 @@
 
     const cellOf = (node) => { const el = elementAt(node); return el && el.closest('td, th'); };
 
-    /* Vertical arrows move a line at a time, and only leave the cell once the caret
-       is on its last or first line — a cell holding several lines has to be walkable
-       like any other text. Horizontal arrows cross the cell's text first.
-
-       Both aim at a point rather than an offset: stepping one line from where the
-       caret actually is keeps the column, which is what makes returning to a cell
-       land under where you left rather than at an arbitrary end. */
+    // Arrows move by line within a cell, then cell to cell, keeping the column
     function arrowInTable(e) {
         const cell = cellAt(); if (!cell) return false;
         const r = range(); if (!r || !r.collapsed) return false;
@@ -899,9 +1001,7 @@
         const x = here.left;
         const probeY = down ? here.bottom + line * 0.5 : here.top - line * 0.5;
 
-        // Landing in the same cell is not enough to mean there is another line — a
-        // point just past the caret is still inside the cell's own padding. Only a
-        // position on a DIFFERENT line means there is somewhere left to go.
+        // Another line in this cell means the native move is right
         const ahead = caretAtPoint(x, probeY);
         if (ahead && cellOf(ahead.node) === cell) {
             const probe = document.createRange();
@@ -919,7 +1019,6 @@
         const next = (grid[targetRow] || [])[col];
         if (!next) return escapeTable(table, down);
 
-        // Land under the column the caret was in, not at an end of the target.
         const box = next.getBoundingClientRect();
         const aimY = down ? box.top + line * 0.5 : box.bottom - line * 0.5;
         if (placeAtPoint(Math.min(Math.max(x, box.left + 2), box.right - 2), aimY)) return true;
@@ -933,7 +1032,6 @@
         return null;
     };
 
-    // A table at the very end of a document has nothing after it to click into.
     function escapeTable(table, down) {
         const sibling = down ? table.nextElementSibling : table.previousElementSibling;
         if (sibling) { caretIn(sibling, down ? 0 : sibling.textContent.length); return true; }
@@ -944,9 +1042,7 @@
         return true;
     }
 
-    // Built by hand for the same reason as indent: execCommand('insertUnorderedList')
-    // puts the <ul> *inside* the paragraph rather than replacing it, which is invalid
-    // and silently loses the list on the next serialize.
+    /* ---- Lists ---- */
     function retagList(list, tag) {
         const n = document.createElement(tag);
         while (list.firstChild) n.appendChild(list.firstChild);
@@ -954,35 +1050,37 @@
         return n;
     }
 
-    function unwrapItem(li) {
-        const list = li.closest('ul, ol'), off = offsetIn(li);
+    // An item (li, dt, dd) out of its list into a <p>; following items keep their own list
+    function liftItem(item) {
+        const list = item.parentElement, off = offsetIn(item);
         const p = document.createElement('p');
-        [...li.childNodes].forEach(n => { if (n.tagName !== 'INPUT') p.appendChild(n); });
-        const after = [...list.children].slice([...list.children].indexOf(li) + 1);
-        list.parentNode.insertBefore(p, list.nextSibling);
-        if (after.length) {                                   // items below carry on in their own list
+        [...item.childNodes].forEach(n => { if (n.tagName !== 'INPUT') p.appendChild(n); });
+        const after = [...list.children].slice([...list.children].indexOf(item) + 1);
+        list.after(p);
+        if (after.length) {
             const tail = document.createElement(list.tagName.toLowerCase());
             if (list.hasAttribute('data-checklist')) tail.setAttribute('data-checklist', '');
             after.forEach(n => tail.appendChild(n));
-            p.parentNode.insertBefore(tail, p.nextSibling);
+            p.after(tail);
         }
-        li.remove();
+        item.remove();
         if (!list.children.length) list.remove();
         caretIn(p, off);
+        return p;
     }
 
     function toggleList(tag) {
         const li = ancestor('li');
         if (li) {
             const list = li.closest('ul, ol');
-            if (list.tagName.toLowerCase() === tag) return unwrapItem(li);
+            if (list.tagName.toLowerCase() === tag) return liftItem(li);
             const next = retagList(list, tag);
             next.removeAttribute('data-checklist');
             next.querySelectorAll('input[type=checkbox]').forEach(b => b.remove());
             caretIn(next.querySelector('li') || next, 0);
             return;
         }
-        const b = blockEl(); if (!b) return;
+        const b = freeBlock(); if (!b) return;
         const off = offsetIn(b);
         const list = document.createElement(tag), item = document.createElement('li');
         while (b.firstChild) item.appendChild(b.firstChild);
@@ -991,6 +1089,21 @@
         caretIn(item, off);
     }
 
+    // .li: into the list above when there is one, else a new bulleted list
+    function toggleItem() {
+        const li = ancestor('li');
+        if (li) return liftItem(li);
+        const b = freeBlock(); if (!b) return;
+        const prev = b.previousElementSibling;
+        if (!prev || !/^(UL|OL)$/.test(prev.tagName)) return toggleList('ul');
+        const off = offsetIn(b), item = document.createElement('li');
+        if (prev.hasAttribute('data-checklist')) item.appendChild(Object.assign(document.createElement('input'), { type: 'checkbox' }));
+        while (b.firstChild) item.appendChild(b.firstChild);
+        prev.appendChild(item);
+        b.remove();
+        caretIn(item, off);
+    }
+
     function toggleChecklist() {
         if (!ancestor('li')) toggleList('ul');
         const item = ancestor('li'); if (!item) return;
@@ -1002,7 +1115,7 @@
             if (on && !box) { const b = document.createElement('input'); b.type = 'checkbox'; row.insertBefore(b, row.firstChild); }
             if (!on && box) box.remove();
         });
-        // Offset 0 of the item is *before* the checkbox, so typing would land there.
+        // Caret after the checkbox, not before it
         const box = item.querySelector(':scope > input[type=checkbox]');
         if (!box) return caretIn(item, 0);
         if (!item.textContent.length && !item.querySelector('br')) item.appendChild(document.createElement('br'));
@@ -1011,9 +1124,7 @@
         sl.removeAllRanges(); sl.addRange(r);
     }
 
-    // execCommand('indent') nests by making a list a direct child of a list, which is
-    // invalid — the sublist belongs inside the preceding item. Left alone it costs the
-    // whole nested branch on the next serialize. Cheap enough to run after any command.
+    // Sublists belong inside the preceding item; task items keep one leading box
     function normalizeLists(root) {
         root.querySelectorAll(':is(ul, ol) > :is(ul, ol)').forEach(nested => {
             const prev = nested.previousElementSibling;
@@ -1022,8 +1133,6 @@
             nested.parentNode.insertBefore(li, nested);
             li.appendChild(nested);
         });
-        // Enter inside a task item clones the row's contents in whatever order the
-        // engine feels like, so the box can land after the text or twice over.
         root.querySelectorAll('[data-checklist] > li').forEach(li => {
             const boxes = [...li.querySelectorAll(':scope > input[type=checkbox]')];
             boxes.slice(1).forEach(b => b.remove());
@@ -1033,123 +1142,241 @@
         });
     }
 
-    // Moving the item ourselves rather than calling execCommand('indent'): the browser
-    // builds an empty parent item on the second level and sprinkles colour spans on
-    // outdent. This also caps nesting at one level deeper than the item above, which
-    // is what every list editor does.
+    // Nest at most one level below the item above
     function moveItem(by) {
         const li = ancestor('li'); if (!li) return;
-        const list = li.parentElement;
+        const list = li.parentElement, off = offsetIn(li);
         if (by > 0) {
             const prev = li.previousElementSibling;
-            if (!prev || prev.tagName !== 'LI') return;           // nothing to nest under
+            if (!prev || prev.tagName !== 'LI') return;
             let sub = prev.querySelector(':scope > ul, :scope > ol');
             if (!sub) { sub = document.createElement(list.tagName.toLowerCase()); prev.appendChild(sub); }
             sub.appendChild(li);
         } else {
             const parentItem = list.parentElement;
-            if (!parentItem || parentItem.tagName !== 'LI') return;   // already top level
+            if (!parentItem || parentItem.tagName !== 'LI') return;
             parentItem.parentElement.insertBefore(li, parentItem.nextSibling);
             if (!list.children.length) list.remove();
         }
+        if (off != null) caretIn(li, off);   // the caret stays in the item's text, so Tab and Shift+Tab chain
     }
 
-    // Enabled only where the command would actually move something — a control that
-    // is lit but inert is the same bug as one that is missing.
     function canIndent(area) {
         const li = ancestor('li');
-        if (li) return !!li.previousElementSibling;             // nothing to nest under otherwise
-        return area._te.mode === 'html';
+        if (li) return !!li.previousElementSibling;
+        return area._rt.format === 'html';
     }
 
     function canOutdent(area) {
         const li = ancestor('li');
         if (li) return li.closest('ul, ol').parentElement.tagName === 'LI';
         const b = blockEl();
-        return area._te.mode === 'html' && !!b && parseFloat(b.style.marginInlineStart) > 0;
+        return area._rt.format === 'html' && !!b && parseFloat(b.style.marginInlineStart) > 0;
     }
 
     const STEP = 2;   // rem per indent level
-    // Nesting a list item is markdown; indenting a paragraph is a CSS margin, which
-    // markdown cannot carry — so the second half only runs where it would survive.
+    // List items nest; other blocks indent by margin (.html only)
     function indent(by, area) {
         if (inList()) return moveItem(by);
-        if (area && area._te.mode !== 'html') return;
+        if (area && area._rt.format !== 'html') return;
         const b = blockEl(); if (!b) return;
         const now = parseFloat(b.style.marginInlineStart) || 0;
         const next = Math.max(0, now + by * STEP);
         if (next) b.style.marginInlineStart = next + 'rem'; else b.style.removeProperty('margin-inline-start');
     }
 
-    /* ---- Links ----
-       An <input x-text-edit.a> is the whole define / edit / clear surface: it shows
-       the current href, sets it on change, and clears the link when emptied. The
-       `unlink` command is the explicit button form of clearing it. */
-    // What counts as a link: an explicit scheme (https, mailto, tel, …), a relative
-    // path, an anchor — or a bare domain, which gets https:// so "example.com"
-    // does what the writer meant. Anything else (spaces, no dot, no scheme) is
-    // not applied; the field re-syncs to the real href, showing it didn't take.
+    /* ---- Links ---- */
+    // Scheme, relative path, anchor, or bare domain (gets https://); anything else is refused
     function normalizeUrl(url) {
         if (/\s/.test(url) || unsafeUrl(url)) return null;
         if (/^[a-z][a-z0-9+.-]*:\/\//i.test(url) || /^(mailto|tel|sms):/i.test(url) || /^[/#?.]/.test(url)) return url;
         if (/^[\w-]+(\.[\w-]+)+(:\d+)?(\/|$|\?|#)/.test(url)) return 'https://' + url;
         return null;
     }
-    function setLink(href) {
-        const existing = ancestor('a');
+    // An area that is, or sits in, a link takes no links: they cannot nest
+    // Links cannot go inside a link or a button
+    const linkHost = (area) => !!(area && area.closest('a, button'));
+    const unwrapEl = (el) => el.replaceWith(...el.childNodes);
+    const textIn = (el) => { const w = document.createTreeWalker(el, NodeFilter.SHOW_TEXT), out = []; for (let n = w.nextNode(); n; n = w.nextNode()) out.push(n); return out; };
+    const sameEl = (a, b) => !!a && !!b && a.nodeType === 1 && b.nodeType === 1 && a.tagName === b.tagName
+        && a.attributes.length === b.attributes.length && [...a.attributes].every(x => b.getAttribute(x.name) === x.value);
+    // Links go outermost: a link inside formatting swaps with it (<b><a>x</a></b> → <a><b>x</b></a>);
+    // then identical neighbours merge and links left without content go. The selection is kept.
+    function tidyLinks(area) {
+        const r = range(), keep = r && area.contains(r.startContainer) ? [r.startContainer, r.startOffset, r.endContainer, r.endOffset] : null;
+        for (let guard = 0, moved = true; moved && guard < 50; guard++) {
+            moved = false;
+            [...area.querySelectorAll('a')].forEach(a => {
+                const w = a.parentElement;
+                if (!a.isConnected || !w || w === area || !area.contains(w) || w.closest('a') || !INLINE_OK.has(w.tagName)) return;
+                w.replaceWith(...[...w.childNodes].map(n => {
+                    const wc = w.cloneNode(false);
+                    if (n.nodeType === 1 && n.tagName === 'A') { wc.append(...n.childNodes); n.appendChild(wc); return n; }
+                    wc.appendChild(n); return wc;
+                }));
+                moved = true;
+            });
+        }
+        const merge = (p) => { [...p.children].forEach(merge); for (let c = p.firstChild; c; c = c.nextSibling) while (c.nodeType === 1 && !/^(BR|WBR|IMG)$/.test(c.tagName) && sameEl(c, c.nextSibling)) { const n = c.nextSibling; c.append(...n.childNodes); n.remove(); } };
+        for (let i = 0; i < 3; i++) merge(area);
+        area.querySelectorAll('a').forEach(a => { if (!a.textContent.trim() && !a.querySelector('img')) unwrapEl(a); });
+        if (keep && keep[0].isConnected && keep[2].isConnected) try { const nr = document.createRange(); nr.setStart(keep[0], keep[1]); nr.setEnd(keep[2], keep[3]); const s = sel(); s.removeAllRanges(); s.addRange(nr); } catch { }
+    }
+    function setLink(href, area) {
+        if (linkHost(area)) return;
+        const existing = ancestor('a'), r = range();
         const raw = href == null ? '' : String(href).trim();
-        if (!raw) { if (existing) existing.replaceWith(...existing.childNodes); return; }
-        const url = normalizeUrl(raw);
-        if (!url) return;
-        if (existing) { existing.setAttribute('href', url); return; }
-        const made = wrapInline('a');
-        if (made.length) made.forEach(a => a.setAttribute('href', url));
-        else insertHTML(`<a href="${escHtml(url)}">${escHtml(url)}</a>`);   // nothing selected — drop the URL in as its own link
+        const url = raw ? normalizeUrl(raw) : '';
+        if (raw && !url) return;
+        // A caret in a link retargets or unlinks all of it
+        if (r && r.collapsed) {
+            if (existing) { if (url) existing.setAttribute('href', url); else unwrapEl(existing); return; }
+            if (url) insertHTML(`<a href="${escHtml(url)}">${escHtml(url)}</a>`);
+            return;
+        }
+        if (!r) return;
+        // A selection: each link it touches keeps its unselected text; the selection loses its link, or gets the new one
+        const nodes = selectedTextNodes(); if (!nodes.length) return;
+        const touched = [...new Set(nodes.map(n => elementAt(n) && elementAt(n).closest('a')).filter(a => a && withinArea(a, a)))];
+        touched.forEach(a => {
+            const old = a.getAttribute('href'), keep = textIn(a).filter(t => !nodes.includes(t) && t.nodeValue.length);
+            unwrapEl(a);
+            keep.forEach(t => { const x = document.createElement('a'); if (old != null) x.setAttribute('href', old); t.before(x); x.appendChild(t); });
+        });
+        const s = sel(), nr = document.createRange(), last = nodes[nodes.length - 1];
+        nr.setStart(nodes[0], 0); nr.setEnd(last, last.length);
+        s.removeAllRanges(); s.addRange(nr);
+        if (url) wrapInline('a').forEach(a => a.setAttribute('href', url));
+        const root = area || elementAt(nodes[0]).closest('[data-rich-text]');
+        if (root) tidyLinks(root);
     }
     const linkHref = () => { const a = ancestor('a'); return a ? a.getAttribute('href') || '' : ''; };
 
     /* ---- Insertions ---- */
     function insertHTML(html) { document.execCommand('insertHTML', false, html); }
 
-    // .plain: the engine's own plain-text editing where it has one; key and input guards otherwise.
     const PLAINTEXT_ONLY = (() => {
         try { const d = document.createElement('div'); d.contentEditable = 'plaintext-only'; return d.contentEditable === 'plaintext-only'; } catch { return false; }
     })();
 
-    // Lines kept as <br>, inserted by hand: insertHTML collapses newlines, and
-    // engines disagree on what it does in a plaintext-only host at all.
+    // Lines as <br>, inserted by hand
     function insertPlain(area, text) {
-        const r = range(); if (!r || !area.contains(r.startContainer)) return;
         const frag = document.createDocumentFragment();
         String(text || '').replace(/\r\n?/g, '\n').split('\n').forEach((line, i) => {
             if (i) frag.appendChild(document.createElement('br'));
             if (line) frag.appendChild(document.createTextNode(line));
         });
-        const end = frag.lastChild; if (!end) return;
+        insertNodes(area, frag);
+    }
+
+    // Inserted by hand, so the browser adds no style wrappers of its own
+    function insertNodes(area, frag) {
+        const r = range(); if (!r || !area.contains(r.startContainer)) return;
+        // Pasted or dropped links never land inside a link
+        const at = elementAt(r.startContainer);
+        if (at && at.closest('a')) [...frag.querySelectorAll('a')].forEach(unwrapEl);
+        if (!frag.lastChild) return;
         record(area);
         r.deleteContents();
-        r.insertNode(frag);
+        // An empty block's placeholder <br> goes; at a block's start, so does the content's leading space
+        const holder = blockEl() || area;
+        if (!holder.textContent.length && !holder.querySelector('img')) holder.querySelectorAll('br').forEach(b => b.remove());
+        if (offsetIn(holder) === 0) {
+            const w = document.createTreeWalker(frag, NodeFilter.SHOW_TEXT), first = w.nextNode();
+            if (first) first.nodeValue = first.nodeValue.replace(/^\s+/, '');
+        }
+        let end = frag.lastChild;
+        if (!end) return;
+        const cr = range(); if (cr && area.contains(cr.startContainer)) cr.insertNode(frag); else area.appendChild(frag);
+        // The caret ends inside the last text, never at an element boundary (an IME composition there is left behind)
         const s = sel(), nr = document.createRange();
-        nr.setStartAfter(end); nr.collapse(true);
+        if (end.nodeType === 1) { const w = document.createTreeWalker(end, NodeFilter.SHOW_TEXT); let t = null; for (let n = w.nextNode(); n; n = w.nextNode()) t = n; if (t) end = t; }
+        if (end.nodeType === 3) nr.setStart(end, end.length); else nr.setStartAfter(end);
+        nr.collapse(true);
         s.removeAllRanges(); s.addRange(nr);
         record(area);
         area.dispatchEvent(new Event('input', { bubbles: true }));
     }
+
+    // A selection across blocks is deleted as the browser would: the partly selected end
+    // block merges into the start block (never across a table cell), emptied wrappers go.
+    // A selection of everything leaves one empty paragraph.
+    function clearSpan(area) {
+        const r = range(); if (!r || r.collapsed || !area.contains(r.startContainer)) return;
+        const texts = textIn(area).filter(t => r.intersectsNode(t) && t.nodeValue.length);
+        const whole = document.createRange(); whole.selectNodeContents(area);
+        const all = (r.compareBoundaryPoints(Range.START_TO_START, whole) <= 0 && r.compareBoundaryPoints(Range.END_TO_END, whole) >= 0)
+            || (texts.length && r.toString() === area.textContent && !area.querySelector('img, hr, table'));
+        if (all) {
+            area.innerHTML = '<p></p>'; caretIn(area.firstElementChild, 0); return;
+        }
+        const blockOf = (n) => { for (let e = elementAt(n); e && e !== area; e = e.parentElement) if (BLOCK.includes(e.tagName)) return e; return null; };
+        // Boundaries on elements move into text, so the blocks they name are the ones holding text
+        if (texts.length) {
+            if (r.startContainer.nodeType !== 3) r.setStart(texts[0], 0);
+            if (r.endContainer.nodeType !== 3) { const l = texts[texts.length - 1]; r.setEnd(l, l.length); }
+        }
+        const a = blockOf(r.startContainer), b = blockOf(r.endContainer), at = [r.startContainer, r.startOffset];
+        r.deleteContents();
+        if (a && b && a !== b && b.isConnected && !/^(TD|TH)$/.test(a.tagName) && !/^(TD|TH)$/.test(b.tagName) && !b.contains(a) && !a.contains(b)) {
+            a.append(...b.childNodes);
+            let gone = b;
+            while (gone.parentElement && gone.parentElement !== area && !gone.parentElement.contains(a) && gone.parentElement.children.length === 1) gone = gone.parentElement;
+            gone.remove();
+        }
+        // The caret stays where the selection started, inside its block (deleteContents leaves it between blocks)
+        const c = document.createRange();
+        if (at[0].isConnected && area.contains(at[0])) c.setStart(at[0], Math.min(at[1], at[0].nodeType === 3 ? at[0].length : at[0].childNodes.length));
+        else if (a && a.isConnected) c.selectNodeContents(a);
+        else c.setStart(area, 0);
+        c.collapse(c.startContainer === a ? false : true);
+        const s = sel(); s.removeAllRanges(); s.addRange(c);
+    }
+    // A <br> at the caret; with nothing after it, a second one so the new line shows
+    function insertBreak(area) {
+        const r = range(); if (!r || !area.contains(r.startContainer)) return;
+        r.deleteContents();
+        const br = document.createElement('br');
+        r.insertNode(br);
+        const tail = document.createRange();
+        tail.setStartAfter(br); tail.setEnd(area, area.childNodes.length);
+        if (!tail.toString() && !tail.cloneContents().querySelector('br, img')) br.after(document.createElement('br'));
+        const nr = document.createRange(); nr.setStartAfter(br); nr.collapse(true);
+        const s = sel(); s.removeAllRanges(); s.addRange(nr);
+    }
     const insertImage = (src, alt) => { if (src && !unsafeUrl(src, true)) insertHTML(`<img src="${escHtml(src)}" alt="${escHtml(alt || '')}">`); };
 
+    // Columns × rows: [3, 2], '3x2' or 3
     function insertTable(spec) {
-        // A table dropped at a caret that is already in a table would nest a grid
-        // inside a cell. Land it after the outermost table instead.
+        // Never nest: land after the outermost table
         let host = ancestor('table');
         while (host && host.parentElement && withinArea(host, host.parentElement.closest('table'))) host = host.parentElement.closest('table');
         if (host) { const p = document.createElement('p'); p.appendChild(document.createElement('br')); host.after(p); caretIn(p, 0); }
-        const [rows, cols] = String(spec || '3x3').split(/[x×,]/).map(n => Math.max(1, Math.min(20, parseInt(n, 10) || 3)));
+        if (Array.isArray(spec) && spec.length === 1) spec = spec[0];        // table('3x2'), table([3, 2])
+        const parts = Array.isArray(spec) ? spec : String(spec == null ? '' : spec).split(/[x×,\s]+/);
+        const n = (v) => Math.max(1, Math.min(20, parseInt(v, 10) || 3));
+        const cols = n(parts[0]), rows = n(parts[1]);
         const row = `<tr>${'<td><br></td>'.repeat(cols)}</tr>`;
         insertHTML(`<table><tbody>${row.repeat(rows)}</tbody></table><p><br></p>`);
     }
 
-    // A table, image or rule sitting last leaves nowhere to put the caret after it —
-    // there is no line to click on, and no key that reaches past the block.
+    // A trailing table, rule or similar block gets a line after it to land on
+    // Text and inline marks sitting directly in a block field are wrapped into one <p> per run, caret
+    // kept. Authored empty blocks (spacers, an empty figure) are left alone.
+    function looseInline(area) {
+        const loose = [...area.childNodes].some(n => (n.nodeType === 3 && n.nodeValue.trim()) || (n.nodeType === 1 && INLINE_OK.has(n.tagName) && n.tagName !== 'BR'));
+        if (!loose) return;
+        const off = offsetIn(area);
+        let run = null;
+        [...area.childNodes].forEach(n => {
+            const inl = n.nodeType === 3 || (n.nodeType === 1 && INLINE_OK.has(n.tagName));
+            if (!inl) { run = null; return; }
+            if (!run) { if (n.nodeType === 3 && !n.nodeValue.trim()) return; run = document.createElement('p'); n.before(run); }
+            run.appendChild(n);
+        });
+        if (off != null && document.activeElement === area) caretIn(area, off);
+    }
+
     function ensureTrailingBlock(area) {
         const last = area.lastElementChild;
         if (!last || !/^(TABLE|HR|FIGURE|PRE|UL|OL|BLOCKQUOTE|DL)$/.test(last.tagName)) return false;
@@ -1159,81 +1386,64 @@
         return true;
     }
 
+    // A value styles the selection; an empty one removes that style from it (spans left bare go)
+    function styleSpan(prop, v) {
+        if (v != null && v !== '') return wrapInline('span', { [prop]: v });
+        const nodes = selectedTextNodes(), spans = new Set();
+        nodes.forEach(n => { for (let el = elementAt(n); el && el.closest && !el.hasAttribute('data-rich-text'); el = el.parentElement) if (el.tagName === 'SPAN' && el.style[prop]) spans.add(el); });
+        spans.forEach(s => { s.style[prop] = ''; if (!s.getAttribute('style')) s.removeAttribute('style'); if (!s.attributes.length) unwrapEl(s); });
+        return [];
+    }
+
     function clearFormatting() {
-        selectedTextNodes().forEach(n => {
-            let el = elementAt(n);
-            while (el && !BLOCK.includes(el.tagName) && el.getAttribute && el.hasAttribute('contenteditable') === false) el = el.parentElement;
-        });
-        Object.keys(INLINE_TAGS).forEach(unwrapInline);
+        Object.keys(INLINE_TAGS).forEach(t => unwrapInline(t));
         unwrapInline('a');
     }
 
-    /* ---- Command table ----
-       Every inline and block tag is a command named for itself; the rest are the
-       operations that have no tag of their own. `md` means markdown can carry it. */
-    /* ---- Page-level styling ----
-       Document-wide font, size, colour and so on are presentation, not content — the
-       stored value is the area's markup, and burying a wrapper in it to carry a font
-       would be a lie about what the document says. They are written as custom
-       properties on the area instead, which the stylesheet consumes and $text.page
-       hands back as a plain object for the author to persist beside the document. */
-    const PAGE_VARS = {
-        font: '--text-edit-font', size: '--text-edit-size', leading: '--text-edit-leading',
-        align: '--text-edit-align', color: '--text-edit-color', background: '--text-edit-background'
+    /* ---- Document-wide styles (.all) ----
+       Custom properties on the area, read back by $rich.all; never in the stored markup. */
+    const ALL_VARS = {
+        font: '--rich-text-font', size: '--rich-text-size', leading: '--rich-text-leading',
+        align: '--rich-text-align', color: '--rich-text-color', background: '--rich-text-background'
     };
-    const pageStyle = (area) => Object.fromEntries(Object.entries(PAGE_VARS)
+    const allStyle = (area) => Object.fromEntries(Object.entries(ALL_VARS)
         .map(([k, v]) => [k, area.style.getPropertyValue(v).trim()]).filter(([, v]) => v));
-    const setPageStyle = (area, values) => Object.entries(PAGE_VARS).forEach(([k, v]) => {
+    const setAllStyle = (area, values) => Object.entries(ALL_VARS).forEach(([k, v]) => {
         const next = values && values[k];
         if (next) area.style.setProperty(v, next); else area.style.removeProperty(v);
     });
 
-    const COMMANDS = {};
+    /* ---- Command table ---- */
+    const COMMANDS = Object.create(null);
     Object.entries(INLINE_TAGS).forEach(([tag, meta]) => {
         COMMANDS[tag] = {
             md: meta.md,
-            run: (v, area) => hasSelection() ? toggleInline(tag) : armPending(area, tag),
-            active: (v, area) => selectionMarked(tag) || pendingHas(area, tag)
+            run: (v, area) => hasSelection() ? toggleInline(tag, null, attrsFor(tag, v)) : armPending(area, tag, attrsFor(tag, v)),
+            active: (v, area) => selectionMarked(tag) !== pendingHas(area, tag)   // pending inside the tag ends it
         };
     });
     Object.entries(BLOCK_TAGS).forEach(([tag, meta]) => {
         COMMANDS[tag] = { md: meta.md, block: 1, run: () => setBlock(tag), active: () => blockTag() === tag.toUpperCase() };
     });
-
-    // A <figure> is a block WITH a caption — retagging a paragraph to one looks like
-    // nothing happened, which is exactly what it did before.
-    COMMANDS.figure = {
-        block: 1,
-        active: () => !!ancestor('figure'),
-        run: () => {
-            const existing = ancestor('figure');
-            if (existing) {                                   // unwrap, dropping the caption
-                const caption = existing.querySelector('figcaption');
-                if (caption) caption.remove();
-                existing.replaceWith(...existing.childNodes);
-                return;
-            }
-            const b = blockEl(); if (!b) return;
-            const fig = document.createElement('figure');
-            b.replaceWith(fig);
-            fig.appendChild(b);
-            const caption = document.createElement('figcaption');
-            caption.appendChild(document.createElement('br'));
-            fig.appendChild(caption);
-            caretIn(caption, 0);
-        }
-    };
     Object.assign(COMMANDS, {
-        a: { md: 1, run: setLink, active: () => !!ancestor('a'), reflect: linkHref, enabled: () => !!ancestor('a') || hasSelection() },
-        unlink: { md: 1, run: () => { const a = ancestor('a'); if (a) a.replaceWith(...a.childNodes); }, active: () => false, enabled: () => !!ancestor('a') },
+        a: { md: 1, run: setLink, active: () => !!ancestor('a'), reflect: linkHref, enabled: (area) => !linkHost(area) && (!!ancestor('a') || hasSelection()) },
+        unlink: { md: 1, run: (v, area) => setLink('', area), active: () => false, enabled: (area) => !linkHost(area) && (!!ancestor('a') || (hasSelection() && [...area.querySelectorAll('a')].some(a => range().intersectsNode(a)))) },
+        br: { md: 1, run: (v, area) => area && area._rt && area._rt.breaks ? insertBreak(area) : insertHTML('<br>'), active: () => false },
+        wbr: { run: () => insertVoid('wbr'), active: () => false },
+        img: { md: 1, args: 2, run: (v) => Array.isArray(v) ? insertImage(v[0], v[1]) : insertImage(v), active: () => false },
+
         ul: { md: 1, block: 1, run: () => toggleList('ul'), active: () => !!ancestor('ul') && !ancestor('ul').hasAttribute('data-checklist') },
         ol: { md: 1, block: 1, run: () => toggleList('ol'), active: () => !!ancestor('ol') },
+        li: { md: 1, block: 1, run: toggleItem, active: () => !!ancestor('li') },
         checklist: { md: 1, block: 1, run: toggleChecklist, active: () => !!ancestor('ul[data-checklist]') },
         hr: { md: 1, block: 1, run: () => insertHTML('<hr><p><br></p>'), active: () => false },
-        img: { md: 1, run: (v) => insertImage(v), active: () => false },
-        br: { md: 1, run: () => insertHTML('<br>'), active: () => false },
+        figure: { block: 1, run: toggleFigure, active: () => !!ancestor('figure') },
+        figcaption: { block: 1, run: setCaption, active: () => !!ancestor('figcaption'), enabled: () => !!ancestor('figure') },
+        dl: { block: 1, run: toggleDl, active: () => !!ancestor('dl') },
+        dt: { block: 1, run: setTerm('dt'), active: () => termIs('DT'), enabled: () => !!ancestor('dt, dd') },
+        dd: { block: 1, run: setTerm('dd'), active: () => termIs('DD'), enabled: () => !!ancestor('dt, dd') },
 
-        table: { block: 1, run: (v) => insertTable(v), active: () => false },
+        table: { block: 1, args: 2, run: (v) => insertTable(v), active: () => false },
         'row-before': { block: 1, run: () => addRow(-1), active: () => false, enabled: () => inTable() },
         'row-after': { block: 1, run: () => addRow(1), active: () => false, enabled: () => inTable() },
         'row-remove': { block: 1, run: removeRow, active: () => false, enabled: () => inTable() },
@@ -1246,35 +1456,40 @@
         split: { block: 1, run: splitCell, active: () => false, enabled: () => { const c = cellAt(); return !!c && ((c.colSpan || 1) > 1 || (c.rowSpan || 1) > 1); } },
         indent: { md: 1, block: 1, run: (v, area) => indent(1, area), active: () => false, enabled: (a) => canIndent(a) },
         outdent: { md: 1, block: 1, run: (v, area) => indent(-1, area), active: () => false, enabled: (a) => canOutdent(a) },
-        align: { block: 1, page: 1, run: (v) => styleBlock('textAlign', v || 'start'), active: () => false, reflect: () => readBlockStyle('textAlign') },
-        color: { page: 1, needsSelection: 1, run: (v) => wrapInline('span', { color: v }), active: () => false, reflect: () => rgbToHex(readInlineStyle('color')) },
-        background: { page: 1, needsSelection: 1, run: (v) => wrapInline('span', { backgroundColor: v }), active: () => false, reflect: () => rgbToHex(readInlineStyle('backgroundColor')) },
-        font: { page: 1, needsSelection: 1, run: (v) => wrapInline('span', { fontFamily: v }), active: () => false, reflect: () => readInlineStyle('fontFamily').split(',')[0].replace(/['"]/g, '') },
-        size: { page: 1, needsSelection: 1, run: (v) => wrapInline('span', { fontSize: px(v) }), active: () => false, reflect: () => readInlineStyle('fontSize') },
-        leading: { page: 1, block: 1, run: (v) => styleBlock('lineHeight', v), active: () => false, reflect: () => readBlockStyle('lineHeight') },
+        align: { block: 1, all: 1, run: (v) => styleBlock('textAlign', v || 'start'), active: () => false, reflect: () => readBlockStyle('textAlign') },
+        color: { all: 1, needsSelection: 1, run: (v) => styleSpan('color', v), active: () => false, reflect: () => rgbToHex(readInlineStyle('color')) },
+        background: { all: 1, needsSelection: 1, run: (v) => styleSpan('backgroundColor', v), active: () => false, reflect: () => rgbToHex(readInlineStyle('backgroundColor')) },
+        font: { all: 1, needsSelection: 1, run: (v) => styleSpan('fontFamily', v), active: () => false, reflect: () => readInlineStyle('fontFamily').split(',')[0].replace(/['"]/g, '') },
+        size: { all: 1, needsSelection: 1, run: (v) => styleSpan('fontSize', v ? px(v) : ''), active: () => false, reflect: () => readInlineStyle('fontSize') },
+        leading: { all: 1, block: 1, run: (v) => styleBlock('lineHeight', v), active: () => false, reflect: () => readBlockStyle('lineHeight') },
 
         clear: { md: 1, run: clearFormatting, active: () => false },
-        // A burst still waiting to be recorded is undoable, and leaves nothing to redo.
+        // A burst still waiting to be recorded is undoable, and leaves nothing to redo
         undo: { md: 1, history: 1, run: (v, area) => step(area, -1), active: () => false, enabled: (a) => a._history.at > 0 || !!a._history.timer },
         redo: { md: 1, history: 1, run: (v, area) => step(area, 1), active: () => false, enabled: (a) => !a._history.timer && a._history.at < a._history.stack.length - 1 },
-        block: { md: 1, block: 1, run: (v) => setBlock(String(v || 'p').toLowerCase()), active: () => false, reflect: () => (blockTag() || 'P').toLowerCase() }
+        block: { md: 1, block: 1, run: (v, area) => runBlock(area, v), active: () => false, reflect: () => (blockTag() || 'P').toLowerCase() }
     });
 
+    // .block="h2": any block tag command, under that command's own availability
+    const BLOCK_CHOICES = new Set([...Object.keys(BLOCK_TAGS), 'ul', 'ol', 'li', 'figure', 'figcaption', 'dl', 'dt', 'dd']);
+    function runBlock(area, v) {
+        const tag = String(v || 'p').toLowerCase(), spec = COMMANDS[tag];
+        if (!BLOCK_CHOICES.has(tag)) return;
+        if (area._rt.format !== 'html' && !spec.md) return;
+        if (spec.enabled && !spec.enabled(area)) return;
+        spec.run(undefined, area);
+    }
+
     const px = (v) => /^\d+(\.\d+)?$/.test(String(v)) ? v + 'px' : v;
     const hasSelection = () => { const r = range(); return !!r && !r.collapsed; };
 
     /* ---- Pending marks ----
-       Bold with nothing selected arms the tag for what you type next, the way a word
-       processor does. It cannot be done by wrapping an empty element and putting the
-       caret inside — the browser normalizes the caret straight back out — so the mark
-       is remembered and applied to the first characters that arrive. The anchor is
-       checked on the way in: move the caret elsewhere and the arming lapses rather
-       than firing somewhere unexpected. */
-    function armPending(area, tag) {
+       An inline command at a collapsed caret arms the tag for the next typed text. */
+    function armPending(area, tag, attrs) {
         const r = range(); if (!r || !r.collapsed) return;
         const at = area._pending;
-        const tags = at && at.node === r.startContainer && at.offset === r.startOffset ? at.tags : new Set();
-        tags.has(tag) ? tags.delete(tag) : tags.add(tag);
+        const tags = at && at.node === r.startContainer && at.offset === r.startOffset ? at.tags : new Map();
+        tags.has(tag) ? tags.delete(tag) : tags.set(tag, attrs || null);
         area._pending = tags.size ? { tags, node: r.startContainer, offset: r.startOffset } : null;
     }
 
@@ -1290,17 +1505,38 @@
         const node = r.startContainer, start = at.offset;
         const span = document.createRange();
         span.setStart(node, start); span.setEnd(node, r.startOffset);
+        const text = span.toString();                 // as the browser stored it (a trailing space may be U+00A0)
         span.deleteContents();
+        // A pending tag already around the caret ends there: the text goes after it, keeping other formatting inside it
+        const off = [], on = [];
+        at.tags.forEach((attrs, tag) => { const h = elementAt(node).closest(tag); (h && withinArea(node, h) ? off : on).push([tag, attrs]); });
+        const offTags = new Set(off.map(([t]) => t.toUpperCase()));
+        let pos = { node, offset: start }, keep = [];
+        off.forEach(([tag]) => {
+            const host = elementAt(pos.node).closest(tag); if (!host) return;
+            for (let n = elementAt(pos.node); n && n !== host; n = n.parentElement) if (!offTags.has(n.tagName)) keep.unshift(n.cloneNode(false));
+            const rest = document.createRange(); rest.setStart(pos.node, pos.offset); rest.setEnd(host, host.childNodes.length);
+            const tail = host.cloneNode(false); tail.appendChild(rest.extractContents());
+            host.after(tail);
+            if (!tail.textContent) tail.remove();
+            pos = { node: host.parentNode, offset: [...host.parentNode.childNodes].indexOf(host) + 1 };
+            if (!host.textContent) { pos.offset--; host.remove(); }
+        });
         let outer = null, inner = null;
-        at.tags.forEach(tag => {
+        const wrap = (el) => { if (inner) inner.appendChild(el); else outer = el; inner = el; };
+        keep.forEach(wrap);
+        on.forEach(([tag, attrs]) => {
             const el = document.createElement(tag);
-            if (inner) inner.appendChild(el); else outer = el;
-            inner = el;
+            if (attrs) Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
+            wrap(el);
         });
-        inner.textContent = typed;
-        span.insertNode(outer);
-        area._pending = null;                       // the caret is inside the tags now
-        caretIn(inner, typed.length);
+        const t = document.createTextNode(text);
+        if (inner) inner.appendChild(t); else outer = t;
+        const ins = document.createRange(); ins.setStart(pos.node, pos.offset); ins.collapse(true);
+        ins.insertNode(outer);
+        area._pending = null;
+        const s = sel(), nr = document.createRange(); nr.setStart(t, text.length); nr.collapse(true);
+        s.removeAllRanges(); s.addRange(nr);
         return true;
     }
 
@@ -1308,9 +1544,7 @@
         const el = elementAt(range() && range().startContainer);
         return el ? getComputedStyle(el)[prop] : '';
     }
-    // <input type=color> only speaks hex, but themes are authored in oklch and modern
-    // engines return that verbatim — assigning it to fillStyle does not normalize it
-    // either. Painting one pixel and reading it back converts anything paintable.
+    // <input type=color> only speaks hex; painting a pixel converts any colour
     let _hexCtx;
     function rgbToHex(v) {
         if (!v) return '#000000';
@@ -1324,13 +1558,14 @@
         } catch { return '#000000'; }
     }
 
-    const MODES = new Set(['html', 'plain', 'minimal', 'literal', 'autofocus']);
+    const MODES = new Set(['html', 'plain', 'inline', 'literal', 'autofocus']);
 
-    // Nearest command for an unknown modifier, for the console warning only.
+    // Nearest command for an unknown modifier (console warning only)
     const HINTS = {
         bold: 'strong', italic: 'em', underline: 'u', strike: 's', strikethrough: 's', link: 'a', quote: 'blockquote',
         codeblock: 'pre', bullet: 'ul', bullets: 'ul', numbered: 'ol', heading: 'h2', paragraph: 'p', image: 'img',
-        rule: 'hr', highlight: 'mark', task: 'checklist', tasks: 'checklist', subscript: 'sub', superscript: 'sup'
+        rule: 'hr', highlight: 'mark', task: 'checklist', tasks: 'checklist', subscript: 'sub', superscript: 'sup',
+        minimal: 'inline'
     };
     function suggest(m) {
         if (!m) return ' — name a command, e.g. .strong';
@@ -1350,15 +1585,7 @@
     }
 
     /* ---- Autoformat ----
-       A line converts when it is finished, not while it is being typed: press Enter
-       and the line you are leaving becomes what its markdown described. Converting
-       mid-keystroke fought the writer — a "*" was reinterpreted the moment a second
-       one appeared — and made literal markdown impossible to type. Deferring it also
-       means what you see and what is stored only ever disagree within one line.
-
-       Without conversion the two genuinely drift: "## Title" left in a paragraph is
-       stored as a heading and comes back as one, having looked like body text the
-       whole time it was being written. */
+       Block markdown converts on Enter; inline marks convert as their closing marker is typed. */
     const LINE_RULES = [
         { re: /^(#{1,6})\s+/, make: (b, m) => retagBlock(b, 'h' + m[1].length) },
         { re: /^[-*+]\s+/, make: (b) => listify(b, 'ul') },
@@ -1386,7 +1613,7 @@
         return n;
     }
 
-    // Consecutive lines join the list above rather than each starting their own.
+    // Consecutive lines join the list above
     function listify(b, tag, checked) {
         const item = document.createElement('li');
         while (b.firstChild) item.appendChild(b.firstChild);
@@ -1403,7 +1630,6 @@
         return item;
     }
 
-    // Strip the marker text the rule matched, without disturbing the rest of the line.
     function stripLead(el, count) {
         const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
         let left = count;
@@ -1437,10 +1663,7 @@
         return best;
     }
 
-    // A finished inline mark converts the moment its closing marker is typed —
-    // **bold**, *italic*, `code`, ~~struck~~, [text](url) — like any modern
-    // editor, rather than waiting for Enter. Only a pattern ending exactly at
-    // the caret is taken, so half-typed markers never convert under the caret.
+    // Only a pattern ending exactly at the caret; earliest start wins (image over link)
     function endInline(text) {
         let best = null;
         for (const rule of INLINE_RULES) {
@@ -1450,8 +1673,6 @@
                 if (m.index + m[0].length !== text.length) continue;
                 const skip = rule.pre ? m[rule.pre].length : 0;
                 const start = m.index + skip;
-                // Earliest start wins, like firstInline — ![alt](src) must be
-                // the image rule, not the link rule matching one char later.
                 if (!best || start < best.start) best = { rule, m, start, len: m[0].length - skip };
                 break;
             }
@@ -1464,7 +1685,7 @@
         const node = r.startContainer;
         if (!node || node.nodeType !== 3 || !node.parentElement) return false;
         const host = node.parentElement.closest('code, pre, a');
-        if (host && area.contains(host)) return false;             // literal contexts keep their text
+        if (host && area.contains(host)) return false;
         const hit = endInline(node.nodeValue.slice(0, r.startOffset));
         if (!hit) return false;
         const el = inlineEl(hit.rule, hit.m); if (!el) return false;
@@ -1480,24 +1701,77 @@
         return true;
     }
 
-    // Engines normalize a caret at a mark's edge back inside it, so the next text
-    // typed after a conversion is moved out: the mark ends where its markers did.
+    const lastTextIn = (el) => { let last = null; const w = document.createTreeWalker(el, NodeFilter.SHOW_TEXT); for (let t = w.nextNode(); t; t = w.nextNode()) last = t; return last; };
+    // A collapsed caret at a mark's end edge: after it in its parent, at the start of the text after it, or at the end of its text
+    function atMarkEnd(el, r) {
+        if (!el || !el.isConnected || !r || !r.collapsed) return false;
+        const n = r.startContainer, o = r.startOffset, last = lastTextIn(el);
+        return (n === el.parentNode && n.childNodes[o - 1] === el) || (n === el && o === el.childNodes.length)
+            || (n.nodeType === 3 && n === el.nextSibling && o === 0) || (n.nodeType === 3 && n === last && o === n.length);
+    }
+    const tailOf = (el) => { let t = el.nextSibling; if (!t || t.nodeType !== 3) { t = document.createTextNode(''); el.after(t); } return t; };
+    const caretAt = (node, offset) => { const s = sel(), nr = document.createRange(); nr.setStart(node, offset); nr.collapse(true); s.removeAllRanges(); s.addRange(nr); };
+    const isWs = (c) => !c || /\s/.test(c);
+
+    // Text typed right after a conversion goes into a text node after the mark, never into it.
+    // A space that would collapse is stored as U+00A0 until text follows it.
+    function typeAfterMark(area, e) {
+        const el = area._exit;
+        if (e.inputType !== 'insertText' || !e.cancelable || !e.data || /[\r\n]/.test(e.data) || !atMarkEnd(el, range())) return false;
+        e.preventDefault();
+        area._exit = null; area._after = el;
+        const last = lastTextIn(el), tail = tailOf(el);
+        const next = tail.nodeValue[0] || '', prev = (last && last.nodeValue.slice(-1)) || '';
+        const chars = [...e.data];
+        const text = chars.map((c, i) => c === ' ' && (isWs(i ? chars[i - 1] : prev) || isWs(i < chars.length - 1 ? chars[i + 1] : next)) ? '\u00a0' : c).join('');
+        tail.insertData(0, text);
+        const nbs = []; [...text].forEach((c, i) => { if (c === '\u00a0') nbs.push(i); });
+        area._nb = nbs.length ? { node: tail, at: nbs } : null;
+        caretAt(tail, text.length);
+        area.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText', data: e.data }));
+        return true;
+    }
+
+    // A U+00A0 placed after a mark, or just before typed text, becomes a plain space once text is on both sides of it
+    function relaxSpaces(area, typed) {
+        const r0 = range();
+        if (typed && r0 && r0.collapsed && r0.startContainer.nodeType === 3) {
+            const at = r0.startOffset - typed.length - 1;
+            if (at >= 0 && r0.startContainer.nodeValue[at] === '\u00a0') area._nb = area._nb && area._nb.node === r0.startContainer ? { node: area._nb.node, at: [...new Set([...area._nb.at, at])] } : { node: r0.startContainer, at: [at] };
+        }
+        const rec = area._nb; if (!rec) return;
+        const node = rec.node;
+        if (!node.isConnected) { area._nb = null; return; }
+        const r = range(), keep = r && r.startContainer === node ? r.startOffset : null;
+        rec.at = rec.at.filter(i => {
+            const v = node.nodeValue;
+            if (v[i] !== '\u00a0') return false;
+            const p = node.previousSibling, x = node.nextSibling;
+            const prev = i ? v[i - 1] : (p ? p.textContent.slice(-1) : ''), next = i < v.length - 1 ? v[i + 1] : (x ? x.textContent[0] : '');
+            if (isWs(prev) || isWs(next)) return true;
+            node.replaceData(i, 1, ' ');
+            return false;
+        });
+        if (keep != null) caretAt(node, keep);
+        if (!rec.at.length) area._nb = null;
+    }
+
+    // IME text composed right after a conversion is moved out of the mark, the caret with it
     function leaveMark(area, typed) {
         const el = area._exit; area._exit = null;
         const r = range();
         if (!el || !el.isConnected || !r || !r.collapsed) return false;
         const node = r.startContainer;
-        if (node.nodeType !== 3 || !el.contains(node) || r.startOffset !== node.length || !node.nodeValue.endsWith(typed)) return false;
-        const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-        let last = null; for (let n = walker.nextNode(); n; n = walker.nextNode()) last = n;
-        if (last !== node || node.length === typed.length) return false;
+        // Chrome stores a typed trailing space as U+00A0
+        const nb = (s) => s.replace(/\u00a0/g, ' ');
+        if (node.nodeType !== 3 || !el.contains(node) || r.startOffset !== node.length || !nb(node.nodeValue).endsWith(nb(typed))) return false;
+        if (lastTextIn(el) !== node || node.length === typed.length) return false;
+        const moved = node.nodeValue.slice(node.length - typed.length);
         node.deleteData(node.length - typed.length, typed.length);
-        let tail = el.nextSibling;
-        if (!tail || tail.nodeType !== 3) { tail = document.createTextNode(''); el.after(tail); }
-        tail.insertData(0, typed);
-        const s = sel(), nr = document.createRange();
-        nr.setStart(tail, typed.length); nr.collapse(true);
-        s.removeAllRanges(); s.addRange(nr);
+        const tail = tailOf(el);
+        tail.insertData(0, moved);
+        caretAt(tail, typed.length);
+        area._after = el;
         return true;
     }
 
@@ -1519,14 +1793,11 @@
         });
     }
 
-    // Returns the element now holding the line's content — an <li> for a list, so the
-    // caller knows to continue the list rather than start a paragraph.
+    // Returns the element now holding the line (an <li> continues the list)
     function convertLine(b) {
         if (!b) return b;
-        // Bounded like every other ancestor lookup: only a <pre> INSIDE the
-        // editor means "we're in a code block". An editor hosted within someone
-        // else's <pre> (a docs code-group wrapper) still converts markdown.
-        const area = b.closest('[data-text-edit]');
+        // Only a <pre> inside the editor is a code block
+        const area = b.closest('[data-rich-text]');
         const pre = b.closest('pre');
         if (pre && (!area || area.contains(pre))) return b;
         const text = b.textContent;
@@ -1541,12 +1812,7 @@
         return b;
     }
 
-    /* ---- Enter ----
-       Owned outright rather than post-processed: the split has to know what the line
-       became, headings and quotes must not continue themselves, and lists and code
-       blocks need a way out that is not the mouse. */
-    const CONTINUES = new Set(['LI', 'PRE']);
-
+    /* ---- Enter ---- */
     function splitInto(b, tag) {
         const n = document.createElement(tag);
         const r = range();
@@ -1561,29 +1827,7 @@
         return n;
     }
 
-    function exitList(li, area) {
-        const list = li.closest('ul, ol');
-        const p = document.createElement('p');
-        const after = [...list.children].slice([...list.children].indexOf(li) + 1);
-        list.after(p);
-        if (after.length) {
-            const tail = document.createElement(list.tagName.toLowerCase());
-            if (list.hasAttribute('data-checklist')) tail.setAttribute('data-checklist', '');
-            after.forEach(n => tail.appendChild(n));
-            p.after(tail);
-        }
-        li.remove();
-        if (!list.children.length) list.remove();
-        caretIn(p, 0);
-        void area;
-    }
-
-    // Enter is only taken over where the wanted behaviour differs from the browser's.
-    // Inside a code block, and for Shift+Enter, the native handling is already right —
-    // and doing it by hand goes wrong, because a caret placed by script next to a <br>
-    // or a bare newline gets normalized back over it before the next character lands.
-    // Chrome writes <br> inside a <pre> rather than a newline, so an empty last line
-    // is a pair of trailing breaks — not a trailing "\n" as the markup suggests.
+    // Native Enter inside code and for Shift+Enter; Chrome writes <br> pairs in a <pre>
     const codeEndsBlank = (pre) => {
         const last = pre.lastChild;
         if (last && last.nodeName === 'BR' && last.previousSibling && last.previousSibling.nodeName === 'BR') return true;
@@ -1597,27 +1841,22 @@
     const ownsEnter = (e) => !e.shiftKey && (!ancestor('pre') || leavingCode());
 
     /* ---- Backspace ----
-       Left to the browser, Backspace at the start of a heading merges it into the
-       paragraph above and inlines the heading's computed styles as a <span> to keep
-       the look — so the document quietly fills with font-size and font-weight spans.
-       Deleting the last character of a table's only cell takes the whole table with
-       it. Both are surprising enough to be worth owning. */
+       Owned at a block start (no style spans from merged headings) and in a table's last cell. */
     const atBlockStart = () => { const b = ancestor('li') || blockEl(); return !!b && offsetIn(b) === 0; };
 
     function cellCoversAll() {
         const cell = ancestor('td, th'); if (!cell) return null;
         const r = range(); if (!r) return null;
-        const all = document.createRange(); all.selectNodeContents(cell);
         const covers = r.collapsed
             ? cell.textContent.length <= 1
             : r.toString().length >= cell.textContent.length;
         return covers ? cell : null;
     }
 
-    function backspaceAtStart(area) {
+    function backspaceAtStart() {
         const li = ancestor('li');
         if (li) {
-            if (li.previousElementSibling) {                      // merge into the item above
+            if (li.previousElementSibling) {
                 const prev = li.previousElementSibling, at = prev.textContent.length;
                 while (li.firstChild) { const n = li.firstChild; if (n.nodeName === 'INPUT') n.remove(); else prev.appendChild(n); }
                 li.remove();
@@ -1632,11 +1871,12 @@
             caretIn(p, 0);
             return;
         }
-        const b = blockEl(); if (!b) return;
+        const b = blockEl(); if (!b || /^(TD|TH)$/.test(b.tagName)) return;
         const prev = b.previousElementSibling;
-        if (!prev) { if (b.tagName !== 'P') retagBlock(b, 'p').focus?.(); caretIn(blockEl() || b, 0); return; }
+        if (!prev && /^(DT|DD)$/.test(b.tagName)) { liftItem(b); return; }
+        if (!prev) { if (b.tagName !== 'P') retagBlock(b, 'p'); caretIn(blockEl() || b, 0); return; }
         if (prev.tagName === 'HR') { prev.remove(); caretIn(b, 0); return; }
-        if (/^(UL|OL)$/.test(prev.tagName)) {                     // join onto the last item
+        if (/^(UL|OL)$/.test(prev.tagName)) {
             const last = prev.lastElementChild; if (!last) return;
             const at = last.textContent.length;
             while (b.firstChild) last.appendChild(b.firstChild);
@@ -1653,16 +1893,12 @@
 
     function onEnter(area, autoformat) {
         let holder = ancestor('li') || blockEl() || ensureBlock(area);
+        // Paragraphs inside a cell, never siblings of it
+        if (/^(TD|TH)$/.test(holder.tagName)) holder = innerBlock(holder);
 
-        // Bounded to the area, like ancestor(): an editor that happens to LIVE
-        // inside someone else's <pre> (a docs frame inside a code-group wrapper)
-        // must not treat that wrapper as its own code block — the exit path below
-        // rewrites and can remove the pre, destroying the host markup around the
-        // editor.
+        // An empty last line leaves the code block (bounded to the area)
         const pre = holder.closest('pre');
         if (pre && pre !== area && area.contains(pre)) {
-            // An empty last line leaves the code block — the one case the browser
-            // cannot do, and without it the block has no keyboard exit.
             while (pre.lastChild && (pre.lastChild.nodeName === 'BR' || !pre.lastChild.textContent.trim())) pre.lastChild.remove();
             if (/\n[^\S\n]*$/.test(pre.textContent)) pre.textContent = pre.textContent.replace(/\n[^\S\n]*$/, '');
             const p = document.createElement('p');
@@ -1672,19 +1908,41 @@
             return;
         }
 
-        if (holder.tagName === 'LI' && !holder.textContent.length) return exitList(holder, area);
+        if (holder.tagName === 'LI' && !holder.textContent.length) return liftItem(holder);
 
-        // Split BEFORE converting. Conversion strips the marker text, which would
-        // leave the caret offset pointing past the end of its own text node.
+        // An empty last paragraph leaves its quote (a quote from markdown holds paragraphs)
+        const quote = holder.parentElement;
+        if (holder.tagName === 'P' && quote && quote.tagName === 'BLOCKQUOTE' && quote !== area && area.contains(quote) && holder === quote.lastElementChild && !holder.textContent.trim()) {
+            quote.after(holder);
+            if (!quote.textContent.trim() && !quote.querySelector('img')) quote.remove();
+            caretIn(holder, 0);
+            return;
+        }
+
+        // Terms alternate dt → dd → dt; an empty one leaves the list
+        if (/^(DT|DD)$/.test(holder.tagName)) {
+            if (!holder.textContent.length) return liftItem(holder);
+            caretIn(splitInto(holder, holder.tagName === 'DT' ? 'dd' : 'dt'), 0);
+            return;
+        }
+
+        // A caption continues after its figure
+        if (holder.tagName === 'FIGCAPTION') {
+            const next = splitInto(holder, 'p');
+            holder.closest('figure').after(next);
+            caretIn(next, 0);
+            return;
+        }
+
+        // Split before converting: conversion strips marker text under the caret
         const next = splitInto(holder, holder.tagName === 'LI' ? 'li' : 'p');
         if (autoformat) holder = convertLine(holder) || holder;
 
         if (holder.tagName === 'HR') { caretIn(next, 0); return; }
 
-        // A finished ``` line opens the code block rather than starting a line after it.
+        // A finished ``` line opens the code block
         if (holder.tagName === 'PRE') { next.remove(); caretIn(holder, 0); return; }
 
-        // The line became a list item, so the new line continues the list.
         if (holder.tagName === 'LI') {
             const item = next.tagName === 'LI' ? next : retagBlock(next, 'li');
             holder.after(item);
@@ -1698,58 +1956,70 @@
             return;
         }
 
-        // Everything else starts a plain paragraph. A heading or a quote does not
-        // continue itself — the next line is body text, which is what a writer means.
+        // Headings and quotes don't continue themselves
         caretIn(next, 0);
     }
 
+    const MAC = /Mac|iPhone|iPad|iPod/.test((typeof navigator !== 'undefined' && (navigator.userAgentData && navigator.userAgentData.platform || navigator.platform)) || '');
+
     /* ---- History ----
-       Wrapping tags and moving list items are plain DOM edits, which never enter the
-       browser's own undo stack and can leave it inconsistent. The editor keeps its
-       own: an HTML snapshot plus the caret's character offset, coalesced while
-       typing so a burst of keystrokes undoes as one step. */
+       HTML snapshots plus caret offset; typing bursts coalesce into one step. */
     const HISTORY_CAP = 200;
     const IDLE = 400;
 
+    // Every entry is a settled state (trailing block, tables), so settling never makes the field differ from its history
     function record(area) {
         const h = area._history; if (!h || h.restoring) return;
         clearTimeout(h.timer); h.timer = null;
+        if (area._rt && area._rt.settle) area._rt.settle();
         const html = area.innerHTML;
-        if (h.stack[h.at] && h.stack[h.at].html === html) return;
+        // Unchanged: the entry learns where the next edit starts (`before`, for undo);
+        // `caret` stays where the edit that produced it ended (for redo)
+        if (h.stack[h.at] && h.stack[h.at].html === html) {
+            const caret = offsetIn(area);
+            if (caret != null) h.stack[h.at].before = caret;
+            return;
+        }
         h.stack.length = h.at + 1;
         h.stack.push({ html, caret: offsetIn(area) });
         if (h.stack.length > HISTORY_CAP) h.stack.shift();
         h.at = h.stack.length - 1;
     }
 
+    // A burst about to start: the entry it will undo to remembers where it starts (never adds a step)
+    function markCaret(area) {
+        const h = area._history; if (!h || h.timer || h.restoring) return;
+        const top = h.stack[h.at], caret = offsetIn(area);
+        if (top && caret != null && top.html === area.innerHTML) top.before = caret;
+    }
+
+    // Re-sync once the burst lands, so Undo lights up
     const recordSoon = (area) => {
         const h = area._history; if (!h || h.restoring) return;
         clearTimeout(h.timer);
-        // Re-sync once the burst lands: undo/redo controls gate on history state,
-        // and the reset's [aria-disabled] rule blocks pointer events — without
-        // this, Undo stays visually dead until some unrelated event syncs.
         h.timer = setTimeout(() => { record(area); sync(); }, IDLE);
     };
 
     function step(area, by) {
         const h = area._history; if (!h) return;
-        record(area);                                   // land any pending burst first
+        // Land a pending burst; walking history alone leaves each entry's carets as recorded
+        if (h.timer || !h.stack[h.at] || h.stack[h.at].html !== area.innerHTML) record(area);
         const next = h.at + by;
         if (next < 0 || next >= h.stack.length) return;
         h.at = next; h.restoring = true;
-        area.innerHTML = h.stack[next].html;
+        const entry = h.stack[next];
+        area.innerHTML = entry.html;
+        if (area._rt && area._rt.settle) { area._rt.settle(); entry.html = area.innerHTML; }
         area.focus();
-        caretIn(area, h.stack[next].caret);
+        caretIn(area, by < 0 && entry.before != null ? entry.before : entry.caret);
         saveRange(area);
         area.dispatchEvent(new Event('input', { bubbles: true }));
-        h.restoring = false;                            // after the event, so it records nothing
+        h.restoring = false;
     }
 
     /* ---- Registry + resolution ----
-       Controls find their area by containment first, focus second. The nearest
-       ancestor holding exactly one area wins, which is what keeps two dialogs
-       sharing a DOM from driving each other; a toolbar with no such ancestor falls
-       through to whichever area was last focused. x-text-edit-for pins either. */
+       Controls resolve by containment (nearest ancestor holding exactly one area), then
+       by focus; x-rich-text-for pins either. */
     const areas = new Set();
     const controls = new Set();
     let lastFocused = null;
@@ -1759,9 +2029,9 @@
     const preferred = (list) => list.find(a => a === lastFocused && onScreen(a)) || list.find(onScreen) || list[0] || null;
 
     function resolve(control) {
-        const pin = control.closest('[x-text-edit-for]');
+        const pin = control.closest('[x-rich-text-for]');
         if (pin) {
-            const target = document.querySelector(pin.getAttribute('x-text-edit-for'));
+            const target = document.querySelector(pin.getAttribute('x-rich-text-for'));
             if (target) return areas.has(target) ? target : preferred(inside(target));
         }
         for (let n = control.parentElement; n; n = n.parentElement) {
@@ -1772,35 +2042,26 @@
         return unambiguous([...areas]);
     }
 
-    // A control acts on one area or on none. Where several are in scope the focused
-    // one decides; before anything has been focused there is no answer, and guessing
-    // sends the command somewhere the writer was not looking — a panel button that
-    // silently rewrites the first heading on the page rather than the line they are
-    // in. Reporting the control unavailable is the honest reading.
-    // Letting go of the target has to be announced. A menu anchored to the selection
-    // is watching for it, and without a final null it hangs about over content it no
-    // longer has anything to do with.
+    // Releasing the target is announced with a null selection
     function release(area) {
         const was = area || lastFocused;
         if (!area || area === lastFocused) lastFocused = null;
         if (!was) return;
-        was.removeAttribute('data-text-edit-focused');
+        was.removeAttribute('data-rich-text-focused');
         was._selection = null;
-        was.removeAttribute('data-text-edit-selected');
-        document.documentElement.removeAttribute('data-text-edit-selected');
-        was.dispatchEvent(new CustomEvent('text-edit:selection', { bubbles: true, detail: null }));
+        was.removeAttribute('data-rich-text-selected');
+        document.documentElement.removeAttribute('data-rich-text-selected');
+        was.dispatchEvent(new CustomEvent('rich-text:selection', { bubbles: true, detail: null }));
     }
 
-    // relatedTarget is null for a click onto plain page text; the pointer that caused
-    // the blur stands in, and only for the tick that dispatched it.
+    // Stands in for relatedTarget during the blur a pointer caused
     let pointerTarget = null;
 
-    // Focus is still the area's own, or on a control that acts on it.
     function keeps(area, node) {
         const el = elementAt(node);
         if (!el) return false;
         if (area.contains(el)) return true;
-        const control = el.closest('[data-text-edit-control]');
+        const control = el.closest('[data-rich-text-control]');
         return !!control && resolve(control) === area;
     }
 
@@ -1810,6 +2071,7 @@
         return !!el && (el.isContentEditable || el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && !TEXTLESS.test(el.type)));
     };
 
+    // Several areas in scope and none focused: no target
     function unambiguous(found) {
         if (lastFocused && found.includes(lastFocused) && lastFocused.isConnected && onScreen(lastFocused)) return lastFocused;
         const visible = found.filter(onScreen);
@@ -1817,9 +2079,7 @@
     }
 
     /* ---- Caret custody ----
-       A control anywhere in the document means the area is often not focused when a
-       command runs — a <select>, a colour input or a URL field steals focus by
-       design. Each area keeps its own last range so any control can put it back. */
+       Each area keeps its last range, so a focus-taking control can put it back. */
     function saveRange(area) {
         const r = range();
         if (r && area.contains(r.startContainer)) area._range = r.cloneRange();
@@ -1828,141 +2088,118 @@
     const forget = (keep) => areas.forEach(a => { if (!keep || !a.contains(keep)) a._range = null; });
 
     function restoreRange(area) {
-        const r = range();
+        const r = liveRange();
         if (r && area.contains(r.startContainer)) return;
-        // Only go back somewhere we have actually been. Focusing regardless puts a
-        // caret at the start of an area that was never edited, which is how a control
-        // ends up rewriting the first field on the page instead of doing nothing.
-        if (!area._range || !area.contains(area._range.startContainer)) return;
-        area.focus();
-        const s = sel(); s.removeAllRanges(); s.addRange(area._range);
+        const saved = area._range;
+        if (!saved || !area.contains(saved.startContainer)) return;
+        area.focus();                                   // its focusin saves the caret focus placed: put ours back
+        area._range = saved;
+        const s = sel(); s.removeAllRanges(); s.addRange(saved);
+    }
+
+    // With focus in a control (an <input> for a link, a <select>), commands read the area's saved range
+    function judged(area, fn) {
+        const live = liveRange();
+        if ((live && area.contains(live.startContainer)) || !area._range || !area.contains(area._range.startContainer)) return fn();
+        const was = probe; probe = area._range;
+        try { return fn(); } finally { probe = was; }
+    }
+    // Focus or caret in another editable element (not this area, not one of the controls): stay quiet
+    function busyElsewhere(area) {
+        const a = document.activeElement;
+        if (a && a !== document.body && a.closest && !area.contains(a)) {
+            if (a.closest('[data-rich-text-control]')) return false;
+            if (editableElsewhere(a)) return true;
+        }
+        const live = liveRange();
+        return !!live && !area.contains(live.startContainer) && editableElsewhere(live.startContainer);
     }
 
-    // markdown can only carry the tags it has syntax for. Rather than let a command
-    // write something the next save would drop, it reports itself unavailable.
     function allows(area, id, ctrl) {
-        const spec = COMMANDS[id], cfg = area && area._te;
+        const spec = COMMANDS[id], cfg = area && area._rt;
         if (!spec || !cfg) return false;
-        const page = !!(ctrl && ctrl.page && spec.page);
-        // The writer's caret is visibly in ANOTHER editable element (a plain
-        // x-edit leaf, an input, someone else's contenteditable): acting now
-        // would restore this area's old saved range and edit text the writer
-        // can see is not selected. The control goes quiet instead. Page
-        // commands write variables, never the selection — they stay live.
-        const live = range();
-        if (!page && live && !area.contains(live.startContainer) && editableElsewhere(live.startContainer)) return false;
-        if (spec.history) return spec.enabled(area);         // every mode, .plain included
-        if (cfg.mode === 'plain') return false;
-        if (cfg.minimal && spec.block && !page) return false;
-        if (cfg.mode !== 'html' && !spec.md && !page) return false;
-        if (page) return true;                       // writes to the area, needs no caret
-        // Never focused, or released to another field: no caret to act on.
+        const all = !!(ctrl && ctrl.all && spec.all);
+        if (all && cfg.noAll) return false;
+        if (!all && busyElsewhere(area)) return false;
+        if (spec.history) return spec.enabled(area);
+        if (cfg.format === 'plain') return false;
+        if (cfg.inline && !all && (spec.block || (id === 'br' && !cfg.breaks))) return false;
+        if (cfg.format !== 'html' && !spec.md && !all) return false;
+        if (all) return true;
         if (!area._range || !area.contains(area._range.startContainer)) return false;
-        // A wrap has nothing to wrap without a selection, and a control that is lit
-        // but does nothing reads as broken — so say so rather than no-op.
-        if (spec.needsSelection && !hasSelection()) return false;
-        return !spec.enabled || spec.enabled(area);
+        return judged(area, () => !(spec.needsSelection && !hasSelection()) && (!spec.enabled || spec.enabled(area)));
     }
 
     function run(area, id, arg, ctrl) {
         const spec = COMMANDS[id]; if (!spec) return;
-        const page = !!(ctrl && ctrl.page && spec.page);
-        if (!page) {
-            // Checked BEFORE restoring the saved range: if the writer's caret is
-            // visibly in another editable element, restoring first would move the
-            // selection back here and the command would edit text the writer can
-            // see is not selected. (The reset blocks pointer clicks on disabled
-            // controls; this covers keyboard activation.)
-            const live = range();
-            if (live && !area.contains(live.startContainer) && editableElsewhere(live.startContainer)) return;
+        const all = !!(ctrl && ctrl.all && spec.all);
+        if (!all) {
+            // Judged before restoring, so a refused (or keyboard-activated) control never takes focus back
+            if (!allows(area, id, ctrl)) return;
             restoreRange(area);
-            // If the caret could not be put in this area — it was never focused, or
-            // the saved range has gone stale — do nothing. Running anyway rewrites
-            // whichever area resolution happened to land on, which reads as the
-            // command changing some other element's text.
             const r = range();
             if (!r || !area.contains(r.startContainer)) return;
         }
         if (!allows(area, id, ctrl)) return;
-        if (page) {
-            area.style.setProperty(PAGE_VARS[id], id === 'size' ? px(arg) : arg);
-            if (!arg) area.style.removeProperty(PAGE_VARS[id]);
-            area.dispatchEvent(new CustomEvent('text-edit:page', { bubbles: true, detail: pageStyle(area) }));
+        if (all) {
+            area.style.setProperty(ALL_VARS[id], id === 'size' ? px(arg) : arg);
+            if (!arg) area.style.removeProperty(ALL_VARS[id]);
+            area.dispatchEvent(new CustomEvent('rich-text:all', { bubbles: true, detail: allStyle(area) }));
             sync();
             return;
         }
-        const arming = spec.md !== undefined && INLINE_TAGS[id] && !hasSelection();
-        if (arming) { spec.run(arg, area); sync(); return; }   // nothing changed yet
-        if (!spec.history) record(area);        // undo/redo drive the stack themselves
+        const arming = INLINE_TAGS[id] && !hasSelection();
+        if (arming) { spec.run(arg, area); sync(); return; }
+        if (!spec.history) record(area);
         spec.run(arg, area);
         normalizeLists(area);
         if (!spec.history) record(area);
         saveRange(area);
-        if (!spec.history) area.dispatchEvent(new Event('input', { bubbles: true }));   // step fires its own
+        if (!spec.history) area.dispatchEvent(new Event('input', { bubbles: true }));
         sync();
     }
 
-    // Reflect caret state onto every control pointing at the area that owns it.
+    // Reflect caret state onto every control
     function sync() {
         controls.forEach(c => {
-            const cfg = c._te, area = resolve(c);
+            const cfg = c._rt, area = resolve(c);
             const usable = !!area && allows(area, cfg.id, cfg);
-            if (!area) { c.removeAttribute('data-text-edit-active'); c.setAttribute('aria-disabled', 'true'); if (c.tagName === 'BUTTON') c.setAttribute('aria-pressed', 'false'); return; }
+            if (!area) { c.removeAttribute('data-rich-text-active'); c.setAttribute('aria-disabled', 'true'); if (c.tagName === 'BUTTON') c.setAttribute('aria-pressed', 'false'); return; }
             const spec = COMMANDS[cfg.id];
-            const page = !!(cfg.page && spec.page);
-            c.toggleAttribute('data-text-edit-active', usable && !page && !!spec.active(cfg.arg(), area));
+            const all = !!(cfg.all && spec.all);
+            c.toggleAttribute('data-rich-text-active', usable && !all && !!judged(area, () => spec.active(cfg.literal, area)));
             c.setAttribute('aria-disabled', String(!usable));
-            if (usable && (page || spec.reflect) && 'value' in c && c !== document.activeElement) {
-                const v = page ? area.style.getPropertyValue(PAGE_VARS[cfg.id]).trim() : spec.reflect();
-                // Never blank a <select> by assigning a value the author didn't offer —
-                // computed styles report plenty that no option list would carry.
+            if (usable && (all || spec.reflect) && 'value' in c && c !== document.activeElement) {
+                const v = all ? area.style.getPropertyValue(ALL_VARS[cfg.id]).trim() : judged(area, () => spec.reflect());
+                // Never blank a <select> with a value it doesn't offer
                 const offered = c.tagName !== 'SELECT' || [...c.options].some(o => o.value === v);
                 if (v != null && offered && c.value !== v) c.value = v;
             }
-            if (c.tagName === 'BUTTON') c.setAttribute('aria-pressed', String(c.hasAttribute('data-text-edit-active')));
+            if (c.tagName === 'BUTTON') c.setAttribute('aria-pressed', String(c.hasAttribute('data-rich-text-active')));
         });
     }
 
-    /* ---- Directive ---- */
-    function init() {
-        if (!window.Alpine || !Alpine.directive) return;
-        // Keep the browser from inlining computed styles, and make Enter produce <p>
-        // rather than Chrome's default <div> so blocks are addressable by tag.
+    /* ---- Document listeners ---- */
+    let listening = false;
+    function listen() {
+        if (listening) return;
+        listening = true;
+        // A link clicked in a field is content: neither the router nor the browser follows it.
+        // A contenteditable=false island inside the field keeps its links. Window capture runs first.
+        const blockLink = (e) => {
+            const link = e.target && e.target.closest && e.target.closest('a[href]');
+            const field = link && link.closest('[data-rich-text]');
+            if (!field || !areas.has(field)) return;
+            const off = link.closest('[contenteditable="false"]');
+            if (off && field.contains(off)) return;
+            e.preventDefault();
+        };
+        window.addEventListener('click', blockLink, true);
+        window.addEventListener('auxclick', blockLink, true);
+        // No inline computed styles; Enter makes <p>, not <div>
         try { document.execCommand('styleWithCSS', false, false); } catch { }
         try { document.execCommand('defaultParagraphSeparator', false, 'p'); } catch { }
 
-        Alpine.directive('text-edit', (el, { expression, modifiers }, { effect, evaluateLater, evaluate, cleanup }) => {
-            const id = modifiers.find(m => COMMANDS[m]);
-            if (id) return control(el, id, modifiers, expression, evaluate, cleanup);
-            // A control's tag never becomes a textbox; an unknown command is reported instead.
-            if (/^(BUTTON|SELECT|INPUT|TEXTAREA|A)$/.test(el.tagName)) {
-                const m = modifiers.find(x => !MODES.has(x) && x !== 'page');
-                console.warn(`[Manifest Text Edit] unknown command${m ? ` .${m}` : ''} on <${el.tagName.toLowerCase()}>${suggest(m)}`);
-                return;
-            }
-            return area(el, modifiers, expression, { effect, evaluateLater, cleanup });
-        });
-
-        // x-text-edit-menu — the turnkey selection bubble: put commands inside,
-        // and the plugin shows the element over the selection of the area it
-        // resolves to (same rules as any control) and hides it when the
-        // selection is gone. Positioning is the stylesheet's, off the
-        // --text-edit-selection-* variables, so it can be restyled freely.
-        Alpine.directive('text-edit-menu', (el, _, { cleanup }) => selectionMenu(el, cleanup));
-
-        // $text — the area this element sits in, resolved like a control's:
-        // containment first (nearest ancestor holding exactly one area), the
-        // last focused area second. Never "the first area on the page" — a
-        // button at the bottom must not act on, and scroll to, the top one.
-        Alpine.magic('text', (el) => {
-            const own = el.closest('[data-text-edit]');
-            const a = own && areas.has(own) ? own : resolve(el);
-            return a ? a._te.api : {
-                value: '', link: '', selection: null, page: {}, run() { }, active: () => false,
-                can: () => false, focus() { }, selectAll() { }, markdown: () => '', html: () => ''
-            };
-        });
-
         document.addEventListener('pointerdown', (e) => {
             pointerTarget = e.target;
             setTimeout(() => { pointerTarget = null; }, 0);
@@ -1972,38 +2209,87 @@
             const r = range(); if (!r) return;
             const a = [...areas].find(x => x.contains(r.startContainer));
             if (a) {
-                if (lastFocused && lastFocused !== a) release(lastFocused);   // the one being left owes a null
+                if (lastFocused && lastFocused !== a) release(lastFocused);
                 saveRange(a); lastFocused = a; report(a);
             }
             else if (editableElsewhere(r.startContainer)) { forget(); if (lastFocused) release(); }
             sync();
         });
 
-        // The caret has moved into something else editable — another plugin's field,
-        // a plain contenteditable, an input. Nothing here owns it, so the controls
-        // have no target: they must go quiet rather than keep pointing at whichever
-        // area was last visited, which is how a command ends up styling text the
-        // writer can see is not selected.
+        // Caret moved into something else editable: controls lose their target
         document.addEventListener('focusin', (e) => {
             const t = e.target;
             if (!t || !t.closest) return;
-            if (t.closest('[data-text-edit-control]')) return;
-            // Writing somewhere else: no area's old caret may be restored by a later click.
+            if (t.closest('[data-rich-text-control]')) return;
             const elsewhere = editableElsewhere(t);
             if (elsewhere) forget(t);
-            if (t.closest('[data-text-edit]')) return;
+            if (t.closest('[data-rich-text]')) return;
             if (!lastFocused && !elsewhere) return;
             if (lastFocused) release();
             sync();
         }, true);
     }
 
+    /* ---- Directive ---- */
+    function init() {
+        if (!window.Alpine || !Alpine.directive) return;
+        // Alpine walks only x-data trees: a page with none still gets its fields
+        if (document.body && !document.body.hasAttribute('x-data')) document.body.setAttribute('x-data', '{}');
+        listen();
+
+        Alpine.directive('rich-text', (el, { expression, modifiers }, { effect, evaluateLater, evaluate, cleanup }) => {
+            const id = modifiers.find(m => COMMANDS[m]);
+            if (id) return control(el, id, modifiers, expression, evaluate, cleanup);
+            if (/^(BUTTON|SELECT|INPUT|TEXTAREA|A)$/.test(el.tagName)) {
+                const m = modifiers.find(x => !MODES.has(x) && x !== 'all');
+                console.warn(`[Manifest Rich Text] unknown command${m ? ` .${m}` : ''} on <${el.tagName.toLowerCase()}>${suggest(m)}`);
+                return;
+            }
+            return areaDirective(el, modifiers, expression, { effect, evaluateLater, cleanup });
+        });
+
+        // x-rich-text-menu: a popover shown over its area's selection
+        Alpine.directive('rich-text-menu', (el, _, { cleanup }) => { if (!el._rtMenu) selectionMenu(el, cleanup); });
+
+        // $rich: the area this element sits in, else the one controls would resolve to
+        const richMagic = (el) => {
+            const own = el.closest('[data-rich-text]');
+            const a = own && areas.has(own) ? own : resolve(el);
+            return a ? a._rt.api : idleApi();
+        };
+        Alpine.magic('rich', richMagic);
+        // The loader's stand-in answered $rich until now: it hands over, and effects that read it
+        // run again once adopted areas exist
+        window.__manifestRichMagic = richMagic;
+        if (window.__manifestRichStub) setTimeout(() => { window.__manifestRichStub.v++; }, 0);
+
+        adopt();
+    }
+
+    // Loaded after Alpine started: elements it already walked get their x-rich-text*
+    // attributes re-set, which Alpine handles as newly added directives
+    function adopt() {
+        document.querySelectorAll('*').forEach(el => {
+            if (!el._x_marker || el._rt || el._rtMenu || controls.has(el)) return;
+            [...el.attributes].forEach(a => {
+                if (a.name.startsWith('x-rich-text') && !a.name.startsWith('x-rich-text-for')) el.setAttribute(a.name, a.value);
+            });
+        });
+    }
+
+    function idleApi() {
+        const api = {
+            value: '', link: '', selection: null, all: {}, run() { }, active: () => false,
+            can: () => false, focus() { }, selectAll() { }, markdown: () => '', html: () => ''
+        };
+        Object.keys(COMMANDS).forEach(id => { api[id] = () => { }; });
+        return api;
+    }
+
     /* ---- Selection reporting ----
-       Everything a selection-anchored menu needs, in both the forms an author might
-       reach for: an event carrying the geometry, and the same geometry as custom
-       properties on the area, so a popover can be placed without any script at all.
-       The plugin renders no menu of its own — where and what that is belongs to the
-       project, not to us. */
+       Geometry as a rich-text:selection event and as --rich-text-selection-* properties. */
+    const SELECTION_VARS = ['x', 'y', 'width', 'height', 'center'].map(k => '--rich-text-selection-' + k);
+
     function selectionOf(area) {
         const r = range();
         if (!r || !area.contains(r.startContainer)) return null;
@@ -2016,49 +2302,39 @@
         };
     }
 
-    // A text selection cannot highlight an empty cell, so the block is painted here.
     function paintCells(area) {
-        area.querySelectorAll('[data-text-edit-cell]').forEach(c => c.removeAttribute('data-text-edit-cell'));
-        selectedCells().forEach(c => c.setAttribute('data-text-edit-cell', ''));
+        area.querySelectorAll('[data-rich-text-cell]').forEach(c => c.removeAttribute('data-rich-text-cell'));
+        selectedCells().forEach(c => c.setAttribute('data-rich-text-cell', ''));
     }
 
+    // On the root only, where a top-layer menu reads them: never in the content's own style
     function place(area, shape) {
         if (!shape || shape.collapsed) return;
-        const px = (n) => Math.round(n) + 'px';
-        // Mirrored onto the root as well as the area. A menu anchored to the
-        // selection is rarely a descendant of the editor — and once it is a popover
-        // it is in the top layer, where nothing inherits from the page at all — so
-        // custom properties on the area alone are unreachable from where they are
-        // needed. On the root they are readable from anywhere.
-        [area, document.documentElement].forEach(t => {
-            t.style.setProperty('--text-edit-selection-x', px(shape.x));
-            t.style.setProperty('--text-edit-selection-y', px(shape.y));
-            t.style.setProperty('--text-edit-selection-width', px(shape.width));
-            t.style.setProperty('--text-edit-selection-height', px(shape.height));
-            t.style.setProperty('--text-edit-selection-center', px(shape.x + shape.width / 2));
-        });
+        const px = (n) => Math.round(n) + 'px', t = document.documentElement;
+        t.style.setProperty('--rich-text-selection-x', px(shape.x));
+        t.style.setProperty('--rich-text-selection-y', px(shape.y));
+        t.style.setProperty('--rich-text-selection-width', px(shape.width));
+        t.style.setProperty('--rich-text-selection-height', px(shape.height));
+        t.style.setProperty('--rich-text-selection-center', px(shape.x + shape.width / 2));
     }
 
     function report(area) {
-        // A caret placed inside one cell ends any block selection.
         const live = sel();
         if (cellDrag && live && live.isCollapsed) { const c = cellOf(live.anchorNode); if (c) cellDrag = null; }
         if (area.querySelector('table')) paintCells(area);
         const shape = selectionOf(area);
         area._selection = shape;
         place(area, shape);
-        area.toggleAttribute('data-text-edit-selected', !!shape && !shape.collapsed);
-        document.documentElement.toggleAttribute('data-text-edit-selected', !!shape && !shape.collapsed);
-        area.dispatchEvent(new CustomEvent('text-edit:selection', { bubbles: true, detail: shape }));
+        area.toggleAttribute('data-rich-text-selected', !!shape && !shape.collapsed);
+        document.documentElement.toggleAttribute('data-rich-text-selected', !!shape && !shape.collapsed);
+        area.dispatchEvent(new CustomEvent('rich-text:selection', { bubbles: true, detail: shape }));
     }
 
-    // The selection bubble: a popover shown while its area has a selection. The
-    // element is promoted to popover="manual" (an auto popover closes on the very
-    // click that makes the selection); show/hide follow text-edit:selection.
+    // popover="manual": an auto popover closes on the click that makes the selection
     function selectionMenu(el, cleanup) {
+        el._rtMenu = true;
         if (!el.hasAttribute('popover')) el.setAttribute('popover', 'manual');
-        el.setAttribute('data-text-edit-menu', '');
-        // Follow the selection through scrolling and resizing while shown.
+        el.setAttribute('data-rich-text-menu', '');
         let shown = null, frame = 0;
         const follow = () => {
             if (frame) return;
@@ -2078,7 +2354,7 @@
             window.removeEventListener('resize', follow);
         };
         const onSel = (e) => {
-            const area = elementAt(e.target) && elementAt(e.target).closest('[data-text-edit]');
+            const area = elementAt(e.target) && elementAt(e.target).closest('[data-rich-text]');
             if (!area || resolve(el) !== area) return;
             const want = !!e.detail && !e.detail.collapsed;
             if (want) track(area); else untrack();
@@ -2087,60 +2363,53 @@
                 if (!want && el.matches(':popover-open')) el.hidePopover();
             } catch { }
         };
-        document.addEventListener('text-edit:selection', onSel);
+        document.addEventListener('rich-text:selection', onSel);
         cleanup(() => {
-            document.removeEventListener('text-edit:selection', onSel);
+            document.removeEventListener('rich-text:selection', onSel);
             untrack(); if (frame) cancelAnimationFrame(frame);
             try { el.hidePopover(); } catch { }
         });
     }
 
     function control(el, id, modifiers, expression, evaluate, cleanup) {
-        // `.h2` and `.align.center` carry a static argument as the next modifier; an
-        // expression is the dynamic form (`x-text-edit.a="url"`).
-        const page = modifiers.includes('page');
-        const next = modifiers[modifiers.indexOf(id) + 1];
-        const literal = next === 'page' ? undefined : next;
+        if (controls.has(el)) return;
+        // `.align.center`, `.align.all.center`: the first other modifier after the command is its argument
+        const all = modifiers.includes('all');
+        const literal = modifiers.slice(modifiers.indexOf(id) + 1).find(m => m !== 'all');
         const arg = () => literal !== undefined ? literal : (expression ? evaluate(expression) : undefined);
-        el._te = { id, arg, page };
-        if (page) el.setAttribute('data-text-edit-page', '');
-        el.setAttribute('data-text-edit-control', id);
+        el._rt = { id, arg, all, literal };   // the expression is evaluated only when the control runs
+        if (all) el.setAttribute('data-rich-text-all', '');
+        el.setAttribute('data-rich-text-control', id);
         if (el.tagName === 'BUTTON' && !el.hasAttribute('type')) el.type = 'button';
         controls.add(el);
 
         const valued = 'value' in el && el.tagName !== 'BUTTON';
-        // Never take the caret; a disabled control leaves focus where it is as well.
+        // Never take the caret
         const disabled = () => el.getAttribute('aria-disabled') === 'true';
         el.addEventListener('mousedown', e => { if (!valued || disabled()) e.preventDefault(); });
         if (valued) el.addEventListener('click', e => { if (disabled()) e.preventDefault(); });
         if (valued) {
-            const fire = () => { const a = resolve(el); if (a) run(a, id, el.value, el._te); };
+            const fire = () => { const a = resolve(el); if (a) run(a, id, el.value, el._rt); };
             if (el.type === 'color') {
-                // Colour previews live: the first input tick wraps the selection
-                // (recorded once, so undo removes the whole pass in one step) and
-                // every later tick restyles those same spans. Works with the
-                // browser picker, Manifest's, or anything that fires `input`.
+                // Live preview: the first tick wraps (one undo step), later ticks restyle the same spans
                 const prop = id === 'background' ? 'backgroundColor' : 'color';
                 let live = null;
-                // A new selection elsewhere ends the pass: without this, a
-                // picker that never fires `change` keeps recolouring the OLD
-                // spans after the writer has selected different text.
                 const dropLive = () => {
                     if (!live) return;
                     const r = range();
                     if (!r || !live.some(sp => sp.isConnected && sp.contains(r.startContainer))) live = null;
                 };
-                document.addEventListener('text-edit:selection', dropLive);
-                cleanup(() => document.removeEventListener('text-edit:selection', dropLive));
+                document.addEventListener('rich-text:selection', dropLive);
+                cleanup(() => document.removeEventListener('rich-text:selection', dropLive));
                 el.addEventListener('input', () => {
                     const a = resolve(el); if (!a) return;
-                    if (el._te.page) { run(a, id, el.value, el._te); return; }   // page vars are cheap to set per tick
+                    if (el._rt.all) { run(a, id, el.value, el._rt); return; }
                     if (live && live.length && live.every(s => s.isConnected)) {
                         live.forEach(s => { s.style[prop] = el.value; });
                         a.dispatchEvent(new Event('input', { bubbles: true }));
                         return;
                     }
-                    if (!allows(a, id, el._te)) return;
+                    if (!allows(a, id, el._rt)) return;
                     restoreRange(a);
                     const r = range(); if (!r || !a.contains(r.startContainer)) return;
                     record(a);
@@ -2149,7 +2418,7 @@
                     a.dispatchEvent(new Event('input', { bubbles: true }));
                 });
                 el.addEventListener('change', () => {
-                    if (live) { const a = resolve(el); live = null; if (a) { record(a); sync(); } return; }   // applied live already
+                    if (live) { const a = resolve(el); live = null; if (a) { record(a); sync(); } return; }
                     fire();
                 });
             } else {
@@ -2157,89 +2426,149 @@
             }
             el.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); fire(); } });
         } else {
-            el.addEventListener('pointerdown', e => e.preventDefault());   // never take the caret
-            el.addEventListener('click', e => { e.preventDefault(); const a = resolve(el); if (a) run(a, id, arg(), el._te); });
+            el.addEventListener('pointerdown', e => e.preventDefault());
+            el.addEventListener('click', e => { e.preventDefault(); const a = resolve(el); if (a) run(a, id, arg(), el._rt); });
         }
         setTimeout(sync, 0);
         cleanup(() => { controls.delete(el); });
     }
 
-    function area(el, modifiers, expression, { effect, evaluateLater, cleanup }) {
-        const mode = modifiers.includes('html') ? 'html' : modifiers.includes('plain') ? 'plain' : 'markdown';
-        const minimal = modifiers.includes('minimal');
-        modifiers.filter(m => !MODES.has(m)).forEach(m => console.warn(`[Manifest Text Edit] unknown modifier: .${m}${suggest(m)}`));
+    function areaDirective(el, modifiers, expression, { effect, evaluateLater, cleanup }) {
+        if (el._rt) return;
+        const format = modifiers.includes('html') ? 'html' : modifiers.includes('plain') ? 'plain' : 'markdown';
+        modifiers.filter(m => !MODES.has(m)).forEach(m => console.warn(`[Manifest Rich Text] unknown modifier: .${m}${suggest(m)}`));
 
-        el.setAttribute('data-text-edit', mode);
-        // Tells anything composing with this plugin — x-edit, chiefly — whether the
-        // value already has an owner, or whether the surrounding editor should
-        // capture the content itself.
-        el.toggleAttribute('data-text-edit-bound', !!expression);
-        el.setAttribute('contenteditable', mode === 'plain' && PLAINTEXT_ONLY ? 'plaintext-only' : 'true');
+        let last = null, setValue = null;
+        const core = setup(el, {
+            format, inline: modifiers.includes('inline'), literal: modifiers.includes('literal'),
+            bound: !!expression, controlled: !!expression,
+            onChange: expression ? (v) => { last = v; setValue(() => { }, { scope: { __richTextValue: v } }); } : null
+        });
+        if (expression) {
+            const getValue = evaluateLater(expression);
+            setValue = evaluateLater(`${expression} = __richTextValue`);
+            effect(() => getValue(v => {
+                const s = v == null ? '' : String(v);
+                if (s === last) return;                       // our own write coming back
+                last = s;
+                core.load(s);
+            }));
+        }
+        if (modifiers.includes('autofocus')) setTimeout(() => el.focus(), 0);
+        cleanup(core.destroy);
+    }
+
+    /* ---- Area engine ----
+       Shared by the directive and ManifestRichText.attach(). */
+    function setup(el, { format = 'markdown', inline: single = false, breaks = false, all: allStyles = true, literal = false, bound = false, controlled = false, onChange = null } = {}) {
+        // .inline html with breaks: one block of lines; <br> kept, Shift+Enter makes one
+        const lines = single && breaks && format === 'html';
+        const flat = (html) => lines ? breakLines(html, true) : flattenLines(html, true);
+        const ac = new AbortController();
+        const on = (type, fn) => el.addEventListener(type, fn, { signal: ac.signal });
+        const prior = ['contenteditable', 'role', 'aria-multiline'].map(n => [n, el.getAttribute(n)]);
+        const priorAll = Object.values(ALL_VARS).map(v => [v, el.style.getPropertyValue(v)]);
+
+        el.setAttribute('data-rich-text', format);
+        // Tells x-edit whether the value already has an owner
+        el.toggleAttribute('data-rich-text-bound', bound);
+        el.toggleAttribute('data-rich-text-inline', single);
+        el.setAttribute('contenteditable', format === 'plain' && PLAINTEXT_ONLY ? 'plaintext-only' : 'true');
         el.setAttribute('role', 'textbox');
-        el.setAttribute('aria-multiline', 'true');
-        if (minimal) el.setAttribute('data-text-edit-minimal', '');
+        el.setAttribute('aria-multiline', String(!single || lines));
 
-        const read = () => mode === 'plain' ? el.innerText.replace(/\n{3,}/g, '\n\n').trim()
-            : mode === 'html' ? sanitize(el.innerHTML, true, true)
-                : toMarkdown(el);
+        const read = () => {
+            if (format === 'plain') return single ? el.innerText.replace(/\s*\n\s*/g, ' ').trim() : el.innerText.replace(/\n{3,}/g, '\n\n').trim();
+            if (single) return format === 'html' ? flat(el.innerHTML) : inlineMarkdown(el);
+            return format === 'html' ? sanitize(el.innerHTML, true, true) : toMarkdown(el);
+        };
         const write = (v) => {
-            if (mode === 'plain') el.textContent = v == null ? '' : String(v);
-            else el.innerHTML = mode === 'html' ? sanitize(v, true, true) : markdownHtml(v);
+            if (format === 'plain') { el.textContent = single ? flatText(v).trim() : v == null ? '' : String(v); return; }
+            if (single) { el.innerHTML = format === 'html' ? flat(v) : sanitize(inlineHtml(flatText(v).trim()), false); return; }
+            el.innerHTML = format === 'html' ? sanitize(v, true, true) : markdownHtml(v);
             if (!el.childNodes.length) el.innerHTML = '<p><br></p>';
             normalizeLists(el);
             if (el.querySelector('table')) normalizeTables(el);
             ensureTrailingBlock(el);
         };
 
-        let last = null, writing = false, commitValue = () => { };
-        if (expression) {
-            const getValue = evaluateLater(expression);
-            const setValue = evaluateLater(`${expression} = __textEditValue`);
-            effect(() => getValue(v => {
-                const s = v == null ? '' : String(v);
-                if (s === last) return;                       // our own write coming back
-                last = s; writing = true; write(s); writing = false;
-                // The document was replaced from outside — a new page, or a different
-                // one loaded. Undo must not reach back into the document before it.
-                if (el._history) { el._history.stack = [{ html: el.innerHTML, caret: 0 }]; el._history.at = 0; }
-                settle();
-            }));
-            commitValue = () => { last = read(); setValue(() => { }, { scope: { __textEditValue: last } }); };
-            el.addEventListener('input', () => { if (!writing) commitValue(); });
-        } else {
-            // Uncontrolled: the markup already there IS the initial content. Writing
-            // an empty value over it would silently delete what the author wrote.
-            // Loose inline content still needs a block to hold the caret.
-            if (mode !== 'plain' && el.firstChild && ![...el.children].some(c => BLOCK.includes(c.tagName))) el.innerHTML = `<p>${el.innerHTML}</p>`;
-            if (!el.firstChild) el.innerHTML = '<p><br></p>';
+        // Single-line insertion: clipboard or drop data flattened, at a range when given
+        const htmlText = (html) => { const t = document.createElement('template'); t.innerHTML = html || ''; return t.content.textContent; };
+        const mdOnly = (html) => format === 'markdown' ? markdownMarks(html) : html;
+        const flatClip = (html, text) => html ? mdOnly(unwrapBareSpans(lines ? breakLines(flattenTables(html, false)) : flattenLines(flattenTables(html, false))))
+            : lines ? textLines(text) : sanitize(inlineHtml(flatText(text).trim()), false);
+        const multiline = (html, text) => {
+            if (!html) return /[\r\n]/.test(text || '');
+            const t = document.createElement('template'); t.innerHTML = html;
+            return !!t.content.querySelector(BLOCK_SEL + ',br,div');
+        };
+        const insertFlat = (html, at, text) => {
+            if (at) { const s = sel(); s.removeAllRanges(); s.addRange(at); }
+            if (format === 'plain') return insertPlain(el, flatText(text != null ? text : htmlText(html)).trim());
+            const t = document.createElement('template');
+            t.innerHTML = html;
+            insertNodes(el, t.content);
+        };
+
+        let writing = false;
+        const commit =() => { if (onChange) onChange(read()); };
+        on('input', () => { if (!writing) commit(); });
+
+        // Uncontrolled: the markup already there is the initial content
+        if (!controlled && format !== 'plain') {
+            if (single) { if (el.querySelector(BLOCK_SEL)) el.innerHTML = flat(el.innerHTML); }
+            else {
+                if (el.firstChild && ![...el.children].some(c => BLOCK.includes(c.tagName))) el.innerHTML = `<p>${el.innerHTML}</p>`;
+                if (!el.firstChild) el.innerHTML = '<p><br></p>';
+            }
         }
 
         el._history = { stack: [{ html: el.innerHTML, caret: 0 }], at: 0, timer: null, restoring: false };
+        const resetHistory = () => { clearTimeout(el._history.timer); el._history.timer = null; el._history.stack = [{ html: el.innerHTML, caret: 0 }]; el._history.at = 0; };
 
-        // Wiping the document leaves whatever the first block was, so a page that
-        // opened with a heading keeps making headings. Reset to a paragraph, and flag
-        // emptiness for the placeholder — :empty never matches the <br> a
-        // contenteditable keeps, and the tag it sits in is not predictable.
+        // Empty flag for the placeholder; a wiped document restarts as a paragraph
         function settle() {
+            if (single) {
+                // Backstop: whatever got a block or break in is flattened, caret kept
+                if (el.querySelector(lines ? BLOCK_SEL : BLOCK_SEL + ',br')) {
+                    const off = offsetIn(el), html = flat(el.innerHTML);
+                    if (format === 'plain') { const t = document.createElement('template'); t.innerHTML = html; el.textContent = t.content.textContent; }
+                    else el.innerHTML = html;
+                    if (off != null && el.textContent.length) caretIn(el, off);
+                }
+                const empty = !el.textContent.trim() && !el.querySelector('img');
+                if (empty && el.firstChild && !el.textContent.length) el.replaceChildren();
+                el.toggleAttribute('data-rich-text-empty', empty);
+                return;
+            }
             if (el.querySelector('table')) normalizeTables(el);
-            if (ensureTrailingBlock(el)) { /* somewhere to land after a trailing block */ }
+            if (format !== 'plain') looseInline(el);
+            ensureTrailingBlock(el);
             if (!el.textContent.trim() && !el.querySelector('img, table, hr')) {
                 if (el.children.length !== 1 || el.firstElementChild.tagName !== 'P') el.replaceChildren();
                 if (!el.firstChild) { el.innerHTML = '<p><br></p>'; if (document.activeElement === el) caretIn(el.firstElementChild, 0); }
-                el.toggleAttribute('data-text-edit-empty', true);
-            } else el.toggleAttribute('data-text-edit-empty', false);
+                el.toggleAttribute('data-rich-text-empty', true);
+            } else el.toggleAttribute('data-rich-text-empty', false);
         }
 
-        // Table borders are draggable. Bound on the area so it costs nothing until a
-        // table exists, and reads the pointer rather than injecting handles into the
-        // grid — a handle per border would be markup inside the document's own table.
-        el.addEventListener('pointermove', (ev) => {
+        const load = (v) => {
+            writing = true; write(v); writing = false;
+            resetHistory();
+            settle();
+        };
+
+        const lineBreak = () => { record(el); insertBreak(el); record(el); el.dispatchEvent(new Event('input', { bubbles: true })); };
+        const enter = (shiftKey) => el.dispatchEvent(new CustomEvent('rich-text:enter', { bubbles: true, detail: { value: read(), shiftKey: !!shiftKey } }));
+
+        // Table borders resize; drags pick cells
+        on('pointermove', (ev) => {
             if (ev.buttons || !el.querySelector('table')) return;
             const hit = borderAt(ev.clientX, ev.clientY);
-            el.setAttribute('data-text-edit-border', hit ? hit.axis : '');
-            if (!hit) el.removeAttribute('data-text-edit-border');
+            el.setAttribute('data-rich-text-border', hit ? hit.axis : '');
+            if (!hit) el.removeAttribute('data-rich-text-border');
         });
-        el.addEventListener('pointerdown', (ev) => {
+        on('pointerdown', (ev) => {
+            el._exit = null; el._after = null;
             if (ev.button !== 0) return;
             if (el.querySelector('table')) {
                 const hit = borderAt(ev.clientX, ev.clientY);
@@ -2248,107 +2577,136 @@
                 if (from) cellDrag = { anchor: from, focus: from };
             }
         });
-
-        el.addEventListener('pointermove', (ev) => {
+        on('pointermove', (ev) => {
             if (!cellDrag || !ev.buttons) return;
             const over = cellUnder(ev.clientX, ev.clientY);
             if (!over || over === cellDrag.focus) return;
             cellDrag.focus = over;
             paintCells(el);
         });
-
-        el.addEventListener('pointerup', () => {
+        on('pointerup', () => {
             if (cellDrag && cellDrag.anchor === cellDrag.focus) cellDrag = null;
             paintCells(el);
             sync();
         });
 
-        // A link inside the editor is content, not navigation: clicking it places
-        // the caret to edit it. Without this, the router (or the browser) follows
-        // the href and the page changes out from under the writer.
-        el.addEventListener('click', (e) => {
+        // Links are content here, not navigation
+        on('click', (e) => {
             const a = e.target && e.target.closest && e.target.closest('a');
-            if (a && el.contains(a)) e.preventDefault();
+            const island = a && a.closest('[contenteditable="false"]');
+            if (a && el.contains(a) && !(island && el.contains(island))) e.preventDefault();
         });
 
-        el.addEventListener('focusin', () => { if (lastFocused && lastFocused !== el) release(lastFocused); lastFocused = el; el.setAttribute('data-text-edit-focused', ''); saveRange(el); sync(); });
-        // Focus gone somewhere that is neither this area nor one of its controls.
-        el.addEventListener('focusout', (e) => {
+        on('focusin', () => { if (lastFocused && lastFocused !== el) release(lastFocused); lastFocused = el; el.setAttribute('data-rich-text-focused', ''); saveRange(el); sync(); });
+        on('focusout', (e) => {
             if (keeps(el, e.relatedTarget || pointerTarget)) return;
             release(el);
             sync();
         });
-        el.addEventListener('input', (e) => {
-            // Mid-composition the IME owns the text; an armed mark lands on compositionend.
+
+        const autoformat = format !== 'plain' && !literal;
+        on('input', (e) => {
+            // Mid-composition the IME owns the text
             if (!writing && e.data && !e.isComposing) {
-                if (applyPending(el, e.data)) commitValue();
-                if (leaveMark(el, e.data)) commitValue();
-                if (autoformat && convertInlineAtCaret(el)) commitValue();
+                if (applyPending(el, e.data)) commit();
+                if (leaveMark(el, e.data)) commit();
+                if (autoformat && convertInlineAtCaret(el)) commit();
             }
-            if (!writing) recordSoon(el);                   // before sync, so Undo lights up now
+            // A deletion of text typed after a mark, back to its edge, is right after the mark again
+            if (el._delOut && /^delete/.test(e.inputType || '') && atMarkEnd(el._after, range())) el._exit = el._after;
+            el._delOut = false;
+            if (!writing && !e.isComposing) relaxSpaces(el, e.inputType === 'insertText' ? e.data : null);
+            if (!writing) recordSoon(el);
             settle(); sync();
         });
-        el.addEventListener('compositionend', (e) => {
-            if (!writing && e.data && applyPending(el, e.data)) { commitValue(); sync(); }
+        on('compositionend', (e) => {
+            if (!writing && e.data && applyPending(el, e.data)) { commit(); sync(); }
+            else if (!writing && e.data && el._exit && leaveMark(el, e.data)) { commit(); sync(); }
+            if (!writing) relaxSpaces(el);
         });
-        el.addEventListener('change', e => {
+        on('change', e => {
             if (e.target.type !== 'checkbox') return;
-            // Clicking sets the property; only the attribute survives serialization.
+            // Only the attribute survives serialization
             e.target.toggleAttribute('checked', e.target.checked);
             record(el);
             el.dispatchEvent(new Event('input', { bubbles: true }));
         });
-
-        // A finished line resolves to what its markdown described, unless .literal.
-        const autoformat = mode !== 'plain' && !modifiers.includes('literal');
-        el.addEventListener('input', (e) => {
+        on('input', (e) => {
             if (writing || e.isComposing) return;
-            if (ancestor('li')) normalizeLists(el);        // Backspace reshapes lists too
+            if (ancestor('li')) normalizeLists(el);
         });
 
-        // Native undo (Edit menu, context menu, shake) would desync the plugin's stack.
-        el.addEventListener('beforeinput', (e) => {
+        // Native undo would desync the plugin's stack
+        on('beforeinput', (e) => {
             if (e.inputType === 'historyUndo' || e.inputType === 'historyRedo') {
                 e.preventDefault();
                 run(el, e.inputType === 'historyUndo' ? 'undo' : 'redo');
                 return;
             }
-            if (mode === 'plain' && /^format/.test(e.inputType || '')) e.preventDefault();
+            markCaret(el);
+            if (typeAfterMark(el, e)) return;
+            if (/^delete/.test(e.inputType || '')) { const m = el._after, r = range(); el._delOut = !!(m && m.isConnected && r && !m.contains(r.startContainer) && !atMarkEnd(m, r)); }
+            if (lines && e.inputType === 'insertLineBreak') { e.preventDefault(); lineBreak(); return; }
+            if (single && /^insert(Paragraph|LineBreak)$/.test(e.inputType || '')) { e.preventDefault(); enter(false); return; }
+            // Text carrying line breaks (autocorrect, IME, replacement) lands as one line
+            if (single && e.cancelable && /^insert(Text|ReplacementText|CompositionText)$/.test(e.inputType || '')) {
+                const d = e.data != null ? e.data : (e.dataTransfer && e.dataTransfer.getData('text/plain')) || '';
+                if (/[\r\n]/.test(d)) {
+                    e.preventDefault();
+                    const tr = e.getTargetRanges ? e.getTargetRanges()[0] : null;
+                    let at = null;
+                    if (tr) { at = document.createRange(); at.setStart(tr.startContainer, tr.startOffset); at.setEnd(tr.endContainer, tr.endOffset); }
+                    insertFlat(lines ? textLines(d) : escHtml(flatText(d).trim()), at, d);
+                    return;
+                }
+            }
+            if (format === 'plain' && /^format/.test(e.inputType || '')) e.preventDefault();
         });
 
-        el.addEventListener('pointerdown', () => { el._exit = null; });
+        // A multi-line drop is flattened at the drop point
+        on('drop', (e) => {
+            const dt = e.dataTransfer; if (!single || !dt) return;
+            const html = dt.getData('text/html'), text = dt.getData('text/plain');
+            if (!multiline(html, text)) return;
+            e.preventDefault();
+            const hit = caretAtPoint(e.clientX, e.clientY);
+            let at = null;
+            if (hit && el.contains(hit.node)) { at = document.createRange(); at.setStart(hit.node, hit.offset); at.collapse(true); }
+            el.focus();
+            insertFlat(flatClip(html, text), at, text || htmlText(html));
+        });
 
-        el.addEventListener('keydown', (e) => {
-            if (e.isComposing || e.keyCode === 229) return;   // the IME's keystroke
-            if ((e.key || '').length > 1 && !/^(Shift|Alt|Control|Meta|CapsLock)$/.test(e.key)) el._exit = null;
-            // Tab indents rather than leaving the field, the way every editor behaves.
-            // Escape is the way out, so keyboard users are never trapped.
-            if (e.key === 'Enter' && mode !== 'plain') {
-                if (!ownsEnter(e)) return;              // let the browser do the ones it does well
+        on('keydown', (e) => {
+            if (e.isComposing || e.keyCode === 229) return;
+            if (e.key === 'Enter' && e.target !== el && e.target.matches && e.target.matches('a[href]') && e.target.closest('[contenteditable="false"]') && el.contains(e.target.closest('[contenteditable="false"]'))) return;
+            if ((e.key || '').length > 1 && !/^(Shift|Alt|Control|Meta|CapsLock)$/.test(e.key)) { el._exit = null; if (!/^(Backspace|Delete)$/.test(e.key)) el._after = null; }
+            if (e.key === 'Enter' && single) { e.preventDefault(); if (lines && e.shiftKey) lineBreak(); else enter(e.shiftKey); return; }
+            if (e.key === 'Enter' && format !== 'plain') {
+                if (!ownsEnter(e)) return;
                 e.preventDefault();
                 record(el);
                 onEnter(el, autoformat);
                 normalizeLists(el);
                 record(el);
-                commitValue();
+                commit();
                 sync();
                 return;
             }
-            if (e.key === 'Backspace' && mode !== 'plain') {
+            if (e.key === 'Backspace' && format !== 'plain' && !single) {
                 const cell = cellCoversAll();
                 if (cell) {                                   // clear the cell, keep the table
                     e.preventDefault(); record(el);
                     cell.replaceChildren(document.createElement('br'));
                     caretIn(cell, 0);
-                    record(el); commitValue(); sync();
+                    record(el); commit(); sync();
                     return;
                 }
                 const r = range();
                 if (r && r.collapsed && atBlockStart()) {
                     e.preventDefault(); record(el);
-                    backspaceAtStart(el);
+                    backspaceAtStart();
                     normalizeLists(el);
-                    record(el); commitValue(); sync();
+                    record(el); commit(); sync();
                     return;
                 }
             }
@@ -2356,53 +2714,66 @@
                 if (arrowInTable(e)) { e.preventDefault(); sync(); return; }
                 return;
             }
+            // Tab indents (single-line fields keep native focus order); Escape is the way out
             if (e.key === 'Tab') {
-                if (mode === 'plain') return;
+                if (format === 'plain' || single) return;
                 e.preventDefault();
-                if (moveCell(e.shiftKey ? -1 : 1)) return;      // tables walk cell to cell
+                if (moveCell(e.shiftKey ? -1 : 1)) return;
                 run(el, e.shiftKey ? 'outdent' : 'indent');
                 return;
             }
-            // Tab indents, so Escape is the way out. Stop it here so the first press
-            // leaves the editor and only a second one closes an enclosing dialog.
             if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); el.blur(); return; }
             if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'z') {
                 e.preventDefault(); run(el, e.shiftKey ? 'redo' : 'undo'); return;
             }
-            // No Cmd/Ctrl+K: that chord belongs to site search almost everywhere
-            // now (including our own docs) — links go through an `a` control.
+            // Ctrl+Y redoes off the Mac (where it is yank)
+            if (e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'y' && !MAC) {
+                e.preventDefault(); run(el, 'redo'); return;
+            }
+            // No Cmd/Ctrl+K: that chord belongs to site search
             if (!(e.metaKey || e.ctrlKey)) return;
             const id = { b: 'strong', i: 'em', u: 'u' }[e.key.toLowerCase()];
             if (!id) return;
-            // Never the browser's own formatting: it would look applied and not be stored.
+            // Never the browser's own formatting
             e.preventDefault();
             if (allows(el, id)) run(el, id);
         });
 
-        // Paste as our own subset — never the source app's markup.
-        el.addEventListener('paste', (e) => {
+        // Paste as our own subset, never the source app's markup or styles
+        on('paste', (e) => {
             e.preventDefault();
             const dt = e.clipboardData; if (!dt) return;
-            if (mode === 'plain') return insertPlain(el, dt.getData('text/plain'));
+            const text = dt.getData('text/plain');
+            if (format === 'plain') return insertPlain(el, single ? flatText(text).trim() : text);
             const html = dt.getData('text/html');
-            // No keepStyle: a paste brings the text and its marks, never the source
-            // application's fonts and colours.
-            insertHTML(html ? sanitize(mode === 'markdown' || minimal ? flattenTables(html, !minimal) : html, !minimal)
-                : markdownHtml(dt.getData('text/plain').replace(/([^\n])\n(?!\n)/g, '$1  \n')));
+            if (single) return insertFlat(flatClip(html, text), null, text);
+            const clip = html ? unwrapBareSpans(format === 'markdown' ? markdownMarks(markdownBlocks(sanitize(flattenTables(html, true), true))) : sanitize(html, true))
+                : markdownHtml(text.replace(/([^\n])\n(?!\n)/g, '$1  \n'));
+            // Inline content (or a single paragraph of it) goes in at the caret, inside the caret's block,
+            // leading space and formatting kept; the browser's insertHTML would place it beside the block
+            const t = document.createElement('template'); t.innerHTML = clip;
+            const only = t.content.children.length === 1 && t.content.firstElementChild.tagName === 'P' && !t.content.textContent.replace(t.content.firstElementChild.textContent, '').trim() ? t.content.firstElementChild : null;
+            if (only) t.innerHTML = only.innerHTML;
+            if (!t.content.querySelector(BLOCK_SEL)) { clearSpan(el); return insertNodes(el, t.content); }
+            // Its own undo step: a pending burst lands first, the paste records after
+            record(el);
+            insertHTML(clip);
+            record(el);
         });
 
         const api = {
             get value() { return read(); },
+            // The value it already holds keeps the markup and caret; history restarts either way
             set value(v) {
-                write(v);
-                el._history.stack = [{ html: el.innerHTML, caret: 0 }]; el._history.at = 0;
+                if (v !== read()) write(v);
+                resetHistory();
                 settle();
                 el._history.restoring = true;
                 el.dispatchEvent(new Event('input', { bubbles: true }));
                 el._history.restoring = false;
             },
-            get page() { return pageStyle(el); },
-            set page(v) { setPageStyle(el, v); sync(); },
+            get all() { return allStyle(el); },
+            set all(v) { if (!allStyles) return; setAllStyle(el, v); sync(); },
             get selection() { return el._selection || null; },
             get link() { return linkHref(); },
             set link(v) { run(el, 'a', v); },
@@ -2411,21 +2782,67 @@
             active: (id) => allows(el, id) && COMMANDS[id].active(undefined, el),
             can: (id) => allows(el, id),
             selectAll: () => { el.focus(); selectNode(el); saveRange(el); sync(); },
-            markdown: () => toMarkdown(el),
-            html: () => sanitize(el.innerHTML, true, true)
+            // The newest step in this field's history (a pending typing burst lands first)
+            newest: () => { const h = el._history; if (h.timer || h.stack[h.at].html !== el.innerHTML) record(el); return h.stack[h.stack.length - 1].html; },
+            markdown: () => single ? inlineMarkdown(el) : toMarkdown(el),
+            html: () => sanitize(el.innerHTML, !single, true)
         };
-        el._te = { mode, minimal, api };
+        // $rich.strong(), $rich.table(3, 2)
+        Object.keys(COMMANDS).forEach(id => { api[id] = (...args) => run(el, id, COMMANDS[id].args > 1 ? args : args[0]); });
+
+        el._rt = { format, inline: single, breaks: lines, noAll: !allStyles, api, settle };
         areas.add(el);
         settle();
-
-        if (modifiers.includes('autofocus')) setTimeout(() => el.focus(), 0);
+        el._history.stack[0].html = el.innerHTML;
         setTimeout(sync, 0);
 
-        cleanup(() => { areas.delete(el); if (lastFocused === el) lastFocused = null; });
+        const destroy = () => {
+            if (!areas.has(el)) return;
+            ac.abort();
+            clearTimeout(el._history && el._history.timer);
+            if (lastFocused === el) release(el);
+            areas.delete(el);
+            prior.forEach(([n, v]) => v == null ? el.removeAttribute(n) : el.setAttribute(n, v));
+            [...el.attributes].forEach(a => { if (a.name.startsWith('data-rich-text')) el.removeAttribute(a.name); });
+            el.querySelectorAll('[data-rich-text-cell]').forEach(c => c.removeAttribute('data-rich-text-cell'));
+            SELECTION_VARS.forEach(v => el.style.removeProperty(v));
+            priorAll.forEach(([v, was]) => { if (was) el.style.setProperty(v, was); else el.style.removeProperty(v); });
+            if (!areas.size) {
+                SELECTION_VARS.forEach(v => document.documentElement.style.removeProperty(v));
+                document.documentElement.removeAttribute('data-rich-text-selected');
+                if (document.documentElement.getAttribute('style') === '') document.documentElement.removeAttribute('style');
+            }
+            if (el.getAttribute('style') === '') el.removeAttribute('style');
+            ['_rt', '_history', '_range', '_pending', '_exit', '_after', '_nb', '_delOut', '_selection'].forEach(k => { delete el[k]; });
+            sync();
+        };
+
+        return { api, load, destroy };
+    }
+
+    /* ---- Engine API ---- */
+    const FORMATS = new Set(['markdown', 'html', 'plain']);
+    function attach(el, opts = {}) {
+        if (!el || el.nodeType !== 1) return null;
+        if (el._rt) return el._rt.handle || null;
+        listen();
+        const controlled = opts.value !== undefined;
+        const core = setup(el, {
+            format: FORMATS.has(opts.format) ? opts.format : 'markdown',
+            inline: opts.mode === 'inline', breaks: !!opts.breaks, all: opts.all !== false, literal: !!opts.literal,
+            bound: typeof opts.onChange === 'function', controlled,
+            onChange: typeof opts.onChange === 'function' ? opts.onChange : null
+        });
+        if (controlled) core.load(opts.value);
+        const handle = Object.create(core.api);
+        handle.el = el;
+        handle.detach = core.destroy;
+        el._rt.handle = handle;
+        return handle;
     }
 
     document.addEventListener('alpine:init', init);
     if (window.Alpine && Alpine.directive) init();
 
-    window.ManifestTextEdit = { toMarkdown, fromMarkdown: markdownHtml, sanitize, commands: () => Object.keys(COMMANDS) };
+    window.ManifestRichText = { toMarkdown, fromMarkdown: markdownHtml, sanitize, commands: () => Object.keys(COMMANDS), attach };
 })();