mnfst 0.5.232 → 0.5.234

package/lib/manifest.rich.text.js

@@ -19,6 +19,37 @@
     const MARKS = { STRONG: '**', B: '**', EM: '*', I: '*', S: '~~', DEL: '~~', CODE: '`' };
     const INLINE_OK = new Set([...Object.keys(INLINE_TAGS).map(t => t.toUpperCase()), 'BR', 'WBR', 'A', 'IMG']);
 
+    /* ---- Adjacent marks ----
+       Neighbouring inline elements alike (same tag and attributes; for markdown, the same
+       delimiter) are one: merged, children first, the selection kept on the nodes it was in. */
+    const sameInline = (a, b) => !!b && b.nodeType === 1 && a.tagName === b.tagName
+        && a.attributes.length === b.attributes.length && [...a.attributes].every(x => b.getAttribute(x.name) === x.value);
+    const sameDelimiter = (a, b) => !!b && b.nodeType === 1 && (a.tagName === 'A' ? sameInline(a, b) : !!MARKS[a.tagName] && MARKS[a.tagName] === MARKS[b.tagName]);
+    function mergeAdjacent(root, same = sameInline) {
+        const r = root.ownerDocument === document && root.isConnected ? range() : null;
+        const keep = r && root.contains(r.startContainer) ? [r.startContainer, r.startOffset, r.endContainer, r.endOffset] : null;
+        let any = false;
+        const walk = (p) => {
+            let merged = false;
+            [...p.children].forEach(walk);
+            for (let c = p.firstChild; c; c = c.nextSibling) {
+                while (c.nodeType === 1 && INLINE_OK.has(c.tagName) && !/^(BR|WBR|IMG)$/.test(c.tagName)) {
+                    const gaps = [];
+                    let n = c.nextSibling;
+                    while (n && n.nodeType === 3 && !n.length) { gaps.push(n); n = n.nextSibling; }   // empty text between them is nothing
+                    if (!same(c, n)) break;
+                    const base = c.childNodes.length;
+                    if (keep) for (const i of [0, 2]) { if (gaps.includes(keep[i])) { keep[i] = c; keep[i + 1] = base; } else if (keep[i] === n) { keep[i] = c; keep[i + 1] += base; } }
+                    gaps.forEach(g => g.remove()); c.append(...n.childNodes); n.remove(); merged = any = true;
+                }
+            }
+            if (merged) walk(p);
+        };
+        walk(root);
+        if (any && 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 { }
+        return any;
+    }
+
     /* ---- URL policy ---- */
     // No script schemes; data: only as an image.
     function unsafeUrl(url, image) {
@@ -32,32 +63,137 @@
 
     /* ---- HTML → Markdown ---- */
     const ENTITY = /&(?=#?[a-z0-9]+;)/gi;
-    const esc = (t) => t.replace(/([\\`*_~[\]<>])/g, '\\$1').replace(ENTITY, '\\&');
+    const MD_PUNCT = /[!-\/:-@\[-`{-~\u2000-\u206f\u2e00-\u2e7f]/;
+    // An _ between letters or digits cannot open or close emphasis: it is left as written
+    const esc = (t) => t.replace(/[\\`*_~[\]<>]/g, (c, i) => c === '_' && /[\p{L}\p{N}]/u.test(t[i - 1] || '') && /[\p{L}\p{N}]/u.test(t[i + 1] || '') ? c : '\\' + c).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, '\\&');
+    // A link destination that reads back to the same URL: spaces and angle brackets encoded,
+    // backslashes and unbalanced parentheses escaped (balanced ones stay, as CommonMark reads them)
+    const mdUrl = (u) => {
+        const s = String(u).replace(/[\s<>]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase().padStart(2, '0'));
+        const open = [], loose = new Set();
+        for (let i = 0; i < s.length; i++) { if (s[i] === '(') open.push(i); else if (s[i] === ')') { if (open.length) open.pop(); else loose.add(i); } }
+        open.forEach(i => loose.add(i));
+        return s.split('').map((c, i) => c === '\\' ? '\\\\' : loose.has(i) ? '\\' + c : c).join('').replace(ENTITY, '\\&');
+    };
 
-    function inline(node) {
+    // `ctx`: the characters just outside this content, and whether an `_` mark encloses it.
+    // em/strong use _/__ where no word character is outside them (and none encloses them), so
+    // their delimiters cannot pair with an inner * run; *, ** otherwise.
+    const wordChar = (c) => !!c && !/\s/.test(c) && !MD_PUNCT.test(c);
+    const textEdge = (n, last) => {
+        if (!n) return null;
+        if (n.nodeType === 3) return n.nodeValue ? (last ? n.nodeValue[n.nodeValue.length - 1] : n.nodeValue[0]) : textEdge(last ? n.previousSibling : n.nextSibling, last);
+        if (n.nodeType !== 1) return textEdge(last ? n.previousSibling : n.nextSibling, last);
+        if (n.tagName === 'BR') return '\n';
+        if (n.tagName === 'IMG') return last ? ')' : '!';
+        if (n.tagName === 'A') return last ? ')' : '[';
+        if (MARKS[n.tagName]) return MARKS[n.tagName][0];   // its delimiter
+        const t = n.textContent; return t ? (last ? t[t.length - 1] : t[0]) : textEdge(last ? n.previousSibling : n.nextSibling, last);
+    };
+    function inlineRaw(node, ctx) {
         let out = '';
         node.childNodes.forEach(n => {
-            if (n.nodeType === 3) { out += esc(n.textContent); return; }
+            if (n.nodeType === 3) { out += ctx.link ? esc(n.textContent).replace(/[()]/g, '\\$&') : esc(n.textContent); return; }   // in link text, no "(" can start a destination
             if (n.nodeType !== 1) return;
             const tag = n.tagName;
             if (tag === 'BR') { out += '  \n'; return; }
             if (tag === 'IMG') { const src = n.getAttribute('src') || ''; out += src && !unsafeUrl(src, true) ? `![${esc(n.getAttribute('alt') || '')}](${mdUrl(src)})` : ''; return; }
-            if (tag === 'A') { const h = n.getAttribute('href') || ''; out += h && !unsafeUrl(h) ? `[${inline(n)}](${mdUrl(h)})` : inline(n); return; }
-            const m = MARKS[tag];
-            if (!m) { out += inline(n); return; }
-            const body = tag === 'CODE' ? n.textContent : inline(n);
-            out += body.trim() ? m + body + m : body;
+            if (tag === 'A' && /(^|[^\\])!$/.test(out) && n.getAttribute('href')) out = out.slice(0, -1) + '\\!';   // not an image
+            if (tag === 'A' && !n.hasAttribute('title') && n.children.length === 0 && /^[a-z][a-z0-9+.-]{1,31}:[^\s<>]*$/i.test(n.getAttribute('href') || '') && n.textContent === n.getAttribute('href') && !unsafeUrl(n.textContent)) { out += '<' + n.textContent + '>'; return; }
+            if (tag === 'A') {
+                const h = n.getAttribute('href') || '', title = n.getAttribute('title');
+                const tt = title ? title.replace(/\n/g, ' ') : '';
+                const t = !tt ? '' : !tt.includes('"') ? ` "${tt.replace(/\\/g, '\\\\')}"` : !tt.includes("'") ? ` '${tt.replace(/\\/g, '\\\\')}'` : ` "${tt.replace(/[\\"]/g, '\\$&')}"`;
+                out += h && !unsafeUrl(h) ? `[${inlineRaw(n, { ...ctx, prev: '[', next: ']', link: true, trims: false })}](${mdUrl(h)}${t})` : inlineRaw(n, ctx);
+                return;
+            }
+            let m = MARKS[tag];
+            if (!m) { out += inlineRaw(n, ctx); return; }
+            if (tag === 'CODE') {
+                // A fence longer than any backtick run inside; padded where the code starts or ends with one
+                const code = n.textContent; if (!code) return;
+                // Code holding a backtick needs a longer fence, which renderers do not all read alike
+                // around emphasis or in link text: written as HTML
+                if (code.includes('`')) { out += '<code>' + esc(code) + '</code>'; return; }
+                const fence = '`'.repeat(Math.max(0, ...(code.match(/`+/g) || []).map(r => r.length)) + 1);
+                const pad = /^`|`$/.test(code) || (/^ /.test(code) && / $/.test(code) && code.trim()) ? ' ' : '';
+                out += fence + pad + code + pad + fence;
+                return;
+            }
+            if (!n.textContent.trim()) { out += inlineRaw(n, ctx); return; }
+            let body = inlineRaw(n, { ...ctx, prev: m[0], next: m[0], trims: true });
+            // Delimiters hug the text: spaces go outside
+            let [, lead, core, trail] = body.match(/^(\s*)([\s\S]*?)(\s*)$/);
+            const after = textEdge(n.nextSibling, false);
+            // What will be against the delimiters: a space moved out of a markdown parent's edge is
+            // not there, the parent's delimiter is
+            const prev = lead ? (!out && ctx.trims ? ctx.prev : ' ') : (out ? out[out.length - 1] : ctx.prev);
+            const next = trail ? (after == null && ctx.trims ? ctx.next : ' ') : (after == null ? ctx.next : after);
+            const nonspace = /\S/.test(prev || '') || /\S/.test(next || '');
+            // Delimiters every renderer reads the same way: whitespace or plain punctuation outside them
+            // (an enclosing mark's same delimiter too), text inside them that starts and ends plainly.
+            // Anything else (letters, another delimiter or an HTML tag against them) is written as HTML.
+            const isS = (c) => !c || /\s/.test(c), isD = (c) => c === '*' || c === '_' || c === '~';
+            // Punctuation outside only where text is inside: the delimiter can then only open (or close)
+            // Letters outside only between letters (intraword, as in foo**bar**), and only outside any other * mark
+            const wordy = (c) => !!c && !isS(c) && !MD_PUNCT.test(c);
+            const outside = (c, fromCtx, inner) => isS(c) || (fromCtx && c === m[0]) || (MD_PUNCT.test(c) && !isD(c) && c !== '<' && c !== '>' && c !== '`' && wordy(inner))
+                || (wordy(c) && wordy(inner) && !ctx.star && m[0] === '*' && !n.querySelector('strong, b, em, i'));
+            const f = core[0], l = core[core.length - 1], bare = core.replace(new RegExp('^\\' + m[0] + '+|\\' + m[0] + '+$', 'g'), '');
+            const clean = outside(prev, !lead && !out, bare[0]) && outside(next, !trail && after == null, bare[bare.length - 1])
+                && !isS(f) && !isS(l) && f !== '\\' && !/\\.$/.test(core) && f !== '<' && l !== '>'
+                && !(isD(f) && f !== m[0]) && !(isD(l) && l !== m[0])
+                // runs merged at both ends (***a* b *c***) only around one inner mark (***all***)
+                && !(f === m[0] && l === m[0] && [...n.childNodes].filter(c => c.nodeType === 1 || (c.nodeType === 3 && c.nodeValue.trim())).length > 1);
+            if ((m[0] === '*' || m[0] === '~') && (ctx.html === 'all' || (ctx.html === 'touch' && nonspace) || !clean)) {
+                const t = tag === 'STRONG' || tag === 'B' ? 'strong' : m[0] === '~' ? 's' : 'em';
+                // spaces stay inside a tag: what is against its children stays as computed
+                out += `<${t}>` + inlineRaw(n, { ...ctx, prev: '>', next: '<', trims: false }) + `</${t}>`;
+                return;
+            }
+            if (m[0] === '*') [, lead, core, trail] = inlineRaw(n, { ...ctx, prev: '*', next: '*', star: true, trims: true }).match(/^(\s*)([\s\S]*?)(\s*)$/);
+            out += lead + m + core + m + trail;
         });
         return out;
     }
 
+    // Inline markdown for a node, checked by reading it back: in the rare arrangement where a
+    // * or _ run would pair differently, em/strong touching text go as HTML, else all of them
+    function inline(node) {
+        const want = shapeOf(node), ctx = { prev: '', next: '', star: false, link: false, html: '' };
+        let first = null;
+        for (const html of ['', 'touch', 'all']) {
+            const md = inlineRaw(node, { ...ctx, html });
+            if (first == null) first = md;
+            // Read back as this reader does and as other markdown renderers (x-markdown) do
+            const t = document.createElement('template'); t.innerHTML = inlineHtml(md);
+            const u = document.createElement('template'); u.innerHTML = inlineHtml(md, { strict: true });
+            if (shapeOf(t.content) === want && shapeOf(u.content) === want) return md;
+        }
+        return first;   // what no form can carry (an unsafe link, say) is not a reason to change notation
+    }
+    // Every character with the formatting it shows (strong/em/strike on spaces show nothing)
+    function shapeOf(root) {
+        const out = [], KIND = { STRONG: 'b', B: 'b', EM: 'i', I: 'i', S: 's', DEL: 's', CODE: 'c' };
+        const walk = (n, f) => n.childNodes.forEach(c => {
+            if (c.nodeType === 3) { for (const ch of c.nodeValue) out.push(ch + (/\s/.test(ch) ? f.filter(x => x[0] !== 'b' && x[0] !== 'i' && x[0] !== 's') : f).join()); return; }
+            if (c.nodeType !== 1) return;
+            if (c.tagName === 'BR') { out.push('\n'); return; }
+            if (c.tagName === 'IMG') { const src = c.getAttribute('src') || ''; if (src && !unsafeUrl(src, true)) out.push('img:' + src + '|' + (c.getAttribute('alt') || '')); return; }
+            const href = c.tagName === 'A' ? c.getAttribute('href') || '' : '';
+            const k = KIND[c.tagName], h = href && !unsafeUrl(href) ? 'a:' + href : null;
+            walk(c, [...new Set([...f, ...(k ? [k] : []), ...(h ? [h] : [])])].sort());
+        });
+        walk(root, []);
+        return out.join('\u0001').replace(/^(\s(\u0001|$))+|(\u0001\s)+$/g, '');
+    }
+
     const preText = (n) => [...n.childNodes].map(c =>
         c.nodeName === 'BR' ? '\n' : c.nodeType === 3 ? c.nodeValue : preText(c)).join('');
 
@@ -66,7 +202,7 @@
         if (node.nodeType !== 1) return '';
         const tag = node.tagName;
         if (tag === 'HR') return '---';
-        if (tag === 'PRE') return '```\n' + preText(node).replace(/\n+$/, '') + '\n```';
+        if (tag === 'PRE') return '```' + (node.getAttribute('data-lang') || '').replace(/[^\w+#.-]/g, '') + '\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 => escLead(cells.map(cellMarkdown).join(CELL_SEP))).join('\n\n');
@@ -110,11 +246,18 @@
         return parts.join('\n\n');
     }
 
-    const toMarkdown = (root) => blocks(root, 0).replace(/\n{3,}/g, '\n\n').trim();
+    // Markdown carries a mark once: one inside another with the same delimiter adds nothing
+    const flattenMarks = (root) => [...root.querySelectorAll('*')].forEach(el => {
+        const m = MARKS[el.tagName]; if (!m) return;
+        for (let p = el.parentElement; p && p !== root; p = p.parentElement) if (MARKS[p.tagName] === m) { el.replaceWith(...el.childNodes); return; }
+    });
+    const mdCopy = (root) => { const c = root.cloneNode(true); flattenMarks(c); mergeAdjacent(c, sameDelimiter); return c; };
+    const toMarkdown = (root) => blocks(mdCopy(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);
+        flattenMarks(flat); mergeAdjacent(flat, sameDelimiter);
         return inline(flat).trim();
     };
 
@@ -181,19 +324,150 @@
     /* ---- Markdown → HTML ---- */
     const escHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
 
-    // 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, 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>')
-            .replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (_, alt, src) => unsafeUrl(src, true) ? '' : `<img src="${src}" alt="${alt}">`)
-            .replace(/\[([^\]]*)\]\(([^)\s]+)\)/g, (_, t, h) => unsafeUrl(h) ? t : `<a href="${h}">${t}</a>`)
-            .replace(/ {2}\n/g, '<br>')
-            .replace(new RegExp(HOLD + '(\\d+)' + HOLD, 'g'), (_, i) => held[+i]);
+    /* Inline markdown: a small CommonMark-style reader. Code spans, links and images are found
+       left to right; runs of * _ ~ are delimiters, matched innermost first with CommonMark's
+       rules (the rule of 3 included). `*` and `~~` open before any non-space and close after
+       one (CommonMark also weighs punctuation); `_` keeps CommonMark's word-boundary rules. */
+    const PUNCT = /[!-\/:-@\[-`{-~ -⸀-⹿]/;
+    const isSpace = (c) => !c || /\s/.test(c);
+    // opts.raw: backslashes are text and no inline HTML is read (markdown being typed);
+    // opts.after: the character after the source, for the flanking of a run that ends it
+    function inlineHtml(src, opts = {}) {
+        const s = String(src == null ? '' : src);
+        const parts = [], delims = [];
+        let text = '';
+        const flush = () => { if (text) { parts.push(escHtml(text)); text = ''; } };
+        // A code span's closing run: the next backtick run of the same length
+        const codeEnd = (from, len) => {
+            for (let j = from; j < s.length;) {
+                const k = s.indexOf('`', j); if (k < 0) return -1;
+                const n = s.slice(k).match(/^`+/)[0].length;
+                if (n === len) return k;
+                j = k + n;
+            }
+            return -1;
+        };
+        // A link destination from the "(" at `at`: <…>, or balanced parentheses; an optional title is skipped
+        const destination = (at) => {
+            let j = at + 1, url;
+            while (s[j] === ' ' || s[j] === '\t') j++;
+            if (s[j] === '<') {
+                const e = s.indexOf('>', j); if (e < 0 || /[\n<]/.test(s.slice(j + 1, e))) return null;
+                url = s.slice(j + 1, e); j = e + 1;
+            } else {
+                const from = j;
+                for (let depth = 0; j < s.length; j++) {
+                    const c = s[j];
+                    if (c === '\\' && /[!-\/:-@\[-`{-~]/.test(s[j + 1] || '')) { j++; continue; }
+                    if (/[\s\x00-\x1f]/.test(c)) break;
+                    if (c === '(') depth++;
+                    else if (c === ')') { if (!depth) break; depth--; }
+                }
+                url = s.slice(from, j);
+            }
+            const gap = j;
+            while (/[ \t\n]/.test(s[j] || '')) j++;
+            const q = s[j];
+            let title = null;
+            if (j > gap && (q === '"' || q === "'" || q === '(')) {
+                const close = q === '(' ? ')' : q;
+                let e = j + 1; for (; e < s.length && s[e] !== close; e++) if (s[e] === '\\') e++;
+                if (e >= s.length) return null;
+                title = s.slice(j + 1, e).replace(/\\([!-\/:-@\[-`{-~])/g, '$1');
+                j = e + 1; while (/[ \t\n]/.test(s[j] || '')) j++;
+            }
+            if (s[j] !== ')') return null;
+            return { url: url.replace(/\\([!-\/:-@\[-`{-~])/g, '$1'), title, end: j + 1 };
+        };
+        // A bracket's matching close, skipping escapes and code spans
+        const closeBracket = (from) => {
+            for (let i = from, depth = 0; i < s.length; i++) {
+                const c = s[i];
+                if (c === '\\') { i++; continue; }
+                if (c === '`') { const n = s.slice(i).match(/^`+/)[0].length, e = codeEnd(i + n, n); i = (e < 0 ? i + n : e + n) - 1; continue; }
+                if (c === '[') depth++;
+                else if (c === ']') { if (!depth) return i; depth--; }
+            }
+            return -1;
+        };
+        for (let i = 0; i < s.length;) {
+            const c = s[i];
+            if (c === '\\' && !opts.raw && i + 1 < s.length && /[!-\/:-@\[-`{-~]/.test(s[i + 1])) { text += s[i + 1]; i += 2; continue; }
+            if (c === '`') {
+                const run = s.slice(i).match(/^`+/)[0], end = codeEnd(i + run.length, run.length);
+                if (end < 0) { text += run; i += run.length; continue; }
+                let code = s.slice(i + run.length, end).replace(/\n/g, ' ');
+                if (code.length > 1 && code[0] === ' ' && code[code.length - 1] === ' ' && code.trim()) code = code.slice(1, -1);
+                flush(); parts.push(`<code>${escHtml(code)}</code>`);
+                i = end + run.length; continue;
+            }
+            if (c === '[' || (c === '!' && s[i + 1] === '[')) {
+                const img = c === '!', open = i + (img ? 2 : 1), close = closeBracket(open);
+                const m = close > 0 && s[close + 1] === '(' && destination(close + 1);
+                if (m) {
+                    const url = m.url, body = s.slice(open, close);
+                    flush();
+                    if (img) parts.push(unsafeUrl(url, true) ? '' : `<img src="${escHtml(url)}" alt="${escHtml(body.replace(/\\([!-\/:-@\[-`{-~])/g, '$1'))}">`);
+                    else parts.push(unsafeUrl(url) || !url ? inlineHtml(body, { raw: opts.raw, strict: opts.strict }) : `<a href="${escHtml(url)}"${m.title != null ? ` title="${escHtml(m.title)}"` : ''}>${inlineHtml(body, { raw: opts.raw, strict: opts.strict })}</a>`);
+                    i = m.end; continue;
+                }
+            }
+            // The inline HTML this writer uses where markdown has no form (raw tags, as CommonMark passes them)
+            if (c === '<' && !opts.raw) {
+                // Inline HTML for marks markdown has (as CommonMark passes it); other tags stay text
+                const t = s.slice(i).match(/^<(\/?)(strong|em|b|i|s|del|code)>/i);
+                if (t) { const tag = { b: 'strong', i: 'em', del: 's' }[t[2].toLowerCase()] || t[2].toLowerCase(); flush(); parts.push(`<${t[1]}${tag}>`); i += t[0].length; continue; }
+                // An autolink: <scheme:…>
+                const a = s.slice(i).match(/^<([a-z][a-z0-9+.-]{1,31}:[^\s<>]*)>/i);
+                if (a && !unsafeUrl(a[1])) { flush(); parts.push(`<a href="${escHtml(a[1])}">${escHtml(a[1])}</a>`); i += a[0].length; continue; }
+            }
+            if (c === '\n' && / {2,}$/.test(text)) { text = text.replace(/ +$/, ''); flush(); parts.push('<br>'); i++; continue; }
+            if (c === '*' || c === '_' || c === '~') {
+                const run = s.slice(i).match(c === '*' ? /^\*+/ : c === '_' ? /^_+/ : /^~+/)[0];
+                const before = i ? s[i - 1] : '', after = i + run.length < s.length ? s[i + run.length] : (opts.after || '');
+                let open, close;
+                if (c === '_') {
+                    const left = !isSpace(after) && (!PUNCT.test(after) || isSpace(before) || PUNCT.test(before));
+                    const right = !isSpace(before) && (!PUNCT.test(before) || isSpace(after) || PUNCT.test(after));
+                    open = left && (!right || PUNCT.test(before)); close = right && (!left || PUNCT.test(after));
+                } else if (opts.strict) {
+                    // CommonMark's flanking, punctuation weighed (what other markdown renderers do)
+                    open = !isSpace(after) && (!PUNCT.test(after) || isSpace(before) || PUNCT.test(before));
+                    close = !isSpace(before) && (!PUNCT.test(before) || isSpace(after) || PUNCT.test(after));
+                } else { open = !isSpace(after); close = !isSpace(before); }
+                if (c === '~' && run.length !== 2) { open = close = false; }
+                if (!open && !close) { text += run; i += run.length; continue; }
+                flush();
+                const d = { ch: c, count: run.length, orig: run.length, open, close };
+                parts.push(d); delims.push(d);
+                i += run.length; continue;
+            }
+            text += c; i++;
+        }
+        flush();
+        // Innermost first: each closer takes the nearest opener it can pair with
+        for (let ci = 0; ci < delims.length; ci++) {
+            const closer = delims[ci];
+            while (closer.close && closer.count) {
+                let oi = ci - 1;
+                for (; oi >= 0; oi--) {
+                    const o = delims[oi];
+                    if (o.ch !== closer.ch || !o.open || !o.count) continue;
+                    if (closer.ch === '~') { if (o.count === 2 && closer.count === 2) break; continue; }
+                    if ((o.close || closer.open) && (o.orig + closer.orig) % 3 === 0 && !(o.orig % 3 === 0 && closer.orig % 3 === 0)) continue;
+                    break;
+                }
+                if (oi < 0) break;
+                const opener = delims[oi], use = closer.ch === '~' ? 2 : (opener.count >= 2 && closer.count >= 2 ? 2 : 1);
+                const tag = closer.ch === '~' ? 's' : use === 2 ? 'strong' : 'em';
+                const a = parts.indexOf(opener), b = parts.indexOf(closer);
+                const inner = parts.splice(a + 1, b - a - 1).map(p => typeof p === 'string' ? p : p.ch.repeat(p.count)).join('');
+                parts.splice(a + 1, 0, `<${tag}>${inner}</${tag}>`);
+                for (let k = oi + 1; k < ci; k++) delims[k].count = 0;   // delimiters inside are text now (already rendered)
+                opener.count -= use; closer.count -= use;
+            }
+        }
+        return parts.map(p => typeof p === 'string' ? p : p.ch.repeat(p.count)).join('');
     }
 
     // Four spaces per nesting level.
@@ -220,7 +494,7 @@
     function fromMarkdown(md) {
         const lines = String(md == null ? '' : md).replace(/\r\n?/g, '\n').split('\n');
         const out = [];
-        let para = [], list = null, quote = null, fence = null;
+        let para = [], list = null, quote = null, fence = null, lang = '';
         const flushPara = () => { if (para.length) { out.push(`<p>${inlineHtml(para.join('\n'))}</p>`); para = []; } };
         const flushList = () => { if (!list) return; for (let i = 0; i < list.length;) { const [html, next] = renderList(list, i, list[i].depth); out.push(html); i = next > i ? next : i + 1; } list = null; };
         const flushQuote = () => { if (quote) { out.push(`<blockquote>${fromMarkdown(quote.join('\n'))}</blockquote>`); quote = null; } };
@@ -228,8 +502,8 @@
 
         for (const raw of lines) {
             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 (fence !== null) { if (/^```\s*$/.test(line)) { out.push(`<pre${lang ? ` data-lang="${escHtml(lang)}"` : ''}><code>${escHtml(fence.join('\n'))}</code></pre>`); fence = null; } else fence.push(raw); continue; }
+            if (/^```/.test(line)) { flushAll(); fence = []; lang = (line.slice(3).trim().match(/^[\w+#.-]+/) || [''])[0]; continue; }
             if (!line.trim()) { flushAll(); continue; }
             const h = line.match(/^(#{1,6})\s+(.*)$/);
             if (h) { flushAll(); out.push(`<h${h[1].length}>${inlineHtml(h[2])}</h${h[1].length}>`); continue; }
@@ -245,7 +519,7 @@
             flushList(); flushQuote();
             para.push(line);
         }
-        if (fence) out.push(`<pre><code>${escHtml(fence.join('\n'))}</code></pre>`);
+        if (fence) out.push(`<pre${lang ? ` data-lang="${escHtml(lang)}"` : ''}><code>${escHtml(fence.join('\n'))}</code></pre>`);
         flushAll();
         return out.join('');
     }
@@ -268,9 +542,10 @@
             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 === 'A' && ((n === 'href' && !unsafeUrl(a.value)) || n === 'title')) return;
                 if (c.tagName === 'IMG' && (n === 'alt' || (n === 'src' && !unsafeUrl(a.value, true)))) return;
                 if (c.tagName === 'INPUT' && (n === 'type' || n === 'checked')) return;
+                if (c.tagName === 'PRE' && n === 'data-lang' && /^[\w+#.-]{1,40}$/.test(a.value)) return;   // a code fence's language
                 if (/^(TD|TH)$/.test(c.tagName) && (n === 'colspan' || n === 'rowspan') && /^[1-9]\d{0,2}$/.test(a.value)) return;
                 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;
@@ -278,8 +553,20 @@
             });
         });
         walk(t.content);
+        mergeAdjacent(t.content);
+        if (allowBlocks) dropTrailingEmpty(t.content);
         return t.innerHTML;
     }
+    // The empty paragraph after a closing list, table or code block is an editing affordance only:
+    // values never end in one (nor in several)
+    function dropTrailingEmpty(root) {
+        for (let n = root.lastChild; n;) {
+            const prev = n.previousSibling;
+            if ((n.nodeType === 3 && !n.nodeValue.trim()) || (n.nodeType === 1 && n.tagName === 'P' && !n.textContent.trim() && !n.querySelector('img, input'))) n.remove();
+            else break;
+            n = prev;
+        }
+    }
 
     const markdownHtml = (md) => sanitize(fromMarkdown(md), true);
 
@@ -392,6 +679,28 @@
         return pre.toString().length;
     }
 
+    // The selection as text offsets in root, and back
+    function textSpan(root) {
+        const r = range(); if (!r || !root.contains(r.startContainer) || !root.contains(r.endContainer)) return null;
+        const at = (node, off) => { const pre = document.createRange(); pre.selectNodeContents(root); pre.setEnd(node, off); return pre.toString().length; };
+        return [at(r.startContainer, r.startOffset), at(r.endContainer, r.endOffset)];
+    }
+    function selectSpan(root, [from, to]) {
+        const point = (offset, end) => {
+            const w = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+            let seen = 0, last = null;
+            for (let n = w.nextNode(); n; n = w.nextNode()) {
+                last = n;
+                if (end ? seen + n.length >= offset : seen + n.length > offset) return [n, offset - seen];
+                seen += n.length;
+            }
+            return last ? [last, last.length] : [root, 0];
+        };
+        const r = document.createRange(), a = point(from, false), b = point(to, true);
+        r.setStart(a[0], a[1]); r.setEnd(b[0], b[1]);
+        const s = sel(); s.removeAllRanges(); s.addRange(r);
+    }
+
     function caretIn(root, offset) {
         const s = sel(), r = document.createRange();
         if (offset == null) offset = 0;
@@ -630,7 +939,9 @@
     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; };
+    const emptyCell = (tag = 'td') => { const td = document.createElement(tag); td.appendChild(document.createElement('br')); return td; };
+    // A header row (in a thead, or of header cells only) is padded with header cells
+    const rowCellTag = (row) => row.parentElement && row.parentElement.tagName === 'THEAD' || (row.cells.length && [...row.cells].every(c => c.tagName === 'TH')) ? 'th' : 'td';
 
     // Occupancy grid: every slot maps to the cell covering it, spans included
     function tableGrid(table) {
@@ -674,7 +985,7 @@
             const width = Math.max(0, ...grid.map(r => r.length));
             rows.forEach((row, r) => {
                 const have = (grid[r] || []).filter(Boolean).length;
-                for (let i = have; i < width; i++) row.appendChild(emptyCell());
+                for (let i = have; i < width; i++) row.appendChild(emptyCell(rowCellTag(row)));
             });
             if (!table.querySelector('tbody, thead')) {
                 const body = document.createElement('tbody');
@@ -783,13 +1094,14 @@
         const cols = cell.colSpan || 1, rows = cell.rowSpan || 1;
         if (cols < 2 && rows < 2) return;
         cell.removeAttribute('colspan'); cell.removeAttribute('rowspan');
-        for (let i = 1; i < cols; i++) cell.after(emptyCell());
+        // A header cell splits into header cells; rows below take their row's kind
+        for (let i = 1; i < cols; i++) cell.after(emptyCell(cell.tagName.toLowerCase()));
         if (rows > 1) {
             const table = cell.closest('table'), { row, col } = gridPosition(cell);
             for (let r = 1; r < rows; r++) {
                 const target = rowsOf(table)[row + r]; if (!target) break;
                 const at = cellCovering(target, col);
-                const fresh = emptyCell();
+                const fresh = emptyCell(rowCellTag(target));
                 if (at) at.before(fresh); else target.appendChild(fresh);
             }
         }
@@ -901,39 +1213,48 @@
         return null;
     }
 
+    // Sizes are written only once the pointer actually drags: a click on a border writes nothing
     function startResize(e, hit) {
         const cell = hit.cell, table = cell.closest('table');
         const area = cell.closest('[data-rich-text]');
         e.preventDefault();
-        area.setAttribute('data-rich-text-resizing', hit.axis);
-
-        let apply;
-        if (hit.axis === 'x') {
-            const group = ensureCols(table);
-            const { col } = gridPosition(cell);
-            const index = Math.min(col + (cell.colSpan || 1) - 1, group.children.length - 1);
-            const target = group.children[index];
-            const start = parseFloat(target.style.width) || cell.getBoundingClientRect().width;
-            const from = e.clientX;
-            // 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';
-            apply = (ev) => {
-                const delta = ev.clientX - from;
-                target.style.width = Math.max(28, Math.round(start + delta)) + 'px';
-                if (outer) table.style.width = Math.max(60, Math.round(tableStart + delta)) + 'px';
-            };
-        } else {
-            const row = cell.parentElement;
-            const start = row.getBoundingClientRect().height, from = e.clientY;
-            apply = (ev) => { row.style.height = Math.max(20, Math.round(start + ev.clientY - from)) + 'px'; };
-        }
+        const fromX = e.clientX, fromY = e.clientY;
+        let apply = null;
+        const begin = () => {
+            area.setAttribute('data-rich-text-resizing', hit.axis);
+            if (hit.axis === 'x') {
+                const group = ensureCols(table);
+                const { col } = gridPosition(cell);
+                const index = Math.min(col + (cell.colSpan || 1) - 1, group.children.length - 1);
+                const target = group.children[index];
+                const start = parseFloat(target.style.width) || cell.getBoundingClientRect().width;
+                // 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';
+                return (ev) => {
+                    const delta = ev.clientX - fromX;
+                    target.style.width = Math.max(28, Math.round(start + delta)) + 'px';
+                    if (outer) table.style.width = Math.max(60, Math.round(tableStart + delta)) + 'px';
+                };
+            }
+            const row = cell.parentElement, start = row.getBoundingClientRect().height;
+            return (ev) => { row.style.height = Math.max(20, Math.round(start + ev.clientY - fromY)) + 'px'; };
+        };
 
-        const move = (ev) => { ev.preventDefault(); apply(ev); };
+        const move = (ev) => {
+            ev.preventDefault();
+            if (!apply) {
+                if (Math.abs(ev.clientX - fromX) < 3 && Math.abs(ev.clientY - fromY) < 3) return;
+                record(area);
+                apply = begin();
+            }
+            apply(ev);
+        };
         const up = () => {
             document.removeEventListener('pointermove', move);
             document.removeEventListener('pointerup', up);
+            if (!apply) return;
             area.removeAttribute('data-rich-text-resizing');
             area.dispatchEvent(new Event('input', { bubbles: true }));
         };
@@ -1278,6 +1599,13 @@
         if (!frag.lastChild) return;
         record(area);
         r.deleteContents();
+        // A caret between a block field's blocks (an empty field clicked) goes into the block beside it
+        const c0 = range();
+        if (c0 && c0.startContainer === area && !(area._rt && area._rt.inline)) {
+            const into = (b) => b && b.nodeType === 1 && /^(P|H[1-6]|BLOCKQUOTE|PRE)$/.test(b.tagName);
+            const before = area.childNodes[c0.startOffset - 1], after = area.childNodes[c0.startOffset];
+            if (into(before)) caretIn(before, before.textContent.length); else if (into(after)) caretIn(after, 0);
+        }
         // 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());
@@ -1287,7 +1615,16 @@
         }
         let end = frag.lastChild;
         if (!end) return;
+        const lastTop = end;
         const cr = range(); if (cr && area.contains(cr.startContainer)) cr.insertNode(frag); else area.appendChild(frag);
+        // Pasted content ending in a mark: the caret sits after it, as after a conversion
+        if (lastTop.nodeType === 1 && INLINE_OK.has(lastTop.tagName) && !/^(BR|WBR|IMG)$/.test(lastTop.tagName) && lastTop.isConnected) {
+            caretAt(tailOf(lastTop), 0);
+            area._exit = lastTop;
+            record(area);
+            area.dispatchEvent(new Event('input', { bubbles: true }));
+            return;
+        }
         // 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();
         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; }
@@ -1357,7 +1694,16 @@
         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>`);
+        insertHTML(`<table data-rich-text-new><tbody>${row.repeat(rows)}</tbody></table><p><br></p>`);
+        // The caret goes into the first cell, so typing and table commands start there
+        const made = document.querySelector('table[data-rich-text-new]');
+        if (made) {
+            made.removeAttribute('data-rich-text-new');
+            // One empty line after it to land on, not one per insertion (from inside a table, it lands after it)
+            const blank = (e) => e && e.tagName === 'P' && !e.textContent.trim() && !e.querySelector('img');
+            for (let n = made.nextElementSibling; blank(n) && blank(n.nextElementSibling);) { const x = n.nextElementSibling; x.remove(); }
+            const first = made.querySelector('td, th'); if (first) caretIn(first, 0);
+        }
     }
 
     // A trailing table, rule or similar block gets a line after it to land on
@@ -1387,8 +1733,21 @@
     }
 
     // A value styles the selection; an empty one removes that style from it (spans left bare go)
+    // A style span covering exactly what a style span around it covers is folded into it, so one span
+    // carries the combined styles and a re-applied value replaces the old one instead of nesting
     function styleSpan(prop, v) {
-        if (v != null && v !== '') return wrapInline('span', { [prop]: v });
+        if (v != null && v !== '') {
+            const made = wrapInline('span', { [prop]: v }).map(sp => {
+                for (let p = sp.parentElement; p && p.tagName === 'SPAN' && !p.hasAttribute('data-rich-text') && [...p.attributes].every(a => a.name === 'style') && [...p.childNodes].filter(c => c.nodeType === 1 || c.nodeValue.length).length === 1; p = sp.parentElement) {
+                    for (let i = 0; i < sp.style.length; i++) { const name = sp.style.item(i); p.style.setProperty(name, sp.style.getPropertyValue(name)); }
+                    sp.replaceWith(...sp.childNodes);
+                    sp = p;
+                }
+                return sp;
+            });
+            if (made.length) { const r = document.createRange(), last = made[made.length - 1]; r.setStart(made[0], 0); r.setEnd(last, last.childNodes.length); const s = sel(); s.removeAllRanges(); s.addRange(r); }
+            return made;
+        }
         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); });
@@ -1412,6 +1771,17 @@
         const next = values && values[k];
         if (next) area.style.setProperty(v, next); else area.style.removeProperty(v);
     });
+    const allKey = (area) => JSON.stringify(allStyle(area));
+    // .all styles set from code: every history entry takes the change, so undo never removes it
+    function rebaseAll(area, was, now) {
+        const h = area._history; if (!h) return;
+        const keys = [...new Set([...Object.keys(was), ...Object.keys(now)])].filter(k => was[k] !== now[k]);
+        h.stack.forEach(e => {
+            const o = e.all ? JSON.parse(e.all) : {};
+            keys.forEach(k => { if (now[k]) o[k] = now[k]; else delete o[k]; });
+            e.all = JSON.stringify(Object.fromEntries(Object.keys(ALL_VARS).filter(k => o[k]).map(k => [k, o[k]])));
+        });
+    }
 
     /* ---- Command table ---- */
     const COMMANDS = Object.create(null);
@@ -1592,20 +1962,10 @@
         { re: /^\d+\.\s+/, make: (b) => listify(b, 'ol') },
         { re: /^\[([ xX])\]\s+/, make: (b, m) => listify(b, 'ul', /[xX]/.test(m[1])) },
         { re: /^>\s+/, make: (b) => retagBlock(b, 'blockquote') },
-        { re: /^```\s*$/, make: (b) => retagBlock(b, 'pre') },
+        { re: /^```([\w+#.-]{0,40})\s*$/, make: (b, m) => { const pre = retagBlock(b, 'pre'); if (m[1]) pre.setAttribute('data-lang', m[1]); return pre; } },
         { re: /^(-{3,}|\*{3,}|_{3,})\s*$/, make: (b) => { const hr = document.createElement('hr'); b.replaceWith(hr); return hr; } }
     ];
 
-    const INLINE_RULES = [
-        { re: /\*\*([^*]+)\*\*/, tag: 'strong' },
-        { re: /__([^_]+)__/, tag: 'strong' },
-        { re: /(^|[^*])\*([^*\s][^*]*)\*/, tag: 'em', pre: 1, content: 2 },
-        { re: /~~([^~]+)~~/, tag: 'del' },
-        { re: /`([^`]+)`/, tag: 'code' },
-        { re: /!\[([^\]]*)\]\(([^)\s]+)\)/, tag: 'img', alt: 1, src: 2 },
-        { re: /\[([^\]]+)\]\(([^)\s]+)\)/, tag: 'a', href: 2 }
-    ];
-
     function retagBlock(b, tag) {
         const n = document.createElement(tag);
         while (b.firstChild) n.appendChild(b.firstChild);
@@ -1640,44 +2000,35 @@
         }
     }
 
-    function inlineEl(rule, m) {
-        const el = document.createElement(rule.tag);
-        if (rule.tag === 'img') {
-            if (unsafeUrl(m[rule.src], true)) return null;
-            el.setAttribute('src', m[rule.src]); el.setAttribute('alt', m[rule.alt] || '');
-            return el;
+    // Markdown typed in a run of inline content (up to the caret, or all of it) re-read with the
+    // markdown reader, so what converts while typing is what a saved value reads back as. Elements
+    // already there go through as opaque characters. Null when nothing new would be made.
+    const ATOM = 0xE000;
+    function reparse(box, until, upto, after) {
+        const kids = [...box.childNodes], end = until ? kids.indexOf(until) : kids.length;
+        let from = 0;
+        for (let i = 0; i < end; i++) if (kids[i].nodeType === 1 && (kids[i].tagName === 'BR' || BLOCK.includes(kids[i].tagName))) from = i + 1;
+        const run = kids.slice(from, end), atoms = [];
+        let src = '';
+        for (const n of run) {
+            if (n.nodeType === 3) { if (/[\uE000-\uF8FF]/.test(n.nodeValue)) return null; src += n.nodeValue; }
+            else if (n.nodeType === 1) { if (atoms.length > 6000) return null; src += String.fromCharCode(ATOM + atoms.length); atoms.push(n); }
         }
-        el.textContent = m[rule.content || 1];
-        if (rule.href) { if (unsafeUrl(m[rule.href])) return null; el.setAttribute('href', m[rule.href]); }
-        return el;
-    }
-
-    function firstInline(text) {
-        let best = null;
-        for (const rule of INLINE_RULES) {
-            const m = text.match(rule.re); if (!m) continue;
-            const skip = rule.pre ? m[rule.pre].length : 0;
-            const start = m.index + skip;
-            if (!best || start < best.start) best = { rule, m, start, len: m[0].length - skip };
-        }
-        return best;
-    }
-
-    // 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) {
-            const re = new RegExp(rule.re.source, 'g');
-            let m;
-            while ((m = re.exec(text))) {
-                if (m.index + m[0].length !== text.length) continue;
-                const skip = rule.pre ? m[rule.pre].length : 0;
-                const start = m.index + skip;
-                if (!best || start < best.start) best = { rule, m, start, len: m[0].length - skip };
-                break;
-            }
-        }
-        return best;
+        if (until) src += until.nodeValue.slice(0, upto);
+        if (!/[*_~`\[]/.test(src)) return null;
+        const t = document.createElement('template');
+        t.innerHTML = inlineHtml(src, { raw: true, after });
+        const made = [...t.content.querySelectorAll('*')];
+        if (!made.length) return null;
+        // Elements already there land whole and once, never in a code span or an attribute
+        if (made.some(e => [...e.attributes].some(x => /[\uE000-\uF8FF]/.test(x.value)))) return null;
+        const texts = []; const w = document.createTreeWalker(t.content, NodeFilter.SHOW_TEXT);
+        for (let n = w.nextNode(); n; n = w.nextNode()) if (/[\uE000-\uF8FF]/.test(n.nodeValue)) { if (n.parentElement && n.parentElement.closest('code')) return null; texts.push(n); }
+        const found = texts.flatMap(n => n.nodeValue.match(/[\uE000-\uF8FF]/g)).map(c => c.charCodeAt(0) - ATOM);
+        if (found.length !== atoms.length || new Set(found).size !== atoms.length) return null;
+        // The elements move in only when the conversion is taken
+        const fill = () => texts.forEach(n => n.replaceWith(...n.nodeValue.split(/([\uE000-\uF8FF])/).filter(Boolean).map(p => p.length === 1 && p.charCodeAt(0) >= ATOM && p.charCodeAt(0) - ATOM < atoms.length ? atoms[p.charCodeAt(0) - ATOM] : document.createTextNode(p))));
+        return { run, frag: t.content, fill };
     }
 
     function convertInlineAtCaret(area) {
@@ -1686,17 +2037,24 @@
         if (!node || node.nodeType !== 3 || !node.parentElement) return false;
         const host = node.parentElement.closest('code, pre, a');
         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;
+        if (!/[*_~`)]/.test(node.nodeValue[r.startOffset - 1] || '')) return false;
+        const next = node.nodeValue[r.startOffset] != null ? node.nodeValue[r.startOffset] : textEdge(node.nextSibling, false);
+        const hit = reparse(node.parentElement, node, r.startOffset, next == null ? '' : next);
+        // Only a construct closed by the character just typed, and whole: an opener with marker
+        // left over (`**test*`, so far) waits for the rest of the closer
+        const last = hit && hit.frag.lastChild, typed = node.nodeValue[r.startOffset - 1];
+        if (!last || last.nodeType !== 1 || (!last.textContent && last.tagName !== 'IMG')) return false;
+        const before = last.previousSibling;
+        if (/[*_~]/.test(typed) && before && before.nodeType === 3 && before.nodeValue.endsWith(typed)) return false;
         record(area);
-        const tail = node.splitText(hit.start);
-        tail.deleteData(0, hit.len);
-        tail.parentNode.insertBefore(el, tail);
+        const tail = node.splitText(r.startOffset);
+        hit.run.forEach(n => n.remove()); node.remove();
+        hit.fill();
+        tail.parentNode.insertBefore(hit.frag, tail);
         const s = sel(), nr = document.createRange();
         nr.setStart(tail, 0); nr.collapse(true);
         s.removeAllRanges(); s.addRange(nr);
-        area._exit = el.tagName === 'IMG' ? null : el;
+        area._exit = last.tagName === 'IMG' ? null : last;
         record(area);
         return true;
     }
@@ -1775,21 +2133,26 @@
         return true;
     }
 
+    // A finished line's markdown, in each run of inline content (marks' own content first)
     function convertInline(root) {
-        const nodes = [];
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-        for (let n = walker.nextNode(); n; n = walker.nextNode()) nodes.push(n);
-        nodes.forEach(node => {
-            if (!node.parentElement || node.parentElement.closest('code, pre, a')) return;
-            let cur = node;
-            for (let guard = 0; guard < 50; guard++) {
-                const hit = firstInline(cur.nodeValue); if (!hit) return;
-                const el = inlineEl(hit.rule, hit.m); if (!el) return;
-                const tail = cur.splitText(hit.start);
-                tail.deleteData(0, hit.len);
-                tail.parentNode.insertBefore(el, tail);
-                cur = tail;
+        [...root.children].forEach(c => { if (!/^(CODE|PRE|A|BR|IMG)$/.test(c.tagName)) convertInline(c); });
+        if (root.closest('code, pre, a')) return;
+        const segments = [];
+        let start = root.firstChild;
+        for (let n = root.firstChild; ; n = n ? n.nextSibling : null) {
+            if (!n || (n.nodeType === 1 && (n.tagName === 'BR' || BLOCK.includes(n.tagName)))) {
+                if (start !== n) segments.push([start, n]);
+                if (!n) break;
+                start = n.nextSibling;
             }
+        }
+        segments.forEach(([first, stop]) => {
+            const box = document.createElement('span'), anchor = document.createComment('');
+            first.before(anchor);
+            for (let n = first; n && n !== stop;) { const nx = n.nextSibling; box.appendChild(n); n = nx; }
+            const hit = reparse(box, null, 0, '');
+            if (hit) { hit.fill(); box.replaceChildren(hit.frag); }
+            anchor.replaceWith(...box.childNodes);
         });
     }
 
@@ -1828,7 +2191,10 @@
     }
 
     // Native Enter inside code and for Shift+Enter; Chrome writes <br> pairs in a <pre>
+    // A code block's lines: in its <code> (the shape markdown gives), else in the <pre> itself
+    const codeBox = (pre) => { const c = pre.firstElementChild; return c && c.tagName === 'CODE' && pre.children.length === 1 && !pre.textContent.replace(c.textContent, '').trim() ? c : pre; };
     const codeEndsBlank = (pre) => {
+        pre = codeBox(pre);
         const last = pre.lastChild;
         if (last && last.nodeName === 'BR' && last.previousSibling && last.previousSibling.nodeName === 'BR') return true;
         return /\n[^\S\n]*$/.test(pre.textContent);
@@ -1899,10 +2265,13 @@
         // An empty last line leaves the code block (bounded to the area)
         const pre = holder.closest('pre');
         if (pre && pre !== area && area.contains(pre)) {
-            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');
-            pre.after(p);
+            const box = codeBox(pre);
+            while (box.lastChild && (box.lastChild.nodeName === 'BR' || !box.lastChild.textContent.trim())) box.lastChild.remove();
+            if (/\n[^\S\n]*$/.test(box.textContent)) box.textContent = box.textContent.replace(/\n[^\S\n]*$/, '');
+            // onto the empty line after it, if there is one
+            const after = pre.nextElementSibling, blank = after && after.tagName === 'P' && !after.textContent.trim() && !after.querySelector('img');
+            const p = blank ? after : document.createElement('p');
+            if (!blank) pre.after(p);
             if (!pre.textContent.length) pre.remove();
             caretIn(p, 0);
             return;
@@ -1941,7 +2310,14 @@
         if (holder.tagName === 'HR') { caretIn(next, 0); return; }
 
         // A finished ``` line opens the code block
-        if (holder.tagName === 'PRE') { next.remove(); caretIn(holder, 0); return; }
+        // (its text in a <code>, the shape a code block read from markdown has)
+        if (holder.tagName === 'PRE') {
+            next.remove();
+            let code = holder.querySelector(':scope > code');
+            if (!code) { code = document.createElement('code'); code.append(...holder.childNodes); holder.appendChild(code); }
+            caretIn(code, 0);
+            return;
+        }
 
         if (holder.tagName === 'LI') {
             const item = next.tagName === 'LI' ? next : retagBlock(next, 'li');
@@ -1972,16 +2348,16 @@
         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;
+        const html = area.innerHTML, all = allKey(area);
         // 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) {
+        if (h.stack[h.at] && h.stack[h.at].html === html && h.stack[h.at].all === all) {
             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) });
+        h.stack.push({ html, caret: offsetIn(area), all });
         if (h.stack.length > HISTORY_CAP) h.stack.shift();
         h.at = h.stack.length - 1;
     }
@@ -2003,12 +2379,14 @@
     function step(area, by) {
         const h = area._history; if (!h) return;
         // 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);
+        if (h.timer || !h.stack[h.at] || h.stack[h.at].html !== area.innerHTML || h.stack[h.at].all !== allKey(area)) record(area);
         const next = h.at + by;
         if (next < 0 || next >= h.stack.length) return;
         h.at = next; h.restoring = true;
         const entry = h.stack[next];
         area.innerHTML = entry.html;
+        // .all styles are steps too
+        if (entry.all != null && entry.all !== allKey(area)) { setAllStyle(area, JSON.parse(entry.all)); area.dispatchEvent(new CustomEvent('rich-text:all', { bubbles: true, detail: allStyle(area) })); }
         if (area._rt && area._rt.settle) { area._rt.settle(); entry.html = area.innerHTML; }
         area.focus();
         caretIn(area, by < 0 && entry.before != null ? entry.before : entry.caret);
@@ -2142,8 +2520,10 @@
         }
         if (!allows(area, id, ctrl)) return;
         if (all) {
+            record(area);
             area.style.setProperty(ALL_VARS[id], id === 'size' ? px(arg) : arg);
             if (!arg) area.style.removeProperty(ALL_VARS[id]);
+            record(area);
             area.dispatchEvent(new CustomEvent('rich-text:all', { bubbles: true, detail: allStyle(area) }));
             sync();
             return;
@@ -2151,7 +2531,12 @@
         const arming = INLINE_TAGS[id] && !hasSelection();
         if (arming) { spec.run(arg, area); sync(); return; }
         if (!spec.history) record(area);
+        const before = textSpan(area);
         spec.run(arg, area);
+        // A command that rebuilt the blocks under the selection (a block style) leaves it where it was
+        const after = range();
+        if (before && before[1] > before[0] && (!after || !area.contains(after.startContainer) || after.collapsed)) selectSpan(area, before);
+        mergeAdjacent(area);
         normalizeLists(area);
         if (!spec.history) record(area);
         saveRange(area);
@@ -2159,8 +2544,45 @@
         sync();
     }
 
+    // $rich's reads (value, selection, can, active, …) depend on one reactive beat, bumped
+    // (once a microtask) whenever the selection, value or formatting may have changed
+    let pulse = null, beating = false;
+    const watch = () => { if (pulse) void pulse.n; };
+    // Bumped only when what $rich reports changed, so an effect that reads and writes it settles
+    let lastSurface = null;
+    const selKey = (x) => x ? [x.collapsed, x.text, x.x, x.y, x.width, x.height].join() : '';
+    const surface = () => [...areas].map(a => [a === lastFocused, a === lastFocused ? String(textSpan(a)) : '', a.innerHTML, allKey(a), selKey(a._selection), a._pending ? [...a._pending.tags].join() : ''].join('\u0001')).join('\u0002');
+    const beat = () => {
+        if (!pulse || beating) return;
+        beating = true;
+        queueMicrotask(() => { beating = false; const now = surface(); if (now === lastSurface) return; lastSurface = now; pulse.n++; });
+    };
+
+    // Any CSS colour (oklch(), a name, rgb()) as #rrggbb, read off a canvas pixel; null when it cannot be
+    let colorCanvas = null;
+    const hexCache = new Map();
+    function hexColor(v) {
+        if (v == null || v === '') return null;
+        const s = String(v).trim();
+        if (/^#[0-9a-f]{6}$/i.test(s)) return s.toLowerCase();
+        if (hexCache.has(s)) return hexCache.get(s);
+        let out = null;
+        try {
+            colorCanvas = colorCanvas || document.createElement('canvas');
+            const g = colorCanvas.getContext && colorCanvas.getContext('2d', { willReadFrequently: true });
+            if (g) {
+                g.clearRect(0, 0, 1, 1); g.fillStyle = '#000'; g.fillStyle = s; g.fillRect(0, 0, 1, 1);
+                const [r, gr, b] = g.getImageData(0, 0, 1, 1).data;
+                out = '#' + [r, gr, b].map(x => x.toString(16).padStart(2, '0')).join('');
+            }
+        } catch { out = null; }
+        hexCache.set(s, out);
+        return out;
+    }
+
     // Reflect caret state onto every control
     function sync() {
+        beat();
         controls.forEach(c => {
             const cfg = c._rt, area = resolve(c);
             const usable = !!area && allows(area, cfg.id, cfg);
@@ -2171,9 +2593,10 @@
             c.setAttribute('aria-disabled', String(!usable));
             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
+                // Never blank a <select> with a value it doesn't offer; a colour input takes #rrggbb only
                 const offered = c.tagName !== 'SELECT' || [...c.options].some(o => o.value === v);
-                if (v != null && offered && c.value !== v) c.value = v;
+                const val = c.type === 'color' ? hexColor(v) : v;
+                if (val != null && offered && c.value !== val) c.value = val;
             }
             if (c.tagName === 'BUTTON') c.setAttribute('aria-pressed', String(c.hasAttribute('data-rich-text-active')));
         });
@@ -2235,6 +2658,7 @@
         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', '{}');
+        if (Alpine.reactive && !pulse) pulse = Alpine.reactive({ n: 0 });
         listen();
 
         Alpine.directive('rich-text', (el, { expression, modifiers }, { effect, evaluateLater, evaluate, cleanup }) => {
@@ -2252,20 +2676,37 @@
         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
+        // Unresolved, it depends on the beat, so it resolves once a field is there
         const richMagic = (el) => {
-            const own = el.closest('[data-rich-text]');
-            const a = own && areas.has(own) ? own : resolve(el);
+            const a = fieldFor(el);
+            if (!a) watch();
             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);
+        if (window.__manifestRichStub) setTimeout(() => { flushStubWrites(); window.__manifestRichStub.v++; }, 0);
 
         adopt();
     }
 
+    // $rich's field for an element: the one it sits in, else the one controls would resolve to
+    const fieldFor = (el) => { const own = el.closest('[data-rich-text]'); return own && areas.has(own) ? own : resolve(el); };
+    // Writes made on the loader's stand-in ($rich.value = … before Rich Text arrived) land on
+    // their element's field once it exists
+    function flushStubWrites() {
+        const w = window.__manifestRichStubWrites; if (!w || !w.length) return;
+        for (let i = 0; i < w.length;) {
+            const [ref, k, v] = w[i], el = ref && typeof ref.deref === 'function' ? ref.deref() : ref;
+            if (!el || !el.isConnected) { w.splice(i, 1); continue; }
+            const a = fieldFor(el);
+            if (!a) { i++; continue; }
+            w.splice(i, 1);
+            try { a._rt.api[k] = v; } catch { }
+        }
+    }
+
     // 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() {
@@ -2318,12 +2759,40 @@
         t.style.setProperty('--rich-text-selection-center', px(shape.x + shape.width / 2));
     }
 
+    // While a field holds a selection, scrolling and resizing re-report its geometry (once a frame)
+    let tracked = null, trackFrame = 0;
+    const untrack = () => {
+        if (!tracked) return;
+        tracked = null;
+        window.removeEventListener('scroll', follow, { capture: true });
+        window.removeEventListener('resize', follow);
+    };
+    function follow() {
+        if (trackFrame) return;
+        trackFrame = requestAnimationFrame(() => {
+            trackFrame = 0;
+            const area = tracked, shape = area && area.isConnected ? selectionOf(area) : null;
+            if (!shape || shape.collapsed) return untrack();
+            report(area);
+        });
+    }
+    function track(area, on) {
+        if (!on) { if (tracked === area) untrack(); return; }
+        if (!tracked) {
+            window.addEventListener('scroll', follow, { capture: true, passive: true });
+            window.addEventListener('resize', follow, { passive: true });
+        }
+        tracked = area;
+    }
+
     function report(area) {
         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;
+        beat();
+        track(area, !!shape && !shape.collapsed);
         place(area, shape);
         area.toggleAttribute('data-rich-text-selected', !!shape && !shape.collapsed);
         document.documentElement.toggleAttribute('data-rich-text-selected', !!shape && !shape.collapsed);
@@ -2335,29 +2804,10 @@
         el._rtMenu = true;
         if (!el.hasAttribute('popover')) el.setAttribute('popover', 'manual');
         el.setAttribute('data-rich-text-menu', '');
-        let shown = null, frame = 0;
-        const follow = () => {
-            if (frame) return;
-            frame = requestAnimationFrame(() => { frame = 0; if (shown && shown.isConnected) place(shown, selectionOf(shown)); });
-        };
-        const track = (area) => {
-            if (!shown) {
-                window.addEventListener('scroll', follow, { capture: true, passive: true });
-                window.addEventListener('resize', follow, { passive: true });
-            }
-            shown = area;
-        };
-        const untrack = () => {
-            if (!shown) return;
-            shown = null;
-            window.removeEventListener('scroll', follow, { capture: true });
-            window.removeEventListener('resize', follow);
-        };
         const onSel = (e) => {
             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();
             try {
                 if (want && !el.matches(':popover-open')) el.showPopover();
                 if (!want && el.matches(':popover-open')) el.hidePopover();
@@ -2366,7 +2816,6 @@
         document.addEventListener('rich-text:selection', onSel);
         cleanup(() => {
             document.removeEventListener('rich-text:selection', onSel);
-            untrack(); if (frame) cancelAnimationFrame(frame);
             try { el.hidePopover(); } catch { }
         });
     }
@@ -2523,8 +2972,8 @@
             }
         }
 
-        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; };
+        el._history = { stack: [{ html: el.innerHTML, caret: 0, all: allKey(el) }], at: 0, timer: null, restoring: false };
+        const resetHistory = () => { clearTimeout(el._history.timer); el._history.timer = null; el._history.stack = [{ html: el.innerHTML, caret: 0, all: allKey(el) }]; el._history.at = 0; };
 
         // Empty flag for the placeholder; a wiped document restarts as a paragraph
         function settle() {
@@ -2544,7 +2993,9 @@
             if (el.querySelector('table')) normalizeTables(el);
             if (format !== 'plain') looseInline(el);
             ensureTrailingBlock(el);
-            if (!el.textContent.trim() && !el.querySelector('img, table, hr')) {
+            // A code block just opened (``` + Enter) holds the caret: it stays
+            const r = range(), first = el.firstElementChild, opened = !!first && first.tagName === 'PRE' && !!r && first.contains(r.startContainer);
+            if (!opened && !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-rich-text-empty', true);
@@ -2555,6 +3006,8 @@
             writing = true; write(v); writing = false;
             resetHistory();
             settle();
+            el._selection = selectionOf(el);
+            sync();
         };
 
         const lineBreak = () => { record(el); insertBreak(el); record(el); el.dispatchEvent(new Event('input', { bubbles: true })); };
@@ -2608,7 +3061,7 @@
         on('input', (e) => {
             // Mid-composition the IME owns the text
             if (!writing && e.data && !e.isComposing) {
-                if (applyPending(el, e.data)) commit();
+                if (applyPending(el, e.data)) { mergeAdjacent(el); commit(); }
                 if (leaveMark(el, e.data)) commit();
                 if (autoformat && convertInlineAtCaret(el)) commit();
             }
@@ -2622,6 +3075,8 @@
         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(); }
+            // A closing marker committed through an IME converts as a typed one does
+            else if (!writing && autoformat && e.data && /[*_~`)]$/.test(e.data) && convertInlineAtCaret(el)) { commit(); sync(); }
             if (!writing) relaxSpaces(el);
         });
         on('change', e => {
@@ -2762,7 +3217,7 @@
         });
 
         const api = {
-            get value() { return read(); },
+            get value() { watch(); return read(); },
             // The value it already holds keeps the markup and caret; history restarts either way
             set value(v) {
                 if (v !== read()) write(v);
@@ -2772,15 +3227,25 @@
                 el.dispatchEvent(new Event('input', { bubbles: true }));
                 el._history.restoring = false;
             },
-            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); },
+            get all() { watch(); return allStyle(el); },
+            // Page styling, not an edit: no history step (the history takes it as its baseline)
+            set all(v) {
+                if (!allStyles) return;
+                const was = allStyle(el);
+                setAllStyle(el, v);
+                const now = allStyle(el);
+                if (JSON.stringify(now) === JSON.stringify(was)) return;
+                rebaseAll(el, was, now);
+                el.dispatchEvent(new CustomEvent('rich-text:all', { bubbles: true, detail: now }));
+                sync();
+            },
+            get selection() { watch(); return el._selection || null; },
+            get link() { watch(); return linkHref(); },
+            set link(v) { if ((v == null ? '' : String(v)) === (linkHref() || '')) return; run(el, 'a', v); },
             focus: () => el.focus(),
             run: (id, arg) => run(el, id, arg),
-            active: (id) => allows(el, id) && COMMANDS[id].active(undefined, el),
-            can: (id) => allows(el, id),
+            active: (id) => { watch(); return allows(el, id) && COMMANDS[id].active(undefined, el); },
+            can: (id) => { watch(); return allows(el, id); },
             selectAll: () => { el.focus(); selectNode(el); saveRange(el); sync(); },
             // 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; },
@@ -2792,12 +3257,14 @@
 
         el._rt = { format, inline: single, breaks: lines, noAll: !allStyles, api, settle };
         areas.add(el);
+        if (window.__manifestRichStubWrites && window.__manifestRichStubWrites.length) setTimeout(flushStubWrites, 0);
         settle();
-        el._history.stack[0].html = el.innerHTML;
+        el._history.stack[0].html = el.innerHTML; el._history.stack[0].all = allKey(el);
         setTimeout(sync, 0);
 
         const destroy = () => {
             if (!areas.has(el)) return;
+            if (tracked === el) untrack();
             ac.abort();
             clearTimeout(el._history && el._history.timer);
             if (lastFocused === el) release(el);