edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/mention/MentionPlugin.svelte

@@ -1,12 +1,10 @@
+<svelte:options runes />
+
 <script module lang="ts">
 	import type { Snippet } from 'svelte';
-	import type {
-		InlineBlockSnippetPayload,
-		Plugin,
-		TriggerContext,
-		TriggerItemPayload
-	} from '../../plugins.js';
-	import { labelsWith, type PartialLabels } from '../../labels.js';
+	import type { InlineBlockSnippetPayload, Plugin, TriggerContext } from '../../plugins.js';
+	import type { TriggerMenuController } from '../triggers/TriggerController.svelte.js';
+	import { withRulesAndTriggers } from '../triggers/triggers.js';
 
 	/** A person the mention menu offers: what your app's directory answers. */
 	export type MentionItem = {
@@ -31,145 +29,70 @@
 		) => readonly MentionItem[] | Promise<readonly MentionItem[]>;
 		/** The character that opens the menu (default `@`). */
 		char?: string;
-		/** Replace each row of the menu. */
-		item?: Snippet<[TriggerItemPayload<MentionItem>]>;
-		/** The words the menu shows and says, over the English ones. */
-		labels?: PartialLabels<'mention'>;
+		/**
+		 * The menu's markup and its words; it renders while `controller.isOpen`,
+		 * at the caret (without it, nothing shows). Keep its ARIA with `{@attach
+		 * controller.popup}` on the list (name it) and
+		 * `{...controller.option(index)}` on each row.
+		 */
+		menu?: Snippet<[TriggerMenuController<MentionItem>]>;
 	};
 
-	/** An avatar's URL when it is one an `img` may load (http, https, a data image), else nothing. */
-	const avatarOf = (src: unknown) =>
-		typeof src === 'string' && /^(https?:|data:image\/)/i.test(src.trim()) ? src : undefined;
-
 	/**
 	 * People mentions, as in Notion: `@` opens a menu of the people your app's
 	 * `items(query)` answers; picking one replaces `@query` with a `mention`
 	 * atom (`{ id, label }`) and puts the caret after it, in one undo step.
 	 */
