u2ui 1.5.4 → 1.5.7

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,5 +1,6 @@
 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';
 
@@ -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(() => {
@@ -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,5 +1,6 @@
 import {inlineUi} from '../config/config.js';
 import {linkHtml} from '../mark/standard.js';
+import {caretAfter} from '../ui/caret.js';
 import {place} from '../ui/place.js';
 import {valueMark} from '../command/mark.js';
 
@@ -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;
 }
 

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);

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

@@ -18,16 +18,38 @@ document structure, or UI behavior.
   browser and document-lifecycle differences without duplicate activation.
 - The nearest explicit nested `contenteditable` is an isolation boundary.
 - `sync()` resolves the current selection to one registered surface and captures
-  it without scanning or mutating unrelated editor contents.
+  it without scanning or mutating unrelated editor contents. A selection is not
+  a session: once focus has left the editor, only focus starts one again.
+  Engines leave a selection inside an editable that nobody focused — clicking
+  beside one does that — and a toolbar over a caret the keyboard cannot reach is
+  worse than no toolbar. The surface still keeps what it captured.
 - At most one surface is active per core; active state may outlive DOM focus so
   a roaming UI can safely receive focus.
 - `retain(element)` marks editor-owned UI in the same document. Focus inside it
   keeps the active surface, `retains(node)` identifies its composed subtree,
   and `release(element)` removes the mark. This also distinguishes UI from
   content when a native top-layer boundary requires both to share one host.
+- A link, a button, or a label around an editing host is answered by the element,
+  not by 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. Both are suppressed for a press that belongs to
+  the text, and the link is left undraggable — nobody drags a link wrapped
+  around editable content on purpose.
+- The right button never moves the selection inside a surface: its menu is about
+  what is selected, and aiming the menu somewhere else is what would make it
+  useless.
+- A press decides which surface a focus belongs to. Engines hand the focus to
+  the nearest editable when a press lands beside one, which an inline host in
+  running text collects a whole line of; a focus whose press did not land in the
+  surface is refused and given back. A press answers for every focus until it is
+  released — one drag can hand the focus back more than once — and a key taking
+  over ends it too, so a keyboard reaching a surface is never mistaken for it.
 - Focus that lands anywhere else — not a surface, not retained UI — ends the
-  session, so everything drawn for it goes at once. Retaining is therefore how a
-  UI that takes focus stays alive; `Toolbar` retains its element itself.
+  session, so everything drawn for it goes at once. So does focus that lands
+  nowhere: clicking a plain paragraph focuses nothing, and no focus event
+  follows to say so, which is what `focusout` is listened to for. Retaining is
+  therefore how a UI that takes focus stays alive; `Toolbar` retains its element
+  itself.
 - `dispose()` removes listeners and disconnects every surface. It is
   idempotent; `[Symbol.dispose]()` exposes the same teardown to `using`.
 

package/js/rte/src/core/core.js

@@ -1,4 +1,5 @@
 import {enabled} from '../config/config.js';
+import {interactiveAround} from '../browser/interactive.js';
 import {editingHost, isEditableHost, isEditingBoundary} from '../selection/ownership/ownership.js';
 import {Surface} from '../surface/surface.js';
 
