u2ui 1.5.3 → 1.5.7

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

@@ -0,0 +1,182 @@
+import {Source} from '../source/source.js';
+
+const STYLE = `
+#source {
+    pointer-events: auto;
+    block-size: min(70vh, 45.71em);
+    border: 1px solid;
+    inline-size: min(90vw, 68.57em);
+    max-block-size: none;
+    max-inline-size: none;
+    padding: 0;
+}
+#source form {
+    block-size: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: .57em;
+    margin: 0;
+    padding: .57em;
+}
+#source u2-code {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    font-family: monospace;
+    min-block-size: 0;
+    overflow: auto;
+}
+#source textarea {
+    box-sizing: border-box;
+    flex: 1;
+    font-family: monospace;
+    inline-size: 100%;
+    resize: none;
+    white-space: pre;
+}
+#source menu {
+    display: flex;
+    gap: .57em;
+    justify-content: flex-end;
+    margin: 0;
+    padding: 0;
+}
+`;
+
+// Optional source view. One dialog per editor is shared by every surface: it is
+// modal, so only one can be open, and its lifetime belongs to the editor rather
+// than to a surface that may be replaced while it is open.
+//
+// The text area is always wrapped in `<u2-code>`. Where that element is defined
+// it takes the textarea over and highlights it; where it is not, the textarea
+// renders on its own. Highlighting is therefore an enhancement, never a
+// dependency. `highlight` is an optional loader called before the first open.
+export function sourceView({highlight = null, ...options} = {}) {
+    if (highlight !== null && typeof highlight !== 'function') {
+        throw new TypeError('A source highlighter must be a loader function');
+    }
+    const editors = new WeakMap();
+    return Object.freeze({
+        name: 'source',
+        setup({editor, root, chrome}) {
+            const state = {
+                root,
+                chrome,
+                document: root.nodeType === Node.DOCUMENT_NODE ? root : root.ownerDocument,
+                options,
+                highlight,
+                loaded: null,
+                dialog: null,
+                pending: null,
+            };
+            editors.set(editor, state);
+            let connected = true;
+            return {dispose() {
+                if (!connected) return;
+                state.dialog?.remove();
+                editors.delete(editor);
+                connected = false;
+            }};
+        },
+        commands({editor, surface}) {
+            const state = editors.get(editor);
+            if (!state) throw new DOMException('The source extension is not set up', 'InvalidStateError');
+            return {source: {
+                // No convention has settled here: the browsers' own "view
+                // source" is ctrl+u, which an editor owes to underline. H reads
+                // as html and is what the editor this replaces used.
+                shortcut: 'ctrl+h',
+                // Editing happens in the dialog, so opening it changes nothing
+                // and the write it may cause runs as its own transaction.
+                transaction: false,
+                enabled: edit => !!edit.range,
+                run: () => open(state, surface),
+            }};
+        },
+        toolbar: Object.freeze([Object.freeze({
+            command: 'source', label: 'HTML source', text: '</>', shortcut: 'ctrl+h',
+        })]),
+    });
+}
+
+// A loader is awaited so the first open is already highlighted; without one the
+// dialog opens synchronously.
+function open(state, surface) {
+    if (!state.highlight) return show(state, surface);
+    state.loaded ??= Promise.resolve().then(state.highlight).catch(() => null);
+    return state.loaded.then(() => show(state, surface));
+}
+
+function show(state, surface) {
+    const view = new Source(surface, state.options);
+    const dialog = build(state);
+    const code = dialog.querySelector('u2-code');
+    const area = dialog.querySelector('textarea');
+    const {html, start, end} = view.read();
+    // The light textarea always carries the value: a late upgrade reads it, and
+    // an upgraded element writes every edit back into it.
+    area.value = html;
+    const input = upgraded(code) ? code : area;
+    // The value has to be set before focus; an upgraded element defers a write
+    // to a focused field.
+    if (input === code) code.value = html;
+    state.pending = {view, surface, code, area};
+    dialog.showModal();
+    input.focus();
+    input.setSelectionRange(start ?? 0, end ?? start ?? 0);
+    // A long document opens scrolled to the selection instead of at the top.
+    const lines = html.slice(0, start ?? 0).split('\n').length - 1;
+    const height = parseFloat(state.document.defaultView.getComputedStyle(area).lineHeight);
+    if (lines && height) (input === code ? code : area).scrollTop = lines * height;
+    return view;
+}
+
+function upgraded(element) {
+    return typeof element.value === 'string' && typeof element.setSelectionRange === 'function';
+}
+
+function build(state) {
+    if (state.dialog) return state.dialog;
+    const dialog = state.chrome.part('source', STYLE, 'dialog');
+    dialog.setAttribute('aria-label', 'HTML source');
+    const form = state.document.createElement('form');
+    form.method = 'dialog';
+    const area = state.document.createElement('textarea');
+    area.spellcheck = false;
+    area.setAttribute('aria-label', 'HTML source');
+    const code = state.document.createElement('u2-code');
+    code.setAttribute('editable', '');
+    code.setAttribute('language', 'html');
+    code.append(area);
+    const menu = state.document.createElement('menu');
+    for (const [value, label] of [['cancel', 'Cancel'], ['apply', 'Apply']]) {
+        const button = state.document.createElement('button');
+        button.type = 'submit';
+        button.value = value;
+        button.textContent = label;
+        menu.append(button);
+    }
+    form.append(code, menu);
+    dialog.append(form);
+    dialog.addEventListener('close', () => apply(state, dialog.returnValue));
+    state.chrome.root.append(dialog);
+    state.dialog = dialog;
+    return dialog;
+}
+
+function apply(state, result) {
+    const pending = state.pending;
+    state.pending = null;
+    if (!pending?.surface.connected) return;
+    // Focus returns before writing so the surface owns the selection the
+    // resulting transaction captures.
+    pending.surface.element.focus();
+    if (result !== 'apply') {
+        // Closing without applying leaves the surface exactly as it was,
+        // including the caret the view was opened on.
+        pending.surface.restore();
+        return;
+    }
+    pending.view.write(upgraded(pending.code) ? pending.code.value : pending.area.value);
+}

