edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/pageLink/PageLinkPlugin.svelte

@@ -1,13 +1,19 @@
+<svelte:options runes />
+
 <script module lang="ts">
+	import './pageLink.css';
 	import type { Snippet } from 'svelte';
 	import type {
 		InlineBlockSnippetPayload,
 		Plugin,
-		TriggerContext,
-		TriggerItemPayload
+		PluginOperations,
+		TriggerContext
 	} from '../../plugins.js';
+	import type { Edytor } from '../../edytor.svelte.js';
+	import type { TextAnchor } from '../../selection/selection.svelte.js';
 	import type { TriggerMenuController } from '../triggers/TriggerController.svelte.js';
-	import { labelsWith, viewLabels, type PartialLabels } from '../../labels.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. */
@@ -33,141 +39,180 @@
 		) => readonly PageLinkItem[] | Promise<readonly PageLinkItem[]>;
 		/** A page's URL when the search answers none (`/pages/<id>`, say). */
 		href?: (page: PageLinkItem) => string | undefined;
+		/**
+		 * The page a pasted text names (your app's URL for it, `page:roadmap`…),
+		 * at once or as a promise; `null` when it names none. Asked for a plain
+		 * text paste at a caret that is one item (trimmed, one line): a page
+		 * turns the pasted text into a `pageLink` atom, an undo step of its own
+		 * after the paste, so undo gives the text back. A promise lets the paste
+		 * land as it would without this option and swaps it when it answers, if
+		 * the text is still there.
+		 */
+		fromPaste?: (
+			text: string
+		) => PageLinkItem | null | undefined | Promise<PageLinkItem | null | undefined>;
 		/** The text that opens the menu (default `[[`). */
 		char?: string;
-		/** Replace each row of the menu. */
-		item?: Snippet<[TriggerItemPayload<PageLinkItem>]>;
 		/**
-		 * Replace the whole menu; it renders while `controller.isOpen`, at the
-		 * caret. Keep its ARIA with `{@attach controller.popup}` on the list and
+		 * 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>]>;
-		/** The words the menu and the atom show, over the English ones. */
-		labels?: PartialLabels<'pageLink'>;
 	};
 
