u2ui 1.5.4 → 1.5.8

package/js/rte/PLAN.md

@@ -28,46 +28,25 @@ intercepting its mutations. Complete mark sets now resolve exclusions, remove
 configured values absent from an exact target, and apply their canonical result
 inside one mapped operation.
 
-The 201-test mark-algebra baseline was confirmed in current Chromium, Firefox,
-and WebKit. The 233-test pending-mark baseline passes in current Chromium,
-Firefox, and WebKitGTK through GNOME Web. The 361-test baseline was confirmed in
-Chromium, Firefox, and WebKit. The current runner adds empty list
-exit, context-aware nested-list Enter, mixed generic-block repair, the roaming
-toolbar, semantic wrapper removal, ready-made bold, the convention client with
-optional command modules and block-style values, heading-aware Enter,
-content-model-driven block merging in both deletion directions, focus
-dismissal, collapsed range geometry, and one shared structural element policy
-for normalization, commands, and toolbar choices. The current lifecycle and
-visible-break extension, sanitizing policy/native adapter, selection-only
-toolbar mode, staged Unstyle policy/command, mapped context-aware fragment
-replacement, fail-closed rich paste/drop composition, and mapped post-native
-presentation cleanup and composition-aware pending marks raise the verified
-runner to 369 tests. Complete mark-set coverage raises the current runner to
-375 tests. Nested canonical mark coverage raises the current runner to 379
-tests. Standard HTML mark coverage raises the current runner to 381 tests.
-State-based history — baseline entries, transaction-grouped recording, path
-addressed selection restoration, coalescing, branch and limit handling, and its
-commands — raises the current runner to 398 tests. Lists, their nesting levels,
-model-placed element insertion, and the standard mark and structure convention
-modules raise the current runner to 427 tests. Atomic-block deletion,
-selection-owned history commands, and the HTML source responsibility with its
-dialog module raise the current runner to 452 tests. Value marks and the
-contextual link editor raise the current runner to 470 tests. The CSS-declared
-content classes shared by the style control, the sanitizer, and presentation
-cleanup raise the current runner to 486 tests. One shared placement policy and
-its coverage raise it to 490 tests. The full remove-format ladder and
-registry-owned shortcuts raise it to 500 tests. Depth-independent wrapper
-removal, a canonical level that does something, and paste cleanup that covers
-what arrived raise it to 508 tests. The attribute policy on native imports
-and a strict import element policy raise it to 513 tests, confirmed in Chrome
-152 and Firefox 154. Import aliases raise it to 519 tests, and the table
-structure commands with their contextual handles to 538, and the image frame
-with its attribute command to 554, all of it drawn in one shadow root per
-editor; whole-content remove-format and the presence/availability rule raise it
-to 565. The playground now configures its prototype surface live from a panel
-built out of the registered modules, so every host property can be tried without
-editing the page.
-WebKit verification of that revision is pending.
+The browser runner covers every phase below: mark algebra, pending overrides
+carried through native IME composition, complete and nested canonical mark sets,
+state-based history with its commands, lists and their nesting levels,
+model-placed element insertion, the HTML source responsibility with its dialog,
+value marks and the contextual link editor, CSS-declared content classes shared
+by the style control, the sanitizer and presentation cleanup, one shared
+placement policy, the full remove-format ladder, registry-owned shortcuts, the
+attribute and element policies on imports with their aliases, the table
+structure commands and the image frame with their contextual handles, and the
+session rule that takes all of it away at once — everything the convention
+client draws in one shadow root per editor. The playground configures its
+prototype surface live from a panel built out of the registered modules, so
+every host property can be tried without editing the page.
+
+How many tests that is, the runner says itself; the number is not repeated here,
+because a number in prose is stale the moment the next test is written. A result
+is cross-browser evidence only after that exact revision has run in current
+Chromium, Firefox, and WebKit. The last such confirmation was Chrome 152 and
+Firefox 154; WebKit verification of that revision is pending.
 
 Remove-format now runs a ladder that does not stop at the application's own
 presentation: six presentation rungs in `Unstyle` (styles, presentational
@@ -97,7 +76,7 @@ allowlist, and layout ids, tracking attributes and inline styles came straight
 through. The pipeline applies `SanitizePolicy.clean()` to the nodes that
 arrived, before presentation cleanup and structural repair, so an id removed in
 the first stage is what lets the third dissolve the wrapper carrying it.
-`--u2-rte-import-attributes: keep` opts a host out.
+`--u2-rte-import-sanitize: none` opts a host out.
 
 Pasted content is now cleaned where it landed. The cleanup scope was derived
 from the caret, which sits at the *end* of a paste, so a pasted document was
@@ -127,11 +106,31 @@ content model dropped from 10.0 to 1.8 µs, the list scan from 31.4 to 21.0 µs,
 and one toolbar refresh from 490 to 437 µs. A lazy `config()` was measured and
 rejected: building eight accessor descriptors costs more than parsing the values
 eagerly.
+
+Measured again in Chrome after the host-shape work, then sampled with the CPU
+profiler over 400 keystrokes. What a keystroke costs was never normalization: a
+third of it was reading CSS the caller did not need. `Commands.model` and
+`Edit.model` narrow the content model by one property and were parsing all
+eleven, and the toolbar resolved a computed style four times per refresh. Both
+now read what they use, without a cache anywhere — the settings stay live.
+
+| | before | after |
+| --- | --- | --- |
+| `Commands.model` | 8.7 µs | 0.7 µs |
+| `commands.enabled('bold')` | 11.3 µs | 6.1 µs |
+| `Toolbar.refresh` (8 controls) | 160 µs | 120 µs |
+| one keystroke, roaming toolbar | 519 µs | 415 µs |
+
+What is left is flat: `getBoundingClientRect` for the toolbar's placement is the
+largest single item at 14% of a keystroke, then event dispatch, range cloning,
+and the model's own rules. A click inside a surface costs 8.0 µs against 6.0 µs
+for the same event outside the editor, a keydown 4.6 against 3.4, and drawing
+the saved selection 0.5 µs per selection change.
 Treat the number shown by `/u2/js/rte/tests/` as authoritative.
 
 ## 0. Foundation
 
-Status: implemented. The 106-test foundation and policy suite passed in current
+Status: implemented. The foundation and policy suite passed in current
 Chromium, Firefox, and WebKit. Later phase tests extend the same browser runner.
 
 - CSS configuration with semantic host defaults.
@@ -343,7 +342,7 @@ because a declared class is content rather than presentation.
 Status: started. The optional roaming `Toolbar` binds application-owned markup
 to the active surface's resolved command registry, reflects availability and
 boolean/mixed state, keeps saved selections across UI focus, supports simple
-Ctrl/Command shortcuts, hides after focus leaves surface and toolbar, and
+Ctrl/Command shortcuts, shows and hides with the active surface, and
 delegates placement and presentation. Application-supplied manual popovers and
 the convention toolbar now enter and leave the browser top layer with the same
 visibility contract. `--u2-rte-toolbar-when: selection` optionally requires a

package/js/rte/README.md

@@ -117,7 +117,7 @@ rte/
 │   ├── surface/           State of one editable host
 │   ├── transaction/       Atomic editing changes and dirty scopes
 │   ├── unstyle/           Shared selection and external presentation policy
-│   └── ui/                Editor chrome: toolbar, handles, placement
+│   └── ui/                Editor chrome: toolbar, handles, placement, caret
 ├── docs/                  Project-wide guides
 ├── playground/            Visual normalization, input, and mark inspection
 └── tests/                 Shared harness and cross-module browser cases

package/js/rte/playground/hosts.html

@@ -222,6 +222,23 @@
       <output></output>
     </section>
 
+    <section class=case>
+      <h3><code>&lt;button&gt; &lt;span contenteditable&gt;</code></h3>
+      <button type=button>
+        Wraps <span class=rte-host contenteditable data-name=inside-button>editable host</span>
+      </button>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;form&gt; &lt;button contenteditable&gt;</code></h3>
+      <form id=submit-form>
+        <button class=rte-host contenteditable data-name=submit-button>Editable submit button</button>
+        <output id=submit-state>not submitted</output>
+      </form>
+      <output></output>
+    </section>
+
     <section class=case>
       <h3><code>&lt;div contenteditable&gt; &lt;a&gt;</code></h3>
       <div class=rte-host contenteditable data-name=around-link>
@@ -230,6 +247,18 @@
       <output></output>
     </section>
 
+    <h2 class=group>Atomic content</h2>
+
+    <section class=case>
+      <h3><code>&lt;div contenteditable&gt;</code> with a rule, an image, and a control</h3>
+      <div class=rte-host contenteditable data-name=atomic>
+        <p>Text before the rule</p>
+        <hr>
+        <p>An image <img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Crect width='80' height='40' fill='%23bcd'/%3E%3C/svg%3E" alt="Placeholder" width=80 height=40> and a <button type=button>button</button> in the text</p>
+      </div>
+      <output></output>
+    </section>
+
     <h2 class=group>Lists</h2>
 
     <section class=case>
@@ -433,6 +462,12 @@
     import {config, rte, Source} from '../rte.js';
 
     const hosts = [...document.querySelectorAll('.rte-host')];
+    // An editable submit button: typing in it must never send the form, which is
+    // what a key and a click both mean to a button that is not editable.
+    document.querySelector('#submit-form').addEventListener('submit', event => {
+      event.preventDefault();
+      document.querySelector('#submit-state').textContent = 'submitted';
+    });
     const events = [];
     const active = document.querySelector('#active');
     const selection = document.querySelector('#selection');

package/js/rte/playground/index.html

@@ -374,6 +374,7 @@
     import '../source.js';
     import '../breaks.js';
     import '../unstyle.js';
+    import {externalInputs, NativeSanitizer} from '../rte.js';
     import {rangeRect} from '../src/browser/range-rect.js';
     import {Commands} from '../src/command/commands.js';
     import {deleteBackward, deleteForward} from '../src/command/delete.js';
@@ -395,6 +396,16 @@
     import {SelectionSnapshot} from '../src/selection/snapshot.js';
     import {Toolbar} from '../src/ui/toolbar.js';
 
+    // Taking over paste and drop is the application's call, because a sanitizer
+    // is a security boundary and the engine does not pick one. Left to the
+    // browser, an image dragged inside the text is whatever that browser decides
+    // to make of it: Firefox writes a `data:` image out as its URL, in plain
+    // text. The one shipped here needs `Element.setHTML()`, which not every
+    // engine has yet.
+    if (NativeSanitizer.supported()) {
+        conventionEditor.add(externalInputs({sanitizer: new NativeSanitizer()}));
+    }
+
     const controls = {
       scenario: document.querySelector('#scenario'),
       level: document.querySelector('#level'),

package/js/rte/run.out

@@ -0,0 +1,17 @@
+node:internal/modules/cjs/loader:1433
+  throw err;
+  ^
+
+Error: Cannot find module '/var/www/workplace/u2/js/rte/run.mjs'
+    at Function._resolveFilename (node:internal/modules/cjs/loader:1430:15)
+    at defaultResolveImpl (node:internal/modules/cjs/loader:1040:19)
+    at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1045:22)
+    at Function._load (node:internal/modules/cjs/loader:1216:25)
+    at wrapModuleLoad (node:internal/modules/cjs/loader:254:19)
+    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:171:5)
+    at node:internal/main/run_main_module:36:49 {
+  code: 'MODULE_NOT_FOUND',
+  requireStack: []
+}
+
+Node.js v22.23.2

