edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/blockMenu/blockMenuPlugin.d.ts

@@ -1,12 +1,10 @@
 import type { Plugin } from '../../plugins.js';
 import { type BlockMenuOptions } from './BlockMenuController.svelte.js';
 /**
- * Notion's block menu: a handle click (without an `onActivate` of your own)
+ * Notion's block menu: a handle click
  * opens it beside the handle — search, Turn into, Color, Duplicate, Move,
  * Delete, and Copy link when `linkTo` is given. Also binds Mod+D (duplicate
  * the selected blocks, or the caret's block), and adds the colours to the
  * slash menu by name (`/red`: "Red text", "Red background").
  */
 export declare const createBlockMenuPlugin: (options?: BlockMenuOptions) => Plugin;
-/** The block menu without a block link. */
-export declare const blockMenuPlugin: Plugin;

package/dist/plugins/blockMenu/blockMenuPlugin.js

@@ -1,10 +1,8 @@
-import { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from '../blockHandles/BlockHandleController.svelte.js';
-import { onPress } from '../../events/onFocus.js';
+import { handleMenuEvents, mountChrome } from '../chrome.js';
 import { getSelectedBlocksInDocumentOrder } from '../../selection/replaceSelection.js';
-import BlockMenu from './BlockMenu.svelte';
 import { BlockMenuController, colorCommands } from './BlockMenuController.svelte.js';
 /**
- * Notion's block menu: a handle click (without an `onActivate` of your own)
+ * Notion's block menu: a handle click
  * opens it beside the handle — search, Turn into, Color, Duplicate, Move,
  * Delete, and Copy link when `linkTo` is given. Also binds Mod+D (duplicate
  * the selected blocks, or the caret's block), and adds the colours to the
@@ -76,48 +74,33 @@ export const createBlockMenuPlugin = (options = {}) => (edytor) => {
     };
     return {
         // Colours by name in the slash menu (`/red`), as in Notion.
-        commands: colorCommands(edytor, controller.labels),
+        commands: colorCommands(edytor),
         hotkeys: {
             'mod+d': ({ prevent }) => {
                 if (edytor.readonly)
                     return;
                 const selected = getSelectedBlocksInDocumentOrder(edytor).filter((b) => b.movable);
                 if (selected.length)
-                    return prevent(() => controller.duplicateAll(selected));
-                const block = edytor.selection.state.startBlock;
+                    return prevent(() => controller.duplicate(selected, true));
+                const block = edytor.selection.textRange().startText?.parent;
                 if (block?.movable)
-                    prevent(() => controller.duplicate(block));
+                    prevent(() => controller.duplicate([block], false));
             }
         },
         onEdytorAttached: ({ node }) => {
-            const activate = (event) => {
+            const off = handleMenuEvents(edytor, node, (event) => {
                 // The menu takes the keyboard (its search field).
                 event.preventDefault();
-                const { block, anchor } = event.detail;
-                controller.open(block, anchor);
+                controller.open(event.detail.block, event.detail.anchor);
                 edytor.overlay.invalidate();
-            };
-            const outside = (event) => {
-                const target = event.target;
-                if (controller.isOpen &&
-                    !target?.closest?.('[data-edytor-block-menu-host], [data-edytor-block-handle-host]'))
-                    controller.close(false);
-            };
+            }, 
             // A `+` opens its own menu: this one closes.
-            const add = () => controller.close(false);
-            node.addEventListener(BLOCK_ACTIVATE_EVENT, activate);
-            node.addEventListener(BLOCK_ADD_EVENT, add);
-            // Every press, WebKit's lone `mousedown` after a drag too (`onPress`).
-            const offPress = onPress(edytor, node.ownerDocument, outside, true);
-            const unmount = edytor.overlay.mount(BlockMenu, { controller, menu: options.menu }, 'edytor-block-menu-host', 70, place);
+            close, '[data-edytor-block-menu-host], [data-edytor-block-handle-host]', () => controller.isOpen && close());
+            const unmount = mountChrome(edytor, options.menu, controller, () => controller.isOpen, { name: 'edytor-block-menu-host', zIndex: 70, measure: place }, close);
             return () => {
-                node.removeEventListener(BLOCK_ACTIVATE_EVENT, activate);
-                node.removeEventListener(BLOCK_ADD_EVENT, add);
-                offPress();
+                off();
                 unmount();
             };
         }
     };
 };
-/** The block menu without a block link. */
-export const blockMenuPlugin = createBlockMenuPlugin();

package/dist/plugins/brand.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from '../plugins.js';
+/**
+ * `plugin`, known as a `name` plugin: `<Edytor>`'s default plugin of that
+ * name yields to any instance listed (`brandOf`).
+ */
+export declare const branded: (name: string, plugin: Plugin) => Plugin;
+/** The name `plugin` was branded with, if any. */
+export declare const brandOf: (plugin: Plugin) => string | undefined;

package/dist/plugins/brand.js

@@ -0,0 +1,8 @@
+const brands = new WeakMap();
+/**
+ * `plugin`, known as a `name` plugin: `<Edytor>`'s default plugin of that
+ * name yields to any instance listed (`brandOf`).
+ */
+export const branded = (name, plugin) => (brands.set(plugin, name), plugin);
+/** The name `plugin` was branded with, if any. */
+export const brandOf = (plugin) => brands.get(plugin);

package/dist/plugins/chrome.d.ts

@@ -1,22 +1,35 @@
 /**
  * What every chrome surface shares with the markup that renders it, the
- * built-in one and a snippet's alike: the row payload of an `item` snippet,
- * a row's attributes (`option(index)`), and the small DOM rules the
+ * app's snippet: the one host (`mountChrome`), the row payload a controller
+ * builds, a row's attributes (`option(index)`), and the small DOM rules the
  * controllers' attachments apply (a press that keeps the focus, an
  * element given its id, role and name).
  */
-import { type Attachment } from 'svelte/attachments';
+import type { Snippet } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+import type { Edytor } from '../edytor.svelte.js';
+import { type BlockActivation, type BlockAddition } from './blockHandles/BlockHandleController.svelte.js';
 /**
- * One row of a chrome list, for an `item` snippet: the same shape in every
- * menu (the slash menu's, a trigger's, the version history's).
+ * Mount the app's `snippet` for a chrome surface in a fixed host of the
+ * overlay (`data-<name>`, placed by `measure`), rendered with `payload`
+ * while `shown` holds and closed (`close`) when the view turns readonly.
+ * Without a snippet the surface renders nothing (its controller still
+ * works): nothing is mounted. Answers the teardown.
+ */
+export declare const mountChrome: <T>(edytor: Edytor, snippet: Snippet<[T]> | undefined, payload: T, shown: () => unknown, place: {
+    name: string;
+    zIndex: number;
+    measure: (host: HTMLElement, origin: DOMRect) => (() => void) | void;
+}, close?: () => void) => () => void;
+/**
+ * One row of a chrome list a controller builds for the app's markup: the
+ * same shape in every menu (a table grip's, the code language list's).
  */
 export type MenuItemPayload<T> = {
     /** What the row stands for: a command, a trigger's row, a version. */
     item: T;
     /** The row's element id (page-unique): the keyboard's owner names the highlighted row by it. */
     id: string;
-    /** The row's words. */
-    label: string;
     /** It is the keyboard's row. */
     selected: boolean;
     /** Run it (pick the row). */
@@ -24,34 +37,22 @@ export type MenuItemPayload<T> = {
     /** Make it the keyboard's row (hover). */
     select: () => void;
     /**
-     * The row's attributes: spread them on its element (`{...option}`). Its
-     * `id`, `role`, `aria-selected` (or `aria-checked`), `tabindex`,
-     * `data-selected`, and an attachment that scrolls the keyboard's row
-     * into view.
+     * The row's attachment (`{@attach item.option}`): its `id`, `role`,
+     * `aria-selected` (or `aria-checked`) and `tabindex`, and the keyboard's
+     * row scrolled into view. Its look is yours, from `selected`.
      */
-    option: OptionAttributes;
-};
-/** A row's attributes (`controller.option(index)`, `item.option`): spread them on the row. */
-export type OptionAttributes = {
-    id: string;
-    role: 'option' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
-    /** `-1` where a field or the editor holds the keyboard; a roving list's own row `0`. */
-    tabindex: 0 | -1;
-    'aria-selected'?: boolean;
-    'aria-checked'?: boolean;
-    /** A row that cannot run now (a table menu's Move up on the first row). */
-    'aria-disabled'?: boolean;
-    'aria-haspopup'?: 'menu';
-    'aria-expanded'?: boolean;
-    'data-selected': boolean;
-    [key: symbol]: Attachment<HTMLElement>;
+    option: Attachment<HTMLElement>;
 };
+/** An attribute's value as an attachment writes it: `undefined` or `null` removes it. */
+type AttributeValue = string | number | boolean | null | undefined;
 /**
- * A row's attributes: the keyboard's row (`selected`) scrolls into view when
- * it becomes it, unless `reveal` is `false` (a list in the page, whose
- * focus scrolls it).
+ * The attachment of an element the package needs something of (a row, a
+ * control inside a block): it writes `attributes` (see `write`) and
+ * listens for `on`'s events until it is torn down. Read in a template,
+ * a new attachment replaces the last one when what it reads changes: the
+ * attributes it no longer gives (`undefined`) are removed.
  */
-export declare const optionAttributes: (id: string, role: OptionAttributes["role"], selected: boolean, extra?: Partial<Omit<OptionAttributes, "id" | "role" | "data-selected">>, reveal?: boolean) => OptionAttributes;
+export declare const attach: (attributes: Record<string, AttributeValue>, on?: { [K in keyof HTMLElementEventMap]?: (event: HTMLElementEventMap[K]) => void; }) => Attachment<HTMLElement>;
 /** A text field: it takes the focus a press gives it. */
 export declare const isField: (target: EventTarget | null) => boolean;
 /**
@@ -59,14 +60,20 @@ export declare const isField: (target: EventTarget | null) => boolean;
  * menu's field): every press but one on a field, which takes its own.
  */
 export declare const keepFocus: (event: MouseEvent) => void;
-/**
- * Give `node` the id the controller names it by (`aria-controls`), and the
- * role and accessible name it lacks (a snippet's own win).
- */
-export declare const identify: (node: HTMLElement, id: string, role?: string, label?: string) => void;
+/** A press on a control inside a block keeps the editor's selection (and its focus). */
+export declare const keepSelection: (event: MouseEvent) => void;
+/** Give `node` the id the controller names it by (`aria-controls`), and the role it lacks. */
+export declare const identify: (node: HTMLElement, id: string, role?: string) => void;
 /** Set or remove (`undefined`) an attribute the keyboard's owner carries. */
 export declare const attribute: (node: HTMLElement, name: string, value: string | undefined) => void;
 /** Whether `node` may name a highlighted row (`aria-activedescendant`): a field, or an element with a role. */
 export declare const namesRows: (node: HTMLElement) => boolean;
-/** `id` when an element of `node`'s page has it, else `undefined`. */
-export declare const inPage: (node: Node, id: string | undefined) => string | undefined;
+/**
+ * A handle menu's events on the editor `node` (the block menu, the `+`'s
+ * menu): a grip's activation (`BLOCK_ACTIVATE_EVENT`), a `+`'s offer
+ * (`BLOCK_ADD_EVENT`), and every press outside the elements `inside`
+ * matches (WebKit's lone `mousedown` after a drag too, `onPress`). Answers
+ * the teardown.
+ */
+export declare const handleMenuEvents: (edytor: Edytor, node: HTMLElement, activate: (event: CustomEvent<BlockActivation>) => void, add: (event: CustomEvent<BlockAddition>) => void, inside: string, outside: () => void) => () => void;
+export {};

package/dist/plugins/chrome.js

@@ -1,34 +1,51 @@
+import Chrome from './Chrome.svelte';
+import { onPress } from '../events/onFocus.js';
+import { all, listen } from '../utils/listen.js';
+import { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from './blockHandles/BlockHandleController.svelte.js';
 /**
- * What every chrome surface shares with the markup that renders it, the
- * built-in one and a snippet's alike: the row payload of an `item` snippet,
- * a row's attributes (`option(index)`), and the small DOM rules the
- * controllers' attachments apply (a press that keeps the focus, an
- * element given its id, role and name).
+ * Mount the app's `snippet` for a chrome surface in a fixed host of the
+ * overlay (`data-<name>`, placed by `measure`), rendered with `payload`
+ * while `shown` holds and closed (`close`) when the view turns readonly.
+ * Without a snippet the surface renders nothing (its controller still
+ * works): nothing is mounted. Answers the teardown.
  */
-import { createAttachmentKey } from 'svelte/attachments';
-/** The key a row's attachment is spread under (one for every row). */
-const REVEAL = createAttachmentKey();
+export const mountChrome = (edytor, snippet, payload, shown, place, close) => snippet
+    ? edytor.overlay.mount((Chrome), { edytor, snippet, payload, shown, close }, place.name, place.zIndex, place.measure)
+    : () => { };
 /**
- * A row's attributes: the keyboard's row (`selected`) scrolls into view when
- * it becomes it, unless `reveal` is `false` (a list in the page, whose
- * focus scrolls it).
+ * Write `value` as `node`'s attribute `name`, only when it changes:
+ * `undefined` or `null` removes it; a boolean is an ARIA state's
+ * `"true"`/`"false"`, else present (`true`) or removed (`false`); a
+ * `--custom-property` is set on the element's style.
  */
-export const optionAttributes = (id, role, selected, extra = {}, reveal = true) => ({
-    id,
-    role,
-    tabindex: -1,
-    ...(role === 'option' ? { 'aria-selected': selected } : {}),
-    ...extra,
-    'data-selected': selected,
-    ...(reveal
-        ? {
-            [REVEAL]: (node) => {
-                if (selected)
-                    node.scrollIntoView?.({ block: 'nearest' });
-            }
-        }
-        : {})
-});
+const write = (node, name, value) => {
+    if (name.startsWith('--')) {
+        if (value === undefined || value === null)
+            node.style.removeProperty(name);
+        else
+            node.style.setProperty(name, String(value));
+        return;
+    }
+    const aria = name.startsWith('aria-');
+    const text = value === undefined || value === null || (value === false && !aria)
+        ? undefined
+        : value === true && !aria
+            ? ''
+            : String(value);
+    attribute(node, name, text);
+};
+/**
+ * The attachment of an element the package needs something of (a row, a
+ * control inside a block): it writes `attributes` (see `write`) and
+ * listens for `on`'s events until it is torn down. Read in a template,
+ * a new attachment replaces the last one when what it reads changes: the
+ * attributes it no longer gives (`undefined`) are removed.
+ */
+export const attach = (attributes, on = {}) => (node) => {
+    for (const name in attributes)
+        write(node, name, attributes[name]);
+    return all(...Object.entries(on).map(([type, listener]) => listen(node, type, listener)));
+};
 /** A text field: it takes the focus a press gives it. */
 export const isField = (target) => target instanceof Element &&
     (target.matches('input, textarea, select') || target.isContentEditable);
@@ -40,16 +57,13 @@ export const keepFocus = (event) => {
     if (!isField(event.target))
         event.preventDefault();
 };
-/**
- * Give `node` the id the controller names it by (`aria-controls`), and the
- * role and accessible name it lacks (a snippet's own win).
- */
-export const identify = (node, id, role, label) => {
+/** A press on a control inside a block keeps the editor's selection (and its focus). */
+export const keepSelection = (event) => event.preventDefault();
+/** Give `node` the id the controller names it by (`aria-controls`), and the role it lacks. */
+export const identify = (node, id, role) => {
     node.id = id;
     if (role && !node.hasAttribute('role'))
         node.setAttribute('role', role);
-    if (label && !node.hasAttribute('aria-label') && !node.hasAttribute('aria-labelledby'))
-        node.setAttribute('aria-label', label);
 };
 /** Set or remove (`undefined`) an attribute the keyboard's owner carries. */
 export const attribute = (node, name, value) => {
@@ -60,5 +74,14 @@ export const attribute = (node, name, value) => {
 };
 /** Whether `node` may name a highlighted row (`aria-activedescendant`): a field, or an element with a role. */
 export const namesRows = (node) => isField(node) || node.hasAttribute('role');
-/** `id` when an element of `node`'s page has it, else `undefined`. */
-export const inPage = (node, id) => id && node.ownerDocument?.getElementById(id) ? id : undefined;
+/**
+ * A handle menu's events on the editor `node` (the block menu, the `+`'s
+ * menu): a grip's activation (`BLOCK_ACTIVATE_EVENT`), a `+`'s offer
+ * (`BLOCK_ADD_EVENT`), and every press outside the elements `inside`
+ * matches (WebKit's lone `mousedown` after a drag too, `onPress`). Answers
+ * the teardown.
+ */
+export const handleMenuEvents = (edytor, node, activate, add, inside, outside) => all(listen(node, BLOCK_ACTIVATE_EVENT, activate), listen(node, BLOCK_ADD_EVENT, add), onPress(edytor, node.ownerDocument, (event) => {
+    if (!event.target?.closest?.(inside))
+        outside();
+}, true));

package/dist/plugins/code/CodeHeader.svelte

@@ -2,53 +2,23 @@
 	import { getContext } from 'svelte';
 	import type { BlockView } from '../../plugins.js';
 	import type { Edytor } from '../../edytor.svelte.js';
-	import { DEFAULT_CODE_SETTINGS, codeSettings } from './languages.js';
+	import { DEFAULT_CODE_SETTINGS } from './languages.js';
 	import { languageMenus } from './languageMenu.svelte.js';
 	import { CodeHeader } from './header.svelte.js';
 
 	/**
-	 * A code block's header (`CodeHeader`): the plugin's `header` snippet, else
-	 * the language's button (or its label where it cannot change) and Copy.
-	 * Both open the language list through the controller's `button`
-	 * attachment.
+	 * A code block's header (`CodeHeader`): the plugin's `header` snippet, in
+	 * the block's non-editable part (empty without one).
 	 */
 	let { block }: { block: BlockView<{ language?: string }> } = $props();
 
 	/** The options of the view rendering it (a suggestion's preview included). */
 	const edytor = getContext<Edytor>('edytor');
-	const settings = codeSettings.get(edytor) ?? DEFAULT_CODE_SETTINGS;
-	const header = new CodeHeader(() => block, settings, languageMenus.get(edytor));
-	const labels = settings.labels;
+	// The first code plugin listed owns the view's options (it draws the kind).
+	const menu = languageMenus.get(edytor);
+	const settings = menu?.settings ?? DEFAULT_CODE_SETTINGS;
+	const header = new CodeHeader(() => block, settings, menu);
 	$effect(() => header.dispose);
 </script>
 
-<div use:block.void data-edytor-code-header>
-	{#if settings.header}
-		{@render settings.header(header)}
-	{:else}
-		{#if header.editable}
-			<!-- The language list (`LanguageMenu`): one key patched (`patchData`, one undo step). -->
-			<button
-				type="button"
-				data-edytor-code-language
-				aria-label="{labels.language}: {header.label}"
-				{@attach header.button}
-				>{header.label}<svg aria-hidden="true" viewBox="0 0 10 10" width="10" height="10"
-					><path d="M2 3.5 5 6.5 8 3.5" fill="none" stroke="currentColor" stroke-width="1.4" /></svg
-				></button
-			>
-		{:else}
-			<span data-edytor-code-language>{header.label}</span>
-		{/if}
-		<button
-			type="button"
-			data-edytor-code-copy
-			onmousedown={(e) => e.preventDefault()}
-			onclick={(e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				void header.copy();
-			}}>{header.copied ? labels.copied : labels.copy}</button
-		>
-	{/if}
-</div>
+<div use:block.void data-edytor-code-header>{@render settings.header?.(header)}</div>