u2ui 1.5.7 → 1.5.10

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

@@ -94,10 +94,12 @@ arrow keys move through it, Enter takes the current entry, Escape closes the lis
 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.
+Contextual UI goes with the editing session and comes back with it. `follows()`
+owns that lifecycle for every module that draws one: selection, content, and the
+session's return, because coming back to the selection a module was already
+showing for is no selection change and would otherwise leave its handles or its
+form behind. A module that has more of its own to hear ends it with the same
+signal, the way the table handles listen for typing.
 
 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

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

@@ -0,0 +1,22 @@
+// When a contextual UI is drawn, for every module that draws one. It follows the
+// selection and the content of one surface, comes back with the session and goes
+// with it — coming back to the selection it was already showing for is no
+// selection change, so only the session's return says it belongs on screen again.
+//
+// What to draw is the module's own business; this only says when.
+export function follows(surface, draw, close) {
+    const controller = new surface.element.ownerDocument.defaultView.AbortController();
+    const listen = {signal: controller.signal};
+    for (const type of ['u2-rte-selectionchange', 'u2-rte-change', 'u2-rte-activate']) {
+        surface.addEventListener(type, draw, listen);
+    }
+    surface.addEventListener('u2-rte-deactivate', close, listen);
+    return {
+        // A module with more of its own to hear ends it with the same signal.
+        signal: controller.signal,
+        dispose() {
+            controller.abort();
+            close();
+        },
+    };
+}

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

@@ -1,8 +1,9 @@
 import {elementAttributes, selectedElement} from '../command/element.js';
 import {inlineUi} from '../config/config.js';
 import {caretAfter} from '../ui/caret.js';
+import {follows} from './contextual.js';
 import {Handles} from '../ui/handles.js';
-import {place} from '../ui/place.js';
+import {panelGap, place} from '../ui/place.js';
 
 const STYLE = `
 #image {
@@ -93,18 +94,9 @@ export function imageTools({selector = 'img', minimum = 16} = {}) {
             const state = editors.get(editor);
             const view = state?.views.get(surface);
             if (!view) throw new DOMException('The image surface is not set up', 'InvalidStateError');
-            const controller = new state.document.defaultView.AbortController();
-            const listen = {signal: controller.signal};
-            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);
+            const following = follows(surface, () => track(state, view, match), () => close(state, surface));
             return {dispose() {
-                controller.abort();
-                close(state, surface);
+                following.dispose();
                 state.views.delete(surface);
             }};
         },
@@ -192,8 +184,12 @@ function position(state, box = null) {
     for (const handle of HANDLES) {
         state.handles.place(handle.name, rect.left + rect.width * handle.x, rect.top + rect.height * handle.y);
     }
-    // Below the image, clear of the handles sitting on its lower edge.
-    place(state.alt, state.active.view.surface, {align: 'start', prefer: 'below', gap: 16, on: rect});
+    // Below the image and below its handles: they sit on its edges and reach
+    // past them, so what the form hangs off is the pair of them.
+    const lowest = Math.max(rect.bottom, ...HANDLES.map(handle =>
+        state.handles.button(handle.name)?.getBoundingClientRect().bottom ?? 0));
+    place(state.alt, state.active.view.surface, {align: 'start', prefer: 'below', gap: panelGap,
+        on: {left: rect.left, width: rect.width, top: rect.top, bottom: lowest}});
 }
 
 function build(state) {

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

@@ -1,7 +1,9 @@
 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 {place} from '../ui/place.js';
+import {follows} from './contextual.js';
+import {panelGap, place} from '../ui/place.js';
 import {valueMark} from '../command/mark.js';
 
 const STYLE = `