package/js/rte/src/client/structure.js

@@ -0,0 +1,27 @@
+import {insertNode} from '../command/insert.js';
+import {Lists} from '../command/list.js';
+
+// Block structure as one convention module: lists, their nesting level, and a
+// separator. All of them consult the content model, so a host that does not
+// allow a list or a rule simply keeps the control disabled.
+const lists = new Lists(['ul', 'ol']);
+
+export const structure = Object.freeze({
+    name: 'structure',
+    // Tab and Shift+Tab only ever reach the nesting commands where those are
+    // available, so outside a list they keep moving focus as they should.
+    commands: () => ({
+        bullets: {...lists.toggle('ul'), shortcut: 'ctrl+shift+8'},
+        numbers: {...lists.toggle('ol'), shortcut: 'ctrl+shift+7'},
+        indent: {...lists.indent, shortcut: 'tab'},
+        outdent: {...lists.outdent, shortcut: 'shift+tab'},
+        rule: insertNode(document => document.createElement('hr')),
+    }),
+    toolbar: Object.freeze([
+        Object.freeze({command: 'bullets', label: 'Bulleted list', text: '•–', state: true, shortcut: 'ctrl+shift+8'}),
+        Object.freeze({command: 'numbers', label: 'Numbered list', text: '1–', state: true, shortcut: 'ctrl+shift+7'}),
+        Object.freeze({command: 'outdent', label: 'Decrease level', text: '⇤', shortcut: 'shift+tab'}),
+        Object.freeze({command: 'indent', label: 'Increase level', text: '⇥', shortcut: 'tab'}),
+        Object.freeze({command: 'rule', label: 'Separator', text: '―'}),
+    ]),
+});

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