-	/** Each view's page link labels: the first page link plugin listed claims them, as its atom. */
-	const pageLinkLabels = viewLabels('pageLink');
+	/** The atom for `page`, its href sanitized. */
+	const atomOf = (page: PageLinkItem, options: PageLinkPluginOptions) => {
+		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 } : {})
+		};
+		return { type: 'pageLink', data };
+	};
+
+	const isPromise = <T,>(value: unknown): value is Promise<T> =>
+		typeof (value as Promise<T> | null)?.then === 'function';
+
+	/**
+	 * Swap the pasted `item`, where the paste put it (right after `start`,
+	 * past leading spaces), for `page`'s atom: one `autolink` step, so undo
+	 * gives the text back. Nothing when the view is readonly or the text is
+	 * no longer there; the caret follows the atom when it was at the text's end.
+	 */
+	const swapPasted = (
+		edytor: Edytor,
+		start: TextAnchor,
+		item: string,
+		page: PageLinkItem,
+		options: PageLinkPluginOptions
+	) => {
+		if (edytor.readonly) return;
+		const at = edytor.selection.resolveTextAnchor(start);
+		if (!at) return;
+		const { text } = at;
+		const content = text.stringContent;
+		let from = at.offset;
+		while (from < content.length && /\s/.test(content[from])) from++;
+		if (content.slice(from, from + item.length) !== item) return;
+		const block = text.parent;
+		const offset = text.segStart + from;
+		const caret = edytor.selection.caret;
+		const follows = caret?.block === block && caret.offset === offset + item.length;
+		edytor.dispatcher.run('autolink', () => {
+			if (edytor.deleteText(block.id, offset, item.length).status !== 'applied') return;
+			edytor.insertInline(block.id, offset, atomOf(page, options));
+			if (follows) edytor.dispatcher.caret({ block, offset: offset + 1 });
+		});
+	};
+
+	/**
+	 * The paste hook of `fromPaste` (it runs before the other plugins'
+	 * `onPaste`, `pasteFirst`): a plain text paste at a caret in a text,
+	 * outside islands and voids, that is one item. A page answered at once
+	 * claims the paste (the text, then the swap); a promise claims nothing
+	 * (the rich text link, the URL menu or the plain paste take it) and swaps
+	 * what landed when it answers a page.
+	 */
+	const pasteHook = (edytor: Edytor, options: PageLinkPluginOptions): PluginOperations['onPaste'] =>
+		options.fromPaste &&
+		(({ e, prevent, at }) => {
+			const { fromPaste } = options;
+			if (!fromPaste || at || edytor.readonly) return;
+			const plain = e.clipboardData?.getData('text/plain') ?? '';
+			const item = plain.trim();
+			if (!item || /[\r\n]/.test(item)) return;
+			const { value, projection } = edytor.selection;
+			if (value.kind !== 'text' || !projection.isCollapsed) return;
+			if (projection.islandRoot !== null || projection.voidRoot !== null) return;
+			const { startText: text, yStart } = edytor.selection.textRange();
+			if (!text) return;
+			const start = edytor.selection.createTextAnchor(text, yStart, 'left');
+			if (!start) return;
+			let answer: ReturnType<typeof fromPaste>;
+			try {
+				answer = fromPaste(item);
+			} catch {
+				return;
+			}
+			if (isPromise<PageLinkItem | null | undefined>(answer)) {
+				answer.then(
+					(page) => page && swapPasted(edytor, start, item, page, options),
+					() => {}
+				);
+				return;
+			}
+			const page = answer;
+			if (!page) return;
+			prevent(() => {
+				edytor.dispatcher.run('insertFromPaste', () => {
+					edytor.insertText(text.parent.id, text.segStart + yStart, item);
+					edytor.dispatcher.caret(text, yStart + item.length);
+				});
+				if (edytor.dispatcher.last?.status === 'applied')
+					swapPasted(edytor, start, item, page, options);
+			});
+		});
 
 	/**
 	 * 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
 	 * a `pageLink` atom (`{ id, title, href, icon }`), an `<a>` to the page,
-	 * and puts the caret after it, in one undo step.
+	 * and puts the caret after it, in one undo step. With `fromPaste`, a
+	 * pasted text your app recognizes becomes a page link too.
 	 */
 	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,
+				{
+					...(edytor && options.fromPaste
+						? { onPaste: pasteHook(edytor, options), pasteFirst: true }
+						: {}),
+					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,
-						menu: options.menu,
-						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 atom = atomOf(page, options);
+								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, option, run, select }: TriggerItemPayload<PageLinkItem>)}
-	<button
-		type="button"
-		class="edytor-page-link-row"
-		{...option}
-		data-testid="trigger-menu-item"
-		onmousemove={select}
-		onclick={run}
-	>
-		<span class="icon" aria-hidden="true">{item.icon ?? '📄'}</span>
-		<span class="title">{item.title}</span>
-	</button>
-{/snippet}
-
-<style>
-	.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,7 +1,7 @@
+import './pageLink.css';
 import type { Snippet } from 'svelte';
-import type { Plugin, TriggerContext, TriggerItemPayload } from '../../plugins.js';
+import type { Plugin, TriggerContext } from '../../plugins.js';
 import type { TriggerMenuController } from '../triggers/TriggerController.svelte.js';
