mnfst 0.5.229 → 0.5.231

package/lib/manifest.text.edit.js

@@ -2,7 +2,7 @@
 
    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.bold>. Controls need no wrapper and
+   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.
 
@@ -33,8 +33,24 @@
     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']);
 
+    /* ---- 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. */
+    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));
+    }
+
     /* ---- HTML → Markdown ---- */
-    const esc = (t) => t.replace(/([\\`*_[\]])/g, '\\$1');
+    // < > 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 mdUrl = (u) => u.replace(/[\s()<>]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase().padStart(2, '0')).replace(ENTITY, '\\&');
 
     function inline(node) {
         let out = '';
@@ -43,8 +59,8 @@
             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 ? `![${n.getAttribute('alt') || ''}](${src})` : ''; return; }
-            if (tag === 'A') { const h = n.getAttribute('href') || ''; out += h ? `[${inline(n)}](${h})` : inline(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);
@@ -65,6 +81,7 @@
         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 === 'UL' || tag === 'OL') {
             const pad = '    '.repeat(depth);
             return [...node.children].filter(li => li.tagName === 'LI').map((li, i) => {
@@ -95,8 +112,41 @@
 
     const toMarkdown = (root) => blocks(root, 0).replace(/\n{3,}/g, '\n\n').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. */
+    const CELL_SEP = ' · ';
+    const tableLines = (table) => [...table.rows].map(r => [...r.cells])
+        .filter(cells => cells.some(c => c.textContent.trim() || c.querySelector('img')));
+
+    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.normalize();
+                    const a = cell.firstChild, z = cell.lastChild;
+                    if (a && a.nodeType === 3) a.nodeValue = a.nodeValue.replace(/^\s+/, '');
+                    if (z && z.nodeType === 3) z.nodeValue = z.nodeValue.replace(/\s+$/, '');
+                    if (j) line.appendChild(document.createTextNode(CELL_SEP));
+                    while (cell.firstChild) line.appendChild(cell.firstChild);
+                });
+                if (blocks) frag.appendChild(line);
+            });
+            table.replaceWith(frag);
+        });
+        return t.innerHTML;
+    }
+
     /* ---- Markdown → HTML ---- */
-    const escHtml = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    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.
@@ -104,13 +154,13 @@
     function inlineHtml(s) {
         const held = [];
         return escHtml(s)
-            .replace(/\\([\\`*_~[\]])/g, (_, c) => HOLD + (held.push(c) - 1) + HOLD)
+            .replace(/\\(&lt;|&gt;|&amp;|[\\`*_~[\]])/g, (_, c) => HOLD + (held.push(c) - 1) + HOLD)
             .replace(/`([^`]+)`/g, (_, c) => `<code>${c}</code>`)
             .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
             .replace(/~~([^~]+)~~/g, '<s>$1</s>')
             .replace(/(^|[^*])\*([^*\n]+)\*/g, '$1<em>$2</em>')
-            .replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (_, alt, src) => /^\s*javascript:/i.test(src) ? '' : `<img src="${src}" alt="${alt}">`)
-            .replace(/\[([^\]]*)\]\(([^)\s]+)\)/g, (_, t, h) => /^\s*javascript:/i.test(h) ? t : `<a href="${h}">${t}</a>`)
+            .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]);
     }