@@ -124,17 +126,9 @@ export function linkEditor({
         attach({editor, surface}) {
             const state = editors.get(editor);
             if (!state) throw new DOMException('The link extension is not set up', 'InvalidStateError');
-            const controller = new state.document.defaultView.AbortController();
-            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);
+            const following = follows(surface, () => follow(state, surface), () => close(state, surface));
             return {dispose() {
-                controller.abort();
-                close(state, surface);
+                following.dispose();
                 state.views.delete(surface);
             }};
         },
@@ -419,14 +413,21 @@ function position(state) {
     return place(state.form, active.surface, {
         align: 'start',
         prefer: 'below',
-        gap: 4,
-        on: active.element?.getBoundingClientRect() || null,
+        gap: panelGap,
+        // What the link covers, not the box it occupies: an inline element that
+        // holds an image is a line box of text height, nowhere near the picture
+        // someone is looking at.
+        on: active.element ? rangeRect(contents(active.element), {root: active.surface.element}) : null,
     });
 }
 
-// The node the surface's saved selection starts in.
+// 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.
 function at(surface) {
-    return surface.selection?.range().startContainer || null;
+    const range = surface.selection?.range();
+    if (!range) return null;
+    return range.startContainer.childNodes?.[range.startOffset] ?? range.startContainer;
 }
 
 // The contents of one element, as a range.

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

@@ -1,6 +1,7 @@
 import {Tables} from '../command/table.js';
 import {inlineUi} from '../config/config.js';
 import {elementOf} from '../selection/ownership/ownership.js';
+import {follows} from './contextual.js';
 import {Handles} from '../ui/handles.js';
 
 
@@ -54,19 +55,13 @@ export function tableTools({tag = 'table'} = {}) {
             const state = editors.get(editor);
             const view = state?.views.get(surface);
             if (!view) throw new DOMException('The table surface is not set up', 'InvalidStateError');
-            const controller = new state.document.defaultView.AbortController();
-            const listen = {signal: controller.signal};
             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);
+            const following = follows(surface, sync, () => close(state, surface));
+            // A table's own shape changes with what is typed in it, wherever the
+            // caret happens to be.
+            surface.element.addEventListener('input', sync, {signal: following.signal});
             return {dispose() {
-                controller.abort();
-                close(state, surface);
+                following.dispose();
                 state.views.delete(surface);
             }};
         },

package/js/rte/src/command/mark.js