package/js/rte/src/browser/interactive.js

@@ -0,0 +1,17 @@
+// A link, a button, or a label around an editing host — `<a><span
+// contenteditable>` — is a host shape engines answer with the element instead of
+// the text: the link is dragged rather than giving the text a caret and followed
+// when the press ends, and the label hands the press to the control it names.
+// All of it belongs to what surrounds the text, not to someone editing it.
+//
+// Only what surrounds the host is asked for: a link the content itself holds is
+// content, and what a press does to that one is the editor's own business.
+export function interactiveAround(host) {
+    return host?.closest('a[href], button, label') || null;
+}
+
+// And a button answers Space and Enter by activating itself, whatever it holds:
+// the text inside never sees those keys, and no `beforeinput` arrives at all.
+export function activatingAround(host) {
+    return host?.closest('button') || null;
+}

package/js/rte/src/client/README.md

@@ -32,7 +32,9 @@ presentation cleanup leaves alone.
 The optional `images.js` entry frames a selected image, with handles on its
 trailing edges and its alt text in a field below it. Both come and go with the
 selection and neither takes the focus by appearing, so naming an image is one
-click away and nothing has to be opened.
+click away and nothing has to be opened. The name is written as it is typed, so
+Enter has nothing to confirm: it hands the caret back to the text, after the
+image.
 
 The optional `link.js` entry adds a contextual link editor. Its `link` command
 is an ordinary `valueMark`, so any other UI can drive the same create, change,
