edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/pageLink/PageLinkPlugin.svelte

@@ -1,12 +1,11 @@
+<svelte:options runes />
+
 <script module lang="ts">
 	import type { Snippet } from 'svelte';
-	import type {
-		InlineBlockSnippetPayload,
-		Plugin,
-		TriggerContext,
-		TriggerItemPayload
-	} from '../../plugins.js';
-	import { labelsWith, viewLabels, 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';
+	import { pageLinkEnglish, labelsOf } from '../../labels.js';
 	import { sanitizeLinkHref } from '../richtext/richTextOperations.js';
 
 	/** A page the page-link menu offers: what your app's search answers. */
@@ -34,15 +33,15 @@
 		href?: (page: PageLinkItem) => string | undefined;
 		/** The text that opens the menu (default `[[`). */
 		char?: string;
-		/** Replace each row of the menu. */
-		item?: Snippet<[TriggerItemPayload<PageLinkItem>]>;
-		/** The words the menu and the atom show, over the English ones. */
-		labels?: PartialLabels<'pageLink'>;
+		/**
+		 * 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<PageLinkItem>]>;
 	};
 
-	/** Each view's page link labels: the first page link plugin listed claims them, as its atom. */
-	const pageLinkLabels = viewLabels('pageLink');
-
 	/**
 	 * Links to your app's pages, as Notion's `[[`: it opens a menu of the pages
 	 * your app's `search(query)` answers; picking one replaces `[[query` with
@@ -51,119 +50,64 @@
 	 */
 	export const createPageLinkPlugin =
 		(options: PageLinkPluginOptions): Plugin =>
-		(edytor) => {
-			const labels = labelsWith('pageLink', options.labels);
-			pageLinkLabels.claim(edytor, labels);
-			return {
-				inlineBlocks: {
-					pageLink: {
-						snippet: pageLink,
-						plain: (data) => {
-							const title = (data as Partial<PageLinkData> | undefined)?.title;
-							return typeof title === 'string' ? title : '';
+		(edytor) =>
+			withRulesAndTriggers(
+				edytor,
+				{
+					inlineBlocks: {
+						pageLink: {
+							snippet: pageLink,
+							plain: (data) => {
+								const title = (data as Partial<PageLinkData> | undefined)?.title;
+								return typeof title === 'string' ? title : '';
+							}
 						}
 					}
 				},
-				triggers: [
-					{
-						char: options.char ?? '[[',
-						name: labels.menu,
-						empty: labels.noResults,
-						searching: labels.searching,
-						items: (query, ctx) => options.search(query, ctx),
-						label: (page: PageLinkItem) => page.title,
-						key: (page: PageLinkItem) => page.id,
-						item: options.item ?? row,
-						onPick: (page: PageLinkItem, { block, from, caret }) => {
-							const href = sanitizeLinkHref(page.href ?? options.href?.(page)) ?? undefined;
-							const data: PageLinkData = {
-								id: page.id,
-								title: page.title,
-								...(href ? { href } : {}),
-								...(page.icon ? { icon: page.icon } : {})
-							};
-							const after = block.addInlineBlock({
-								offset: from,
-								block: { type: 'pageLink', data }
-							});
-							if (after) caret(from + 1);
-							return !!after;
+				{
+					triggers: [
+						{
+							char: options.char ?? '[[',
+							items: (query, ctx) => options.search(query, ctx),
+							label: (page: PageLinkItem) => page.title,
+							key: (page: PageLinkItem) => page.id,
+							menu: options.menu,
+							onPick: (page: PageLinkItem, { edytor, block, from, caret }) => {
+								const href = sanitizeLinkHref(page.href ?? options.href?.(page)) ?? undefined;
+								const data: PageLinkData = {
+									id: page.id,
+									title: page.title,
+									...(href ? { href } : {}),
+									...(page.icon ? { icon: page.icon } : {})
+								};
+								const atom = { type: 'pageLink', data };
+								const written = edytor.insertInline(block.id, from, atom).status === 'applied';
+								if (written) caret(from + 1);
+								return written;
+							}
 						}
-					}
-				]
-			};
-		};
+					]
+				}
+			);
 </script>
 
 {#snippet pageLink({ block }: InlineBlockSnippetPayload<Partial<PageLinkData>>)}
 	<a
 		class="edytor-page-link"
-		class:selected={block.selected}
+		data-selected={block.selected ? 'true' : undefined}
 		href={sanitizeLinkHref(block.data.href) ?? undefined}
 		data-edytor-page-link
 		data-page-id={block.data.id}
 		><span class="icon" aria-hidden="true">{block.data.icon ?? '📄'}</span><span class="title"
-			>{block.data.title ?? pageLinkLabels.of(block.handle?.edytor).untitled}</span
+			>{block.data.title ??
+				labelsOf(block.handle?.edytor, 'pageLink', pageLinkEnglish).untitled}</span
 		></a
 	>
 {/snippet}
 
-{#snippet row({ item, id, selected, pick, select }: TriggerItemPayload<PageLinkItem>)}
-	<button
-		type="button"
-		class="edytor-page-link-row"
-		{id}
-		role="option"
-		tabindex="-1"
-		aria-selected={selected}
-		data-selected={selected}
-		data-testid="trigger-menu-item"
-		onmousemove={select}
-		onclick={pick}
-	>
-		<span class="icon" aria-hidden="true">{item.icon ?? '📄'}</span>
-		<span class="title">{item.title}</span>
-	</button>
-{/snippet}
-
 <style>
+	/* One unit, on one line; its look is a theme's. */
 	.edytor-page-link {
-		color: inherit;
-		text-decoration: none;
-		white-space: nowrap;
-	}
-	.edytor-page-link .title {
-		border-bottom: 1px solid rgba(55, 53, 47, 0.25);
-		font-weight: 500;
-	}
-	.edytor-page-link .icon {
-		margin-right: 2px;
-	}
-	.edytor-page-link.selected {
-		border-radius: 3px;
-		background: rgba(35, 131, 226, 0.14);
-	}
-	.edytor-page-link-row {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: 100%;
-		height: 28px;
-		padding: 0 8px;
-		border: 0;
-		border-radius: 6px;
-		background: none;
-		color: inherit;
-		font: inherit;
-		text-align: left;
-		cursor: pointer;
-	}
-	.edytor-page-link-row[data-selected='true'] {
-		background: rgba(33, 27, 23, 0.06);
-	}
-	.edytor-page-link-row .title {
-		overflow: hidden;
-		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 </style>

package/dist/plugins/pageLink/PageLinkPlugin.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 page the page-link menu offers: what your app's search answers. */
 export type PageLinkItem = {
     /** The page's id in your app: stored in the atom. */
@@ -26,10 +26,13 @@ export type PageLinkPluginOptions = {
     href?: (page: PageLinkItem) => string | undefined;
     /** The text that opens the menu (default `[[`). */
     char?: string;
-    /** Replace each row of the menu. */
-    item?: Snippet<[TriggerItemPayload<PageLinkItem>]>;
-    /** The words the menu and the atom show, over the English ones. */
-    labels?: PartialLabels<'pageLink'>;
+    /**
+     * 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<PageLinkItem>]>;
 };
 /**
  * Links to your app's pages, as Notion's `[[`: it opens a menu of the pages
@@ -38,21 +41,6 @@ export type PageLinkPluginOptions = {
  * and puts the caret after it, in one undo step.
  */
 export declare const createPageLinkPlugin: (options: PageLinkPluginOptions) => 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 PageLinkPlugin: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type PageLinkPlugin = InstanceType<typeof PageLinkPlugin>;
+declare const PageLinkPlugin: import("svelte").Component<Record<string, never>, {}, "">;
+type PageLinkPlugin = ReturnType<typeof PageLinkPlugin>;
 export default PageLinkPlugin;

package/dist/plugins/planned.d.ts

@@ -0,0 +1,10 @@
+/**
+ * What the comments and find plugins share: showing an offset of a block's
+ * text.
+ */
+import type { Edytor } from '../edytor.svelte.js';
+/**
+ * Show `offset` of block `id`'s text: the closed toggles it sits in open
+ * (Notion), and it scrolls into view. The selection stays where it was.
+ */
+export declare const showText: (edytor: Edytor, id: string, offset: number) => void;

package/dist/plugins/planned.js

@@ -0,0 +1,12 @@
+import { reveal } from '../selection/replaceSelection.js';
+/**
+ * Show `offset` of block `id`'s text: the closed toggles it sits in open
+ * (Notion), and it scrolls into view. The selection stays where it was.
+ */
+export const showText = (edytor, id, offset) => {
+    const block = edytor.idToBlock.get(id);
+    if (!block)
+        return;
+    reveal(block);
+    block.textAtOffset(offset)?.text.node?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+};

package/dist/plugins/richtext/CalloutIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { Edytor } from '../../edytor.svelte.js';
+	import type { BlockView } from '../../plugins.js';
+	import { calloutIcon } from './controls.svelte.js';
+
+	/**
+	 * A callout's icon (`callout.icon`, the default; an app's `calloutIcon`
+	 * snippet replaces it, `RichTextControl`): in an editable view a button
+	 * (a kind's own control) opening the view's picker, named Change icon,
+	 * or Add icon over an empty slot; a readonly view, or a suggestion's
+	 * preview, shows the icon alone.
+	 */
+	let { block }: { block: BlockView<{ icon?: string }> } = $props();
+	const icon = calloutIcon(getContext<Edytor>('edytor'), () => block);
+</script>
+
+{#if icon.editable}
+	<button type="button" {@attach icon.control}>{icon.icon}</button>
+{:else if icon.icon}
+	<!-- A server render (a readonly view's) shows this one: its marker is written here too. -->
+	<span data-edytor-callout-icon contenteditable="false" aria-hidden="true" {@attach icon.control}
+		>{icon.icon}</span
+	>
+{/if}

package/dist/plugins/richtext/CalloutIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { BlockView } from '../../plugins.js';
+type $$ComponentProps = {
+    block: BlockView<{
+        icon?: string;
+    }>;
+};
+declare const CalloutIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalloutIcon = ReturnType<typeof CalloutIcon>;
+export default CalloutIcon;

package/dist/plugins/richtext/CalloutIconPicker.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { CalloutIconPicker } from './calloutIcons.svelte.js';
+
+	/**
+	 * A callout's icon picker (`callout.icon`), in the overlay under the icon:
+	 * the app's `picker` snippet, hidden until its first placement (never
+	 * `display: none`: it takes the focus as it mounts). Its keys and popup
+	 * are the controller's attachments (`keys`, `popup`) and rows (`option`).
+	 */
+	let { picker, menu }: { picker: CalloutIconPicker; menu: Snippet<[CalloutIconPicker]> } =
+		$props();
+	const place = $derived(picker.isOpen && picker.panel.place(4));
+</script>
+
+{#if picker.isOpen}
+	<div
+		data-edytor-callout-icons
+		style:position="absolute"
+		style:left="{place ? place.left : 0}px"
+		style:top="{place ? place.top : 0}px"
+		style:opacity={place ? undefined : 0}
+	>
+		{@render menu(picker)}
+	</div>
+{/if}

package/dist/plugins/richtext/CalloutIconPicker.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { CalloutIconPicker } from './calloutIcons.svelte.js';
+type $$ComponentProps = {
+    picker: CalloutIconPicker;
+    menu: Snippet<[CalloutIconPicker]>;
+};
+declare const CalloutIconPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalloutIconPicker = ReturnType<typeof CalloutIconPicker>;
+export default CalloutIconPicker;

package/dist/plugins/richtext/EmptyBody.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { Edytor } from '../../edytor.svelte.js';
+	import type { BlockView } from '../../plugins.js';
+	import { emptyBody } from './controls.svelte.js';
+
+	/**
+	 * The hint an empty body shows (`body.hint`, the default; an app's
+	 * `emptyBody` snippet replaces it, `RichTextControl`): an open toggle's (a
+	 * closed `details` hides it with the body), a callout's. Chrome, never
+	 * content: no text element, not editable, hidden from assistive
+	 * technology (Enter at the end of the header is the keyboard's way in). A
+	 * press puts the caret in the header (the core's chrome press); its click
+	 * starts the body (`openBody`). A readonly view, or a suggestion's
+	 * preview (no handle), shows none.
+	 */
+	let { block, kind }: { block: BlockView; kind: 'toggle' | 'callout' } = $props();
+	const view = getContext<Edytor>('edytor');
+</script>
+
+{#if block.handle && !view.readonly}
+	{@const hint = emptyBody(view, block, kind)!}
+	<!-- A pointer's way into the body: the keyboard's is Enter at the end of the header. -->
+	<div {@attach hint.control}>{hint.label}</div>
+{/if}

package/dist/plugins/richtext/EmptyBody.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BlockView } from '../../plugins.js';
+type $$ComponentProps = {
+    block: BlockView;
+    kind: 'toggle' | 'callout';
+};
+declare const EmptyBody: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmptyBody = ReturnType<typeof EmptyBody>;
+export default EmptyBody;

package/dist/plugins/richtext/RichTextControl.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { Edytor } from '../../edytor.svelte.js';
+	import type { BlockView } from '../../plugins.js';
+	import TodoCheckbox from './TodoCheckbox.svelte';
+	import CalloutIcon from './CalloutIcon.svelte';
+	import EmptyBody from './EmptyBody.svelte';
+	import { calloutIcon, emptyBody, richTextControls, todoCheckbox } from './controls.svelte.js';
+
+	/**
+	 * A rich text control of a kind whose markup the app replaces (the
+	 * kind's record draws this only then, so the default markup costs no
+	 * branch): the app's snippet of the view rendering it, else the default.
+	 * `control` is the checkbox, the callout's icon, or a toggle's or a
+	 * callout's empty body.
+	 */
+	let {
+		block,
+		control
+	}: { block: BlockView<any>; control: 'checkbox' | 'calloutIcon' | 'toggle' | 'callout' } =
+		$props();
+	const view = getContext<Edytor>('edytor');
+	const own = richTextControls.get(view) ?? {};
+</script>
+
+{#if control === 'checkbox'}
+	{@const box = todoCheckbox(view, () => block)}
+	{#if own.checkbox}{@render own.checkbox(box)}{:else}<TodoCheckbox {block} />{/if}
+{:else if control === 'calloutIcon'}
+	{@const icon = calloutIcon(view, () => block)}
+	{#if !own.calloutIcon}<CalloutIcon
+			{block}
+		/>{:else if icon.editable || icon.icon}{@render own.calloutIcon(icon)}{/if}
+{:else}
+	{@const hint = emptyBody(view, block, control)}
+	{#if !own.emptyBody}<EmptyBody {block} kind={control} />{:else if hint}{@render own.emptyBody(
+			hint
+		)}{/if}
+{/if}

package/dist/plugins/richtext/RichTextControl.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BlockView } from '../../plugins.js';
+type $$ComponentProps = {
+    block: BlockView<any>;
+    control: 'checkbox' | 'calloutIcon' | 'toggle' | 'callout';
+};
+declare const RichTextControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type RichTextControl = ReturnType<typeof RichTextControl>;
+export default RichTextControl;