u2ui 1.5.13 → 1.5.15

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

@@ -8,7 +8,7 @@ import {editingHost, isPlainTextHost} from '../selection/ownership/ownership.js'
 import {Point} from '../selection/point/point.js';
 import {SelectionSnapshot} from '../selection/snapshot.js';
 import {defaultUnstyle} from '../unstyle/unstyle.js';
-import {sanitizePolicy} from '../sanitize/policy.js';
+import {policyFor, sanitizePolicy} from '../sanitize/policy.js';
 
 const TRIGGERS = new Set(['input', 'paste', 'drop', 'command']);
 const PASTE = new Set(['insertFromPaste', 'insertFromPasteAsQuotation']);
@@ -109,11 +109,13 @@ export class InputPipeline {
             // A native paste is the one import the browser inserts itself, so
             // this is where the policy reaches it: elements first, because
             // unwrapping moves nodes, then attributes.
-            if (this.#sanitize && settings.importSanitize === 'policy' && imported?.roots.length) {
+            // The host may declare its own attributes and protocols; everything else stays as configured.
+            const sanitize = this.#sanitize && policyFor(settings, this.#sanitize);
+            if (sanitize && settings.importSanitize === 'policy' && imported?.roots.length) {
                 // Attributes first: removing them moves nothing, while narrowing
                 // dissolves wrappers and would leave nothing left to clean.
                 for (const root of imported.roots) {
-                    this.#sanitize.clean(root, {
+                    sanitize.clean(root, {
                         preserve: imported.preserve,
                         base: this.#root.ownerDocument.baseURI,
                         classes: settings.classes.length ? settings.classes : null,
@@ -121,7 +123,7 @@ export class InputPipeline {
                 }
                 const map = new PointMap(points);
                 for (const root of imported.roots) {
-                    this.#sanitize.narrow(root, {
+                    sanitize.narrow(root, {
                         map,
                         preserve: imported.preserve,
                         elements: importable(settings),

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

@@ -8,17 +8,21 @@ repairs editable document shape.
 
 ## Policy
 
-`SanitizePolicy` is an immutable allowlist. Its options are:
+`SanitizePolicy` is an immutable allowlist. It speaks the vocabulary of the web
+Sanitizer API, so one set of terms carries through browser, editor, and whatever
+an application filters with; where the API has no answer, the policy extends it
+rather than renaming what it has. Its options are:
 
 - `elements`: element names the security policy can accept;
 - `attributes`: global (`*`) and per-element attribute names;
-- `protocols`: per-element rules for URL attributes;
-- `drop`: element names that `narrow()` removes with their content, before it
+- `protocols`: per-element rules for URL attributes — the one extension, because
+  `clean()` also runs on nodes a browser inserted, where no sink checked them;
+- `removeElements`: element names that `narrow()` removes with their content, before it
   asks `skip` — no later stage may be left holding them;
 - `comments` and `dataAttributes`: explicit booleans, both false by default.
 
 An element outside `elements` keeps its content — dropping it would lose text the
-author wrote. `drop` names the exception: elements a browser never renders the
+author wrote. `removeElements` names the exception: elements a browser never renders the
 children of, where unwrapping would turn a stylesheet, a script, or document
 metadata into visible text. It defaults to `base head link meta noscript script
 style template title` and, like every default, an application may replace it.
@@ -27,11 +31,23 @@ The supplied `sanitizePolicy` accepts the `document` element preset, ordinary
 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.
+links and citations keep it out. There is no allowlist of css properties, for the
+same reason the Sanitizer API has none: `style` is an attribute like any other,
+and taking presentation away is Unstyle's job.
+Event attributes, comments, and data attributes
+are not enabled by default. Inline `style` is: it executes nothing, and where
+foreign presentation is unwanted the Unstyle policy already removes it from what
+an import brought — a policy that must not carry it at all narrows `attributes`.
 Relative URLs use the explicit `relative` protocol token. Known URL attributes
 without a matching protocol rule are removed rather than accepted implicitly.
 
+`policy.with(options)` copies a policy with single axes replaced, and
+`policyFor(config, base)` is what a host gets: its own `--u2-rte-elements`,
+`--u2-rte-attributes` and `--u2-rte-protocols` over the policy the application
+chose — each axis declared is that axis, not a narrowing of it — with equal
+declarations sharing one policy instead of building it again. Nothing declared
+returns the base itself.
+
 ```js
 const policy = new SanitizePolicy({
     elements: ['p', 'a', 'strong'],
@@ -72,6 +88,8 @@ rich paste/drop events and direct HTML imports.
 - Attribute and URL policy remains separate from structural normalization.
 - Sanitizing creates no editor state, listeners, or markers.
 - Policies do not mutate after construction.
+- A configuration never carries `elements` and `removeElements` together: the api
+  rejects that pair, and `setHTML()` then yields nothing.
 
 ## Where the policy is applied
 
@@ -83,8 +101,8 @@ Three paths bring external HTML in, and all three now meet the same policy:
   there and no fallback parser is needed, but the result still has to obey the
   same attribute policy — so the input pipeline applies `clean()` to the nodes
   that arrived. Until it did, the most common import was the only one without an
-  allowlist, and layout ids, tracking `data-` attributes and inline styles came
-  straight through.
+  allowlist, and layout ids and tracking `data-` attributes came straight through.
+  Inline styles are not that kind of problem: Unstyle takes them off an import.
 
 `clean(root, {preserve})` spares elements that were already there, so a paste
 never re-cleans the document it landed in.

package/js/rte/src/sanitize/native.js

@@ -39,5 +39,7 @@ function config(policy, elements) {
         dataAttributes: policy.dataAttributes,
     };
     if (replaced.length) result.replaceWithChildrenElements = replaced;
+    // No `removeElements` beside an `elements` allowlist: the api rejects a config carrying both, and
+    // an allowlist already excludes them — what they must not leave behind is `narrow()`'s job.
     return result;
 }

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

@@ -4,8 +4,11 @@ const NAME = /^[a-z][a-z\d-]*$/;
 const ATTRIBUTE = /^[a-z][a-z\d_.:-]*$/;
 const PROTOCOL = /^[a-z][a-z\d+.-]*$/;
 const URL_ATTRIBUTES = new Set(['action', 'cite', 'formaction', 'href', 'poster', 'src', 'xlink:href']);
+// `style` is presentation, not execution: inline css runs no script, and where foreign styling is
+// unwanted the Unstyle policy already removes it from what an import brought — a question of taste
+// with a stage of its own. An application that must not carry it at all narrows this policy.
 const DEFAULT_ATTRIBUTES = Object.freeze({
-    '*': Object.freeze(['class', 'dir', 'lang', 'title']),
+    '*': Object.freeze(['class', 'dir', 'lang', 'style', 'title']),
     a: Object.freeze(['href', 'rel', 'target']),
     blockquote: Object.freeze(['cite']),
     img: Object.freeze(['alt', 'height', 'loading', 'src', 'width']),
@@ -30,7 +33,7 @@ const DEFAULT_PROTOCOLS = Object.freeze({
 // Elements a browser never renders the children of. Unwrapping one turns source — a stylesheet, a
 // script, document metadata — into visible text, so these go with their content. Every other unknown
 // element keeps its content: dropping it would lose text the author wrote.
-const DEFAULT_DROP = Object.freeze([
+const DEFAULT_REMOVE = Object.freeze([
     'base', 'head', 'link', 'meta', 'noscript', 'script', 'style', 'template', 'title',
 ]);
 
@@ -38,7 +41,7 @@ export const sanitizeDefaults = Object.freeze({
     elements: elementPresets.document,
     attributes: DEFAULT_ATTRIBUTES,
     protocols: DEFAULT_PROTOCOLS,
-    drop: DEFAULT_DROP,
+    removeElements: DEFAULT_REMOVE,
     comments: false,
     dataAttributes: false,
 });
@@ -49,7 +52,7 @@ export class SanitizePolicy {
 
     constructor(options = {}) {
         this.elements = names(options.elements ?? sanitizeDefaults.elements, NAME, 'element');
-        this.drop = names(options.drop ?? sanitizeDefaults.drop, NAME, 'element');
+        this.removeElements = names(options.removeElements ?? sanitizeDefaults.removeElements, NAME, 'element');
         this.#attributes = groups(options.attributes ?? sanitizeDefaults.attributes, ATTRIBUTE, 'attribute');
         this.#protocols = protocolGroups(options.protocols ?? sanitizeDefaults.protocols);
         this.attributeNames = Object.freeze(unique(Object.values(this.#attributes).flat()));
@@ -58,6 +61,14 @@ export class SanitizePolicy {
         Object.freeze(this);
     }
 
+    /** A copy with some axes replaced: what a host declares, on top of what the application chose. */
+    with(options) {
+        return new SanitizePolicy({
+            elements: this.elements, removeElements: this.removeElements, attributes: this.#attributes,
+            protocols: this.#protocols, comments: this.comments, dataAttributes: this.dataAttributes, ...options,
+        });
+    }
+
     allowsAttribute(element, attribute) {
         const name = element.localName.toLowerCase();
         const attributeName = attribute.toLowerCase();
@@ -78,15 +89,15 @@ export class SanitizePolicy {
     }
 
     // Reduces a subtree to the elements this policy allows, keeping the content
-    // of the rest — except the `drop` elements, which go with theirs. Parsed input
+    // of the rest — except the `removeElements` ones, which go with theirs. Parsed input
     // gets this from the safe sink; markup the browser inserted itself has to be
     // narrowed afterwards.
     //
     // `skip` leaves an element to a later stage. Structural repair already
     // removes what the content model rejects, and it does so knowing that
     // dissolving a block into inline content needs a line break to survive.
-    // A `drop` element is not that kind of question — no later stage may keep
-    // its content — so it goes before `skip` is asked.
+    // A removed element is not that kind of question — no later stage may keep its
+    // content — so it goes before `skip` is asked.
     //
     // `alias` names an equivalent for an element that is not allowed. Dropping
     // `<b>` would lose the emphasis it carries, so a strict list can still keep
@@ -99,7 +110,7 @@ export class SanitizePolicy {
         const changed = [];
         for (const element of descendants(root).reverse()) {
             if (preserve?.has(element) || !element.parentNode) continue;
-            if (this.drop.includes(element.localName)) {
+            if (this.removeElements.includes(element.localName)) {
                 if (map) map.remove(element);
                 else element.remove();
                 changed.push(element);
@@ -147,6 +158,25 @@ export class SanitizePolicy {
 
 export const sanitizePolicy = new SanitizePolicy();
 
+// The policy a host works with: what it declares is what it may carry, and the rest stays as the
+// application configured it. Declaring is rare and reading is not, so equal declarations share one
+// policy instead of building it again.
+const declared = new WeakMap();
+
+export function policyFor({elements = null, attributes = null, protocols = null} = {}, base = sanitizePolicy) {
+    if (!elements && !attributes && !protocols) return base;
+    const key = JSON.stringify([elements, attributes, protocols]);
+    let known = declared.get(base);
+    if (!known) declared.set(base, known = new Map());
+    let policy = known.get(key);
+    if (!policy) {
+        known.set(key, policy = base.with({
+            ...(elements && {elements}), ...(attributes && {attributes}), ...(protocols && {protocols}),
+        }));
+    }
+    return policy;
+}
+
 function names(values, pattern, label) {
     if (!values || typeof values[Symbol.iterator] !== 'function' || typeof values === 'string') {
         throw new TypeError(`${label} names must be an iterable`);

package/js/rte/src/source/source.js

@@ -1,6 +1,7 @@
 import {htmlModel} from '../model/html/html-model.js';
 import {narrow} from '../command/edit.js';
 import {NativeSanitizer} from '../sanitize/native.js';
+import {policyFor} from '../sanitize/policy.js';
 import {SelectionSnapshot} from '../selection/snapshot.js';
 import {replaceContent} from '../surface/content.js';
 
@@ -21,7 +22,9 @@ export class Source {
     #sanitizer;
     #indent;
 
-    constructor(surface, {sanitizer = new NativeSanitizer(), indent = '    '} = {}) {
+    constructor(surface, {sanitizer = null, indent = '    '} = {}) {
+        // Without one supplied, the host's own declarations decide what may be written back.
+        sanitizer ??= new NativeSanitizer(policyFor(surface?.config));
         if (surface?.element?.nodeType !== Node.ELEMENT_NODE || typeof surface?.transact !== 'function') {
             throw new TypeError('A source view requires an editor surface');
         }

package/js/rte/src/surface/surface.js

@@ -7,6 +7,7 @@ export class Surface extends EventTarget {
     #element;
     #options;
     #selection = null;
+    #settings = null;
     #transaction = null;
     #active = false;
     #connected = true;
@@ -21,7 +22,15 @@ export class Surface extends EventTarget {
     get core() { return this.#core; }
     get element() { return this.#element; }
     get options() { return this.#options; }
-    get config() { return config(this.#element); }
+    // One reading per burst of work: a refresh asks dozens of times, and a computed style is the
+    // expensive part of a path every keystroke goes down. The next task reads again, and anything
+    // that changes a host property in this one says so with `invalidate()` — as `refresh()` does.
+    get config() { return this.#settings ??= config(this.#element); }
+
+    invalidate() {
+        this.#settings = null;
+        return this;
+    }
     get selection() { return this.#selection; }
     get transaction() { return this.#transaction; }
     get active() { return this.#active; }

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

@@ -55,6 +55,11 @@ item, boolean and `'mixed'` command states become `aria-pressed`, so toggle
 buttons need no separate adapter. Action buttons omit `data-state` and never
 pretend to be toggles merely because their command can report state.
 `data-control` may give a button a CSS-facing name different from its command,
+A declared `--u2-rte-toolbar` names the controls in the order they are shown; the
+toolbar arranges its markup to match, and anything it does not name keeps the
+order it was built in, after the rest. Nothing moves while the declaration stays
+the same.
+
 just as it does for a value control. This lets `--u2-rte-toolbar: breaks` expose
 a button whose command is `showBreaks`.
 

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

@@ -4,11 +4,29 @@
 // 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.
+// The same hand-back where there is no element left: emptying an address takes the link away, and
+// what follows it is the end of the text it used to be.
+export function caretAfterRange(surface, range) {
+    surface.element.focus();
+    if (!range || !surface.element.contains(range.endContainer)) return surface.restore();
+    const selection = surface.core.selection;
+    const collapsed = range.cloneRange();
+    collapsed.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(collapsed);
+    return !!surface.capture();
+}
+
 export function caretAfter(surface, element) {
     surface.element.focus();
     if (!element?.isConnected) return surface.restore();
     const range = surface.element.ownerDocument.createRange();
-    range.setStartAfter(element);
+    // The start of what follows, rather than the boundary behind the element: engines resolve a
+    // caret at that boundary towards the element it sits behind, and typing would go on inside the
+    // link that was just left. Naming the text node instead says the same place without the pull.
+    const next = element.nextSibling;
+    if (next?.nodeType === Node.TEXT_NODE) range.setStart(next, 0);
+    else range.setStartAfter(element);
     range.collapse(true);
     const selection = surface.core.selection;
     selection.removeAllRanges();

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

@@ -9,6 +9,7 @@ export class Toolbar {
     #surface = null;
     #commands = null;
     #connected = true;
+    #ordered = null;
 
     constructor(core, element, {commands, place = null} = {}) {
         if (!core?.root || typeof core?.addEventListener !== 'function') {
@@ -60,6 +61,7 @@ export class Toolbar {
     refresh() {
         if (!this.#connected) return false;
         const surface = this.#surface;
+        surface?.invalidate(); // whatever a host declared may have changed since the last one
         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;
@@ -70,6 +72,7 @@ export class Toolbar {
         const style = commands && getComputedStyle(surface.element);
         const active = !!commands && surface.config.ui === 'roaming' && visibleForSelection(surface, style);
         const names = active ? configured(style) : null;
+        this.#order(names);
         // 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 && setting(style, 'toolbar-unavailable') === 'hide';
@@ -78,7 +81,7 @@ export class Toolbar {
         for (const item of this.#items()) {
             const name = item.dataset.command.trim();
             const control = item.dataset.control?.trim() || name;
-            const offered = active && commands.has(name) && (!names || names.has(control));
+            const offered = active && commands.has(name) && (!names || names.includes(control));
             const disabled = !offered || !commands.enabled(name, detail);
             item.hidden = !offered || hiding && disabled;
             if (item.hidden) {
@@ -88,10 +91,35 @@ export class Toolbar {
             visible++;
             state(item, item.hasAttribute('data-state') ? commands.state(name, detail) : null, disabled);
         }
+        // A menu button offers what its entries do: present when the command is, available while at
+        // least one entry is, and each entry marked with the value its set currently carries.
+        for (const button of this.#element.querySelectorAll('button[data-command-menu]')) {
+            const command = button.dataset.commandMenu.trim();
+            const control = button.dataset.control?.trim() || command;
+            const show = active && commands.has(command) && (!names || names.includes(control));
+            const panel = this.#element.querySelector(`[data-menu="${command}"]`);
+            let usable = 0;
+            for (const entry of panel?.querySelectorAll('button[data-value]') ?? []) {
+                const value = entry.dataset.value;
+                const on = show && commands.state(command, {...detail, value}) === value;
+                // What is already set stays in the list, marked: an entry the selection carries has
+                // nothing left to apply, and hiding it would take the answer away with the question.
+                const enabled = on || show && commands.enabled(command, {...detail, value});
+                entry.disabled = !enabled;
+                entry.hidden = !enabled;
+                entry.setAttribute('aria-pressed', String(on));
+                if (enabled) usable++;
+            }
+            const offered = show && !!panel?.querySelector('button[data-value]');
+            button.hidden = !offered || hiding && !usable;
+            state(button, null, !usable);
+            if (button.hidden && panel) panel.hidden = true;
+            else visible++;
+        }
         for (const select of this.#values()) {
             const command = select.dataset.commandValue.trim();
             const control = select.dataset.control?.trim() || command;
-            const show = active && commands.has(command) && (!names || names.has(control));
+            const show = active && commands.has(command) && (!names || names.includes(control));
             let choices = 0;
             for (const option of select.options) {
                 if (!option.value) continue;
@@ -167,6 +195,21 @@ export class Toolbar {
         this.refresh();
     }
 
+    // The declaration is the order, not only the choice: a host says what its toolbar looks like,
+    // and what it does not name keeps the order its modules were registered in, behind the rest.
+    // Only a changed declaration moves anything — this runs on every refresh.
+    #order(names) {
+        const key = names?.join(' ') ?? '';
+        if (this.#ordered === key) return;
+        this.#ordered = key;
+        if (!names) return;
+        for (const name of [...names].reverse()) {
+            const control = this.#element.querySelector(`[data-control="${name}"]`);
+            const panel = control?.nextElementSibling?.hasAttribute('data-menu') ? control.nextElementSibling : null;
+            if (control) this.#element.prepend(control, ...(panel ? [panel] : []));
+        }
+    }
+
     #items() {
         return this.#element.querySelectorAll('[data-command]');
     }
@@ -198,11 +241,23 @@ export class Toolbar {
     // Fields keep their own pointer behaviour so they can be opened and typed in.
     #pointerDown = event => {
         const target = event.composedPath()[0];
-        if (target?.closest?.('select, input, textarea')) return;
+        // Fields keep their own pointer behaviour so they can be opened and typed in — but only
+        // while they can take the focus. A disabled one would send it nowhere, and a session ends
+        // where its focus went.
+        const field = target?.closest?.('select, input, textarea');
+        if (field && !field.disabled) return;
         event.preventDefault();
     };
 
     #click = event => {
+        // A menu entry sets a value the way a select does; the menu stays open, so a second set can
+        // be picked without opening it again.
+        const entry = event.target?.closest?.('button[data-command-value][data-value]');
+        if (entry && this.#element.contains(entry) && !entry.disabled) {
+            event.preventDefault();
+            this.#run(entry.dataset.commandValue.trim(), {value: entry.dataset.value});
+            return;
+        }
         const item = this.#item(event.target);
         if (!item) return;
         event.preventDefault();
@@ -235,7 +290,7 @@ function setting(style, name) {
 
 function configured(style) {
     const value = setting(style, 'toolbar');
-    return value ? new Set(value.split(/[\s,]+/).filter(Boolean)) : null;
+    return value ? [...new Set(value.split(/[\s,]+/).filter(Boolean))] : null;
 }
 
 function visibleForSelection(surface, style) {
@@ -250,9 +305,11 @@ function state(item, value, disabled) {
     else item.removeAttribute('aria-pressed');
 }
 
+// Hidden before it leaves the top layer, shown after it enters: the two attributes hide the same
+// element, and `togglePopover(force)` says which state is wanted rather than asking for the current.
 function display(element, visible) {
-    const popover = element.hasAttribute('popover') && typeof element.showPopover === 'function';
-    if (!visible && popover && element.matches(':popover-open')) element.hidePopover();
+    const popover = element.hasAttribute('popover') && typeof element.togglePopover === 'function';
+    if (!visible && popover) element.togglePopover(false);
     element.hidden = !visible;
-    if (visible && popover && !element.matches(':popover-open')) element.showPopover();
+    if (visible && popover) element.togglePopover(true);
 }

package/package.json

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