@@ -85,12 +87,18 @@ text before they had seen the answer.
 
 `complete(text, surface)` is asked what addresses go with what is being typed and
 answers with entries `{value, label}` — or `{value, html}` for a row with markup,
-which the form writes through `setHTML()`, so the platform sanitizes it. The form
+which the form writes through `setHTML()`, so the platform sanitizes it; where an
+engine does not ship that yet, the entry shows its address instead. The form
 renders its own list rather than a native datalist, which cannot show markup: the
 arrow keys move through it, Enter takes the current entry, Escape closes the list
 before it closes the form, and a pointer does the same. One question is in flight
 at a time, and a late answer to a word that has since changed is dropped.
 
+Contextual UI goes with the editing session and comes back with it: a module
+draws on `u2-rte-activate` as well as on selection and content changes, because
+returning to the field a caret was already in is no selection change and would
+otherwise leave its handles or its form behind.
+
 Everything this client draws goes into one `Chrome`: its toolbar, the contextual
 handles, the link form, the source dialog. A module receives it as `chrome` in
 its setup context and puts its UI in `chrome.root`, so no module owns a layer, a
@@ -110,10 +118,9 @@ text flow with its top and start edges held in place, so dragging the other side
 is the only direction that grows it where the eye expects — a handle on a
 leading edge would move the picture rather than resize it. A drag moves the
 frame only and the size is written once when it is released, so a resize is one