@@ -0,0 +1,165 @@
+import {Tables} from '../command/table.js';
+import {inlineUi} from '../config/config.js';
+import {elementOf} from '../selection/ownership/ownership.js';
+import {Handles} from '../ui/handles.js';
+
+
+// Where each handle sits: `axis` picks the edge it lines up with, `at` the
+// fraction along the cell it is anchored to.
+const HANDLES = [
+    {name: 'rowBefore', axis: 'row', at: 0, label: 'Row above', text: '+'},
+    {name: 'rowDelete', axis: 'row', at: 0.5, label: 'Delete row', text: '×'},
+    {name: 'rowAfter', axis: 'row', at: 1, label: 'Row below', text: '+'},
+    {name: 'columnBefore', axis: 'column', at: 0, label: 'Column before', text: '+'},
+    {name: 'columnDelete', axis: 'column', at: 0.5, label: 'Delete column', text: '×'},
+    {name: 'columnAfter', axis: 'column', at: 1, label: 'Column after', text: '+'},
+];
+
+// Optional table module. Inserting a table is a toolbar action because it
+// applies where no table is; everything else belongs to a table that exists, so
+// it appears on that table — row handles down its left edge, column handles
+// along its top, lined up with the cell the caret is in.
+export function tableTools({tag = 'table'} = {}) {
+    const tables = new Tables(tag);
+    const editors = new WeakMap();
+    return Object.freeze({
+        name: 'tables',
+        setup({editor, root, chrome}) {
+            const state = {
+                root,
+                chrome,
+                document: root.nodeType === Node.DOCUMENT_NODE ? root : root.ownerDocument,
+                views: new WeakMap(),
+                active: null,
+                handles: null,
+                controller: null,
+                frame: 0,
+            };
+            editors.set(editor, state);
+            let connected = true;
+            return {dispose() {
+                if (!connected) return;
+                release(state);
+                editors.delete(editor);
+                connected = false;
+            }};
+        },
+        commands({editor, surface, commands}) {
+            const state = editors.get(editor);
+            if (!state) throw new DOMException('The table extension is not set up', 'InvalidStateError');
+            state.views.set(surface, {surface, commands});
+            return tables.commands;
+        },
+        attach({editor, surface}) {
+            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);
+            return {dispose() {
+                controller.abort();
+                close(state, surface);
+                state.views.delete(surface);
+            }};
+        },
+        toolbar: Object.freeze([Object.freeze({command: 'insertTable', label: 'Insert table', text: '⊞'})]),
+    });
+}
+
+export const tables = tableTools();
+
+function track(state, view) {
+    if (!inlineUi(view.surface.config, 'table')) return close(state, view.surface);
+    const cell = cellAt(view.surface);
+    if (!cell) return close(state, view.surface);
+    build(state);
+    state.active = {view, cell};
+    state.handles.show();
+    for (const handle of HANDLES) state.handles.disable(handle.name, !view.commands.enabled(handle.name));
+    schedule(state);
+}
+
+function close(state, surface) {
+    if (surface && state.active && state.active.view.surface !== surface) return;
+    state.active = null;
+    state.handles?.show(false);
+}
+
+// The cell the surface's saved selection sits in, if any.
+function cellAt(surface) {
+    const range = surface.selection?.range();
+    if (!range) return null;
+    for (let element = elementOf(range.startContainer); element && element !== surface.element;
+        element = element.parentElement) {
+        if (element.matches('td, th') && surface.element.contains(element)) return element;
+    }
+    return null;
+}
+
+function schedule(state) {
+    if (state.frame || !state.handles) return;
+    state.frame = state.document.defaultView.requestAnimationFrame(() => {
+        state.frame = 0;
+        position(state);
+    });
+}
+
+function position(state) {
+    const cell = state.active?.cell;
+    const table = cell?.isConnected && cell.closest('table');
+    if (!table) return close(state);
+    const box = cell.getBoundingClientRect();
+    const bounds = table.getBoundingClientRect();
+    const edge = 12;
+    // One axis follows the cell, the other sits just outside the table's edge.
+    for (const {name, axis, at} of HANDLES) {
+        const centre = axis === 'row'
+            ? {x: bounds.left - edge, y: box.top + box.height * at}
+            : {x: box.left + box.width * at, y: bounds.top - edge};
+        state.handles.place(name, centre.x, centre.y);
+    }
+}
+
+function build(state) {
+    if (state.handles) return state.handles;
+    state.handles = new Handles(state.chrome.root, {
+        name: 'tables',
+        handles: HANDLES,
+        action: name => run(state, name),
+    });
+    const controller = new state.document.defaultView.AbortController();
+    const reposition = () => state.active && schedule(state);
+    state.root.addEventListener('scroll', reposition,
+        {capture: true, passive: true, signal: controller.signal});
+    state.document.defaultView.addEventListener('resize', reposition, {signal: controller.signal});
+    state.controller = controller;
+    return state.handles;
+}
+
+function run(state, name) {
+    const active = state.active;
+    if (!active?.view.surface.connected) return;
+    const {view} = active;
+    if (!view.surface.capture()) view.surface.restore();
+    view.commands.run(name);
+    view.surface.element.focus();
+    track(state, view);
+}
+
+function release(state) {
+    state.controller?.abort();
+    if (state.frame) state.document.defaultView.cancelAnimationFrame(state.frame);
+    state.handles?.dispose();
+    state.active = null;
+    state.frame = 0;
+    state.handles = null;
+    state.controller = null;
+}

package/js/rte/src/client/unstyle.js

@@ -0,0 +1,32 @@
+import {unstyleCommand} from '../command/unstyle.js';
+import {Unstyle, defaultUnstyleLevels} from '../unstyle/unstyle.js';
+
+export function unstyles(levels = defaultUnstyleLevels, {
+    name = 'unstyle',
+    control = 'unstyle',
+    command = 'unstyle',
+    label = 'Remove formatting',
+    text = 'T×',
+    shortcut = 'ctrl+\\',
+} = {}) {
+    for (const [property, value] of Object.entries({name, control, command, label, text})) {
+        if (typeof value !== 'string' || !value.trim()) {
+            throw new TypeError(`Unstyle module ${property} must be a non-empty string`);
+        }
+    }
+    const policy = new Unstyle(levels);
+    const commands = Object.freeze({[command]: {...unstyleCommand(policy), shortcut}});
+    return Object.freeze({
+        name: name.trim(),
+        commands: () => commands,
+        toolbar: Object.freeze([Object.freeze({
+            name: control.trim(),
+            command: command.trim(),
+            label: label.trim(),
+            text: text.trim(),
+            shortcut,
+        })]),
+    });
+}
+
+export const unstyle = unstyles();