@@ -189,8 +239,8 @@
             if (!ok.has(c.tagName)) return c.replaceWith(...c.childNodes);
             [...c.attributes].forEach(a => {
                 const n = a.name.toLowerCase();
-                if (c.tagName === 'A' && n === 'href' && !/^\s*javascript:/i.test(a.value)) return;
-                if (c.tagName === 'IMG' && (n === 'src' || n === 'alt') && !/^\s*javascript:/i.test(a.value)) return;
+                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;
@@ -202,6 +252,9 @@
         return t.innerHTML;
     }
 
+    // Markdown → HTML bound for the DOM: always through the sanitizer.
+    const markdownHtml = (md) => sanitize(fromMarkdown(md), true);
+
     /* ---- Selection primitives ---- */
     const sel = () => window.getSelection();
     const range = () => { const s = sel(); return s && s.rangeCount ? s.getRangeAt(0) : null; };
@@ -1037,7 +1090,7 @@
     // 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.
     function normalizeUrl(url) {
-        if (/\s/.test(url) || /^\s*javascript:/i.test(url)) return null;
+        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;
@@ -1051,13 +1104,38 @@
         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="${url}">${url}</a>`);   // nothing selected — drop the URL in as its own link
+        else insertHTML(`<a href="${escHtml(url)}">${escHtml(url)}</a>`);   // nothing selected — drop the URL in as its own link
     }
     const linkHref = () => { const a = ancestor('a'); return a ? a.getAttribute('href') || '' : ''; };
 
     /* ---- Insertions ---- */
     function insertHTML(html) { document.execCommand('insertHTML', false, html); }
-    const insertImage = (src, alt) => { if (src && !/^\s*javascript:/i.test(src)) insertHTML(`<img src="${src}" alt="${alt || ''}">`); };
+
+    // .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.
+    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;
+        record(area);
+        r.deleteContents();
+        r.insertNode(frag);
+        const s = sel(), nr = document.createRange();
+        nr.setStartAfter(end); nr.collapse(true);
+        s.removeAllRanges(); s.addRange(nr);
+        record(area);
+        area.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    const insertImage = (src, alt) => { if (src && !unsafeUrl(src, true)) insertHTML(`<img src="${escHtml(src)}" alt="${escHtml(alt || '')}">`); };
 
     function insertTable(spec) {
         // A table dropped at a caret that is already in a table would nest a grid
@@ -1176,8 +1254,9 @@
         leading: { page: 1, block: 1, run: (v) => styleBlock('lineHeight', v), active: () => false, reflect: () => readBlockStyle('lineHeight') },
 
         clear: { md: 1, run: clearFormatting, active: () => false },
-        undo: { md: 1, history: 1, run: (v, area) => step(area, -1), active: () => false, enabled: (a) => a._history.at > 0 },
-        redo: { md: 1, history: 1, run: (v, area) => step(area, 1), active: () => false, enabled: (a) => a._history.at < a._history.stack.length - 1 },
+        // 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() }
     });
 
@@ -1247,6 +1326,29 @@
 
     const MODES = new Set(['html', 'plain', 'minimal', 'literal', 'autofocus']);
 
+    // Nearest command for an unknown modifier, for the 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'
+    };
+    function suggest(m) {
+        if (!m) return ' — name a command, e.g. .strong';
+        const dist = (a, b) => {
+            const d = Array.from({ length: a.length + 1 }, (_, i) => [i]);
+            for (let j = 1; j <= b.length; j++) d[0][j] = j;
+            for (let i = 1; i <= a.length; i++) for (let j = 1; j <= b.length; j++)
+                d[i][j] = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+            return d[a.length][b.length];
+        };
+        let hit = HINTS[m.toLowerCase()];
+        if (!hit) {
+            const [best] = Object.keys(COMMANDS).map(c => [c, dist(m.toLowerCase(), c)]).sort((x, y) => x[1] - y[1]);
+            if (best && best[1] <= Math.min(2, m.length - 1)) hit = best[0];
+        }
+        return hit ? ` — did you mean .${hit}?` : '';
+    }
+
     /* ---- 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
@@ -1276,7 +1378,6 @@
         { re: /!\[([^\]]*)\]\(([^)\s]+)\)/, tag: 'img', alt: 1, src: 2 },
         { re: /\[([^\]]+)\]\(([^)\s]+)\)/, tag: 'a', href: 2 }
     ];
-    const unsafe = (url) => /^\s*javascript:/i.test(url || '');
 
     function retagBlock(b, tag) {
         const n = document.createElement(tag);
@@ -1316,12 +1417,12 @@
     function inlineEl(rule, m) {
         const el = document.createElement(rule.tag);
         if (rule.tag === 'img') {
-            if (unsafe(m[rule.src])) return null;
+            if (unsafeUrl(m[rule.src], true)) return null;
             el.setAttribute('src', m[rule.src]); el.setAttribute('alt', m[rule.alt] || '');
             return el;
         }
         el.textContent = m[rule.content || 1];
-        if (rule.href) { if (unsafe(m[rule.href])) return null; el.setAttribute('href', m[rule.href]); }
+        if (rule.href) { if (unsafeUrl(m[rule.href])) return null; el.setAttribute('href', m[rule.href]); }
         return el;
     }
 
@@ -1374,10 +1475,32 @@
         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;
         record(area);
         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.
+    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;
+        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);
+        return true;
+    }
+
     function convertInline(root) {
         const nodes = [];
         const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
@@ -1617,8 +1740,9 @@
         area.innerHTML = h.stack[next].html;
         area.focus();
         caretIn(area, h.stack[next].caret);
-        h.restoring = false;
+        saveRange(area);
         area.dispatchEvent(new Event('input', { bubbles: true }));
+        h.restoring = false;                            // after the event, so it records nothing
     }
 
     /* ---- Registry + resolution ----
@@ -1680,9 +1804,10 @@
         return !!control && resolve(control) === area;
     }
 
+    const TEXTLESS = /^(checkbox|radio|button|submit|reset|range|color|file|image|hidden)$/i;
     const editableElsewhere = (node) => {
         const el = elementAt(node);
-        return !!el && (el.isContentEditable || /^(INPUT|TEXTAREA)$/.test(el.tagName));
+        return !!el && (el.isContentEditable || el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && !TEXTLESS.test(el.type)));
     };
 
     function unambiguous(found) {
@@ -1700,6 +1825,8 @@
         if (r && area.contains(r.startContainer)) area._range = r.cloneRange();
     }
 
+    const forget = (keep) => areas.forEach(a => { if (!keep || !a.contains(keep)) a._range = null; });
+
     function restoreRange(area) {
         const r = range();
         if (r && area.contains(r.startContainer)) return;
@@ -1715,7 +1842,7 @@
     // write something the next save would drop, it reports itself unavailable.
     function allows(area, id, ctrl) {
         const spec = COMMANDS[id], cfg = area && area._te;
-        if (!spec || !cfg || cfg.mode === 'plain') return false;
+        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
@@ -1724,9 +1851,13 @@
         // 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.
+        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;
@@ -1767,7 +1898,7 @@
         normalizeLists(area);
         if (!spec.history) record(area);
         saveRange(area);
-        area.dispatchEvent(new Event('input', { bubbles: true }));
+        if (!spec.history) area.dispatchEvent(new Event('input', { bubbles: true }));   // step fires its own
         sync();
     }
 
@@ -1802,8 +1933,14 @@
 
         Alpine.directive('text-edit', (el, { expression, modifiers }, { effect, evaluateLater, evaluate, cleanup }) => {
             const id = modifiers.find(m => COMMANDS[m]);
-            return id ? control(el, id, modifiers, expression, evaluate, cleanup)
-                : area(el, modifiers, expression, { effect, evaluateLater, cleanup });
+            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,
@@ -1838,7 +1975,7 @@
                 if (lastFocused && lastFocused !== a) release(lastFocused);   // the one being left owes a null
                 saveRange(a); lastFocused = a; report(a);
             }
-            else if (lastFocused && editableElsewhere(r.startContainer)) release();
+            else if (editableElsewhere(r.startContainer)) { forget(); if (lastFocused) release(); }
             sync();
         });
 
@@ -1850,9 +1987,13 @@
         document.addEventListener('focusin', (e) => {
             const t = e.target;
             if (!t || !t.closest) return;
-            if (t.closest('[data-text-edit]') || t.closest('[data-text-edit-control]')) return;
-            if (!lastFocused) return;
-            release();
+            if (t.closest('[data-text-edit-control]')) return;
+            // Writing somewhere else: no area's old caret may be restored by a later click.
+            const elsewhere = editableElsewhere(t);
+            if (elsewhere) forget(t);
+            if (t.closest('[data-text-edit]')) return;
+            if (!lastFocused && !elsewhere) return;
+            if (lastFocused) release();
             sync();
         }, true);
     }
@@ -1881,27 +2022,31 @@
         selectedCells().forEach(c => c.setAttribute('data-text-edit-cell', ''));
     }
 
-    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;
+    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.
-        const targets = [area, document.documentElement];
-        if (shape && !shape.collapsed) targets.forEach(t => {
+        [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));
         });
+    }
+
+    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 }));
@@ -1913,17 +2058,41 @@
     function selectionMenu(el, cleanup) {
         if (!el.hasAttribute('popover')) el.setAttribute('popover', 'manual');
         el.setAttribute('data-text-edit-menu', '');
+        // Follow the selection through scrolling and resizing while shown.
+        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-text-edit]');
             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();
             } catch { }
         };
         document.addEventListener('text-edit:selection', onSel);
-        cleanup(() => { document.removeEventListener('text-edit:selection', onSel); try { el.hidePopover(); } catch { } });
+        cleanup(() => {
+            document.removeEventListener('text-edit:selection', onSel);
+            untrack(); if (frame) cancelAnimationFrame(frame);
+            try { el.hidePopover(); } catch { }
+        });
     }
 
     function control(el, id, modifiers, expression, evaluate, cleanup) {
@@ -1940,6 +2109,10 @@
         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.
+        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); };
             if (el.type === 'color') {
@@ -1994,14 +2167,14 @@
     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}`));
