mnfst 0.5.220 → 0.5.222

package/lib/manifest.text.edit.css

@@ -9,13 +9,9 @@
 @layer components {
 
     :where([data-text-edit]) {
-        min-height: var(--text-edit-min-height, 8rem);
-        max-height: var(--text-edit-max-height, none);
+        position: relative;
         overflow-y: auto;
-        padding: var(--text-edit-padding, 0.75rem);
-        background: var(--text-edit-background, var(--color-surface-1));
-        border: 1px solid var(--color-line);
-        border-radius: var(--radius);
+        max-height: var(--text-edit-max-height, none);
         outline: none;
 
         /* Page-level styling — set by .page controls, read back by $text.page.
@@ -26,19 +22,45 @@
         text-align: var(--text-edit-align, start);
         color: var(--text-edit-color, inherit);
 
-        &:focus {
-            border-color: var(--color-content-subtle);
-        }
-
         /* Flagged from script: :empty never matches the <br> a contenteditable
-           keeps, and the tag holding it is not predictable after a wipe. */
+           keeps, and the tag holding it is not predictable after a wipe. The
+           placeholder OVERLAYS the first line (it is not a line of its own), so
+           the caret sits on top of it and nothing jumps when typing starts. */
         &[data-text-edit-empty]::before {
             content: attr(placeholder);
+            position: absolute;
+            inset-block-start: var(--text-edit-padding, 0.75rem);
+            inset-inline: var(--text-edit-padding, 0.75rem);
             color: var(--color-content-subtle);
             pointer-events: none;
         }
     }
 
+    /* An unstyled area has no field padding, so its placeholder hugs the line. */
+    :where([data-text-edit].unstyle)[data-text-edit-empty]::before {
+        inset-block-start: 0;
+        inset-inline: 0;
+    }
+
+    /* The FIELD look. `.unstyle` drops it so an area can sit seamlessly in a
+       page — a WYSIWYG document inherits its element's own type and colours;
+       everything above (caret custody, placeholder, commands) still works. */
+    :where([data-text-edit]:not(.unstyle)) {
+        min-height: var(--text-edit-min-height, 8rem);
+        padding: var(--text-edit-padding, 0.75rem);
+        background: var(--text-edit-background, var(--color-surface-1));
+        border: 1px solid var(--color-line);
+        border-radius: var(--radius);
+
+        /* Held while the area owns the editing session — a <select> or colour
+           control takes NATIVE focus by design, and the ring must not flicker
+           off while the writer is mid-command. */
+        &:focus,
+        &[data-text-edit-focused] {
+            border-color: var(--color-content-subtle);
+        }
+    }
+
     /* ---- Selection menu (x-text-edit-menu) ----
        Positioned by the --text-edit-selection-* variables the plugin writes to
        :root, so the default needs no script; restyle or reposition freely. */
@@ -49,7 +71,6 @@
         left: var(--text-edit-selection-center);
         top: var(--text-edit-selection-y);
         transform: translate(-50%, calc(-100% - 0.5rem));
-        display: flex;
         gap: 0.25rem;
         align-items: center;
         padding: 0.25rem;
@@ -59,6 +80,13 @@
         box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
     }
 
+    /* display only while OPEN: an author display on the base rule would beat
+       the UA's closed-popover display:none, leaving the menu floating fixed
+       over the page before any selection exists. */
+    :where([data-text-edit-menu]:popover-open) {
+        display: flex;
+    }
+
     /* Without the Popover API the attribute is inert and the menu would render
        permanently fixed on the page — hide it there; the bubble is progressive
        enhancement. (In supporting browsers a closed popover is hidden natively.) */

package/lib/manifest.text.edit.js