-undo step rather than a trail of them. The module also selects an image that is
-clicked, because engines disagree about whether pointing at one does, and
-nothing is addressable until it is the selection. What is resizable is a
-selector, so any atomic element can be made sizeable.
+undo step rather than a trail of them. Selecting the image that was clicked is
+not its job: the input pipeline selects any atomic element a click lands on.
+What is resizable is a selector, so any atomic element can be made sizeable.
 
 The optional `tables.js` entry puts its actions on the table itself. Row handles
 run down the table's left edge and column handles along its top, each lined up

package/js/rte/src/client/editor.js

@@ -1,5 +1,6 @@
 import {Commands} from '../command/commands.js';
 import {deleteBackward, deleteForward} from '../command/delete.js';
+import {insertFragment} from '../command/fragment.js';
 import {enter, lineBreak} from '../command/enter.js';
 import {History} from '../history/history.js';
 import {PendingMarks} from '../command/pending-marks.js';
@@ -9,6 +10,7 @@ import {marks} from './marks.js';
 import {structure} from './structure.js';
 import {isPlainTextHost} from '../selection/ownership/ownership.js';
 import {Chrome} from '../ui/chrome.js';
+import {SelectionHighlight} from '../ui/highlight.js';
 import {place} from '../ui/place.js';
 import {Toolbar} from '../ui/toolbar.js';
 
