edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/triggers/TriggerController.svelte.js

@@ -1,16 +1,25 @@
 import { inCodeLines } from '../../session/inputRules.js';
-import { identify, inPage, keepFocus, optionAttributes } from '../chrome.js';
+import { ChromeList, inPage } from '../list.svelte.js';
 /** A trigger opens at a text's start or after whitespace, never inside a word (`1/2`, `a@b`). */
 const startsTrigger = (text, offset) => offset === 0 || /\s/.test(text.stringContent[offset - 1] ?? '');
-export class TextTriggerController {
-    edytor;
+/** What `items` and `onPick` read: the trigger's block, its range in block offsets, the query. */
+const contextOf = (edytor, text, start, end, query) => {
+    const block = text.parent;
+    return {
+        edytor,
+        block,
+        from: text.segStart + start,
+        to: text.segStart + end,
+        query,
+        caret: (offset) => void edytor.dispatcher.caret({ block, offset })
+    };
+};
+export class TextTriggerController extends ChromeList {
     char;
-    owner;
     isOpen = $state(false);
     query = $state('');
-    selectedIndex = $state(0);
     /** The trigger's start and the query's end, held as anchors so peers' edits move them. */
-    activeRange = null;
+    #activeRange = null;
     /** A pick is running: its own selection changes close nothing. */
     picking = false;
     constructor(edytor, 
@@ -18,65 +27,30 @@ export class TextTriggerController {
     char, 
     /** The popup's owner name (`edytor.popups`), unique per view. */
     owner) {
-        this.edytor = edytor;
+        super(edytor, owner, 'listbox', (node) => this.isOpen && this.popupOf(inPage(node, this.rowId(this.index))));
         this.char = char;
-        this.owner = owner;
     }
     /** The editor is readonly: the menu closes. */
     get readonly() {
         return this.edytor.readonly;
     }
-    /** The listbox's element id (page-unique), for `aria-controls`. */
-    get listId() {
-        return this.edytor.popups.idOf(this.owner);
-    }
-    /** Publish the open menu to the view's root (`edytor.popups`), or withdraw it with `null`. */
-    publish = (popup) => this.edytor.popups.set(this.owner, popup);
-    /**
-     * The listbox (`{@attach controller.popup}`): it takes the menu's id, its
-     * `listbox` role and name unless it has its own, keeps the focus where it
-     * is on a press (the editor's caret, or the menu's field), and is
-     * published to the view's root (`edytor.popups`) while the menu is open,
-     * with its highlighted row (`option(index)`) once that row is in the page.
-     */
-    popup = (node) => {
-        identify(node, this.listId, 'listbox', this.listName);
-        node.addEventListener('mousedown', keepFocus);
-        $effect(() => {
-            if (!this.isOpen)
-                return;
-            this.publish(this.popupOf(inPage(node, this.rowIdAt(this.selectedIndex))));
-            return () => this.publish(null);
-        });
-        return () => node.removeEventListener('mousedown', keepFocus);
-    };
-    /**
-     * The attributes of the row at `index`: spread them on its element
-     * (`{...controller.option(index)}`): its id (the one the menu's keyboard
-     * owner names), `role="option"`, `aria-selected` and `data-selected` for
-     * the keyboard's row, which scrolls into view.
-     */
-    option = (index) => optionAttributes(this.rowIdAt(index) ?? this.edytor.popups.idOf(`${this.owner}-option-${index}`), 'option', index === this.selectedIndex);
     /** The record `popup` publishes, `active` the highlighted row's id when it is in the page. */
     popupOf(active) {
         return { id: this.listId, haspopup: 'listbox', active };
     }
     /** After an `insertText`: the trigger opens, the query grows, or the menu closes. */
-    handleTextInsertion(text, block, payload) {
-        const { state } = this.edytor.selection;
-        const start = payload.start ?? state.yStart;
-        const end = payload.end ?? state.yEnd;
+    handleTextInsertion(text, block, start, value) {
         if (this.edytor.readonly)
             return this.close();
         // A trigger typed alone, or committed by an IME with its query (`/h`).
-        const at = start === end && this.admits(block) ? this.triggerAt(text, start, payload.value) : -1;
+        const at = this.admits(block) ? this.#triggerAt(text, start, value) : -1;
         if (at !== -1)
-            this.open(text, at, start + payload.value.length);
+            this.open(text, at, start + value.length);
         // Typing at the query's end extends it; typing anywhere else closes the menu.
-        else if (this.activeRange) {
+        else if (this.#activeRange) {
             const range = this.range;
             if (text === range?.text && start === range.queryEnd)
-                this.setEnd(text, start + payload.value.length);
+                this.setEnd(text, start + value.length);
             else
                 this.close();
         }
@@ -86,7 +60,7 @@ export class TextTriggerController {
      * the trigger: its start, or -1. A trigger of several characters (`[[`)
      * completes with its last one.
      */
-    triggerAt(text, start, value) {
+    #triggerAt(text, start, value) {
         const content = text.stringContent;
         const { char } = this;
         for (let at = Math.max(0, start - char.length + 1); at <= start; at++) {
@@ -99,10 +73,11 @@ export class TextTriggerController {
     }
     /** The caret moved: it stays after the trigger, in its text, and marks the query's end. */
     reconcileSelection() {
-        if (!this.activeRange || this.picking)
+        if (!this.#activeRange || this.picking)
             return;
         const range = this.range;
-        const { startText, yStart, isCollapsed } = this.edytor.selection.state;
+        const { startText, yStart } = this.edytor.selection.textRange();
+        const { isCollapsed } = this.edytor.selection.projection;
         if (range &&
             isCollapsed &&
             startText === range.text &&
@@ -112,26 +87,17 @@ export class TextTriggerController {
         else
             this.close();
     }
-    /** Move the keyboard's row (wrapping); `false` when there is nothing to move through. */
-    moveSelection(delta) {
-        // Nothing to move through: the arrows stay the caret's.
-        const count = this.isOpen ? this.count : 0;
-        if (!count)
-            return false;
-        this.selectedIndex = (this.selectedIndex + delta + count) % count;
-        return true;
-    }
     close() {
         this.isOpen = false;
         this.query = '';
-        this.selectedIndex = 0;
-        this.activeRange = null;
+        this.index = 0;
+        this.#activeRange = null;
     }
     /** The range where its anchors resolve now: one text, the trigger before the query end. */
     get range() {
         const { selection } = this.edytor;
-        const trigger = this.activeRange && selection.resolveTextAnchor(this.activeRange.trigger);
-        const end = this.activeRange && selection.resolveTextAnchor(this.activeRange.end);
+        const trigger = this.#activeRange && selection.resolveTextAnchor(this.#activeRange.trigger);
+        const end = this.#activeRange && selection.resolveTextAnchor(this.#activeRange.end);
         if (!trigger || !end || trigger.text !== end.text)
             return null;
         if (end.offset < trigger.offset + this.char.length)
@@ -159,25 +125,17 @@ export class TextTriggerController {
             const { selection, dispatcher } = edytor;
             const { text, triggerStart, queryEnd } = range;
             const end = Math.min(queryEnd, text.length);
-            const block = text.parent;
-            const [from, to] = [text.segStart + triggerStart, text.segStart + end];
+            const ctx = contextOf(edytor, text, triggerStart, end, query);
+            const { block, from, to } = ctx;
             this.close();
-            selection.setAtTextOffset(text, triggerStart);
+            selection.selectText(text, triggerStart);
             const held = selection.value;
-            const ctx = {
-                edytor,
-                block,
-                from,
-                to,
-                query,
-                caret: (offset) => void dispatcher.caret({ block, offset })
-            };
             const removal = edytor.facade.prepare.deleteText(block.id, from, to - from);
             const run = dispatcher.lead(removal, () => body(ctx));
             const index = text.index;
             // Nothing took the lead: the trigger goes on its own, unless the body declined.
             if (!run.taken && run.out !== false && index !== -1)
-                block.deleteContentAtRange({ start: [index, triggerStart], end: [index, end] });
+                edytor.deleteText(block.id, from, to - from);
             const kept = run.out === false || (run.taken && dispatcher.last?.status === 'refused');
             const out = await run.out;
             if (owns(text, held))
@@ -190,9 +148,9 @@ export class TextTriggerController {
     }
     setEnd(text, queryEnd) {
         const end = this.edytor.selection.createTextAnchor(text, queryEnd, 'left');
-        if (this.activeRange && end)
-            this.activeRange.end = end;
-        this.syncQueryFromText();
+        if (this.#activeRange && end)
+            this.#activeRange.end = end;
+        this.#syncQueryFromText();
     }
     open(text, triggerStart, queryEnd) {
         const { selection } = this.edytor;
@@ -200,13 +158,13 @@ export class TextTriggerController {
         const end = selection.createTextAnchor(text, queryEnd, 'left');
         if (!trigger || !end)
             return;
-        this.activeRange = { trigger, end };
+        this.#activeRange = { trigger, end };
         this.isOpen = true;
         this.query = '';
-        this.selectedIndex = 0;
-        this.syncQueryFromText(true);
+        this.index = 0;
+        this.#syncQueryFromText(true);
     }
-    syncQueryFromText(opened = false) {
+    #syncQueryFromText(opened = false) {
         const range = this.range;
         if (!range)
             return;
@@ -214,13 +172,13 @@ export class TextTriggerController {
         const query = text.stringContent.slice(triggerStart + this.char.length, queryEnd);
         // A new query highlights its first match again (Notion).
         if (query !== this.query)
-            this.selectedIndex = 0;
+            this.index = 0;
         const changed = opened || query !== this.query;
         this.query = query;
         if (changed)
             this.queried(query);
         else
-            this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, this.count - 1));
+            this.index = Math.max(0, Math.min(this.index, this.count - 1));
     }
 }
 /** The label a row shows: a string itself, else its `label`, `title` or `name`. */
@@ -247,31 +205,13 @@ export class TriggerMenuController extends TextTriggerController {
         this.trigger = trigger;
     }
     get count() {
-        return this.items.length;
+        return this.isOpen ? this.items.length : 0;
     }
     admits(block) {
         if (this.trigger.enabled)
             return this.trigger.enabled(block);
         return !inCodeLines(this.edytor, block);
     }
-    /** The menu's accessible name. */
-    get name() {
-        return this.trigger.name ?? this.edytor.labels.triggerMenu;
-    }
-    get listName() {
-        return this.name;
-    }
-    rowIdAt(index) {
-        return this.items[index] === undefined ? undefined : this.optionId(index);
-    }
-    /** The text shown when no row matches. */
-    get empty() {
-        return this.trigger.empty ?? this.edytor.labels.noResults;
-    }
-    /** The text shown while a search is pending and no row is shown. */
-    get searching() {
-        return this.trigger.searching ?? this.edytor.labels.searching;
-    }
     labelOf = (item) => (this.trigger.label ? this.trigger.label(item) : defaultLabel(item));
     keyOf = (item) => {
         if (this.trigger.key)
@@ -279,35 +219,14 @@ export class TriggerMenuController extends TextTriggerController {
         const id = item?.id;
         return typeof id === 'string' || typeof id === 'number' ? String(id) : this.labelOf(item);
     };
-    /**
-     * The element id of the row at `index` (page-unique, whatever the rows'
-     * keys or labels), for `aria-activedescendant`.
-     */
-    optionId = (index) => this.edytor.popups.idOf(`${this.owner}-option-${index}`);
-    /** The context `items` and `onPick` read, for the current range. */
-    context() {
-        const range = this.range;
-        if (!range)
-            return null;
-        const { text, triggerStart, queryEnd } = range;
-        const block = text.parent;
-        const { edytor, query } = this;
-        return {
-            edytor,
-            block,
-            from: text.segStart + triggerStart,
-            to: text.segStart + queryEnd,
-            query,
-            caret: (offset) => void edytor.dispatcher.caret({ block, offset })
-        };
-    }
     queried(query) {
         // A query that opens with whitespace is prose (`a @ b`): the menu closes.
         if (/^\s/.test(query))
             return this.close();
-        const ctx = this.context();
-        if (!ctx)
+        const range = this.range;
+        if (!range)
             return;
+        const ctx = contextOf(this.edytor, range.text, range.triggerStart, range.queryEnd, query);
         // A pick waiting on the previous query's search is dropped with it.
         this.#pickOnAnswer = false;
         const request = ++this.#request;
@@ -338,7 +257,7 @@ export class TriggerMenuController extends TextTriggerController {
         this.items = Array.isArray(rows) ? rows : [];
         if (!this.items.length && /\s$/.test(this.query))
             return this.close();
-        this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, this.items.length - 1));
+        this.index = Math.max(0, Math.min(this.index, this.items.length - 1));
         if (pick)
             void this.pickSelected();
     }
@@ -359,7 +278,7 @@ export class TriggerMenuController extends TextTriggerController {
             this.#pickOnAnswer = true;
             return Promise.resolve(undefined);
         }
-        const item = this.items[this.selectedIndex];
+        const item = this.items[this.index];
         return item === undefined ? Promise.resolve(undefined) : this.pick(item);
     }
     /** Replace the trigger and its query with `item` (`onPick`). */

package/dist/plugins/triggers/place.d.ts

@@ -4,12 +4,3 @@ import type { Edytor } from '../../edytor.svelte.js';
  * else the caret's text element, else the editor's box.
  */
 export declare const caretRect: (edytor: Edytor) => DOMRect | undefined;
-/**
- * A menu's position below `rect` (above it when there is no room), kept in
- * the viewport: measured now, written by the returned function (the
- * overlay's read-then-write pass).
- */
-export declare const placeBelow: (host: HTMLElement, rect: DOMRect, fallback: {
-    width: number;
-    height: number;
-}) => (() => void) | void;

package/dist/plugins/triggers/place.js

@@ -15,23 +15,7 @@ export const caretRect = (edytor) => {
             rect = range.getBoundingClientRect();
     }
     if (!rect || (!rect.width && !rect.height)) {
-        rect = edytor.selection.state.startText?.node?.getBoundingClientRect();
+        rect = edytor.selection.textRange().startText?.node?.getBoundingClientRect();
     }
     return rect ?? editor.getBoundingClientRect();
 };
-/**
- * A menu's position below `rect` (above it when there is no room), kept in
- * the viewport: measured now, written by the returned function (the
- * overlay's read-then-write pass).
- */
-export const placeBelow = (host, rect, fallback) => {
-    const view = host.ownerDocument.defaultView;
-    if (!view)
-        return;
-    const box = host.firstElementChild?.getBoundingClientRect();
-    const width = box?.width || fallback.width;
-    const height = box?.height || fallback.height;
-    const left = `${Math.max(8, Math.min(rect.left, view.innerWidth - width - 8))}px`;
-    const top = `${Math.max(8, rect.bottom + height + 8 < view.innerHeight ? rect.bottom + 8 : rect.top - height - 8)}px`;
-    return () => Object.assign(host.style, { left, top });
-};

package/dist/plugins/triggers/triggers.d.ts

@@ -1,12 +1,34 @@
 /**
- * A plugin's `inputRules` and `triggers`, turned into its hooks: the rules
- * run in its `onBeforeOperation` (after its own hook), each trigger is a
- * `TriggerMenuController` fed by its `onAfterOperation` and
- * `onSelectionChange`, rendered in the overlay, and keyed through its
- * `hotkeys` (before its own bindings of the same keys). The precedence of
- * both is the plugin's place in the list.
+ * Input rules and triggers, wired into a plugin's own hooks
+ * (`withRulesAndTriggers`): the rules run in its `onBeforeOperation`
+ * (after its own hook), each trigger is a `TriggerMenuController` fed by
+ * its `onAfterOperation` and `onSelectionChange`, rendered in the overlay,
+ * and keyed through its `hotkeys` (before its own bindings of the same
+ * keys), as the slash menu is (`withTriggerMenus`). The precedence of both
+ * is the plugin's place in the list. A view without such a plugin ships
+ * none of it.
  */
 import type { Edytor } from '../../edytor.svelte.js';
-import type { InitializedPlugin } from '../../plugins.js';
-/** `plugin` with its input rules and triggers wired into its hooks; `at` is its place in the list. */
-export declare const withRulesAndTriggers: (edytor: Edytor, plugin: InitializedPlugin, at: number) => InitializedPlugin;
+import type { InitializedPlugin, InputRule, Trigger } from '../../plugins.js';
+import { type TextTriggerController } from './TriggerController.svelte.js';
+import { type HeldList } from '../list.svelte.js';
+/**
+ * `plugin` with `inputRules` (text typed at the caret that a rule
+ * replaces: markdown, `:smile:` → 😄) and `triggers` (characters that open
+ * a menu of rows at the caret: `@` mentions) run through its own hooks.
+ * A plugin declares them by returning this:
+ * `(edytor) => withRulesAndTriggers(edytor, { inlineBlocks }, { triggers: [mention] })`.
+ */
+export declare const withRulesAndTriggers: (edytor: Edytor, plugin: InitializedPlugin, { inputRules, triggers }: {
+    inputRules?: InputRule[];
+    triggers?: Trigger[];
+}) => InitializedPlugin;
+/**
+ * `plugin` with trigger menus wired into its hooks (a plugin's `triggers`,
+ * the slash menu): each controller fed by its `onAfterOperation` (an
+ * `insertText`) and `onSelectionChange`, its menu mounted in the overlay by
+ * `mount` once the view is attached, and the open one keyed through its
+ * `hotkeys` (`listHotkeys`, before the plugin's own bindings of the same
+ * keys) as `held` drives it.
+ */
+export declare const withTriggerMenus: <C extends TextTriggerController>(edytor: Edytor, plugin: InitializedPlugin, controllers: C[], held: (controller: C) => HeldList, mount: (controller: C) => () => void) => InitializedPlugin;

package/dist/plugins/triggers/triggers.js

@@ -1,22 +1,28 @@
 import { inputRulesHook } from '../../session/inputRules.js';
 import { TriggerMenuController } from './TriggerController.svelte.js';
-import TriggerMenu from './TriggerMenu.svelte';
-import { caretRect, placeBelow } from './place.js';
+import { caretRect } from './place.js';
+import { placeNear } from '../../surface/overlay.js';
+import { listHotkeys } from '../list.svelte.js';
+import { mountChrome } from '../chrome.js';
 /** Two bindings of one chord, `first`'s claim ending the key. */
 const both = (first, then) => (payload) => {
     first(payload);
     then?.(payload);
 };
-/** `plugin` with its input rules and triggers wired into its hooks; `at` is its place in the list. */
-export const withRulesAndTriggers = (edytor, plugin, at) => {
-    const rules = plugin.inputRules ?? [];
-    const triggers = plugin.triggers ?? [];
-    if (!rules.length && !triggers.length)
-        return plugin;
+/** The triggers each view numbered so far: a trigger's popup owner name. */
+const counts = new WeakMap();
+/**
+ * `plugin` with `inputRules` (text typed at the caret that a rule
+ * replaces: markdown, `:smile:` → 😄) and `triggers` (characters that open
+ * a menu of rows at the caret: `@` mentions) run through its own hooks.
+ * A plugin declares them by returning this:
+ * `(edytor) => withRulesAndTriggers(edytor, { inlineBlocks }, { triggers: [mention] })`.
+ */
+export const withRulesAndTriggers = (edytor, plugin, { inputRules = [], triggers = [] }) => {
     const extended = { ...plugin };
-    if (rules.length) {
+    if (inputRules.length) {
         const own = plugin.onBeforeOperation;
-        const run = inputRulesHook(edytor, rules);
+        const run = inputRulesHook(edytor, inputRules);
         // Both run, whatever the plugin's hook answers (a prevent in it throws and
         // ends the hook): the rules read the payload it replaced the command's with.
         extended.onBeforeOperation = (change) => {
@@ -25,63 +31,77 @@ export const withRulesAndTriggers = (edytor, plugin, at) => {
             return out;
         };
     }
-    if (!triggers.length)
+    // The records read with no view (`plugin(undefined)`) keep no menus.
+    if (!triggers.length || !edytor)
         return extended;
-    const controllers = triggers.map((trigger, index) => new TriggerMenuController(edytor, trigger, `trigger-${at}-${index}`));
-    const open = () => controllers.find((controller) => controller.isOpen);
-    const keys = {
-        arrowdown: ({ prevent }) => {
-            if (open()?.moveSelection(1))
-                prevent();
-        },
-        arrowup: ({ prevent }) => {
-            if (open()?.moveSelection(-1))
-                prevent();
-        },
-        enter: ({ prevent }) => {
-            const controller = open();
-            // A pending search's Enter waits for its rows: never an older query's row.
-            if (controller?.items.length || controller?.loading)
-                prevent(() => void controller.pickSelected());
-        },
-        escape: ({ prevent }) => {
-            const controller = open();
-            if (controller)
-                prevent(() => controller.close());
+    const controllers = triggers.map((trigger) => {
+        const n = counts.get(edytor) ?? 0;
+        counts.set(edytor, n + 1);
+        return new TriggerMenuController(edytor, trigger, `trigger-${n}`);
+    });
+    return withTriggerMenus(edytor, extended, controllers, (controller) => ({
+        move: controller.move,
+        // A pending search's Enter waits for its rows: never an older query's row.
+        pick: controller.items.length || controller.loading
+            ? () => void controller.pickSelected()
+            : undefined,
+        close: () => controller.close()
+    }), 
+    // Below the caret (above it when there is no room), kept in the viewport.
+    (controller) => mountChrome(edytor, controller.trigger.menu, controller, () => controller.isOpen, {
+        name: 'edytor-trigger-menu-host',
+        zIndex: 50,
+        measure: (host) => {
+            if (!controller.isOpen)
+                return;
+            const rect = caretRect(edytor);
+            return rect && placeNear(host, rect, [280, 240]);
         }
-    };
+    }, () => controller.close()));
+};
+/**
+ * `plugin` with trigger menus wired into its hooks (a plugin's `triggers`,
+ * the slash menu): each controller fed by its `onAfterOperation` (an
+ * `insertText`) and `onSelectionChange`, its menu mounted in the overlay by
+ * `mount` once the view is attached, and the open one keyed through its
+ * `hotkeys` (`listHotkeys`, before the plugin's own bindings of the same
+ * keys) as `held` drives it.
+ */
+export const withTriggerMenus = (edytor, plugin, controllers, held, mount) => {
+    const keys = listHotkeys(() => {
+        const controller = controllers.find(({ isOpen }) => isOpen);
+        return controller && held(controller);
+    });
     const hotkeys = { ...plugin.hotkeys };
     for (const [chord, binding] of Object.entries(keys))
         hotkeys[chord] = both(binding, plugin.hotkeys?.[chord]);
-    extended.hotkeys = hotkeys;
-    extended.onAfterOperation = (change) => {
-        plugin.onAfterOperation?.(change);
-        if (change.operation !== 'insertText' || !('text' in change))
-            return;
-        for (const controller of controllers)
-            controller.handleTextInsertion(change.text, change.block, change.payload);
-        edytor.overlay.invalidate();
-    };
-    extended.onSelectionChange = (selection) => {
-        plugin.onSelectionChange?.(selection);
-        for (const controller of controllers)
-            controller.reconcileSelection();
-        edytor.overlay.invalidate();
-    };
-    extended.onEdytorAttached = (payload) => {
-        const own = plugin.onEdytorAttached?.(payload);
-        // Below the caret (above it when there is no room), kept in the viewport.
-        const unmount = controllers.map((controller) => edytor.overlay.mount(TriggerMenu, { controller }, 'edytor-trigger-menu-host', 50, (host) => {
-            if (!controller.isOpen)
+    return {
+        ...plugin,
+        hotkeys,
+        onAfterOperation: (change) => {
+            plugin.onAfterOperation?.(change);
+            if (change.operation !== 'insertText' || !change.text)
                 return;
-            const rect = caretRect(edytor);
-            return rect && placeBelow(host, rect, { width: 280, height: 240 });
-        }));
-        return () => {
-            own?.();
-            for (const off of unmount)
-                off();
-        };
+            const [, offset, value] = change.payload;
+            const { text } = change;
+            for (const controller of controllers)
+                controller.handleTextInsertion(text, change.block, offset - text.segStart, value);
+            edytor.overlay.invalidate();
+        },
+        onSelectionChange: (selection) => {
+            plugin.onSelectionChange?.(selection);
+            for (const controller of controllers)
+                controller.reconcileSelection();
+            edytor.overlay.invalidate();
+        },
+        onEdytorAttached: (payload) => {
+            const own = plugin.onEdytorAttached?.(payload);
+            const unmount = controllers.map(mount);
+            return () => {
+                own?.();
+                for (const off of unmount)
+                    off();
+            };
+        }
     };
-    return extended;
 };