@@ -389,15 +389,34 @@
        Swapping the element outright covers every block tag, where formatBlock only
        accepts a short list and disagrees between engines. */
     function setBlock(tag) {
-        const b = blockEl(); if (!b) return;
+        let b = blockEl(); if (!b) return;
         const want = (b.tagName === tag.toUpperCase() ? 'p' : tag).toLowerCase();
         if (b.tagName === want.toUpperCase()) return;
+        // A heading or quote cannot live inside a list — markdown has no
+        // <ul><h2> — so lift the item out of its list first, then retag.
+        // Retagging in place serialized to nothing: the content vanished.
+        // A NESTED item outdents to the top level first, or the lift would
+        // land the new block inside the outer <li>.
+        if (b.tagName === 'LI' && want !== 'li') {
+            const area = b.closest('[data-text-edit]');
+            for (let guard = 0; guard < 8; guard++) {
+                const list = b && b.tagName === 'LI' && b.closest('ul, ol');
+                if (!list || !list.parentElement || !list.parentElement.closest('li')) break;
+                indent(-1, area);
+                b = blockEl(); if (!b) return;
+            }
+            if (b.tagName === 'LI') { unwrapItem(b); b = blockEl(); if (!b) return; }
+            if (b.tagName === want.toUpperCase()) return;
+        }
         const n = document.createElement(want);
         n.setAttribute('style', b.getAttribute('style') || '');
         if (!n.getAttribute('style')) n.removeAttribute('style');
         const off = offsetIn(b);
         while (b.firstChild) n.appendChild(b.firstChild);
         b.replaceWith(n);
+        // A sublist that rode along out of a list item cannot live inside a
+        // heading or quote — it steps out right after the new block.
+        [...n.querySelectorAll(':scope > ul, :scope > ol')].reverse().forEach(l => n.after(l));
         caretIn(n, off);
     }
 
@@ -1641,6 +1660,7 @@
         const was = area || lastFocused;
         if (!area || area === lastFocused) lastFocused = null;
         if (!was) return;
+        was.removeAttribute('data-text-edit-focused');
         was._selection = null;
         was.removeAttribute('data-text-edit-selected');
         document.documentElement.removeAttribute('data-text-edit-selected');
@@ -1697,6 +1717,13 @@
         const spec = COMMANDS[id], cfg = area && area._te;
         if (!spec || !cfg || cfg.mode === 'plain') return false;
         const page = !!(ctrl && ctrl.page && spec.page);
+        // The writer's caret is visibly in ANOTHER editable element (a plain
+        // x-edit leaf, an input, someone else's contenteditable): acting now
+        // would restore this area's old saved range and edit text the writer
+        // can see is not selected. The control goes quiet instead. Page
+        // commands write variables, never the selection — they stay live.
+        const live = range();
+        if (!page && live && !area.contains(live.startContainer) && editableElsewhere(live.startContainer)) return false;
         if (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
@@ -1710,6 +1737,13 @@
         const spec = COMMANDS[id]; if (!spec) return;
         const page = !!(ctrl && ctrl.page && spec.page);
         if (!page) {
+            // Checked BEFORE restoring the saved range: if the writer's caret is
+            // visibly in another editable element, restoring first would move the
+            // selection back here and the command would edit text the writer can
+            // see is not selected. (The reset blocks pointer clicks on disabled
+            // controls; this covers keyboard activation.)
+            const live = range();
+            if (live && !area.contains(live.startContainer) && editableElsewhere(live.startContainer)) return;
             restoreRange(area);
             // If the caret could not be put in this area — it was never focused, or
             // the saved range has gone stale — do nothing. Running anyway rewrites
@@ -2064,7 +2098,7 @@
             if (a && el.contains(a)) e.preventDefault();
         });
 
-        el.addEventListener('focusin', () => { lastFocused = el; sync(); });
+        el.addEventListener('focusin', () => { if (lastFocused && lastFocused !== el) release(lastFocused); lastFocused = el; el.setAttribute('data-text-edit-focused', ''); 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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.220",
+    "version": "0.5.222",
     "private": false,
     "workspaces": [
         "templates/starter",