@@ -10,6 +11,9 @@ export class Rte extends EventTarget {
     #elements = new WeakMap();
     #retained = new Set();
     #active = null;
+    #unfocused = false;
+    #pointer = null;
+    #handed = false;
     #controller;
 
     constructor(root = document, options = {}) {
@@ -24,6 +28,15 @@ export class Rte extends EventTarget {
         const listen = {capture: true, signal: this.#controller.signal};
         root.addEventListener('focus', this.#focus, listen);
         root.addEventListener('focusin', this.#focus, listen);
+        root.addEventListener('focusout', this.#focusOut, listen);
+        // A press answers for every focus until it is over: one drag can hand the
+        // focus back more than once. A key taking over ends it too, so what is
+        // left of a release that never arrived cannot answer for the keyboard.
+        root.addEventListener('pointerdown', this.#pointerDown, listen);
+        for (const type of ['pointerup', 'pointercancel', 'keydown']) {
+            root.addEventListener(type, this.#pointerDone, listen);
+        }
+        root.addEventListener('click', this.#click, listen);
         this.#document.addEventListener('selectionchange', this.#selectionChange, {signal: this.#controller.signal});
     }
 
@@ -108,6 +121,12 @@ export class Rte extends EventTarget {
             this.activate(null);
             return null;
         }
+        // A selection is not a session: once the focus has left the editor, only
+        // focus brings it back. Engines leave a selection inside an editable that
+        // nobody focused — clicking beside one does that — and a toolbar over a
+        // caret the keyboard cannot reach is worse than no toolbar. What the
+        // surface captured, it keeps either way.
+        if (this.#unfocused && this.#active !== surface) return null;
         this.activate(surface);
         return surface;
     }
@@ -125,26 +144,98 @@ export class Rte extends EventTarget {
     }
 
     #focus = event => {
-        if (event.composedPath().some(node => this.#retained.has(node))) return;
-        const editable = event.composedPath().find(node =>
+        const path = event.composedPath();
+        if (path.some(node => this.#retained.has(node))) {
+            this.#unfocused = false;
+            return;
+        }
+        const editable = path.find(node =>
             node?.nodeType === Node.ELEMENT_NODE && isEditingBoundary(node)
         );
         // Focus that went somewhere else entirely ends the session: retained UI
         // is already excluded above, so what is left is not the editor's, and
         // everything drawn for it has to go with it.
-        if (!editable) {
+        if (!editable || !isEditableHost(editable)) {
+            this.#unfocused = true;
             this.activate(null);
             return;
         }
-        if (!isEditableHost(editable)) {
+        let surface = this.#elements.get(editable);
+        if (!surface && this.#options.auto && enabled(editable)) surface = this.add(editable);
+        // An engine gives the focus to the nearest editable when a press lands
+        // beside one: an inline host collects its whole line. A press that did
+        // not land in this surface is nobody starting to edit it, and the caret
+        // it would leave behind is one no one asked for.
+        //
+        // Taking it back is the one thing here that reaches into the document:
+        // the element really is focused for a moment, so the page sees a
+        // focus/blur pair it did not ask for, and anything listening for either
+        // on that element — a host's own handler, a css `:focus` rule — sees it
+        // too. Leaving it focused instead is worse: a caret that types into a
+        // surface with no session behind it.
+        if (surface && this.#pointer && !this.#pointer.includes(surface.element)) {
+            this.#unfocused = true;
             this.activate(null);
+            // Handing the focus back once per press. An engine that answers a
+            // blur by focusing again — the selection is still in there, after
+            // all — would otherwise trade focus with the editor for as long as
+            // the button is down, and the session stays refused either way.
+            if (!this.#handed) {
+                this.#handed = true;
+                editable.blur();
+            }
             return;
         }
-        let surface = this.#elements.get(editable);
-        if (!surface && this.#options.auto && enabled(editable)) surface = this.add(editable);
+        this.#unfocused = !surface;
         this.activate(surface || null);
     };
 
+    // Focus falling back to the document is the one way a session ends without
+    // a focus event to end it: nothing is focused, so nothing announces it.
+    // A related target inside a surface or in retained UI is `#focus`'s to
+    // decide — deactivating here would end a session that is only moving.
+    #focusOut = event => {
+        if (this.#owns(event.relatedTarget)) return;
+        this.#unfocused = true;
+        this.activate(null);
+    };
+
+    // The editor's world: one of its surfaces, or UI it retains.
+    #owns(node) {
+        return !!node && (this.retains(node) || this.#elements.has(editingHost(node)));
+    }
+
+    #pointerDown = event => {
+        const path = event.composedPath();
+        this.#pointer = path;
+        this.#handed = false;
+        const editing = this.#editing(path[0]);
+        // The right button opens a menu about what is selected; moving the
+        // selection to what it was aimed at is what makes the menu useless.
+        if (event.button === 2 && editing) event.preventDefault();
+        // The drag has to be off before this very press is acted on, which is
+        // what a capturing listener is early enough for. It stays off: a link
+        // wrapping editable content is not one anybody drags on purpose.
+        const around = interactiveAround(editing);
+        if (around) around.draggable = false;
+    };
+
+    // The press belonged to the text, and so does its release.
+    #click = event => {
+        if (interactiveAround(this.#editing(event.composedPath()[0]))) event.preventDefault();
+    };
+
+    // The editing host a node sits in, if this core is the editor of it.
+    #editing(node) {
+        const host = editingHost(node);
+        if (!host) return null;
+        return this.#elements.has(host) || this.#options.auto && enabled(host) ? host : null;
+    }
+
+    #pointerDone = () => {
+        this.#pointer = null;
+    };
+
     #selectionChange = () => {
         this.sync();
     };

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

@@ -63,6 +63,24 @@ to `using`. Disconnecting the surface also disposes them automatically.
   surface)` is its public, shared conversion from a native `StaticRange` to an
   owned live `Range`; missing target ranges fall back to the owned selection.
 
+## Keys a host answers itself
+
+A button answers Space and Enter by activating itself, whatever it holds: the
+text inside never sees them and no `beforeinput` arrives at all. In that host,
+and only there, the pipeline turns the key into the input it should have been —
+`insertParagraph` for Enter, and for Space the `insert` command with a space of
+its own — a non-breaking one where a plain space would collapse away, which is
+what the browser itself types there. Everywhere else ordinary typing stays the
+browser's own.
+
+## Pointing at an atomic element
+
+An atomic element is addressable only as the selection: engines disagree about
+whether pointing at one selects it, and a caret an engine leaves inside one —
+clicking a rule does that in some — reaches nothing at all. A click on one
+selects it, which is what makes a frame, a command, or a delete apply to it. The
+host itself is left alone: a surface is not a thing inside itself.
+
 ## Rich external input
 
 The native path above needs no HTML parser or sanitizer adapter because RTE

package/js/rte/src/input/input-pipeline.js

@@ -1,5 +1,6 @@
 import {htmlModel} from '../model/html/html-model.js';
 import {narrow} from '../command/edit.js';
+import {activatingAround} from '../browser/interactive.js';
 import {Normalizer} from '../normalize/normalizer/normalizer.js';
 import {PointMap} from '../selection/map/point-map.js';
 import {EditRange} from '../selection/range/edit-range.js';
@@ -71,6 +72,7 @@ export class InputPipeline {
         root.addEventListener('compositionend', this.#compositionEnd, listen);
         root.addEventListener('paste', this.#paste, listen);
         root.addEventListener('drop', this.#drop, listen);
+        root.addEventListener('click', this.#click, listen);
         surface.addEventListener('u2-rte-command', this.#command, listen);
         surface.addEventListener('u2-rte-disconnect', this.#disconnect, listen);
     }
@@ -198,6 +200,7 @@ export class InputPipeline {
             if (this.#invoke(event, shortcut, {range: selectionRange(this.#surface)})) return;
         }
         if (event.altKey) return;
+        if ((event.key === 'Enter' || event.key === ' ') && this.#activation(event)) return;
         const inputType = keyInput(event);
         if (!inputType) return;
         this.#surface.capture();
@@ -208,6 +211,19 @@ export class InputPipeline {
         });
     };
 
+    // In a button, Enter and Space belong to the button: the text inside never
+    // sees them and no `beforeinput` arrives, so the editor puts in what the key
+    // meant. Everywhere else the browser's own input is left alone.
+    #activation(event) {
+        if (event.ctrlKey || event.metaKey || !activatingAround(this.#root)) return false;
+        this.#surface.capture();
+        const range = selectionRange(this.#surface);
+        if (event.key === 'Enter') return this.#route(event, {inputType: 'insertParagraph', data: null, range});
+        const fragment = this.#root.ownerDocument.createDocumentFragment();
+        fragment.append(space(range));
+        return this.#invoke(event, 'insert', {fragment, range});
+    }
+
     #input = event => {
         if (!this.#owns(event)) return;
         const pending = this.#pending;
@@ -245,6 +261,25 @@ export class InputPipeline {
         });
     };
 
+    // An atomic element is addressable only as the selection: engines disagree
+    // about whether pointing at one selects it, and a caret one leaves inside it
+    // reaches nothing at all. The host itself is left alone — a surface is not a
+    // thing inside itself.
+    #click = event => {
+        const target = event.composedPath()[0];
+        if (target === this.#root || !this.#owns(event) || target?.nodeType !== Node.ELEMENT_NODE) return;
+        // The base model, not the narrowed one: what an element is does not
+        // depend on which elements a host allows, and narrowing costs a computed
+        // style on a path every click in the text goes through.
+        if (!this.#model.atomic(target)) return;
+        const range = this.#root.ownerDocument.createRange();
+        range.selectNode(target);
+        const selection = this.#surface.core.selection;
+        selection.removeAllRanges();
+        selection.addRange(range);
+        this.#surface.capture();
+    };
+
     #paste = event => {
         if (this.#owns(event)) this.#rememberSource('paste');
     };
@@ -323,6 +358,16 @@ export class InputPipeline {
     }
 }
 
+// A plain space collapses away where there is nothing after it, or where another
+// space already is — so there the browser types a non-breaking one, and so does
+// this. Anywhere else a space is a space.
+function space(range) {
+    const node = range?.startContainer;
+    if (node?.nodeType !== Node.TEXT_NODE) return '\u00a0';
+    const before = range.startOffset ? node.data[range.startOffset - 1] : '';
+    return before.trim() && range.startOffset < node.length ? ' ' : '\u00a0';
+}
+
 function keyInput(event) {
     if (event.ctrlKey || event.metaKey || event.shiftKey) return null;
     return DELETE_KEYS.get(event.key) || null;

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

@@ -16,8 +16,11 @@ repairs editable document shape.
 - `comments` and `dataAttributes`: explicit booleans, both false by default.
 
 The supplied `sanitizePolicy` accepts the `document` element preset, ordinary
-editor metadata, and conservative web URLs. Inline styles, event attributes,
-`data:` URLs, comments, and data attributes are not enabled by default.
+editor metadata, and conservative web URLs. An image may carry a `data:` URL,
+because an image executes nothing — not even an SVG one, which browsers draw in
+a script-free context; in a navigating attribute the same protocol is a page, so
+links and citations keep it out. Inline styles, event attributes, comments, and
+data attributes are not enabled by default.
 Relative URLs use the explicit `relative` protocol token. Known URL attributes
 without a matching protocol rule are removed rather than accepted implicitly.
 

package/js/rte/src/sanitize/policy.js

@@ -19,7 +19,11 @@ const DEFAULT_ATTRIBUTES = Object.freeze({
 const DEFAULT_PROTOCOLS = Object.freeze({
     a: Object.freeze({href: Object.freeze(['http', 'https', 'mailto', 'relative', 'tel'])}),
     blockquote: Object.freeze({cite: Object.freeze(['http', 'https', 'relative'])}),
-    img: Object.freeze({src: Object.freeze(['http', 'https', 'relative'])}),
+    // `data:` belongs to an image and to nothing else here: an image executes
+    // nothing, not even an SVG one, which browsers draw in a script-free
+    // context. In a navigating attribute the same protocol is a page, so `a`
+    // and the citations keep it out.
+    img: Object.freeze({src: Object.freeze(['data', 'http', 'https', 'relative'])}),
     q: Object.freeze({cite: Object.freeze(['http', 'https', 'relative'])}),
 });
 

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

@@ -218,11 +218,22 @@ while a wide one loses a great deal.
 
 ## Focus across the boundary
 
-A `focusout` listener outside the toolbar's shadow tree sees its related target
-retargeted to that tree's host. Focus moving from the surface into a control of
-the toolbar's own therefore looks like focus leaving the editor, and dismissing
-on it would take the toolbar away in the middle of the click that opened a
-select. Ownership is decided against the tree's host as well as its contents.
+Whether focus leaving the editor ends the session is the core's decision, not
+the toolbar's: it knows every surface and every retained element, so one rule
+covers the toolbar, the contextual UI in the chrome, and anything a host
+retains. The toolbar shows and hides with the active surface and does not watch
+focus itself.
+
+## The selection while a form has the focus
+
+A browser paints a selection only where the focus is, so a form of the editor's
+own makes the text it is about to change stop looking selected. `highlight.js`
+draws the surface's saved selection in its place, through the CSS custom
+highlight API, and stops the moment the text has the focus again — the browser's
+own selection is never painted over. The rule goes into the tree that holds the
+text, because a highlight is painted on the range's own nodes, and sits in the
+`u2-rte` layer, so `::highlight(u2-rte-selection)` in a page's own stylesheet
+replaces it. Engines without the API simply show nothing extra.
 
 ## Placement
 
@@ -232,12 +243,17 @@ keeps the element inside the viewport, and falls to the other side when the
 preferred one does not fit. The roaming toolbar centres above the selection; the
 link form aligns to its start and prefers below.
 
+`caretAfter(surface, element)` is its counterpart at the end: the one way a
+contextual UI hands the caret back, after the element it was about to change
+rather than inside it. An element that is no longer there leaves the surface
+with the selection it had.
+
 A select with no usable choice hides like a button whose command is unavailable:
 a control that cannot be used is not shown.
 
 Pointing anywhere at the toolbar never moves the editor's selection, including
 at a control that currently has nothing to run — otherwise clicking a disabled
-button would blur the surface and dismiss the toolbar. Fields keep their own
+button would blur the surface and end the editing session. Fields keep their own
 pointer behaviour so they can be opened and typed in.
 
 Keys are not the toolbar's concern: a command declares its own shortcut and the

package/js/rte/src/ui/caret.js

@@ -0,0 +1,17 @@
+// The other half of `place`: where a contextual UI hands the caret back when it
+// is done. After the element it was about to change, never inside it — whoever
+// just named an image or made a link wants to keep writing, without it. The
+// surface takes the focus first, so what it captures is a selection it owns.
+//
+// An element that is no longer there leaves the surface with what it had.
+export function caretAfter(surface, element) {
+    surface.element.focus();
+    if (!element?.isConnected) return surface.restore();
+    const range = surface.element.ownerDocument.createRange();
+    range.setStartAfter(element);
+    range.collapse(true);
+    const selection = surface.core.selection;
+    selection.removeAllRanges();
+    selection.addRange(range);
+    return !!surface.capture();
+}

package/js/rte/src/ui/chrome.js

@@ -196,7 +196,7 @@ export class Chrome {
 // The closest boundary is the one that owns the target's current top-layer
 // context. Walking through shadow hosts keeps the rule identical for document
 // and ShadowRoot editors.
-export function topLayer(target) {
+function topLayer(target) {
     for (let element = target; element?.nodeType === Node.ELEMENT_NODE; element = composedParent(element)) {
         for (const selector of [':fullscreen', ':modal', ':popover-open']) {
             try {

package/js/rte/src/ui/handles.js

@@ -1,4 +1,4 @@
-export const handleStyle = `
+const handleStyle = `
 .handles > .frame {
     border: 1px solid Highlight;
     box-sizing: border-box;

package/js/rte/src/ui/highlight.js

@@ -0,0 +1,86 @@
+const NAME = 'u2-rte-selection';
+// System colours, so what stands in for the selection looks like one. In a
+// layer, so a page that wants its own answer simply writes an ordinary rule.
+const STYLE = `@layer u2-rte {
+::highlight(${NAME}) { background-color: Highlight; color: HighlightText; }
+}`;
+
+// A browser paints a selection only where the focus is, so the moment a form of
+// the editor's own takes the caret, the text it is about to change stops looking
+// selected. The surface's saved selection is drawn in its place: the range the
+// commands act on is the range the eye follows.
+//
+// It is the editor's, not one form's: a link address, an image's name and
+// anything else that takes focus all leave the same gap behind them.
+export class SelectionHighlight {
+    #core;
+    #document;
+    #style = null;
+    #controller;
+    #connected = true;
+
+    constructor(core) {
+        if (!core?.root || typeof core?.addEventListener !== 'function') {
+            throw new TypeError('A selection highlight requires an editor core');
+        }
+        const root = core.root;
+        this.#core = core;
+        this.#document = root.nodeType === Node.DOCUMENT_NODE ? root : root.ownerDocument;
+        this.#controller = new this.#document.defaultView.AbortController();
+        const listen = {capture: true, signal: this.#controller.signal};
+        // Surface events bubble out composed, so one listener covers every
+        // surface the core owns, whichever of them is being edited.
+        for (const type of ['focusin', 'focusout', 'u2-rte-selectionchange', 'u2-rte-change']) {
+            root.addEventListener(type, this.#update, listen);
+        }
+        core.addEventListener('u2-rte-activechange', this.#update, {signal: this.#controller.signal});
+        this.#update();
+    }
+
+    get connected() { return this.#connected; }
+
+    refresh() {
+        const surface = this.#core.active;
+        const selection = surface?.selection;
+        const highlights = this.#document.defaultView.CSS?.highlights;
+        if (!highlights) return false;
+        // Not while the text itself has the focus: the browser is already
+        // painting that selection, and painting it twice can only disagree.
+        // `activeElement` of the core's own root: in a shadow tree the document
+        // reports the host, which says nothing about what is focused inside it.
+        if (!selection || selection.collapsed || surface.element.contains(this.#core.root.activeElement)) {
+            highlights.delete(NAME);
+            return false;
+        }
+        this.#ensure();
+        highlights.set(NAME, new this.#document.defaultView.Highlight(selection.range()));
+        return true;
+    }
+
+    dispose() {
+        if (!this.#connected) return;
+        this.#controller.abort();
+        this.#document.defaultView.CSS?.highlights?.delete(NAME);
+        this.#style?.remove();
+        this.#style = null;
+        this.#connected = false;
+    }
+
+    [Symbol.dispose]() {
+        this.dispose();
+    }
+
+    // The rule belongs to the tree that holds the text, not to the editor's own
+    // shadow root: a highlight is painted on the range's own nodes.
+    #ensure() {
+        if (this.#style) return;
+        const root = this.#core.root;
+        const style = this.#document.createElement('style');
+        style.dataset.u2RteHighlight = '';
+        style.textContent = STYLE;
+        (root.nodeType === Node.DOCUMENT_NODE ? this.#document.head || this.#document.documentElement : root).append(style);
+        this.#style = style;
+    }
+
+    #update = () => this.refresh();
+}

package/js/rte/src/ui/toolbar.js

@@ -8,7 +8,6 @@ export class Toolbar {
     #surfaceController = null;
     #surface = null;
     #commands = null;
-    #dismissed = false;
     #connected = true;
 
     constructor(core, element, {commands, place = null} = {}) {
@@ -39,8 +38,6 @@ export class Toolbar {
         }, listen);
         element.addEventListener('click', this.#click, listen);
         element.addEventListener('change', this.#change, listen);
-        core.root.addEventListener('focusin', this.#focusIn, {...listen, capture: true});
-        core.root.addEventListener('focusout', this.#focusOut, {...listen, capture: true});
         if (!element.hasAttribute('role')) element.setAttribute('role', 'toolbar');
         element.hidden = true;
         // Focus landing in a control is still the editor's: without this the core
@@ -66,12 +63,16 @@ export class Toolbar {
         const commands = surface?.connected ? this.#resolve(surface) : null;
         if (commands != null && !registry(commands)) throw new TypeError('Toolbar commands must resolve to a command registry');
         this.#commands = commands || null;
-        const active = !!commands && !this.#dismissed && surface.config.ui === 'roaming'
-            && visibleForSelection(surface);
-        const names = active ? configured(surface.element) : null;
+        // One computed style for the settings only this toolbar reads: asking for
+        // it three times is three style resolutions on a path every keystroke
+        // goes down. The shared ones keep coming from the surface, defaults and
+        // validation included.
+        const style = commands && getComputedStyle(surface.element);
+        const active = !!commands && surface.config.ui === 'roaming' && visibleForSelection(surface, style);
+        const names = active ? configured(style) : null;
         // A host may prefer a toolbar that only ever shows what it can do, at
         // the cost of a shape that moves with the caret.
-        const hiding = active && unavailable(surface.element) === 'hide';
+        const hiding = active && setting(style, 'toolbar-unavailable') === 'hide';
         const detail = surface?.selection ? {range: surface.selection.range()} : undefined;
         let visible = 0;
         for (const item of this.#items()) {
@@ -138,7 +139,6 @@ export class Toolbar {
         this.#surfaceController = null;
         this.#surface = null;
         this.#commands = null;
-        this.#dismissed = false;
         display(this.#element, false);
         this.#connected = false;
     }
@@ -154,7 +154,6 @@ export class Toolbar {
         }
         this.#surfaceController?.abort();
         this.#surface = surface || null;
-        this.#dismissed = false;
         this.#surfaceController = null;
         if (surface) {
             const Controller = this.#element.ownerDocument.defaultView.AbortController;
@@ -194,18 +193,6 @@ export class Toolbar {
     #disconnect = () => this.#activate(null);
     #refresh = () => this.refresh();
 
-    #focusIn = event => {
-        if (!this.#dismissed || !this.#ownsFocus(event.composedPath()[0])) return;
-        this.#dismissed = false;
-        this.refresh();
-    };
-
-    #focusOut = event => {
-        if (!this.#ownsFocus(event.composedPath()[0]) || this.#ownsFocus(event.relatedTarget)) return;
-        this.#dismissed = true;
-        display(this.#element, false);
-    };
-
     // The toolbar is chrome: pointing at it must never move the editor's
     // selection, not even at a control that currently has nothing to run.
     // Fields keep their own pointer behaviour so they can be opened and typed in.
@@ -233,18 +220,6 @@ export class Toolbar {
         }
         this.#run(command, {value: name});
     };
-
-
-    #ownsFocus(node) {
-        if (!node || !this.#surface) return false;
-        // A `focusout` listener outside the toolbar's shadow tree sees its
-        // related target retargeted to that tree's host, so focus moving into a
-        // control of its own would otherwise read as focus leaving.
-        const root = this.#element.getRootNode();
-        if (root.host && node === root.host) return true;
-        return node === this.#element || this.#element.contains(node)
-            || node === this.#surface.element || this.#surface.element.contains(node);
-    }
 }
 
 function registry(value) {
@@ -254,18 +229,18 @@ function registry(value) {
         && typeof value?.run === 'function';
 }
 
-function configured(element) {
-    const value = getComputedStyle(element).getPropertyValue('--u2-rte-toolbar').trim();
-    return value ? new Set(value.split(/[\s,]+/).filter(Boolean)) : null;
+function setting(style, name) {
+    return style.getPropertyValue(`--u2-rte-${name}`).trim();
 }
 
-function unavailable(element) {
-    return getComputedStyle(element).getPropertyValue('--u2-rte-toolbar-unavailable').trim();
+function configured(style) {
+    const value = setting(style, 'toolbar');
+    return value ? new Set(value.split(/[\s,]+/).filter(Boolean)) : null;
 }
 
-function visibleForSelection(surface) {
-    const value = getComputedStyle(surface.element).getPropertyValue('--u2-rte-toolbar-when').trim();
-    return value !== 'selection' || !!surface.selection && !surface.selection.collapsed;
+function visibleForSelection(surface, style) {
+    return setting(style, 'toolbar-when') !== 'selection'
+        || !!surface.selection && !surface.selection.collapsed;
 }
 
 function state(item, value, disabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u2ui",
-  "version": "1.5.4",
+  "version": "1.5.7",
   "description": "HTML Advanced: More Capabilities, Same Feel, Same Simplicity",
   "keywords": ["web-components","pattern-library","component-library","ui-toolkit","design-system"],
   "author": "Tobias Buschor",