@@ -48,6 +50,7 @@ export class Editor {
     #setups = new Map();
     #sources = new WeakMap();
     #chrome = null;
+    #highlight = null;
     #toolbar = null;
     #element = null;
     #dynamic = new Map();
@@ -85,10 +88,13 @@ export class Editor {
         if (!this.#chrome) {
             this.#chrome = new Chrome(this.#core.root, {name: 'editor'});
             this.#core.retain(this.#chrome.element);
+            // What the chrome takes the focus away from has to stay visible.
+            this.#highlight = new SelectionHighlight(this.#core);
         }
         return this.#chrome;
     }
     get toolbar() { return this.#toolbar; }
+    get highlight() { return this.#highlight; }
     get connected() { return this.#connected; }
 
     commands(surface) {
@@ -198,6 +204,8 @@ export class Editor {
         // The chrome reference is kept: its getter must not build a new one for
         // a client that is gone.
         this.#chrome?.dispose();
+        this.#highlight?.dispose();
+        this.#highlight = null;
         this.#dynamic.clear();
         this.#toolbar = null;
         this.#element = null;
@@ -222,6 +230,9 @@ export class Editor {
             enter,
             lineBreak,
             insertText: pending.insertText,
+            // Prepared content at the selection: what a host inserts itself, and
+            // what a key gets that its host answered instead of the text.
+            insert: insertFragment,
         }});
         const controller = new this.#document.defaultView.AbortController();
         const record = {surface, pending, history, commands, pipeline: null, controller, modules: new Map()};

package/js/rte/src/client/images.js

@@ -1,7 +1,8 @@
 import {elementAttributes, selectedElement} from '../command/element.js';
 import {inlineUi} from '../config/config.js';
+import {caretAfter} from '../ui/caret.js';
 import {Handles} from '../ui/handles.js';
-import {place} from '../ui/place.js';
+import {panelGap, place} from '../ui/place.js';
 
 const STYLE = `
 #image {
@@ -57,6 +58,7 @@ export function imageTools({selector = 'img', minimum = 16} = {}) {
                 minimum,
                 handles: null,
                 alt: null,
+                writing: false,
                 controller: null,
                 pending: 0,
             };
@@ -96,22 +98,10 @@ export function imageTools({selector = 'img', minimum = 16} = {}) {
             const sync = () => track(state, view, match);
             surface.addEventListener('u2-rte-selectionchange', sync, listen);
             surface.addEventListener('u2-rte-change', sync, listen);
+            // What a session's end takes away, its beginning brings back: coming
+            // back to the same selection is no selection change to hear about.
+            surface.addEventListener('u2-rte-activate', sync, listen);
             surface.addEventListener('u2-rte-deactivate', () => close(state, surface), listen);
-            // A click has to select the image itself: engines disagree about
-            // whether pointing at one does, and nothing is addressable until it
-            // is the selection.
-            surface.element.addEventListener('click', event => {
-                const element = event.composedPath()[0];
-                if (element?.nodeType !== Node.ELEMENT_NODE || !element.matches?.(selector)) return;
-                if (!surface.element.contains(element)) return;
-                const range = state.document.createRange();
-                range.selectNode(element);
-                const selection = surface.core.selection;
-                selection.removeAllRanges();
-                selection.addRange(range);
-                surface.capture();
-                sync();
-            }, listen);
             return {dispose() {
                 controller.abort();
                 close(state, surface);
@@ -127,6 +117,9 @@ export function imageTools({selector = 'img', minimum = 16} = {}) {
 export const images = imageTools();
 
 function track(state, view, match) {
+    // Not while the field is naming the image: what it says is being typed, and
+    // the attribute is only what has been typed so far.
+    if (state.writing) return;
     if (!inlineUi(view.surface.config, 'image')) return close(state, view.surface);
     const element = current(view, match);
     if (!element) return close(state, view.surface);
@@ -134,9 +127,7 @@ function track(state, view, match) {
     state.active = {view, element};
     state.handles.show();
     state.alt.hidden = false;
-    if (state.document.activeElement !== state.chrome.element) {
-        state.alt.firstElementChild.value = element.getAttribute('alt') || '';
-    }
+    state.alt.firstElementChild.value = element.getAttribute('alt') || '';
     schedule(state);
 }
 
@@ -165,12 +156,26 @@ function name(state, field) {
     const active = state.active;
     if (!active) return null;
     const caret = [field.selectionStart, field.selectionEnd];
-    active.view.commands.run('imageAlt', {value: {alt: field.value.trim()}, trigger: 'input'});
+    state.writing = true;
+    try {
+        active.view.commands.run('imageAlt', {value: {alt: field.value.trim()}, trigger: 'input'});
+    } finally {
+        state.writing = false;
+    }
     field.focus();
     field.setSelectionRange(...caret);
     return active.element;
 }
 
+function leave(state) {
+    const active = state.active;
+    if (!active) return;
+    const {element} = active;
+    const surface = active.view.surface;
+    close(state);
+    if (surface.connected) caretAfter(surface, element);
+}
+
 function schedule(state) {
     if (state.pending || !state.handles) return;
     state.pending = state.document.defaultView.requestAnimationFrame(() => {
@@ -188,7 +193,7 @@ function position(state, box = null) {
         state.handles.place(handle.name, rect.left + rect.width * handle.x, rect.top + rect.height * handle.y);
     }
     // Below the image, clear of the handles sitting on its lower edge.
-    place(state.alt, state.active.view.surface, {align: 'start', prefer: 'below', gap: 16, on: rect});
+    place(state.alt, state.active.view.surface, {align: 'start', prefer: 'below', gap: panelGap, on: rect});
 }
 
 function build(state) {
@@ -203,7 +208,12 @@ function build(state) {
     field.placeholder = 'Alt text';
     field.setAttribute('aria-label', 'Alt text');
     form.append(field);
-    form.addEventListener('submit', event => event.preventDefault());
+    // One field, so Enter submits implicitly — and with the name already
+    // written, there is nothing left to confirm: it just leaves.
+    form.addEventListener('submit', event => {
+        event.preventDefault();
+        leave(state);
+    });
     form.addEventListener('input', () => name(state, field));
     state.alt = form;
     state.handles = new Handles(state.chrome.root, {

package/js/rte/src/client/link.js

@@ -1,6 +1,7 @@
 import {inlineUi} from '../config/config.js';
 import {linkHtml} from '../mark/standard.js';
-import {place} from '../ui/place.js';
+import {caretAfter} from '../ui/caret.js';
+import {panelGap, place} from '../ui/place.js';
 import {valueMark} from '../command/mark.js';
 
 const STYLE = `
@@ -127,6 +128,9 @@ export function linkEditor({
             const listen = {signal: controller.signal};
             surface.addEventListener('u2-rte-selectionchange', () => follow(state, surface), listen);
             surface.addEventListener('u2-rte-change', () => follow(state, surface), listen);
+            // What a session's end takes away, its beginning brings back: coming
+            // back to the same selection is no selection change to hear about.
+            surface.addEventListener('u2-rte-activate', () => follow(state, surface), listen);
             surface.addEventListener('u2-rte-deactivate', () => close(state, surface), listen);
             return {dispose() {
                 controller.abort();
@@ -365,24 +369,15 @@ function write(state, value, field = null) {
     return active.element;
 }
 
-// Leaving hands the caret back to the text, and puts it after the link rather
-// than inside it: someone who just made a link wants to keep writing, without it.
+// What is left behind decides where the caret goes: the link that was made, or
+// the text that is left when emptying the address took one away.
 function leave(state) {
     const active = state.active;
     const element = active?.element;
     if (active?.creating) close(state);
     else if (state.dirty) commit(state);
-    if (!active?.surface.connected) return;
-    active.surface.element.focus();
-    const after = state.active?.element || element;
-    if (!after?.isConnected) return active.surface.restore();
-    const range = state.document.createRange();
-    range.setStartAfter(after);
-    range.collapse(true);
-    const selection = active.surface.core.selection;
-    selection.removeAllRanges();
-    selection.addRange(range);
-    active.surface.capture();
+    if (!active?.surface.connected) return null;
+    caretAfter(active.surface, state.active?.element || element);
     return null;
 }
 
@@ -424,7 +419,7 @@ function position(state) {
     return place(state.form, active.surface, {
         align: 'start',
         prefer: 'below',
-        gap: 4,
+        gap: panelGap,
         on: active.element?.getBoundingClientRect() || null,
     });
 }

package/js/rte/src/client/tables.js

@@ -59,6 +59,9 @@ export function tableTools({tag = 'table'} = {}) {
             const sync = () => track(state, view);
             surface.addEventListener('u2-rte-selectionchange', sync, listen);
             surface.addEventListener('u2-rte-change', sync, listen);
+            // What a session's end takes away, its beginning brings back: coming
+            // back to the same selection is no selection change to hear about.
+            surface.addEventListener('u2-rte-activate', sync, listen);
             surface.addEventListener('u2-rte-deactivate', () => close(state, surface), listen);
             surface.element.addEventListener('input', sync, listen);
             return {dispose() {

package/js/rte/src/command/README.md

@@ -52,7 +52,10 @@ own object under the same name, or register commands the engine never ships.
 ## Edit
 
 - `range` is the `EditRange` to act on: the explicit target range if one was
-  given, otherwise the current selection. Foreign ranges resolve to `null`.
+  given, otherwise the current selection, and otherwise the selection the
+  surface has saved — a field of the editor's own chrome holds the caret while
+  it names what is still selected in the surface. Foreign ranges resolve to
+  `null`.
 - `map` is a fresh `PointMap`. Mutations that go through it keep every tracked
   point, so a command can compute its resulting caret before it exists.
 - `select(start, end, backward)` sets the resulting selection; one point

package/js/rte/src/command/commands.js

@@ -1,3 +1,4 @@
+import {configuredElements} from '../config/config.js';
 import {Edit, narrow} from './edit.js';
 import {htmlModel} from '../model/html/html-model.js';
 
@@ -28,7 +29,7 @@ export class Commands {
 
     get surface() { return this.#surface; }
     get model() {
-        return narrow(this.#model, this.#surface.config.elements);
+        return narrow(this.#model, configuredElements(this.#surface.element));
     }
     get names() { return [...this.#commands.keys()]; }
 
@@ -131,7 +132,7 @@ const MODIFIERS = ['ctrl', 'alt', 'shift'];
 // A shortcut is one or more chords separated by spaces, each written as
 // `[modifier+]*key`. `ctrl` matches Control or Command, so one declaration
 // serves both platforms.
-export function chords(value) {
+function chords(value) {
     if (value === undefined || value === null) return [];
     if (typeof value !== 'string' || !value.trim()) throw new TypeError('A command shortcut must be a non-empty string');
     return value.trim().toLowerCase().split(/\s+/).map(item => {
@@ -147,7 +148,7 @@ export function chords(value) {
 // The chord a keyboard event denotes. A digit is read from its physical key, so
 // a shifted digit is the same shortcut on every keyboard layout, while letters
 // keep their layout meaning.
-export function chord(event) {
+function chord(event) {
     const digit = /^Digit(\d)$/.exec(event.code || '');
     const parts = [];
     if (event.ctrlKey || event.metaKey) parts.push('ctrl');

package/js/rte/src/command/delete.js

@@ -63,7 +63,14 @@ function merge(edit, left, right, between) {
 
 function boundary(edit, direction) {
     const point = edit.range?.collapsed && edit.range.start;
-    if (!point || insideAtomic(edit, point.node)) return null;
+    if (!point) return null;
+    // An engine can leave the caret inside an element that has no inside —
+    // clicking a rule does that in some. The position is at the element, not in
+    // it, and deleting there is what takes the element away.
+    const hollow = elementOf(point.node) === point.node && !point.node.childNodes.length
+        && point.node !== edit.element && edit.model.atomic(point.node);
+    if (hollow) return {atomic: point.node, between: []};
+    if (insideAtomic(edit, point.node)) return null;
     const edge = direction === 'backward' ? 'start' : 'end';
     for (let current = elementOf(point.node); current && current !== edit.element; current = current.parentElement) {
         if (!edit.model.mergeable(current) || !atEdge(current, point, edge, edit.model)) continue;

package/js/rte/src/command/edit.js

@@ -1,3 +1,4 @@
+import {configuredElements} from '../config/config.js';
 import {htmlModel} from '../model/html/html-model.js';
 import {EditRange} from '../selection/range/edit-range.js';
 import {PointMap} from '../selection/map/point-map.js';
@@ -37,9 +38,14 @@ export class Edit {
         this.#data = data;
         this.#value = value;
         this.#fragment = fragment;
+        // The same rule a transaction applies: a live selection inside the
+        // surface is newer than the saved one, and a selection outside it says
+        // nothing about what is being edited — a field of the editor's own
+        // chrome holds the caret while it names what is still selected here.
         this.#range = range
             ? EditRange.fromRange(range, surface.element)
-            : EditRange.fromSelection(surface.core.selection, surface.element);
+            : EditRange.fromSelection(surface.core.selection, surface.element)
+                || (surface.selection ? EditRange.fromRange(surface.selection.range(), surface.element) : null);
     }
 
     get surface() { return this.#surface; }
@@ -50,7 +56,7 @@ export class Edit {
     // checks never consult it. Resolving it on first use keeps a toolbar
     // refresh from paying for every control that does not care.
     get model() {
-        this.#narrowed ??= narrow(this.#model, this.#surface.config.elements);
+        this.#narrowed ??= narrow(this.#model, configuredElements(this.#surface.element));
         return this.#narrowed;
     }
     get map() { return this.#map; }

package/js/rte/src/config/config.js

@@ -51,6 +51,13 @@ export function hostDefaults(host) {
     return DEFAULTS.block;
 }
 
+// Only the setting the model narrowing wants. The whole configuration parses
+// eleven properties, and reading a computed style is the expensive part of a
+// path every keystroke and every availability check goes through.
+export function configuredElements(host) {
+    return allowedElements(getComputedStyle(host), 'elements', null);
+}
+
 export function config(host) {
     const style = getComputedStyle(host);
     const defaults = hostDefaults(host);