-import { type PartialLabels } from '../../labels.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. */
@@ -25,41 +25,34 @@ export type PageLinkPluginOptions = {
     search: (query: string, ctx: TriggerContext) => readonly PageLinkItem[] | Promise<readonly PageLinkItem[]>;
     /** A page's URL when the search answers none (`/pages/<id>`, say). */
     href?: (page: PageLinkItem) => string | undefined;
+    /**
+     * The page a pasted text names (your app's URL for it, `page:roadmap`…),
+     * at once or as a promise; `null` when it names none. Asked for a plain
+     * text paste at a caret that is one item (trimmed, one line): a page
+     * turns the pasted text into a `pageLink` atom, an undo step of its own
+     * after the paste, so undo gives the text back. A promise lets the paste
+     * land as it would without this option and swaps it when it answers, if
+     * the text is still there.
+     */
+    fromPaste?: (text: string) => PageLinkItem | null | undefined | Promise<PageLinkItem | null | undefined>;
     /** The text that opens the menu (default `[[`). */
     char?: string;
-    /** Replace each row of the menu. */
-    item?: Snippet<[TriggerItemPayload<PageLinkItem>]>;
     /**
-     * Replace the whole menu; it renders while `controller.isOpen`, at the
-     * caret. Keep its ARIA with `{@attach controller.popup}` on the list and
+     * 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>]>;
-    /** The words the menu and the atom show, over the English ones. */
-    labels?: PartialLabels<'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
  * a `pageLink` atom (`{ id, title, href, icon }`), an `<a>` to the page,
- * and puts the caret after it, in one undo step.
+ * and puts the caret after it, in one undo step. With `fromPaste`, a
+ * pasted text your app recognizes becomes a page link too.
  */
 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/pageLink/pageLink.css

@@ -0,0 +1,6 @@
+/* Loaded by the plugin's module (a component's own <style> is dropped when only
+   its module is used: the plugin factory, never the component). */
+/* One unit, on one line; its look is a theme's. */
+.edytor-page-link {
+	white-space: nowrap;
+}

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

@@ -2,37 +2,24 @@
 	import { getContext } from 'svelte';
 	import type { Edytor } from '../../edytor.svelte.js';
 	import type { BlockView } from '../../plugins.js';
-	import { richTextLabels } from './labels.js';
-	import { DEFAULT_CALLOUT_ICON, calloutIconViews, iconOf } from './calloutIcons.svelte.js';
+	import { calloutIcon } from './controls.svelte.js';
 
 	/**
-	 * A callout's icon (`callout.icon`): its `data.icon`, the view's default
-	 * without one, none when it is `''`. In an editable view it is 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.
+	 * 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 edytor = getContext<Edytor>('edytor');
-	const labels = richTextLabels.of(edytor).calloutIcon;
-	const picker = calloutIconViews.get(edytor);
-	const icon = $derived(iconOf(block.data, picker?.icon ?? DEFAULT_CALLOUT_ICON));
-	const open = $derived(picker?.target === block.id);
+	const icon = calloutIcon(getContext<Edytor>('edytor'), () => block);
 </script>
 
-{#if block.handle && picker && !edytor.readonly}
-	<button
-		type="button"
-		contenteditable="false"
-		data-edytor-callout-icon
-		data-empty={icon ? undefined : ''}
-		aria-label={icon ? labels.change : labels.add}
-		aria-haspopup="menu"
-		aria-expanded={open}
-		aria-controls={open ? picker.id : undefined}
-		onmousedown={(event) => event.preventDefault()}
-		onclick={() => block.handle && picker.toggle(block.handle)}>{icon}</button
+{#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
 	>
-{:else if icon}
-	<span contenteditable="false" data-edytor-callout-icon aria-hidden="true">{icon}</span>
 {/if}

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

@@ -2,31 +2,24 @@
 	import { getContext } from 'svelte';
 	import type { Edytor } from '../../edytor.svelte.js';
 	import type { BlockView } from '../../plugins.js';
-	import { richTextLabels } from './labels.js';
-	import { openBody } from './body.js';
+	import { emptyBody } from './controls.svelte.js';
 
 	/**
-	 * The hint an empty body shows (`body.hint`): 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.
+	 * 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 edytor = getContext<Edytor>('edytor');
-	const labels = richTextLabels.of(edytor);
+	const view = getContext<Edytor>('edytor');
 </script>
 
-{#if block.handle && !edytor.readonly}
+{#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
-		contenteditable="false"
-		data-edytor-empty-body={kind}
-		aria-hidden="true"
-		onclick={() => block.handle && openBody(block.handle)}
-	>
-		{labels.emptyBody[kind]}
-	</div>
+	<div {@attach hint.control}>{hint.label}</div>
 {/if}

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;