edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/code/header.svelte.js

@@ -1,14 +1,14 @@
 /**
  * A code block's header (`code.language`): the block's language, a button
  * that opens the view's language list (`LanguageMenu`) and Copy. One per
- * rendered code block; the default markup (`CodeHeader.svelte`) and an
- * app's `header` snippet read the same controller and share its
- * attachment (`button`), so a custom header keeps the keys and the ARIA.
+ * rendered code block with the app's `header` snippet, whose attachment
+ * (`button`) gives its markup the keys and the ARIA.
  */
 import { untrack } from 'svelte';
 import { Text } from '../../text/text.svelte.js';
 import { attribute } from '../chrome.js';
-import { languageLabel, languageOf } from './languages.js';
+import { languageOf } from './languages.js';
+import { all, listen } from '../../utils/listen.js';
 /** How long Copy reads Copied after a copy, in milliseconds. */
 const COPIED_FOR = 1200;
 /** A code block's text: its lines, joined by newlines. */
@@ -17,10 +17,9 @@ const codeText = (code) => code.children
     .join('\n');
 /**
  * What a code plugin's `header` snippet receives: the code block's
- * language (`language`, its id; `label`, as shown), the languages the
- * plugin lists (`languages`), whether the language may be changed here
+ * language (`language`, its id; `label`, as shown), whether the language may be changed here
  * (`editable`: an editable view, not a suggestion's preview), the list's
- * state (`expanded`), the actions (`setLanguage`, `toggle`, `copy`, and
+ * state (`expanded`), the actions (`toggle`, the list's own `pick`, `copy`, and
  * `copied` for a moment after a copy) and the plugin's `labels`. Put
  * `{@attach header.button}` on the element that opens the language list:
  * it opens it on a click, ArrowDown or ArrowUp, Escape gives the keys back
@@ -63,19 +62,7 @@ export class CodeHeader {
     /** The language's label; a language the plugin does not list shows its id (reactive). */
     get label() {
         const language = this.language;
-        const row = this.settings.languages.find((row) => row.id === language);
-        return row ? languageLabel(row, this.settings) : language;
-    }
-    /** The languages the plugin lists, labeled, in order. */
-    get languages() {
-        return this.settings.languages.map((row) => ({
-            id: row.id,
-            label: languageLabel(row, this.settings)
-        }));
-    }
-    /** The plugin's words (`language`, `copy`, `copied`, …). */
-    get labels() {
-        return this.settings.labels;
+        return this.settings.languages.find((row) => row.id === language)?.label ?? language;
     }
     /** The view is readonly (reactive). */
     get readonly() {
@@ -90,13 +77,6 @@ export class CodeHeader {
         const block = this.view().handle;
         return Boolean(block && this.menu?.isOpenFor(block.id));
     }
-    /** Set the block's language (one undo step); nothing where it is not `editable`. */
-    setLanguage = (id) => {
-        const block = this.view().handle;
-        if (!this.editable || !block?.isInTree || id === this.language)
-            return;
-        block.data.language = id;
-    };
     /**
      * Open the language list under the header's button, or close it (`keys`:
      * the keyboard opened it, so the keys go back to the button after).
@@ -129,7 +109,6 @@ export class CodeHeader {
     button = (node) => untrack(() => {
         node.setAttribute('data-edytor-code-language-button', '');
         node.setAttribute('aria-haspopup', 'listbox');
-        const named = node.hasAttribute('aria-label') || node.hasAttribute('aria-labelledby');
         const mousedown = (event) => event.preventDefault();
         // A click from Enter or Space has no pointer (`detail` 0): the keys opened it.
         const click = (event) => this.toggle(event.detail === 0);
@@ -144,21 +123,15 @@ export class CodeHeader {
                 return;
             event.preventDefault();
         };
-        node.addEventListener('mousedown', mousedown);
-        node.addEventListener('click', click);
-        node.addEventListener('keydown', keydown);
+        const off = listen(node, 'mousedown', mousedown);
+        const off2 = listen(node, 'click', click);
+        const off3 = listen(node, 'keydown', keydown);
         $effect(() => {
             const expanded = this.expanded;
             attribute(node, 'aria-expanded', String(expanded));
             attribute(node, 'aria-controls', expanded ? this.menu?.listId : undefined);
-            if (!named)
-                attribute(node, 'aria-label', `${this.labels.language}: ${this.label}`);
         });
-        return () => {
-            node.removeEventListener('mousedown', mousedown);
-            node.removeEventListener('click', click);
-            node.removeEventListener('keydown', keydown);
-        };
+        return all(off, off2, off3);
     });
     /**
      * The header is gone: Copied's timer goes with it.

package/dist/plugins/code/languageMenu.svelte.d.ts

@@ -1,16 +1,16 @@
 import type { Attachment } from 'svelte/attachments';
 import type { Edytor } from '../../edytor.svelte.js';
-import type { CodeLabels } from '../../labels.js';
-import { type MenuItemPayload, type OptionAttributes } from '../chrome.js';
+import { type MenuItemPayload } from '../chrome.js';
+import { ChromeList } from '../list.svelte.js';
 /** A row of the language list: a language id and its label as shown. */
 export type LanguageRow = {
     id: string;
     label: string;
 };
 /**
- * One row of the language list, for a custom `menu`: the row shape every
+ * One row of the language list, for your `menu`: the row shape every
  * menu shares (`item` is the language, `run` picks it), and whether it is
- * the block's own language (`current`, the built-in ✓).
+ * the block's own language (`current`, the demo's ✓).
  */
 export type LanguageMenuItem = MenuItemPayload<LanguageRow> & {
     /** It is the block's language. */
@@ -26,13 +26,13 @@ export type LanguageMenuItem = MenuItemPayload<LanguageRow> & {
  * its button; opened by a press, to the editor. A press or a focus outside
  * closes it, as readonly does.
  *
- * What a custom `menu` snippet receives: the open list (`open`), the query
+ * What a `menu` snippet receives: the open list (`open`), the query
  * and its rows (`query`, `items`, each a `MenuItemPayload`), the keyboard's
- * row (`index`), `search`, `pick` and `close`, the plugin's `labels`, and
- * the attachments that keep the built-in keys and ARIA: `keys` on the
- * search field, `popup` on the list, `option(index)` spread on each row.
+ * row (`index`), `search`, `pick` and `close`, and
+ * the attachments that give it the keys and the ARIA: `keys` on the
+ * search field, `popup` on the list, `option(index)` on each row.
  */
-export declare class LanguageMenu {
+export declare class LanguageMenu extends ChromeList {
     #private;
     /** The code block whose list is open, and whether the keys opened it (reactive). */
     open: {
@@ -41,33 +41,25 @@ export declare class LanguageMenu {
     } | null;
     /** The search field's text. */
     query: string;
-    /** The highlighted row, in `rows`. */
-    index: number;
-    /** The plugin's words (`language`, `search`, `noResults`, …). */
-    get labels(): CodeLabels;
     /** The view is readonly (reactive): the list closes. */
     get readonly(): boolean;
     /** The open block's language id. */
     get current(): string | null;
     /** The rows the query keeps: a language the plugin does not list first (the block's own), then the list. */
-    get rows(): LanguageRow[];
+    get rows(): readonly LanguageRow[];
     /**
-     * The rows for a custom `menu`: each the row shape every menu shares
+     * The rows for your `menu`: each the row shape every menu shares
      * (`run` picks it, `select` highlights it, `option` its attributes), and
      * whether it is the block's language (`current`).
      */
     get items(): LanguageMenuItem[];
+    protected get count(): number;
     /** Whether `block`'s list is open. */
     isOpenFor: (block: string) => boolean;
-    /** The list's and its rows' element ids (page-unique). */
-    get listId(): string;
-    rowId: (row: LanguageRow) => string;
     /** Open `block`'s list (`keys`: the keyboard opened it), or close it when it is open. */
     toggle: (block: string, keys: boolean) => void;
     /** A new query: the first row it keeps is highlighted. */
     search: (query: string) => void;
-    /** Move the highlighted row by `step`, around the ends. */
-    move: (step: number) => void;
     /** Pick `row` (the highlighted one): the block's language, one undo step; the list closes. */
     pick: (row?: LanguageRow | undefined) => void;
     /**
@@ -76,12 +68,6 @@ export declare class LanguageMenu {
      * focus put them (`null`).
      */
     close: (keys?: "button" | "editor" | null) => void;
-    /**
-     * The attributes of the row at `index`: spread them on its element
-     * (`{...menu.option(index)}`). Its id, `option` role, `aria-selected` and
-     * `data-selected` for the highlighted row, which scrolls into view.
-     */
-    option: (index: number) => OptionAttributes;
     /**
      * The search field (`{@attach menu.keys}`): it takes the focus as the
      * list opens and is its `combobox` (unless it has a role), naming the
@@ -93,12 +79,6 @@ export declare class LanguageMenu {
      * it.
      */
     keys: Attachment<HTMLElement>;
-    /**
-     * The list (`{@attach menu.popup}`): its id, `listbox` role and name
-     * unless it has its own, presses that keep the field's focus, and its
-     * publication to the view's root (`edytor.popups`) while it is in the page.
-     */
-    popup: Attachment<HTMLElement>;
 }
 /** Each view's language list (the first code plugin listed owns it). */
 export declare const languageMenus: WeakMap<Edytor, LanguageMenu>;

package/dist/plugins/code/languageMenu.svelte.js

@@ -1,9 +1,10 @@
 import { untrack } from 'svelte';
 import { takeKeys } from '../../events/onFocus.js';
-import { attribute, inPage, keepFocus, optionAttributes } from '../chrome.js';
-import { languageLabel, languageOf } from './languages.js';
-/** The overlay host the list renders in (the overlay's mount names it). */
-const HOST = '[data-edytor-code-language-host]';
+import { attribute } from '../chrome.js';
+import { ChromeList, holdKeys } from '../list.svelte.js';
+import { Anchored } from '../anchored.svelte.js';
+import { languageOf } from './languages.js';
+import { all, listen } from '../../utils/listen.js';
 /**
  * One view's code language list (Notion's): the header's language button
  * opens it in the overlay under the button, a search field over the
@@ -14,38 +15,30 @@ const HOST = '[data-edytor-code-language-host]';
  * its button; opened by a press, to the editor. A press or a focus outside
  * closes it, as readonly does.
  *
- * What a custom `menu` snippet receives: the open list (`open`), the query
+ * What a `menu` snippet receives: the open list (`open`), the query
  * and its rows (`query`, `items`, each a `MenuItemPayload`), the keyboard's
- * row (`index`), `search`, `pick` and `close`, the plugin's `labels`, and
- * the attachments that keep the built-in keys and ARIA: `keys` on the
- * search field, `popup` on the list, `option(index)` spread on each row.
+ * row (`index`), `search`, `pick` and `close`, and
+ * the attachments that give it the keys and the ARIA: `keys` on the
+ * search field, `popup` on the list, `option(index)` on each row.
  */
-export class LanguageMenu {
-    edytor;
+export class LanguageMenu extends ChromeList {
     settings;
     /** The code block whose list is open, and whether the keys opened it (reactive). */
     open = $state.raw(null);
     /** The search field's text. */
     query = $state('');
-    /** The highlighted row, in `rows`. */
-    index = $state(0);
     /**
-     * The button's box, measured in the overlay's frame.
+     * The list's panel under its button: its place, and what closes it.
      * @internal
      */
-    box = $state.raw(null);
+    panel;
     /** @internal */
-    constructor(
-    /** @internal */
-    edytor, 
+    constructor(edytor, 
     /** @internal */
     settings) {
-        this.edytor = edytor;
+        super(edytor, 'code-languages', 'listbox');
         this.settings = settings;
-    }
-    /** The plugin's words (`language`, `search`, `noResults`, …). */
-    get labels() {
-        return this.settings.labels;
+        this.panel = new Anchored(edytor, 'edytor-code-language-host', () => (this.open ? this.#button(this.open.block) : undefined), () => this.close());
     }
     /** The view is readonly (reactive): the list closes. */
     get readonly() {
@@ -61,10 +54,7 @@ export class LanguageMenu {
     /** The rows the query keeps: a language the plugin does not list first (the block's own), then the list. */
     get rows() {
         const current = this.current;
-        const listed = this.settings.languages.map((row) => ({
-            id: row.id,
-            label: languageLabel(row, this.settings)
-        }));
+        const listed = this.settings.languages;
         const all = current && !listed.some((row) => row.id === current)
             ? [{ id: current, label: current }, ...listed]
             : listed;
@@ -74,7 +64,7 @@ export class LanguageMenu {
         return all.filter((row) => row.label.toLowerCase().includes(query) || row.id.toLowerCase().includes(query));
     }
     /**
-     * The rows for a custom `menu`: each the row shape every menu shares
+     * The rows for your `menu`: each the row shape every menu shares
      * (`run` picks it, `select` highlights it, `option` its attributes), and
      * whether it is the block's language (`current`).
      */
@@ -82,8 +72,7 @@ export class LanguageMenu {
         const current = this.current;
         return this.rows.map((row, index) => ({
             item: row,
-            id: this.rowId(row),
-            label: row.label,
+            id: this.rowId(index),
             selected: index === this.index,
             current: row.id === current,
             run: () => this.pick(row),
@@ -91,21 +80,11 @@ export class LanguageMenu {
             option: this.option(index)
         }));
     }
+    get count() {
+        return this.rows.length;
+    }
     /** Whether `block`'s list is open. */
     isOpenFor = (block) => this.open?.block === block;
-    /** The list's and its rows' element ids (page-unique). */
-    get listId() {
-        return this.edytor.popups.idOf('code-languages');
-    }
-    rowId = (row) => this.edytor.popups.idOf(`code-language-${row.id}`);
-    /**
-     * Where the list stands: under its button, layer-relative.
-     * @internal
-     */
-    get place() {
-        const box = this.box;
-        return this.open && box ? { left: box.x, top: box.y + box.height + 4 } : null;
-    }
     /** Open `block`'s list (`keys`: the keyboard opened it), or close it when it is open. */
     toggle = (block, keys) => {
         if (this.isOpenFor(block))
@@ -122,12 +101,6 @@ export class LanguageMenu {
         this.query = query;
         this.index = 0;
     };
-    /** Move the highlighted row by `step`, around the ends. */
-    move = (step) => {
-        const count = this.rows.length;
-        if (count)
-            this.index = (this.index + step + count) % count;
-    };
     /** Pick `row` (the highlighted one): the block's language, one undo step; the list closes. */
     pick = (row = this.rows[this.index]) => {
         const open = this.open;
@@ -135,7 +108,7 @@ export class LanguageMenu {
             return;
         const block = this.edytor.idToBlock.get(open.block);
         if (block?.isInTree && row.id !== this.current)
-            block.data.language = row.id;
+            block.edytor.patchData(block.id, [{ path: ['language'], value: row.id }]);
         this.close(open.keys ? 'button' : 'editor');
     };
     /**
@@ -148,7 +121,7 @@ export class LanguageMenu {
         if (!open)
             return;
         this.open = null;
-        this.box = null;
+        this.panel.box = null;
         this.query = '';
         this.edytor.overlay.invalidate();
         if (keys === 'button')
@@ -158,16 +131,6 @@ export class LanguageMenu {
             this.edytor.selection.display();
         }
     };
-    /**
-     * The attributes of the row at `index`: spread them on its element
-     * (`{...menu.option(index)}`). Its id, `option` role, `aria-selected` and
-     * `data-selected` for the highlighted row, which scrolls into view.
-     */
-    option = (index) => {
-        const row = this.rows[index];
-        const id = row ? this.rowId(row) : this.edytor.popups.idOf(`code-language-${index}`);
-        return optionAttributes(id, 'option', index === this.index);
-    };
     /**
      * The search field (`{@attach menu.keys}`): it takes the focus as the
      * list opens and is its `combobox` (unless it has a role), naming the
@@ -184,19 +147,9 @@ export class LanguageMenu {
         node.setAttribute('aria-expanded', 'true');
         node.setAttribute('aria-autocomplete', 'list');
         attribute(node, 'aria-controls', this.listId);
-        if (!node.hasAttribute('aria-label') && !node.hasAttribute('aria-labelledby'))
-            node.setAttribute('aria-label', this.labels.language);
-        node.addEventListener('keydown', this.#keydown);
-        node.addEventListener('focusout', this.#blurred);
-        node.focus({ preventScroll: true });
-        $effect(() => {
-            const row = this.rows[this.index];
-            attribute(node, 'aria-activedescendant', inPage(node, row && this.rowId(row)));
-        });
-        return () => {
-            node.removeEventListener('keydown', this.#keydown);
-            node.removeEventListener('focusout', this.#blurred);
-        };
+        const off2 = listen(node, 'focusout', this.panel.blurred);
+        const off = holdKeys(node, this.#keydown, () => this.rows.length ? this.rowId(this.index) : undefined);
+        return all(off, off2);
     });
     /** The search field's keys (`keys`). */
     #keydown = (event) => {
@@ -214,24 +167,6 @@ export class LanguageMenu {
         event.preventDefault();
         event.stopPropagation();
     };
-    /**
-     * The list (`{@attach menu.popup}`): its id, `listbox` role and name
-     * unless it has its own, presses that keep the field's focus, and its
-     * publication to the view's root (`edytor.popups`) while it is in the page.
-     */
-    popup = (node) => untrack(() => {
-        node.id = this.listId;
-        if (!node.hasAttribute('role'))
-            node.setAttribute('role', 'listbox');
-        if (!node.hasAttribute('aria-label') && !node.hasAttribute('aria-labelledby'))
-            node.setAttribute('aria-label', this.labels.language);
-        node.addEventListener('mousedown', keepFocus);
-        this.edytor.popups.set('code-languages', { id: this.listId, haspopup: 'listbox' });
-        return () => {
-            node.removeEventListener('mousedown', keepFocus);
-            this.edytor.popups.set('code-languages', null);
-        };
-    });
     /**
      * The keys back to the editor from a language button (its Escape): the
      * host takes the focus, the caret shown where the selection is.
@@ -239,44 +174,7 @@ export class LanguageMenu {
      */
     release = () => {
         this.close();
-        const node = this.edytor.node;
-        if (!node?.isConnected || this.edytor.destroyed)
-            return;
-        this.edytor.expectInternalFocus();
-        node.focus({ preventScroll: true });
-        this.edytor.selection.display();
-    };
-    /**
-     * The view turned readonly: the list closes.
-     * @internal
-     */
-    lock = () => this.close();
-    /**
-     * A press anywhere (capture): one outside the list and its button closes it.
-     * @internal
-     */
-    pressed = (event) => {
-        const open = this.open;
-        if (!open)
-            return;
-        const at = event.target;
-        if (at?.closest?.(HOST))
-            return;
-        if (at instanceof Node && this.#button(open.block)?.contains(at))
-            return;
-        this.close();
-    };
-    /** Focus left the field for somewhere outside the list and its button: it closes. */
-    #blurred = (event) => {
-        const open = this.open;
-        const to = event.relatedTarget;
-        // No new focus (the window went to the background): it stays.
-        if (!open || !(to instanceof Node))
-            return;
-        const host = event.currentTarget?.closest(HOST);
-        if (host?.contains(to) || this.#button(open.block)?.contains(to))
-            return;
-        this.close();
+        takeKeys(this.edytor);
     };
     /**
      * The language button of the code block holding a caret (where Alt+F10
@@ -284,42 +182,14 @@ export class LanguageMenu {
      * @internal
      */
     buttonAtCaret = () => {
-        const { startBlock, isCollapsed } = this.edytor.selection.state;
+        const { startText } = this.edytor.selection.textRange();
+        const { isCollapsed } = this.edytor.selection.projection;
+        const startBlock = startText?.parent;
         const code = startBlock?.type === 'codeLine' ? startBlock.parent : null;
         if (!isCollapsed || !code || this.edytor.readonly)
             return null;
         return this.#button(code.id);
     };
-    /**
-     * The overlay measure: the button's box; gone, the list closes.
-     * @internal
-     */
-    measure = (host, origin) => {
-        const open = this.open;
-        const button = open ? this.#button(open.block) : null;
-        const rect = button?.isConnected ? button.getBoundingClientRect() : null;
-        const box = rect
-            ? {
-                x: rect.left - origin.left,
-                y: rect.top - origin.top,
-                width: rect.width,
-                height: rect.height
-            }
-            : null;
-        return () => {
-            Object.assign(host.style, { position: 'absolute', left: '0px', top: '0px' });
-            if (open && !button)
-                return this.close();
-            const known = this.box;
-            if (!known ||
-                !box ||
-                known.x !== box.x ||
-                known.y !== box.y ||
-                known.width !== box.width ||
-                known.height !== box.height)
-                this.box = box;
-        };
-    };
     /** The language button of code block `block`, in this view (the header's `button` attachment marks it). */
     #button = (block) => this.edytor.idToBlock
         .get(block)

package/dist/plugins/code/languages.d.ts

@@ -7,8 +7,6 @@
  */
 import { type LanguageDefinition } from '@tanstack/highlight/core';
 import type { JSONText } from '../../utils/json.js';
-import type { Edytor } from '../../edytor.svelte.js';
-import { type CodeLabels, type PartialLabels } from '../../labels.js';
 import type { Snippet } from 'svelte';
 import type { CodeHeader } from './header.svelte.js';
 import type { LanguageMenu } from './languageMenu.svelte.js';
@@ -40,28 +38,22 @@ export declare const loadCodeLanguage: (language: CodeLanguage) => Promise<void>
  */
 export declare const tokenizeCode: (code: string, language: CodeLanguage | undefined) => JSONText[];
 export type CodePluginOptions = {
-    /** The languages a code block may be in, in the header's order. Default `CODE_LANGUAGES`. */
+    /** The languages a code block may be in, in the header's order, with their names. Default `CODE_LANGUAGES`. */
     languages?: readonly CodeLanguage[];
     /** The language of a code block whose `data.language` is unset. Default `'javascript'`. */
     defaultLanguage?: string;
     /**
-     * The words the code block shows (its menu row, header, a language's
-     * label by id), over the English ones.
-     */
-    labels?: PartialLabels<'code'>;
-    /** The slash menu's keywords of the code command (`block.code`), which replace its own. */
-    keywords?: Partial<Record<string, string[]>>;
-    /**
-     * Replace a code block's header (the language's button and Copy): it
-     * renders above the code, in the block's non-editable part. Put
-     * `{@attach header.button}` on the element that opens the language list.
+     * A code block's header (the language's button and Copy) and its words: it renders
+     * above the code, in the block's non-editable part (without it, no
+     * header). Put `{@attach header.button}` on the element that opens the
+     * language list.
      */
     header?: Snippet<[CodeHeader]>;
     /**
-     * Replace the language list: it renders under the header's button while
-     * `menu.open` is set. Put `{@attach menu.keys}` on its search field,
-     * `{@attach menu.popup}` on the list, and spread `item.option` (or
-     * `menu.option(index)`) on each row of `menu.items`. The first code
+     * The language list: it renders under the header's button while
+     * `menu.open` is set (without it, nothing shows). Put `{@attach menu.keys}` on its search field,
+     * `{@attach menu.popup}` on the list, and `{@attach item.option}` on each
+     * row of `menu.items` (its highlight from `item.selected`). The first code
      * plugin listed in a view owns its list.
      */
     menu?: Snippet<[LanguageMenu]>;
@@ -69,17 +61,12 @@ export type CodePluginOptions = {
 export type CodeSettings = {
     languages: readonly CodeLanguage[];
     defaultLanguage: string;
-    labels: CodeLabels;
     /** The app's header markup, if any. */
     header?: Snippet<[CodeHeader]>;
     /** The app's language list markup, if any. */
     menu?: Snippet<[LanguageMenu]>;
 };
 export declare const DEFAULT_CODE_SETTINGS: CodeSettings;
-/** A language's label as shown: the labels' `languages` entry for its id, else its own. */
-export declare const languageLabel: (language: CodeLanguage, { labels }: CodeSettings) => string;
-/** Each view's code options, for its code blocks' header (which reads them through its view). */
-export declare const codeSettings: WeakMap<Edytor, CodeSettings>;
 /** A code block's language id: its `data.language`, else the default. */
 export declare const languageOf: (data: {
     language?: unknown;