u2ui 1.5.13 → 1.5.14

package/js/rte/src/client/classes.js

@@ -1,48 +1,57 @@
 import {classMark} from '../mark/standard.js';
 import {valueMark} from '../command/mark.js';
 
-// Optional content-class control. The choices come from the host's
-// `--u2-rte-classes`, so one declaration decides what the control offers, what
-// the sanitizer keeps, and what presentation cleanup leaves alone.
+// Optional content-class control. The choices come from the host's `--u2-rte-classes`, so one
+// declaration decides what the control offers, what the sanitizer keeps, and what presentation
+// cleanup leaves alone.
 //
-// The group is one mark type and therefore mutually exclusive. An application
-// that needs independent axes registers a second module with its own adapter.
-export function classStyles({label = 'Style', name = 'style', command = 'classStyle'} = {}) {
-    for (const value of [label, name, command]) {
+// One set of classes is one mark type and therefore mutually exclusive. A field that combines axes —
+// a colour *and* an alignment — names them in `--u2-rte-class-groups`, and each named set becomes a
+// section of the same menu: exclusive in itself, free of the others. The menu is one control whose
+// content is read per surface, so how many sets a field has stays a question CSS answers.
+export function classStyles({label = 'Style', name = 'style', command = 'classStyle', text = 'A'} = {}) {
+    for (const value of [label, name, command, text]) {
         if (typeof value !== 'string' || !value.trim()) throw new TypeError('A class control needs names');
     }
     const adapters = new Map();
     return Object.freeze({
         name: 'classes',
         commands: ({surface}) => ({[command]: styleCommand(adapters, surface)}),
-        toolbar: Object.freeze([Object.freeze({
-            type: 'select',
-            name,
-            command,
-            label,
-            options: surface => surface.config.classes.map(value => ({value, label: value})),
-        })]),
+        toolbar: Object.freeze([Object.freeze({type: 'menu', name, command, label, text, groups: sets})]),
     });
 }
 
 export const classes = classStyles();
 
-// One adapter per configured group, so the same host keeps one mark identity
-// across refreshes and two hosts with the same classes share it.
+// What the host offers, in the order it declared it: `Lead Caption, color(Red Green)` puts the two
+// loose ones on top and the named set below them. `--u2-rte-classes` says what may *exist* — a class
+// foreign content carries needs no control — so it is only fallen back on where nothing is offered.
+function sets(surface) {
+    const {classes, classGroups} = surface.config;
+    const offered = Object.entries(classGroups ?? {}).map(([key, values]) => ({label: key === '*' ? '' : key, values}));
+    if (offered.length) return offered;
+    return classes.length ? [{label: '', values: classes}] : [];
+}
+
+// One adapter per set, so the same host keeps one mark identity across refreshes and two hosts with
+// the same classes share it.
 function styleCommand(adapters, surface) {
-    const resolve = () => {
-        const names = surface.config.classes;
-        if (!names.length) return null;
-        const key = names.join(' ');
-        if (!adapters.has(key)) adapters.set(key, valueMark(classMark(names)));
+    const resolve = values => {
+        if (!values?.length) return null;
+        const key = values.join(' ');
+        if (!adapters.has(key)) adapters.set(key, valueMark(classMark(values)));
         return adapters.get(key);
     };
-    // The group is closed, so a value outside it is simply unavailable rather
-    // than an error the adapter has to raise.
-    const known = edit => edit.value == null || surface.config.classes.includes(edit.value);
+    // Which set a value belongs to decides which mark answers for it — the sets are independent, and
+    // a class the host does not declare belongs to none, so it is simply unavailable.
+    const setOf = value => sets(surface).find(set => set.values.includes(value))?.values;
+    const of = edit => resolve(edit.value == null ? sets(surface)[0]?.values : setOf(edit.value));
+    const set = edit => edit.value != null && of(edit)?.state(edit) === edit.value;
     return {
-        enabled: edit => known(edit) && !!resolve()?.enabled(edit),
-        state: edit => resolve()?.state(edit) ?? null,
-        run: edit => known(edit) ? resolve()?.run(edit) : undefined,
+        // What is already set stays available: picking it again is how a set is emptied, and a set
+        // carrying nothing is a normal state — no colour is as valid as red.
+        enabled: edit => !!of(edit) && (set(edit) || of(edit).enabled(edit)),
+        state: edit => of(edit)?.state(edit) ?? null,
+        run: edit => of(edit)?.run(set(edit) ? edit.with({value: null}) : edit),
     };
 }

package/js/rte/src/client/contextual.js

@@ -7,8 +7,13 @@
 export function follows(surface, draw, close) {
     const controller = new surface.element.ownerDocument.defaultView.AbortController();
     const listen = {signal: controller.signal};
+    // Only while the surface has a session. A selection is not one: engines leave a selection inside
+    // an editable nobody focused — clicking beside one does that — and the core captures it before
+    // it decides that no session follows. Drawing on that capture would put a form on a caret the
+    // keyboard cannot reach, which is exactly what the toolbar already refuses to do.
+    const drawing = () => surface.active && draw();
     for (const type of ['u2-rte-selectionchange', 'u2-rte-change', 'u2-rte-activate']) {
-        surface.addEventListener(type, draw, listen);
+        surface.addEventListener(type, drawing, listen);
     }
     surface.addEventListener('u2-rte-deactivate', close, listen);
     return {

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

@@ -35,6 +35,38 @@ const STYLE = `
     }
     [data-command=bold] { font-weight: 700; }
 }
+
+/* A menu is the toolbar's own panel, one row per entry: sections keep their names, and a set that
+   carries something says so where the eye already is — at the row, not in the button. */
+[data-menu] {
+    background: Canvas;
+    border: 1px solid color-mix(in srgb, CanvasText 25%, transparent);
+    border-radius: .34em;
+    color: CanvasText;
+    font: inherit;
+    margin: 0;
+    padding: .34em;
+    position: absolute;
+
+    & b { display: block; font-size: .86em; opacity: .6; padding: .5em .6em .17em; }
+    & button {
+        background: none;
+        border: 0;
+        border-radius: .34em;
+        color: inherit;
+        display: block;
+        font: inherit;
+        inline-size: 100%;
+        padding: .34em .6em .34em 1.7em;
+        position: relative;
+        text-align: start;
+        &:hover:not(:disabled) { background: color-mix(in srgb, Highlight 16%, transparent); }
+        &[aria-pressed=true] {
+            background: color-mix(in srgb, Highlight 20%, transparent);
+            &::before { content: '✓'; inset-inline-start: .5em; position: absolute; }
+        }
+    }
+}
 `;
 
 const CLIENT = Symbol.for('u2.rte.editor');
@@ -54,6 +86,7 @@ export class Editor {
     #toolbar = null;
     #element = null;
     #dynamic = new Map();
+    #menus = new Map();
     #controller;
     #connected = true;
 
@@ -185,6 +218,7 @@ export class Editor {
     refresh() {
         if (!this.#connected) return false;
         const surface = this.#core.active;
+        surface?.invalidate();
         if (this.#records.has(surface) && surface.config.ui === 'roaming') this.#ensureToolbar();
         this.#chrome?.follow(this.#records.has(surface) ? surface.element : null);
         // A control whose choices come from the host's configuration is filled
@@ -192,6 +226,11 @@ export class Editor {
         for (const [select, choices] of this.#dynamic) {
             options(select, this.#records.has(surface) ? choices(surface) : []);
         }
+        for (const [panel, groups] of this.#menus) {
+            entries(panel, this.#records.has(surface) ? groups(surface) : []);
+            // Where it fits changes with the toolbar, which moves with the caret.
+            if (!panel.hidden) placeMenu(panel, panel.previousElementSibling);
+        }
         return this.#toolbar?.refresh() || false;
     }
 
@@ -207,6 +246,7 @@ export class Editor {
         this.#highlight?.dispose();
         this.#highlight = null;
         this.#dynamic.clear();
+        this.#menus.clear();
         this.#toolbar = null;
         this.#element = null;
         for (const setup of [...this.#setups.values()].reverse()) setup.dispose();
@@ -331,6 +371,49 @@ export class Editor {
     #append(module) {
         if (!this.#element) return;
         for (const control of module.toolbar || []) {
+            // A menu is one control whose content is read per surface, so a host may offer three
+            // sets of classes where another offers none, without a control per set.
+            if (control.type === 'menu') {
+                const panel = this.#document.createElement('div');
+                panel.id = `u2-rte-menu-${control.name || control.command}`;
+                panel.dataset.menu = control.command;
+                panel.hidden = true;
+                const button = this.#document.createElement('button');
+                button.type = 'button';
+                button.dataset.commandMenu = control.command;
+                button.dataset.control = control.name;
+                button.dataset.u2RteModule = module.name;
+                button.setAttribute('aria-label', control.label);
+                button.setAttribute('aria-expanded', 'false');
+                button.title = control.label;
+                button.textContent = control.text;
+                // Not a popover: the chrome raises itself into the top layer whenever anything it
+                // draws appears, and a separate top-layer panel would end up underneath it.
+                // Dismissal is therefore ours, and placement follows the toolbar while it is open.
+                const close = () => {
+                    if (panel.hidden) return;
+                    panel.hidden = true;
+                    button.setAttribute('aria-expanded', 'false');
+                };
+                button.addEventListener('click', () => {
+                    if (!panel.hidden) return close();
+                    panel.hidden = false;
+                    button.setAttribute('aria-expanded', 'true');
+                    placeMenu(panel, button);
+                });
+                this.#element.addEventListener('pointerdown', event => {
+                    if (!panel.contains(event.composedPath()[0]) && event.composedPath()[0] !== button) close();
+                });
+                this.#document.addEventListener('pointerdown', event => {
+                    if (!this.#element?.contains(event.composedPath()[0])) close();
+                }, {signal: this.#controller.signal});
+                this.#document.addEventListener('keydown', event => {
+                    if (event.key === 'Escape') close();
+                }, {signal: this.#controller.signal});
+                this.#element.append(button, panel);
+                if (typeof control.groups === 'function') this.#menus.set(panel, control.groups);
+                continue;
+            }
             if (control.type === 'select') {
                 const select = this.#document.createElement('select');
                 select.dataset.commandValue = control.command;
@@ -411,6 +494,15 @@ function validModule(module) {
             });
             return Object.freeze({...control, type, options: Object.freeze(choices)});
         }
+        if (type === 'menu') {
+            for (const property of ['name', 'command', 'label', 'text']) {
+                if (typeof control[property] !== 'string' || !control[property].trim()) {
+                    throw new TypeError(`An editor toolbar menu requires ${property}`);
+                }
+            }
+            if (typeof control.groups !== 'function') throw new TypeError('An editor toolbar menu requires groups');
+            return Object.freeze({...control, type});
+        }
         if (type !== 'button') throw new TypeError(`Unknown editor toolbar control: ${type}`);
         for (const property of ['command', 'label', 'text']) {
             if (typeof control[property] !== 'string' || !control[property].trim()) {
@@ -456,6 +548,44 @@ function keyLabel(shortcut) {
 
 // Rewrites a select's choices, keeping its disabled placeholder and leaving the
 // element alone when nothing changed.
+// Anchored to the toolbar rather than to the viewport: the toolbar is the menu's offset parent, so
+// a panel placed against it follows every move it makes without a frame loop. Above the button where
+// the viewport allows — the toolbar sits over the text being edited, and a menu opening upwards
+// covers the chrome instead of the words.
+function placeMenu(panel, button) {
+    const toolbar = panel.parentElement.getBoundingClientRect();
+    const above = toolbar.top - panel.offsetHeight >= 0;
+    panel.style.insetInlineStart = `${button.offsetLeft}px`;
+    panel.style.insetBlockStart = above ? 'auto' : '100%';
+    panel.style.insetBlockEnd = above ? '100%' : 'auto';
+}
+
+// A menu is rebuilt only when its sets changed: it is refilled on every surface change, and
+// replacing the buttons under an open menu would close it.
+function entries(panel, groups) {
+    const key = groups.map(group => `${group.label}:${group.values.join(' ')}`).join('|');
+    if (panel.dataset.sets === key) return false;
+    panel.dataset.sets = key;
+    panel.replaceChildren();
+    const command = panel.dataset.menu;
+    for (const group of groups) {
+        if (group.label) {
+            const caption = panel.ownerDocument.createElement('b');
+            caption.textContent = group.label;
+            panel.append(caption);
+        }
+        for (const value of group.values) {
+            const entry = panel.ownerDocument.createElement('button');
+            entry.type = 'button';
+            entry.dataset.commandValue = command;
+            entry.dataset.value = value;
+            entry.textContent = value;
+            panel.append(entry);
+        }
+    }
+    return true;
+}
+
 function options(select, choices) {
     const current = [...select.options].slice(1);
     if (current.length === choices.length

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

@@ -1,7 +1,7 @@
 import {inlineUi} from '../config/config.js';
 import {rangeRect} from '../browser/range-rect.js';
 import {linkHtml} from '../mark/standard.js';
-import {caretAfter} from '../ui/caret.js';
+import {caretAfter, caretAfterRange} from '../ui/caret.js';
 import {follows} from './contextual.js';
 import {panelGap, place} from '../ui/place.js';
 import {valueMark} from '../command/mark.js';
@@ -43,6 +43,7 @@ const STYLE = `
 
 const LABELS = {href: 'Address', target: 'New tab', title: 'Title', rel: 'Rel'};
 
+
 // Optional contextual link editor.
 //
 // The form is where the caret is: it appears on its own when the caret is in a
@@ -342,8 +343,9 @@ function write(state, value, field = null) {
         ? [field.selectionStart, field.selectionEnd]
         : null;
     state.writing = true;
+    let changed = null;
     try {
-        active.view.commands.run('link', {value, range, trigger: 'input'});
+        changed = active.view.commands.run('link', {value, range, trigger: 'input'});
     } finally {
         state.writing = false;
     }
@@ -354,9 +356,11 @@ function write(state, value, field = null) {
     // What the form edits from here on is whatever the run left behind: the link
     // it made, or — when emptying the address took one away — the text that is
     // left, so the same words can be linked again.
-    active.element = marked(active.surface, at(active.surface));
+    // What the run made, as the run reports it. Asking the caret instead answers about wherever the
+    // caret happens to be — and while a form is being typed into, that is the form.
+    active.element = made(changed) ?? marked(active.surface, at(active.surface));
     active.range = active.element ? contents(active.element)
-        : active.surface.selection?.range() || active.range;
+        : live(active.surface) || active.surface.selection?.range() || active.range;
     active.selection = active.surface.selection;
     if (!active.element && value) return close(state);
     position(state);
@@ -368,10 +372,18 @@ function write(state, value, field = null) {
 function leave(state) {
     const active = state.active;
     const element = active?.element;
-    if (active?.creating) close(state);
-    else if (state.dirty) commit(state);
+    if (!active?.creating && state.dirty) commit(state);
+    // What the document holds now, not what the form was opened on: committing re-marks the link,
+    // and the element the form remembered is the one that was replaced.
+    const surface = active?.surface;
+    const target = surface?.connected && marked(surface, at(surface)) || state.active?.element || element;
+    const range = state.active?.range || active?.range;
+    // Both keys mean the same thing: done. The form stays only while the caret is in a link, and
+    // emptying an address left none — it would otherwise follow the words it just unlinked.
+    close(state);
     if (!active?.surface.connected) return null;
-    caretAfter(active.surface, state.active?.element || element);
+    if (target?.isConnected) caretAfter(active.surface, target);
+    else caretAfterRange(active.surface, range);
     return null;
 }
 
@@ -424,12 +436,23 @@ function position(state) {
 // The node the surface's saved selection starts in — or the one it holds, when
 // that is a single element: an image's link is on the image, not on the block the
 // range around it starts in.
+// Where the caret is now, not where it was captured: an engine announces a selection change in its
+// own time, and everything here happens between marking a link and that announcement.
 function at(surface) {
-    const range = surface.selection?.range();
+    const range = live(surface) || surface.selection?.range();
     if (!range) return null;
     return range.startContainer.childNodes?.[range.startOffset] ?? range.startContainer;
 }
 
+// A copy, never the selection's own range: that one is live and follows every later move, so a form
+// that remembered it would be holding the caret by the time it is used.
+function live(surface) {
+    const selection = surface.core.selection;
+    if (!selection?.rangeCount) return null;
+    const range = selection.getRangeAt(0);
+    return surface.element.contains(range.startContainer) ? range.cloneRange() : null;
+}
+
 // The contents of one element, as a range.
 function contents(element) {
     const range = element.ownerDocument.createRange();
@@ -448,6 +471,12 @@ function target(surface) {
     return whole;
 }
 
+// The link a run left behind, among the elements it reports as changed.
+function made(changed) {
+    if (!Array.isArray(changed)) return null;
+    return changed.find(node => node?.nodeType === Node.ELEMENT_NODE && node.isConnected && linkHtml.parse(node)) ?? null;
+}
+
 function marked(surface, node) {
     let element = node?.nodeType === Node.ELEMENT_NODE ? node : node?.parentElement;
     for (; element && element !== surface.element; element = element.parentElement) {

package/js/rte/src/command/block-style.js

@@ -41,9 +41,13 @@ export class BlockStyles {
         return edit.range.blocks(element => element !== edit.element && this.#current(element));
     }
 
+    // The most specific match, not the last one declared: `p.lead` says more about an element than
+    // `p` does, so a plain tag needs no `:not()` to stay out of the way of its own variants.
     #current(element) {
         let current = null;
-        for (const style of this.#styles) if (matches(style, element)) current = style;
+        for (const style of this.#styles) {
+            if (matches(style, element) && (!current || conditions(style) >= conditions(current))) current = style;
+        }
         return current;
     }
 
@@ -118,3 +122,9 @@ function style(value) {
 function matches(style, element) {
     return element.matches(style.selector);
 }
+
+// How much a selector asks for beyond its tag: every class, attribute, id, or pseudo-class counts
+// once. Enough to order `p` against `p.lead` and `p.lead[data-x]` without parsing css specificity.
+function conditions(style) {
+    return (style.selector.match(/[.#[:]/g) ?? []).length;
+}

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

@@ -1,4 +1,3 @@
-import {configuredElements} from '../config/config.js';
 import {Edit, narrow} from './edit.js';
 import {htmlModel} from '../model/html/html-model.js';
 
@@ -29,7 +28,7 @@ export class Commands {
 
     get surface() { return this.#surface; }
     get model() {
-        return narrow(this.#model, configuredElements(this.#surface.element));
+        return narrow(this.#model, this.#surface.config.elements);
     }
     get names() { return [...this.#commands.keys()]; }
 

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

@@ -1,4 +1,3 @@
-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';
@@ -56,13 +55,24 @@ 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, configuredElements(this.#surface.element));
+        // The surface has read its host already; asking the platform again is the expensive half of
+        // an availability check, and every control makes one.
+        this.#narrowed ??= narrow(this.#model, this.config.elements);
         return this.#narrowed;
     }
     get map() { return this.#map; }
     get inputType() { return this.#inputType; }
     get data() { return this.#data; }
     get value() { return this.#value; }
+
+    /** The same edit with single inputs replaced: a command answering for a set of values has to ask
+     *  its adapter about another one, and spreading an edit would leave its getters behind. */
+    with(options) {
+        return new Edit(this.#surface, this.#transaction, {
+            model: this.#model, range: this.#range?.range() ?? null, inputType: this.#inputType,
+            data: this.#data, value: this.#value, fragment: this.#fragment, ...options,
+        });
+    }
     get fragment() { return this.#fragment; }
     get range() { return this.#range; }
     get document() { return this.#surface.element.ownerDocument; }

package/js/rte/src/command/enter.js

@@ -132,9 +132,14 @@ function split(edit, unit) {
     return tail;
 }
 
+// What Enter at the end of a block continues with: the host's plain default block. A heading, a
+// lead, a note — anything carrying more than the bare tag — is a shape someone chose for that one
+// block, and the line after it is a new thought. Splitting in the middle keeps the kind, because
+// there both halves are the same block.
 function continuationBlock(edit, unit, point) {
     const tag = edit.config.block;
-    if (!tag || !edit.model.textBlock(unit) || unit.localName === tag || !blockEdge(unit, point, 'end')) return null;
+    if (!tag || !edit.model.textBlock(unit) || !blockEdge(unit, point, 'end')) return null;
+    if (unit.localName === tag && !unit.attributes.length) return null; // already plain
     const block = edit.document.createElement(tag);
     if (!edit.model.allows(unit.parentElement, block)) return null;
     return block;

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

@@ -83,9 +83,36 @@ the text-level semantics that carry meaning — no layout, no embeds, no forms.
 The host list still bounds it; neither can widen the sanitize policy.
 
 `--u2-rte-import-sanitize` switches that whole stage off with `none`, leaving
-what the browser inserted. Which attributes and protocols are acceptable stays
-in JavaScript with the policy — that is a security decision, not a presentation
-one, and not something CSS should be carrying.
+what the browser inserted.
+
+`--u2-rte-elements`, `--u2-rte-attributes` and `--u2-rte-protocols` say what
+content may carry, and each of them *is* the policy where it is declared rather
+than a narrowing of one — a field may name an element the shipped default does
+not, because what may be inserted is the site's decision. The two
+element-specific ones share one grammar: a bare list applies to every element, `name(…)` to one of them, and
+protocols name the attribute inside — `class title, a(href target)` and
+`a(href: http https), img(src: data http)`. Unset means the policy the
+application configured, so a declaration only states what it changes, and a
+malformed value changes nothing rather than silently narrowing. A site declares
+its own on the root and a field narrows from there, the way every other property
+here cascades.
+
+`--u2-rte-blocks` names the block styles a field offers — `Absatz(p), Lead(p.lead),
+Notiz(p[data-note]), Titel(h2)`. The label names it, the selector says what it is:
+the tag decides what is created, and what follows it — classes, attributes — is
+written when the style is applied and taken off when another replaces it. The
+most specific match wins, so a plain `p` needs no `:not(.lead)` to stay out of
+the way of its own variants. Unset leaves the styles the application registered.
+
+`--u2-rte-class-groups` names either-or sets — `color(Red Green), align(Left
+Center Right)`. Each becomes a section of the class menu, exclusive in itself and
+free of the others, so a field can carry one class from every set. It decides
+nothing about what may exist, only how it is offered, so its names are declared
+in `--u2-rte-classes` as well.
+
+None of this is the security boundary. What a client sanitizer protects is the
+editing session — markup inserted into the author's own logged-in page — while
+what may be stored is decided where the content is saved and served.
 
 ## TODO
 

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

@@ -6,10 +6,15 @@ const INLINE_HOSTS = new Set([
 const UNWRAPPED_HOSTS = new Set(['LI', 'CAPTION', 'TH', 'TD']);
 const CLEANUP = new Set(['none', 'minimal', 'structural', 'canonical']);
 const ENTER = new Set(['break', 'block', 'item', 'row', 'cell']);
+const ATTRIBUTE = /^[a-z][a-z\d_.:-]*$/;
+const PROTOCOL = /^[a-z][a-z\d+.-]*$/;
 const UI = new Set(['none', 'roaming', 'static']);
 const IMPORT_SANITIZE = new Set(['policy', 'none']);
 const TAG = /^[a-z][a-z\d-]*$/;
 const CLASS = /^-?[_a-zA-Z][\w-]*$/;
+const LABEL = /^[^\s(),]+$/;
+// A block style is one element with conditions on it: `p`, `p.lead`, `p[aria-label=note]`.
+const SELECTOR = /^[a-z][a-z\d-]*(?:\.[_a-zA-Z][\w-]*|\[[a-z][\w-]*(?:=[^\]\s]+)?\])*$/;
 const FALSE = new Set(['0', 'false', 'none', 'off']);
 const DEFAULT_CLEAN_ON = Object.freeze(['input', 'paste', 'drop', 'command']);
 const EMPTY_ELEMENTS = Object.freeze([]);
@@ -61,15 +66,18 @@ export function configuredElements(host) {
 export function config(host) {
     const style = getComputedStyle(host);
     const defaults = hostDefaults(host);
-    const cleanOn = value(style, 'clean-on');
     return Object.freeze({
         block: tag(style, 'block', defaults.block),
         enter: choice(style, 'enter', ENTER, defaults.enter),
         cleanup: choice(style, 'cleanup', CLEANUP, 'structural'),
-        cleanOn: Object.freeze(cleanOn ? cleanOn.split(/[\s,]+/).filter(Boolean) : [...DEFAULT_CLEAN_ON]),
+        cleanOn: list(value(style, 'clean-on'), TAG) ?? DEFAULT_CLEAN_ON,
         elements: allowedElements(style, 'elements', null),
         importElements: allowedElements(style, 'import-elements', elementPresets.content),
         classes: classNames(style),
+        classGroups: groups(style, 'class-groups', text => list(text, CLASS), label),
+        blocks: groups(style, 'blocks', text => SELECTOR.test(text.trim()) ? text.trim() : null, label),
+        attributes: groups(style, 'attributes', text => list(text.toLowerCase(), ATTRIBUTE)),
+        protocols: groups(style, 'protocols', text => scheme(text.toLowerCase())),
         // Foreign presentation through the class rung: pasted markup keeps no
         // styles, no presentational attributes, and no undeclared classes.
         importSanitize: choice(style, 'import-sanitize', IMPORT_SANITIZE, 'policy'),
@@ -89,9 +97,8 @@ export function inlineUi(config, name) {
 
 function inlineNames(style) {
     const result = value(style, 'inline-ui').toLowerCase();
-    if (!result) return null;
     if (result === 'none') return EMPTY_ELEMENTS;
-    return Object.freeze([...new Set(result.split(/[\s,]+/).filter(Boolean))]);
+    return list(result, TAG);
 }
 
 function value(style, name) {
@@ -114,19 +121,50 @@ function choice(style, name, choices, fallback) {
 // control, the sanitizer, and presentation cleanup, so a class the host knows is
 // never offered without being allowed, or cleaned away as foreign.
 function classNames(style) {
-    const result = value(style, 'classes');
-    if (!result) return EMPTY_ELEMENTS;
-    const names = result.split(/[\s,]+/).filter(Boolean);
-    return names.every(name => CLASS.test(name)) ? Object.freeze([...new Set(names)]) : EMPTY_ELEMENTS;
+    return list(value(style, 'classes'), CLASS) ?? EMPTY_ELEMENTS;
+}
+
+// Element-specific lists share one grammar: a bare list is what every element may carry, `name(…)`
+// what one of them adds — `class title, a(href target)`, or one level deeper `a(href: http https)`.
+// Unset means the policy's own default, so a declaration only says what it changes, and a typo
+// yields nothing rather than silently narrowing.
+function groups(style, name, read, key = element) {
+    const declared = value(style, name); // not lowercased: element names are, class names are not
+    if (!declared) return null;
+    const result = {};
+    for (const group of declared.split(',')) {
+        const match = group.trim().match(/^([^\s(),]+)\s*\((.*)\)$/s);
+        const parsed = read(match ? match[2] : group);
+        const name = match ? key(match[1]) : '*';
+        if (!parsed || !name) return null;
+        result[name] = parsed;
+    }
+    return Object.freeze(result);
+}
+
+// An element is a tag name, normalized; a group is a label and stays as it was written.
+const element = name => TAG.test(name.toLowerCase()) ? name.toLowerCase() : null;
+const label = name => LABEL.test(name) ? name : null;
+
+function list(text, pattern) {
+    const names = text.split(/[\s,]+/).filter(Boolean);
+    return names.length && names.every(one => pattern.test(one)) ? Object.freeze([...new Set(names)]) : null;
+}
+
+function scheme(text) {
+    const [attribute, ...rest] = text.split(':');
+    const schemes = list(rest.join(':'), PROTOCOL);
+    return schemes && ATTRIBUTE.test(attribute.trim()) ? Object.freeze({[attribute.trim()]: schemes}) : null;
 }
 
 function allowedElements(style, name, fallback) {
     const result = value(style, name).toLowerCase();
     if (!result) return fallback;
     if (result === 'all') return null;
-    if (result.startsWith('@')) return elementPresets[result.slice(1)] || EMPTY_ELEMENTS;
-    const names = result.split(/[\s,]+/).filter(Boolean);
-    return names.length && names.every(name => TAG.test(name)) ? Object.freeze([...new Set(names)]) : EMPTY_ELEMENTS;
+    // An unreadable declaration is ignored, the way css ignores an invalid value: what applies is
+    // what applied before it, not an empty field.
+    if (result.startsWith('@')) return elementPresets[result.slice(1)] ?? fallback;
+    return list(result, TAG) ?? fallback;
 }
 
 function elements(value) {

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

@@ -206,7 +206,9 @@ export class Rte extends EventTarget {
 
     #pointerDown = event => {
         const path = event.composedPath();
-        this.#press = {path, handed: false};
+        // A press in retained ui is the editor's own: its controls hand the focus back to the
+        // surface they act on, and refusing that session would take the toolbar away mid-command.
+        this.#press = path.some(node => this.#retained.has(node)) ? null : {path, 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.