-	export const createMentionPlugin = (options: MentionPluginOptions): Plugin => {
-		const labels = labelsWith('mention', options.labels);
-		return () => ({
-			inlineBlocks: {
-				mention: {
-					snippet: mention,
-					plain: (data) => {
-						const label = (data as Partial<MentionData> | undefined)?.label;
-						return typeof label === 'string' && label ? `@${label}` : '@';
-					}
-				}
-			},
-			triggers: [
+	export const createMentionPlugin =
+		(options: MentionPluginOptions): Plugin =>
+		(edytor) =>
+			withRulesAndTriggers(
+				edytor,
 				{
-					char: options.char ?? '@',
-					name: labels.menu,
-					empty: labels.noResults,
-					searching: labels.searching,
-					items: (query, ctx) => options.items(query, ctx),
-					label: (person: MentionItem) => person.label,
-					key: (person: MentionItem) => person.id,
-					item: options.item ?? row,
-					onPick: (person: MentionItem, { block, from, caret }) => {
-						const data: MentionData = { id: person.id, label: person.label };
-						const after = block.addInlineBlock({ offset: from, block: { type: 'mention', data } });
-						if (after) caret(from + 1);
-						return !!after;
+					inlineBlocks: {
+						mention: {
+							snippet: mention,
+							plain: (data) => {
+								const label = (data as Partial<MentionData> | undefined)?.label;
+								return typeof label === 'string' && label ? `@${label}` : '@';
+							}
+						}
 					}
+				},
+				{
+					triggers: [
+						{
+							char: options.char ?? '@',
+							items: (query, ctx) => options.items(query, ctx),
+							label: (person: MentionItem) => person.label,
+							key: (person: MentionItem) => person.id,
+							menu: options.menu,
+							onPick: (person: MentionItem, { edytor, block, from, caret }) => {
+								const data: MentionData = { id: person.id, label: person.label };
+								const written =
+									edytor.insertInline(block.id, from, { type: 'mention', data }).status ===
+									'applied';
+								if (written) caret(from + 1);
+								return written;
+							}
+						}
+					]
 				}
-			]
-		});
-	};
+			);
 </script>
 
 {#snippet mention({ block }: InlineBlockSnippetPayload<Partial<MentionData>>)}
 	<span
 		class="edytor-mention"
-		class:selected={block.selected}
+		data-selected={block.selected ? 'true' : undefined}
 		data-edytor-mention
 		data-mention-id={block.data.id}>@{block.data.label ?? ''}</span
 	>
 {/snippet}
 
-{#snippet row({ item, id, selected, pick, select }: TriggerItemPayload<MentionItem>)}
-	<button
-		type="button"
-		class="edytor-mention-row"
-		{id}
-		role="option"
-		tabindex="-1"
-		aria-selected={selected}
-		data-selected={selected}
-		data-testid="trigger-menu-item"
-		onmousemove={select}
-		onclick={pick}
-	>
-		<span class="avatar" aria-hidden="true">
-			{#if avatarOf(item.avatar)}
-				<img src={avatarOf(item.avatar)} alt="" />
-			{:else}
-				{item.label.trim().charAt(0).toUpperCase()}
-			{/if}
-		</span>
-		<span class="name">{item.label}</span>
-		{#if item.description}<span class="description">{item.description}</span>{/if}
-	</button>
-{/snippet}
-
 <style>
+	/* One unit, on one line; its look is a theme's. */
 	.edytor-mention {
-		color: rgba(55, 53, 47, 0.65);
-		font-weight: 500;
-		white-space: nowrap;
-	}
-	.edytor-mention.selected {
-		border-radius: 3px;
-		background: rgba(35, 131, 226, 0.14);
-	}
-	.edytor-mention-row {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: 100%;
-		min-height: 32px;
-		padding: 4px 8px;
-		border: 0;
-		border-radius: 6px;
-		background: none;
-		color: inherit;
-		font: inherit;
-		text-align: left;
-		cursor: pointer;
-	}
-	.edytor-mention-row[data-selected='true'] {
-		background: rgba(33, 27, 23, 0.06);
-	}
-	.avatar {
-		display: grid;
-		flex: none;
-		place-items: center;
-		width: 20px;
-		height: 20px;
-		overflow: hidden;
-		border-radius: 50%;
-		background: rgba(84, 72, 49, 0.12);
-		font-size: 11px;
-		font-weight: 600;
-	}
-	.avatar img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-	.name {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-	.description {
-		margin-left: auto;
-		overflow: hidden;
-		color: #73726e;
-		font-size: 12px;
-		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 </style>

package/dist/plugins/mention/MentionPlugin.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { Plugin, TriggerContext, TriggerItemPayload } from '../../plugins.js';
-import { type PartialLabels } from '../../labels.js';
+import type { Plugin, TriggerContext } from '../../plugins.js';
+import type { TriggerMenuController } from '../triggers/TriggerController.svelte.js';
 /** A person the mention menu offers: what your app's directory answers. */
 export type MentionItem = {
     /** The person's id in your app: stored in the atom. */
@@ -22,10 +22,13 @@ export type MentionPluginOptions = {
     items: (query: string, ctx: TriggerContext) => readonly MentionItem[] | Promise<readonly MentionItem[]>;
     /** The character that opens the menu (default `@`). */
     char?: string;
-    /** Replace each row of the menu. */
-    item?: Snippet<[TriggerItemPayload<MentionItem>]>;
-    /** The words the menu shows and says, over the English ones. */
-    labels?: PartialLabels<'mention'>;
+    /**
+     * The menu's markup and its words; it renders while `controller.isOpen`,
+     * at the caret (without it, nothing shows). Keep its ARIA with `{@attach
+     * controller.popup}` on the list (name it) and
+     * `{...controller.option(index)}` on each row.
+     */
+    menu?: Snippet<[TriggerMenuController<MentionItem>]>;
 };
 /**
  * People mentions, as in Notion: `@` opens a menu of the people your app's
@@ -33,21 +36,6 @@ export type MentionPluginOptions = {
  * atom (`{ id, label }`) and puts the caret after it, in one undo step.
  */
 export declare const createMentionPlugin: (options: MentionPluginOptions) => Plugin;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MentionPlugin: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MentionPlugin = InstanceType<typeof MentionPlugin>;
+declare const MentionPlugin: import("svelte").Component<Record<string, never>, {}, "">;
+type MentionPlugin = ReturnType<typeof MentionPlugin>;
 export default MentionPlugin;

package/dist/plugins/page/PageLink.svelte

@@ -2,12 +2,15 @@
 	import { getContext, untrack } from 'svelte';
 	import type { Block } from '../../block/block.svelte.js';
 	import type { Edytor } from '../../edytor.svelte.js';
+	import { labelsOf, pageEnglish } from '../../labels.js';
+	import { attach, keepSelection } from '../chrome.js';
 	import {
 		pageHref,
 		pageIdOf,
-		pageLabels,
+		pageOptions,
 		pageTitleOf,
 		storePageTitle,
+		type PageBlockLinkPayload,
 		type PagePluginOptions
 	} from './page.js';
 
@@ -16,7 +19,7 @@
 	 * which open the page. The title is your `title(pageId)`'s answer while it
 	 * gives one (a reactive read follows renames), else the one the block
 	 * stores; a different answer is stored, outside the history, by a view
-	 * that may write.
+	 * that may write. The app's `link` snippet draws it, else this markup.
 	 */
 	let {
 		data,
@@ -28,8 +31,10 @@
 		handle: Block | undefined;
 		options: PagePluginOptions;
 	} = $props();
-	/** The view's words (a suggestion's preview, with no handle, speaks them too). */
-	const labels = pageLabels.of(getContext<Edytor>('edytor'));
+	/** The view's words and markup (a suggestion's preview, with no handle, has them too). */
+	const view = getContext<Edytor>('edytor');
+	const labels = labelsOf(view, 'page', pageEnglish);
+	const snippet = pageOptions.get(view)?.link;
 
 	const pageId = $derived(pageIdOf(data.pageId));
 	const stored = $derived(pageTitleOf(data.title));
@@ -86,44 +91,55 @@
 	const aux = (event: MouseEvent) => {
 		if (event.button === 1) open(event);
 	};
+	const openable = $derived(Boolean(pageId && options.open));
+
+	const payload: PageBlockLinkPayload = {
+		get block() {
+			return handle;
+		},
+		get pageId() {
+			return pageId;
+		},
+		get title() {
+			return title;
+		},
+		get label() {
+			return title ?? labels.untitled;
+		},
+		get href() {
+			return href;
+		},
+		get openable() {
+			return openable;
+		},
+		open: (newTab = false) => {
+			if (pageId && options.open) options.open(pageId, { newTab });
+		},
+		get control() {
+			const on = { click: open, auxclick: aux };
+			return href
+				? attach({ 'data-edytor-page-link': '', draggable: 'false' }, on)
+				: attach(
+						{ 'data-edytor-page-link': '', disabled: !openable },
+						{ ...on, mousedown: keepSelection }
+					);
+		}
+	};
 </script>
 
+{#if snippet}
+	{@render snippet(payload)}
+{:else if href}
+	<a {href} data-edytor-page-link draggable="false" {@attach payload.control}>{@render label()}</a>
+{:else}
+	<button type="button" data-edytor-page-link disabled={!openable} {@attach payload.control}
+		>{@render label()}</button
+	>
+{/if}
+
 {#snippet label()}
 	<span data-edytor-page-icon aria-hidden="true"></span><span
 		data-edytor-page-title
-		data-untitled={title ? undefined : 'true'}>{title ?? labels.untitled}</span
+		data-untitled={title ? undefined : 'true'}>{payload.label}</span
 	>
 {/snippet}
-
-{#if href}
-	<a data-edytor-page-link {href} draggable="false" onclick={open} onauxclick={aux}
-		>{@render label()}</a
-	>
-{:else}
-	<button
-		type="button"
-		data-edytor-page-link
-		disabled={!pageId || !options.open}
-		onmousedown={(event) => event.preventDefault()}
-		onclick={open}
-		onauxclick={aux}>{@render label()}</button
-	>
-{/if}
-
-<style>
-	/* The link's structure, at zero specificity (`:where`); a theme draws it (`themes/notion.css`). */
-	:global(:where([data-edytor-page-link])) {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		margin: 0;
-		padding: 0;
-		border: 0;
-		background: none;
-		color: inherit;
-		font: inherit;
-		text-align: start;
-		text-decoration: none;
-		cursor: pointer;
-	}
-</style>

package/dist/plugins/page/PagePlugin.svelte

@@ -1,16 +1,20 @@
 <script module lang="ts">
 	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
-	import type { Edytor } from '../../edytor.svelte.js';
 	import { pageKinds } from '../../crdt/semantics.js';
 	import { convertToKind, type KindRow } from '../../kinds.js';
-	import { keywordsOf, labelsWith } from '../../labels.js';
+	import { pageEnglish, keywordsOf, labelsOf } from '../../labels.js';
 	import { getSelectedBlocksInDocumentOrder } from '../../selection/replaceSelection.js';
 	import PageLink from './PageLink.svelte';
-	import { pageHtml, pageIdOf, pageLabels, pageTitleOf, type PagePluginOptions } from './page.js';
+	import {
+		pageHtml,
+		pageIdOf,
+		pageTitleOf,
+		pageOptions as optionsOf,
+		type PageBlockLinkPayload,
+		type PagePluginOptions
+	} from './page.js';
 
-	export type { PagePluginOptions };
-
-	const optionsOf = new WeakMap<Edytor, PagePluginOptions>();
+	export type { PageBlockLinkPayload, PagePluginOptions };
 
 	/**
 	 * Notion's subpage block: a `page` block links to another document by
@@ -37,9 +41,8 @@
 		(edytor) => {
 			// First wins, as for the kind: a second listing never replaces it.
 			if (!optionsOf.has(edytor)) optionsOf.set(edytor, options);
-			pageLabels.claim(edytor, labelsWith('page', options.labels));
 			const own = optionsOf.get(edytor)!;
-			const labels = pageLabels.of(edytor);
+			const labels = labelsOf(edytor, 'page', pageEnglish);
 			const { create } = own;
 			return {
 				hotkeys: {
@@ -77,16 +80,18 @@
 								id: 'page.new',
 								label: labels.page,
 								icon: '📄',
-								keywords: keywordsOf(
-									'page.new',
-									['subpage', 'new page', 'document', 'link'],
-									own.keywords
-								),
+								keywords: keywordsOf(edytor, 'page.new', [
+									'subpage',
+									'new page',
+									'document',
+									'link'
+								]),
 								group: 'Basic blocks',
 								// Asked of the view given (a `+`'s menu asks it of the block it adds).
-								isEnabled: (view = edytor) => Boolean(view.selection.state.startBlock?.convertible),
+								isEnabled: (view = edytor) =>
+									Boolean(view.selection.textRange().startText?.parent.convertible),
 								run: () => {
-									const block = edytor.selection.state.startBlock;
+									const block = edytor.selection.textRange().startText?.parent;
 									if (!block?.convertible || !edytor.dispatcher.permits()) return false;
 									const made = create();
 									const { pageId: raw, title: named } =
@@ -114,9 +119,6 @@
 					: []
 			};
 		};
-
-	/** The page block without a way to open, name or create pages: a block showing its stored title. */
-	export const pagePlugin = createPagePlugin();
 </script>
 
 {#snippet page({ block }: BlockSnippetPayload<Record<string, unknown>>)}

package/dist/plugins/page/PagePlugin.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Plugin } from '../../plugins.js';
-import { type PagePluginOptions } from './page.js';
-export type { PagePluginOptions };
+import { type PageBlockLinkPayload, type PagePluginOptions } from './page.js';
+export type { PageBlockLinkPayload, PagePluginOptions };
 /**
  * Notion's subpage block: a `page` block links to another document by
  * id (`data.pageId`), and shows its title (`data.title`, the cache your
@@ -22,8 +22,6 @@ export type { PagePluginOptions };
  * ```
  */
 export declare const createPagePlugin: (options?: PagePluginOptions) => Plugin;
-/** The page block without a way to open, name or create pages: a block showing its stored title. */
-export declare const pagePlugin: Plugin;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/plugins/page/page.d.ts

@@ -1,5 +1,6 @@
+import type { Snippet } from 'svelte';
 import type { Block } from '../../block/block.svelte.js';
-import { type PartialLabels } from '../../labels.js';
+import type { Attachment } from 'svelte/attachments';
 /** The page plugin's options: how your app opens, names, links and creates pages. */
 export type PagePluginOptions = {
     /**
@@ -30,16 +31,41 @@ export type PagePluginOptions = {
         pageId: string;
         title?: string;
     } | null | undefined;
-    /** The words the block and its command show, over the English ones. */
-    labels?: PartialLabels<'page'>;
-    /** The slash menu's keywords of the "Page" command (`page.new`), which replace its own. */
-    keywords?: Partial<Record<string, string[]>>;
+    /**
+     * The block's link to its page (default: Notion's row, a page icon and
+     * the title). Give an `a` (`href={link.href}`) when `link.href` is set,
+     * else a `button`, `{@attach link.control}`: a click opens the page
+     * (`open`), a modified or middle click in a new tab. The first page plugin listed in a view
+     * gives it.
+     */
+    link?: Snippet<[PageBlockLinkPayload]>;
 };
-/** Each view's page labels: the first page plugin listed claims them, as its kind. */
-export declare const pageLabels: {
-    claim: (view: object | undefined, labels: import("../../labels.js").PageLabels) => void;
-    of: (view: object | undefined) => import("../../labels.js").PageLabels;
+/** What a page block's `link` snippet receives: the page it links to. */
+export type PageBlockLinkPayload = {
+    /** The page block; `undefined` in a suggestion's preview (it opens nothing). */
+    block: Block | undefined;
+    /** The page's id (`null`: the block names none). */
+    pageId: string | null;
+    /** Its title: your `title` lookup's answer, else the one the block stores. */
+    title: string | undefined;
+    /** What it reads: its title, else the view's `page.untitled`. */
+    label: string;
+    /** The page's URL (`href`), if any: draw an `a`. */
+    href: string | undefined;
+    /** A click may open it: it names a page and the plugin has `open`. */
+    openable: boolean;
+    /** Open the page (`open`), in a new tab when `newTab`. */
+    open: (newTab?: boolean) => void;
+    /**
+     * The link's attachment (`{@attach link.control}`): its marker
+     * (`data-edytor-page-link`), the click and middle click that open it; on
+     * an `a`, `draggable="false"`; on a `button`, `disabled` when it cannot
+     * open and a press that keeps the editor's selection.
+     */
+    control: Attachment<HTMLElement>;
 };
+/** Each view's page options (the first page plugin listed sets them). */
+export declare const pageOptions: WeakMap<object, PagePluginOptions>;
 /** A stored page id: a non-empty string of at most 256 characters (a room id's bounds), else `null`. */
 export declare const pageIdOf: (value: unknown) => string | null;
 /** A title as a page block stores and shows it: trimmed, at most 300 characters, never empty. */

package/dist/plugins/page/page.js

@@ -1,7 +1,7 @@
-import { viewLabels } from '../../labels.js';
 import { sanitizeLinkHref } from '../richtext/richTextOperations.js';
-/** Each view's page labels: the first page plugin listed claims them, as its kind. */
-export const pageLabels = viewLabels('page');
+import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
+/** Each view's page options (the first page plugin listed sets them). */
+export const pageOptions = new WeakMap();
 /** A stored page id: a non-empty string of at most 256 characters (a room id's bounds), else `null`. */
 export const pageIdOf = (value) => typeof value === 'string' && value.length > 0 && value.length <= 256 ? value : null;
 /** A title as a page block stores and shows it: trimmed, at most 300 characters, never empty. */
@@ -24,7 +24,6 @@ export const storePageTitle = (block, pageId, title) => {
         return;
     edytor.doc.transact(() => edytor.facade.apply(edytor.facade.prepare.patchData(id, [{ path: ['title'], value: title }])), TITLE_ORIGIN);
 };
-const escapeHtml = (value) => value.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
 /** `options.href`'s URL for `pageId`, through the link sanitizer (no script URL), else `undefined`. */
 export const pageHref = (options, pageId) => (pageId && options.href && sanitizeLinkHref(options.href(pageId))) || undefined;
 /**