+        modifiers.filter(m => !MODES.has(m)).forEach(m => console.warn(`[Manifest Text Edit] 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', 'true');
+        el.setAttribute('contenteditable', mode === 'plain' && PLAINTEXT_ONLY ? 'plaintext-only' : 'true');
         el.setAttribute('role', 'textbox');
         el.setAttribute('aria-multiline', 'true');
         if (minimal) el.setAttribute('data-text-edit-minimal', '');
@@ -2011,7 +2184,7 @@
                 : toMarkdown(el);
         const write = (v) => {
             if (mode === 'plain') el.textContent = v == null ? '' : String(v);
-            else el.innerHTML = mode === 'html' ? sanitize(v, true, true) : fromMarkdown(v);
+            else el.innerHTML = mode === 'html' ? sanitize(v, true, true) : markdownHtml(v);
             if (!el.childNodes.length) el.innerHTML = '<p><br></p>';
             normalizeLists(el);
             if (el.querySelector('table')) normalizeTables(el);
@@ -2098,7 +2271,7 @@
             if (a && el.contains(a)) e.preventDefault();
         });
 
-        el.addEventListener('focusin', () => { if (lastFocused && lastFocused !== el) release(lastFocused); lastFocused = el; el.setAttribute('data-text-edit-focused', ''); sync(); });
+        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) => {
             if (keeps(el, e.relatedTarget || pointerTarget)) return;
@@ -2106,10 +2279,18 @@
             sync();
         });
         el.addEventListener('input', (e) => {
-            if (!writing && e.data && applyPending(el, e.data)) { commitValue(); }
-            if (!writing && e.data && !e.isComposing && autoformat && convertInlineAtCaret(el)) { commitValue(); }
+            // Mid-composition the IME owns the text; an armed mark lands on compositionend.
+            if (!writing && e.data && !e.isComposing) {
+                if (applyPending(el, e.data)) commitValue();
+                if (leaveMark(el, e.data)) commitValue();
+                if (autoformat && convertInlineAtCaret(el)) commitValue();
+            }
+            if (!writing) recordSoon(el);                   // before sync, so Undo lights up now
             settle(); sync();
         });
+        el.addEventListener('compositionend', (e) => {
+            if (!writing && e.data && applyPending(el, e.data)) { commitValue(); sync(); }
+        });
         el.addEventListener('change', e => {
             if (e.target.type !== 'checkbox') return;
             // Clicking sets the property; only the attribute survives serialization.
@@ -2120,13 +2301,26 @@
 
         // A finished line resolves to what its markdown described, unless .literal.
         const autoformat = mode !== 'plain' && !modifiers.includes('literal');
-        el.addEventListener('input', () => {
-            if (writing) return;
-            recordSoon(el);
+        el.addEventListener('input', (e) => {
+            if (writing || e.isComposing) return;
             if (ancestor('li')) normalizeLists(el);        // Backspace reshapes lists too
         });
 
+        // Native undo (Edit menu, context menu, shake) would desync the plugin's stack.
+        el.addEventListener('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();
+        });
+
+        el.addEventListener('pointerdown', () => { el._exit = null; });
+
         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') {
@@ -2179,21 +2373,22 @@
             // now (including our own docs) — links go through an `a` control.
             if (!(e.metaKey || e.ctrlKey)) return;
             const id = { b: 'strong', i: 'em', u: 'u' }[e.key.toLowerCase()];
-            if (!id || !allows(el, id)) return;
+            if (!id) return;
+            // Never the browser's own formatting: it would look applied and not be stored.
             e.preventDefault();
-            run(el, id);
+            if (allows(el, id)) run(el, id);
         });
 
         // Paste as our own subset — never the source app's markup.
         el.addEventListener('paste', (e) => {
             e.preventDefault();
             const dt = e.clipboardData; if (!dt) return;
+            if (mode === 'plain') return insertPlain(el, dt.getData('text/plain'));
             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(mode === 'plain' ? escHtml(dt.getData('text/plain'))
-                : html ? sanitize(html, !minimal)
-                    : fromMarkdown(dt.getData('text/plain').replace(/([^\n])\n(?!\n)/g, '$1  \n')));
+            insertHTML(html ? sanitize(mode === 'markdown' || minimal ? flattenTables(html, !minimal) : html, !minimal)
+                : markdownHtml(dt.getData('text/plain').replace(/([^\n])\n(?!\n)/g, '$1  \n')));
         });
 
         const api = {
@@ -2202,7 +2397,9 @@
                 write(v);
                 el._history.stack = [{ html: el.innerHTML, caret: 0 }]; el._history.at = 0;
                 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(); },
@@ -2213,7 +2410,7 @@
             run: (id, arg) => run(el, id, arg),
             active: (id) => allows(el, id) && COMMANDS[id].active(undefined, el),
             can: (id) => allows(el, id),
-            selectAll: () => { el.focus(); selectNode(el); sync(); },
+            selectAll: () => { el.focus(); selectNode(el); saveRange(el); sync(); },
             markdown: () => toMarkdown(el),
             html: () => sanitize(el.innerHTML, true, true)
         };
@@ -2230,5 +2427,5 @@
     document.addEventListener('alpine:init', init);
     if (window.Alpine && Alpine.directive) init();
 
-    window.ManifestTextEdit = { toMarkdown, fromMarkdown, sanitize, commands: () => Object.keys(COMMANDS) };
+    window.ManifestTextEdit = { toMarkdown, fromMarkdown: markdownHtml, sanitize, commands: () => Object.keys(COMMANDS) };
 })();