@@ -189,8 +189,8 @@ function selected(edit) {
 function canApply(edit, adapter, mark) {
     if (!selected(edit)) return false;
     const wrapper = adapter.render(mark, edit.document);
-    for (const node of edit.range.textNodes()) {
-        if (!node.data || blocked(edit, node) || has(edit, adapter, mark, node)) continue;
+    for (const node of markable(edit, adapter)) {
+        if (has(edit, adapter, mark, node)) continue;
         for (let element = node.parentElement; element && element !== edit.element; element = element.parentElement) {
             if (edit.model.block(element) || isEditingBoundary(element)) break;
             const current = adapter.parse(element);
@@ -224,8 +224,7 @@ function markState(edit, adapter, mark) {
     }
     let active = false;
     let inactive = false;
-    for (const node of edit.range.textNodes()) {
-        if (!node.data || blocked(edit, node)) continue;
+    for (const node of markable(edit, adapter)) {
         has(edit, adapter, mark, node) ? active = true : inactive = true;
         if (active && inactive) return 'mixed';
     }
@@ -265,8 +264,7 @@ function marksAt(edit, adapters, node) {
 function marksIn(edit, adapter) {
     const marks = [];
     if (!edit.range) return marks;
-    for (const node of edit.range.textNodes()) {
-        if (!node.data || blocked(edit, node)) continue;
+    for (const node of markable(edit, adapter)) {
         for (let element = node.parentElement; element && element !== edit.element; element = element.parentElement) {
             if (isEditingBoundary(element) || edit.model.block(element)) break;
             const mark = adapter.parse(element);
@@ -290,7 +288,18 @@ function apply(edit, adapter, mark, range) {
                 changed.push(wrapper);
                 continue;
             }
-            if (node.nodeType !== Node.ELEMENT_NODE || isEditingBoundary(node) || edit.model.atomic(node)) continue;
+            if (node.nodeType !== Node.ELEMENT_NODE || isEditingBoundary(node)) continue;
+            // An atomic element carries a mark the way a word does: nothing can
+            // be marked inside it, so the mark goes around it.
+            if (edit.model.atomic(node)) {
+                if (!covered(range, node) || !wrappable(edit, adapter, mark, node)) continue;
+                const wrapper = adapter.render(mark, edit.document);
+                if (!edit.model.allows(parent, wrapper)) continue;
+                edit.map.wrap([node], wrapper);
+                edit.transaction.touch(wrapper);
+                changed.push(wrapper);
+                continue;
+            }
             if (covered(range, node) && reusable(edit, adapter, node)) {
                 const current = adapter.parse(node);
                 if (current && !current.conflicts(mark)) {
@@ -491,6 +500,29 @@ function marked(edit, adapter, mark, node) {
     return found;
 }
 
+// What a mark can sit on inside the range: the text it formats, and — for a mark
+// about content — the atomic elements that have no text to format. Everything
+// asking what is marked, what could be, and what to replace asks this.
+function markable(edit, adapter) {
+    if (!edit.range) return [];
+    return [...edit.range.textNodes().filter(node => node.data && !blocked(edit, node)),
+        ...atomics(edit, adapter)];
+}
+
+// The atomic elements in the range a content mark can sit on: nothing inside one
+// can carry a mark, so the mark is around it — and a text mark has no business
+// with them at all.
+function atomics(edit, adapter) {
+    if (adapter.covers !== 'content' || !edit.range) return [];
+    return edit.range.roots().filter(node => node.nodeType === Node.ELEMENT_NODE
+        && !isEditingBoundary(node) && edit.model.atomic(node));
+}
+
+function wrappable(edit, adapter, mark, node) {
+    return adapter.covers === 'content' && node?.nodeType === Node.ELEMENT_NODE
+        && !isEditingBoundary(node) && edit.model.atomic(node) && !has(edit, adapter, mark, node);
+}
+
 function has(edit, adapter, mark, node) {
     for (let element = elementOf(node); element && element !== edit.element; element = element.parentElement) {
         if (isEditingBoundary(element) || edit.model.block(element)) return false;

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

@@ -12,8 +12,7 @@ export class Rte extends EventTarget {
     #retained = new Set();
     #active = null;
     #unfocused = false;
-    #pointer = null;
-    #handed = false;
+    #press = null;
     #controller;
 
     constructor(root = document, options = {}) {
@@ -173,15 +172,15 @@ export class Rte extends EventTarget {
         // 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)) {
+        if (surface && this.#press && !this.#press.path.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;
+            if (!this.#press.handed) {
+                this.#press.handed = true;
                 editable.blur();
             }
             return;
@@ -207,8 +206,7 @@ export class Rte extends EventTarget {
 
     #pointerDown = event => {
         const path = event.composedPath();
-        this.#pointer = path;
-        this.#handed = false;
+        this.#press = {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.
@@ -233,7 +231,7 @@ export class Rte extends EventTarget {
     }
 
     #pointerDone = () => {
-        this.#pointer = null;
+        this.#press = null;
     };
 
     #selectionChange = () => {

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

@@ -17,6 +17,13 @@ an attribute, a style, or something custom. `standard.js` provides the compact
 default HTML policies for bold, italic, underline, strike, code, and links. The
 range commands apply or remove those representations on selected text.
 
+## What a mark is about
+
+A mark covers `text` by default: bold, italic, a content class. `covers:
+"content"` says the other kind — a link is not about the letters but about what
+they point at, so it also goes around content that has no text of its own. An
+image can be a link; an emphasized image is nothing, and stays unmarked.
+
 ## Public contract
 
 `MarkType` describes one kind of formatting. `bold`, `link`, and `color` are

package/js/rte/src/mark/dom-adapter.js

@@ -10,8 +10,9 @@ export class MarkAdapter {
     #write;
     #clear;
     #reuse;
+    #covers;
 
-    constructor(type, {selector, tag, read = TRUE, write, clear, reuse = false, render} = {}) {
+    constructor(type, {selector, tag, read = TRUE, write, clear, reuse = false, render, covers = 'text'} = {}) {
         if (!(type instanceof MarkType)) throw new TypeError('A mark adapter requires a mark type');
         if (typeof selector !== 'string' || !selector.trim()) {
             throw new TypeError('A mark adapter requires a non-empty selector');
@@ -25,6 +26,7 @@ export class MarkAdapter {
         if (reuse && !write) throw new TypeError('A reusable mark adapter requires write');
         if (render !== undefined && typeof render !== 'function') throw new TypeError('A mark renderer must be a function');
         if (render && tag !== undefined) throw new TypeError('A custom mark renderer cannot be combined with tag');
+        if (covers !== 'text' && covers !== 'content') throw new TypeError('A mark covers "text" or "content"');
         if (!render && (typeof tag !== 'string' || !/^[a-z][a-z0-9-]*$/.test(tag))) {
             throw new TypeError('A mark adapter requires a lowercase HTML tag');
         }
@@ -34,6 +36,7 @@ export class MarkAdapter {
         this.#write = write;
         this.#clear = clear;
         this.#reuse = reuse;
+        this.#covers = covers;
         this.#render = render || ((document, value) => {
             const element = document.createElement(tag);
             write?.(element, value);
@@ -44,6 +47,10 @@ export class MarkAdapter {
     get type() { return this.#type; }
     get selector() { return this.#selector; }
     get reusable() { return !!this.#reuse; }
+    // What the mark is about: the text it formats, or the content it applies to.
+    // A link is the second kind — an image can be one, an emphasized image is
+    // nothing — and only that kind goes around content with no text of its own.
+    get covers() { return this.#covers; }
     get removable() { return !!this.#clear; }
 
     parse(element) {

package/js/rte/src/mark/standard.js

@@ -18,6 +18,8 @@ export const codeHtml = element(code, 'code', 'code');
 export const linkHtml = new MarkAdapter(link, {
     selector: 'a[href]',
     tag: 'a',
+    // A link is about the content, not about its text: an image can be one.
+    covers: 'content',
     read: readLink,
     write: writeLink,
     clear: clearLink,

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

@@ -243,6 +243,11 @@ 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.
 
+Two panels can answer for the same thing — an image that is also a link brings
+its frame, its name and its address — so a panel goes under whatever is already
+drawn where it wants to be, in the order the chrome holds them. `panelGap` is
+the one distance they all keep from what they hang off, and from each other.
+
 `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

package/js/rte/src/ui/place.js

@@ -6,6 +6,12 @@ import {rangeRect} from '../browser/range-rect.js';
 //
 // A UI that belongs to one element rather than to the selection passes that
 // element's rect as `on`: what it points at should not shift with the caret.
+// One distance for every panel that hangs off something, and between two of them
+// — near enough to read as belonging to it. What must be cleared belongs in the
+// rect a caller anchors on, not in this number: a frame's handles reach past the
+// element they sit on, and the panel below them is told so.
+export const panelGap = 8;
+
 export function place(element, surface, {align = 'center', prefer = 'above', gap = 28, on = null} = {}) {
     const range = on ? null : surface.selection?.range();
     if (!on && !range) return false;
@@ -19,7 +25,24 @@ export function place(element, surface, {align = 'center', prefer = 'above', gap
     const top = prefer === 'above'
         ? (fits ? above : Math.min(view.innerHeight - box.height - gap, below))
         : (fits ? below : Math.max(gap, above));
-    element.style.left = `${Math.max(gap, Math.min(view.innerWidth - box.width - gap, start))}px`;
-    element.style.top = `${top}px`;
+    const left = Math.max(gap, Math.min(view.innerWidth - box.width - gap, start));
+    element.style.left = `${left}px`;
+    element.style.top = `${clear(element, {top, left, width: box.width, height: box.height}, gap)}px`;
     return true;
 }
+
+// Two panels can answer for the same thing — an image that is also a link — and
+// the second must not sit on the first. What is already drawn keeps its spot and
+// the newcomer goes under it, in the order the chrome holds them, so the same
+// two always stack the same way round.
+function clear(element, box, gap) {
+    let top = box.top;
+    for (const panel of element.getRootNode().querySelectorAll?.('.panel') ?? []) {
+        if (panel === element || panel.hidden) continue;
+        const other = panel.getBoundingClientRect();
+        const misses = other.bottom <= top || other.top >= top + box.height
+            || other.right <= box.left || other.left >= box.left + box.width;
+        if (!misses) top = other.bottom + gap;
+    }
+    return top;
+}

package/package.json

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