edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/richtext/RichTextPlugin.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	import type { Plugin, BlockSnippetPayload, KindPreset, PlaceholderView } from '../../plugins.js';
-	import type { Block } from '../../block/block.svelte.js';
+	import { branded } from '../brand.js';
 	import type { Edytor } from '../../edytor.svelte.js';
 	import { presetId } from '../../kinds.js';
 	import type { Text } from '../../text/text.svelte.js';
@@ -19,9 +19,29 @@
 	import { firstUriListEntry } from '../../events/dataTransferPayload.js';
 	import { flipToggles, shownSelectionBlocks } from '../../selection/replaceSelection.js';
 	import { mediaKinds, richTextKinds, richTextMarks } from '../../crdt/semantics.js';
-	import { keywordsOf, labelsWith, type PartialLabels, type RichTextLabels } from '../../labels.js';
-	import { checkboxLabels } from './labels.js';
+	import { richTextEnglish, keywordsOf, labelsOf, type RichTextLabels } from '../../labels.js';
 	import TodoCheckbox from './TodoCheckbox.svelte';
+	import EmptyBody from './EmptyBody.svelte';
+	import CalloutIcon from './CalloutIcon.svelte';
+	import RichTextControl from './RichTextControl.svelte';
+	import {
+		DEFAULT_CALLOUT_ICON,
+		calloutHtml,
+		calloutIcons,
+		calloutPickers,
+		iconOf
+	} from './callouts.js';
+	import { listen } from '../../utils/listen.js';
+	import type { Snippet } from 'svelte';
+	import {
+		richTextControls,
+		toggleTodo,
+		type CalloutIconPayload,
+		type EmptyBodyPayload,
+		type TodoCheckboxPayload
+	} from './controls.svelte.js';
+
+	export type { CalloutIconPayload, EmptyBodyPayload, TodoCheckboxPayload };
 
 	export { richTextOperations };
 
@@ -42,6 +62,8 @@
 	const rule = { html: () => '<hr>', plain: () => '---' };
 	/** A native disclosure: the browser owns `open` (declared view state). */
 	const disclosure = { element: 'details', viewState: ['open'] };
+	/** The kinds drawn as a disclosure: a toggle this view creates opens (`body.open`). */
+	const DISCLOSURES = new Set(['toggle', 'toggle-heading']);
 	/**
 	 * A list's elements without list semantics (`role="none"`): a list's items
 	 * are sibling blocks, never the only children of one `ul` or `ol`, so an
@@ -90,96 +112,121 @@
 			undefined;
 
 	/**
-	 * Notion's placeholders in `labels` (English by default): headings,
-	 * lists, to-dos, toggles and quotes name their kind while empty; a
-	 * paragraph invites a command only while focused.
+	 * The kinds whose empty text names them, by placeholder (a callout's
+	 * title, as a toggle's, names itself).
 	 */
-	export const createRichTextPlaceholder = (labels?: PartialLabels<'richText'>) => {
-		const { placeholders } = labelsWith('richText', labels);
-		return ({ type, data, focused }: PlaceholderView): string | null => {
-			if (type === 'heading')
-				return placeholders.heading(Number(headingLevel(data.level).slice(1)) as 1 | 2 | 3);
-			if (type === 'toggle-heading')
-				return placeholders.toggleHeading(Number(headingLevel(data.level).slice(1)) as 1 | 2 | 3);
-			if (type === 'bulleted-list-item' || type === 'numbered-list-item') return placeholders.list;
-			if (type === 'todo-item') return placeholders.todo;
-			if (type === 'toggle') return placeholders.toggle;
-			if (type === 'quote') return placeholders.quote;
-			if (type === 'callout') return focused ? placeholders.callout : null;
-			if (type === 'image' || Object.hasOwn(mediaKinds, type))
-				return focused ? placeholders.caption : null;
-			// Code shows nothing in an empty line (Notion).
-			if (type === 'codeLine') return null;
-			return focused ? placeholders.empty : null;
-		};
+	const NAMED: Record<string, 'list' | 'todo' | 'toggle' | 'quote' | 'callout'> = {
+		'bulleted-list-item': 'list',
+		'numbered-list-item': 'list',
+		'todo-item': 'todo',
+		toggle: 'toggle',
+		quote: 'quote',
+		callout: 'callout'
 	};
 
-	/** Notion's placeholders, in English. */
-	export const richTextPlaceholder = createRichTextPlaceholder();
+	/**
+	 * Notion's placeholders, in the view's `richText` labels (English by
+	 * default): headings, lists, to-dos, toggles and quotes name their kind
+	 * while empty; a paragraph invites a command only while focused.
+	 */
+	export const richTextPlaceholder = (
+		{ type, data, focused }: PlaceholderView,
+		edytor?: Edytor
+	): string | null => {
+		const { placeholders } = labelsOf(edytor, 'richText', richTextEnglish);
+		if (type === 'heading' || type === 'toggle-heading')
+			return placeholders[type === 'heading' ? 'heading' : 'toggleHeading'](
+				Number(headingLevel(data.level).slice(1)) as 1 | 2 | 3
+			);
+		if (Object.hasOwn(NAMED, type)) return placeholders[NAMED[type]!];
+		// Code shows nothing in an empty line (Notion).
+		if (type === 'codeLine' || !focused) return null;
+		return type === 'image' || Object.hasOwn(mediaKinds, type)
+			? placeholders.caption
+			: placeholders.empty;
+	};
 
 	export type RichTextPluginOptions = {
-		/** The kinds', marks' and checkbox's words (English by default). */
-		labels?: PartialLabels<'richText'>;
+		/** Callouts' icons (their picker is `createCalloutIconsPlugin`'s). */
+		callout?: {
+			/**
+			 * A new callout's icon, and the one a callout whose `data.icon` is
+			 * unset shows (`💡` by default).
+			 */
+			icon?: string;
+		};
+		/**
+		 * A to-do's checkbox (default: a native `input type="checkbox"`). Spread
+		 * `checkbox.attributes` on the control, an `input` (with
+		 * `checked={checkbox.checked}`) or a `button`: its click checks the to-do
+		 * through the document.
+		 */
+		checkbox?: Snippet<[TodoCheckboxPayload]>;
 		/**
-		 * The slash menu's keywords of a kind, by command id (`block.heading1`):
-		 * they replace that preset's own (list the English ones to keep them).
+		 * A callout's icon (default: a `button` showing it, or the icon alone
+		 * where it cannot be picked). Spread `icon.attributes` on its element:
+		 * a click opens the view's picker (`createCalloutIconsPlugin`), which
+		 * opens under it.
 		 */
-		keywords?: Partial<Record<string, string[]>>;
+		calloutIcon?: Snippet<[CalloutIconPayload]>;
+		/**
+		 * The hint an open toggle's or a callout's empty body shows (default: a
+		 * `div` with the view's `richText.emptyBody` words). Spread
+		 * `hint.attributes` on it: a click starts the body, a dragged block
+		 * drops inside.
+		 */
+		emptyBody?: Snippet<[EmptyBodyPayload]>;
 	};
 
-	const richTextPlugins = new WeakSet<Plugin>();
-
-	/** Recognize any rich text plugin instance (the component's default yields to yours). */
-	export const isRichTextPlugin = (plugin: Plugin) => richTextPlugins.has(plugin);
-
-	// One key patched: a peer's concurrent edit of another key is kept.
-	const toggleTodo = (block: Block) => (block.data.checked = !block.data.checked);
-
-	/** Notion's "turn into" chords: Mod+Alt+0 text … 8 code (`block.<type>` command ids). */
-	const TURN_INTO: Record<string, string> = {
-		'mod+alt+0': 'block.paragraph',
-		'mod+alt+1': 'block.heading1',
-		'mod+alt+2': 'block.heading2',
-		'mod+alt+3': 'block.heading3',
-		'mod+alt+4': 'block.todo-item',
-		'mod+alt+5': 'block.bulleted-list-item',
-		'mod+alt+6': 'block.numbered-list-item',
-		'mod+alt+7': 'block.toggle',
-		'mod+alt+8': 'block.code'
-	};
+	/** Notion's "turn into" chords: Mod+Alt+0 text … 8 code (`block.<type>` command ids, by digit). */
+	const TURN_INTO = [
+		'paragraph',
+		'heading1',
+		'heading2',
+		'heading3',
+		'todo-item',
+		'bulleted-list-item',
+		'numbered-list-item',
+		'toggle',
+		'code'
+	];
 
 	/**
-	 * The rich text kinds and marks, with their words in `labels` and their
-	 * slash keywords in `keywords` (English by default).
+	 * The rich text kinds and marks, their words and slash keywords the
+	 * view's (`labels`, English by default).
 	 */
 	export const createRichTextPlugin = (options: RichTextPluginOptions = {}): Plugin => {
-		const labels = labelsWith('richText', options.labels);
 		const plugin: Plugin = (edytor) => {
-			checkboxLabels.claim(edytor, labels);
-			return richText(edytor, labels, options.keywords);
+			const labels = labelsOf(edytor, 'richText', richTextEnglish);
+			// The view's default callout icon and its controls' markup: the first rich text plugin listed sets them.
+			if (edytor && !calloutIcons.has(edytor)) {
+				calloutIcons.set(edytor, options.callout?.icon ?? DEFAULT_CALLOUT_ICON);
+				const { checkbox, calloutIcon, emptyBody } = options;
+				richTextControls.set(edytor, { checkbox, calloutIcon, emptyBody });
+			}
+			return richText(edytor, labels, options);
 		};
-		richTextPlugins.add(plugin);
-		return plugin;
-	};
-
-	/** A preset whose slash keywords `keywords` may replace, by its command id. */
-	const preset = (
-		id: string,
-		row: KindPreset,
-		keywords: RichTextPluginOptions['keywords']
-	): KindPreset => {
-		const own = keywordsOf(id, row.keywords, keywords);
-		return own ? { ...row, keywords: own } : row;
+		return branded('richText', plugin);
 	};
 
-	/** The rich text records of `edytor`, in `labels`, its presets' keywords replaced by `keywords`. */
+	/** The rich text records of `edytor`, in `labels`, its presets' keywords the view's. */
 	const richText = (
 		edytor: Edytor,
-		{ kinds, marks: words }: RichTextLabels,
-		keywords: RichTextPluginOptions['keywords']
+		labels: RichTextLabels,
+		{ callout: calloutOptions, checkbox, calloutIcon, emptyBody }: RichTextPluginOptions
 	): ReturnType<Plugin> => {
+		const { kinds, marks: words } = labels;
+		/** A new callout's icon. */
+		const icon = calloutOptions?.icon ?? DEFAULT_CALLOUT_ICON;
+		/** The block this view is retyping into a disclosure (`body.open`), until it applied. */
+		let retyping: string | null = null;
+		/** The disclosures this view created, opened once drawn (`onBlockAttached`). */
+		const opening = new Set<string>();
 		const presets = (type: string, rows: KindPreset[]) =>
-			rows.map((row, index) => preset(presetId(type, index, rows.length), row, keywords));
+			rows.map((row, index) => {
+				const own = keywordsOf(edytor, presetId(type, index, rows.length), row.keywords);
+				return own ? { ...row, keywords: own } : row;
+			});
 		const operations = richTextOperations(edytor);
 		/** The space an autolink types itself: its own insertion is not looked at again. */
 		let autolinking = false;
@@ -228,9 +275,10 @@
 					});
 				},
 				...Object.fromEntries(
-					Object.entries(TURN_INTO).map(([chord, id]): [string, HotKey] => [
-						chord,
+					TURN_INTO.map((type, digit): [string, HotKey] => [
+						`mod+alt+${digit}`,
 						({ prevent }) => {
+							const id = `block.${type}`;
 							if (edytor.commands.has(id)) prevent(() => void edytor.runCommand(id));
 						}
 					])
@@ -244,7 +292,8 @@
 				if (!linkable()) return;
 				const href = pastedLink(e.clipboardData?.getData('text/plain'));
 				if (!href) return;
-				const { isCollapsed, startText: text, yStart } = edytor.selection.state;
+				const { startText: text, yStart } = edytor.selection.textRange();
+				const { isCollapsed } = edytor.selection.projection;
 				if (!isCollapsed)
 					return prevent(() =>
 						edytor.dispatcher.run('insertFromPaste', () => operations.setLinkAtRange({ href }))
@@ -253,7 +302,7 @@
 				prevent(() => {
 					const end = yStart + href.length;
 					edytor.dispatcher.run('insertFromPaste', () => {
-						text.insertText({ value: href, start: yStart, end: yStart });
+						edytor.insertText(text.parent.id, text.segStart + yStart, href);
 						edytor.dispatcher.caret(text, end);
 					});
 					if (text.stringContent.slice(yStart, end) === href)
@@ -264,11 +313,25 @@
 			// a step of its own after the typing: undo gives the plain text back
 			// (`link.autolink.typed`, Notion).
 			onBeforeOperation: (change) => {
+				// A block without children retyped into a disclosure from another kind (the
+				// slash menu, a markdown shortcut, Turn into: their planned `setBlockType`):
+				// the toggle it becomes opens on its empty body (`body.open`). One with
+				// children keeps them out of sight.
+				if (change.operation === 'setBlockType') {
+					const [, type] = change.payload;
+					const opens =
+						DISCLOSURES.has(type) &&
+						!DISCLOSURES.has(change.block.type) &&
+						!change.block.hasChildren;
+					retyping = opens ? change.block.id : null;
+				}
 				if (autolinking || change.operation !== 'insertText') return;
 				const { payload, text, prevent } = change;
-				if (payload.value !== ' ' || !linkable()) return;
-				const { startText, yStart, isCollapsed } = edytor.selection.state;
-				if (!isCollapsed || text !== startText || (payload.start ?? yStart) !== yStart) return;
+				if (payload[2] !== ' ' || !linkable()) return;
+				const { startText, yStart } = edytor.selection.textRange();
+				const { isCollapsed } = edytor.selection.projection;
+				if (!isCollapsed || !text || text !== startText) return;
+				if (payload[1] !== text.segStart + yStart) return;
 				const found = typedLink(text.stringContent.slice(0, yStart));
 				const end = found && found.start + found.href.length;
 				if (!found || !end) return;
@@ -279,7 +342,7 @@
 				prevent(() => {
 					autolinking = true;
 					try {
-						text.insertText(payload);
+						edytor.insertText(...payload);
 					} finally {
 						autolinking = false;
 					}
@@ -287,6 +350,17 @@
 					operations.linkText(text, found.start, end, found.href);
 				});
 			},
+			onAfterOperation: (change) => {
+				if (retyping !== change.block.id) return;
+				retyping = null;
+				if (DISCLOSURES.has(change.block.type)) opening.add(change.block.id);
+			},
+			// A disclosure this view created opens as it is drawn (the browser owns `open`
+			// from then on: the user's to close).
+			onBlockAttached: ({ node, block }) => {
+				if (!opening.delete(block.id)) return;
+				if (node instanceof HTMLDetailsElement) node.open = true;
+			},
 			// Mod+click on a link opens it in a new tab (`link.mod-click`): a plain
 			// click places the caret, as in Notion. Mod is read as the keymap reads
 			// it: Meta, or Ctrl off a Mac.
@@ -300,8 +374,7 @@
 					event.preventDefault();
 					openLink(href, node.ownerDocument.defaultView);
 				};
-				node.addEventListener('click', click);
-				return () => node.removeEventListener('click', click);
+				return listen(node, 'click', click);
 			},
 			onBeforeInput: ({ e, prevent }) => {
 				const { inputType, data } = e;
@@ -453,7 +526,8 @@
 				},
 				'todo-item': {
 					continues: true,
-					snippet: todoItem,
+					// The app's control markup, if any, through its own snippet: the default costs no branch.
+					snippet: checkbox ? todoItemOwn : todoItem,
 					presets: presets('todo-item', [
 						{
 							label: kinds.todoList,
@@ -473,7 +547,7 @@
 				toggle: {
 					continues: true,
 					container: true,
-					snippet: details,
+					snippet: emptyBody ? detailsOwn : details,
 					...disclosure,
 					presets: presets('toggle', [
 						{
@@ -490,7 +564,7 @@
 				// line is a toggle heading 1.
 				'toggle-heading': {
 					container: true,
-					snippet: details,
+					snippet: emptyBody ? detailsOwn : details,
 					...disclosure,
 					contentElement: (data) => headingLevel(data.level),
 					presets: presets(
@@ -521,12 +595,37 @@
 						return `<details><summary><${tag}>${content}</${tag}></summary>${children}</details>`;
 					}
 				},
+				// Notion's callout: an icon (`data.icon`, the picker's), a title (its own
+				// text) and a content (its children, any blocks), which shows even empty
+				// (`body`): Enter at the end of the title goes into it.
 				callout: {
 					container: true,
-					snippet: callout,
+					body: true,
+					snippet: calloutIcon || emptyBody ? calloutOwn : callout,
 					presets: presets('callout', [
-						{ label: kinds.callout, icon: '✦', keywords: ['note', 'tip'], data: { icon: '💡' } }
-					])
+						{ label: kinds.callout, icon: '✦', keywords: ['note', 'tip'], data: { icon } }
+					]),
+					// The block menu's Change icon, while the view lists a picker: the keyboard's way to it.
+					menu: (block) => {
+						const picker = calloutPickers.get(edytor);
+						return picker
+							? [
+									{
+										id: 'callout.icon',
+										label: labels.calloutIcon.change,
+										icon: 'block.callout',
+										run: () => picker.open(block)
+									}
+								]
+							: [];
+					},
+					// HTML import: its own export, the icon in its attribute.
+					parse: (el) => {
+						const own = el.getAttribute('data-edytor-callout');
+						return own === null ? undefined : { icon: own };
+					},
+					html: (block, content, children) =>
+						calloutHtml(iconOf(block.data, edytor), content, children)
 				},
 				quote: {
 					container: true,
@@ -545,7 +644,6 @@
 					empty: { content: [], children: [] },
 					...rule
 				},
-				details: { snippet: details, ...disclosure },
 				'ordered-list': {
 					...richTextKinds['ordered-list'],
 					itemKind: 'numbered-list-item',
@@ -560,86 +658,112 @@
 					element: unlisted('ul'),
 					html: 'ul'
 				},
-				'list-item': { snippet: listItem, element: unlisted('li'), html: 'li' },
-				horizontalRule: {
-					...richTextKinds.horizontalRule,
-					element: 'hr',
-					...rule
-				}
+				'list-item': { snippet: listItem, element: unlisted('li'), html: 'li' }
 			}
 		};
 	};
-
-	/** The rich text kinds and marks, in English. */
-	export const richTextPlugin: Plugin = createRichTextPlugin();
 </script>
 
 <!--
 	Every kind that has children renders them in one container marked
 	`data-edytor-children`: the core indents it by one nesting step
-	(`--edytor-nest-indent`), so nesting looks the same under any kind.
+	(`--edytor-nest-indent`), so nesting looks the same under any kind. Each
+	snippet writes the container itself, with no whitespace between its tags
+	(the comments hold the lines; prettier would add whitespace back): a
+	nested snippet or a text node between tags is one more node per block for
+	the browser to walk (`render.markers`).
 -->
-{#snippet nested(children: BlockSnippetPayload['children'])}
-	{#if children}
-		<div data-edytor-children>
-			{@render children()}
-		</div>
-	{/if}
-{/snippet}
+<!-- prettier-ignore -->
+{#snippet paragraph({ content, children }: BlockSnippetPayload)}<!--
+--><p>{@render content()}</p><!--
+-->{#if children}<div data-edytor-children>{@render children()}</div>{/if}<!--
+-->{/snippet}
 
-{#snippet paragraph({ content, children }: BlockSnippetPayload)}
-	<p>
-		{@render content()}
-	</p>
-	{@render nested(children)}
-{/snippet}
-
-{#snippet details({ content, children }: BlockSnippetPayload)}
-	<summary>
-		{@render content()}
-	</summary>
-	{@render nested(children)}
-{/snippet}
+<!--
+	A toggle: its text the `summary`, its children the body; an empty body
+	shows its hint, which the browser hides with the body while closed.
+-->
+<!-- prettier-ignore -->
+{#snippet details({ block, content, children }: BlockSnippetPayload)}<!--
+--><summary>{@render content()}</summary><!--
+-->{#if children}<div data-edytor-children>{@render children()}</div><!--
+-->{:else}<EmptyBody {block} kind="toggle" />{/if}<!--
+-->{/snippet}
 
 <!--
 	A heading's or quote's text (the core wraps it in the kind's `contentElement`,
 	its `h1`–`h3` or `blockquote`); its children below, outside that tag, so
 	heading styles and the heading's accessible name stop at its own text.
 -->
-{#snippet textThenChildren({ content, children }: BlockSnippetPayload)}
-	{@render content()}
-	{@render nested(children)}
-{/snippet}
+<!-- prettier-ignore -->
+{#snippet textThenChildren({ content, children }: BlockSnippetPayload)}<!--
+-->{@render content()}<!--
+-->{#if children}<div data-edytor-children>{@render children()}</div>{/if}<!--
+-->{/snippet}
 
-{#snippet callout({ block, content, children }: BlockSnippetPayload<{ icon?: string }>)}
-	<span contenteditable="false" data-edytor-callout-icon>{block.data.icon || '💡'}</span>
-	<div>
-		{@render content()}
-	</div>
-	{@render nested(children)}
-{/snippet}
+<!--
+	A callout: its icon, its title (its own text), then its content (its
+	children), or the hint of an empty one.
+-->
+<!-- prettier-ignore -->
+{#snippet callout({ block, content, children }: BlockSnippetPayload<{ icon?: string }>)}<!--
+--><CalloutIcon {block} /><!--
+--><div data-edytor-callout-title>{@render content()}</div><!--
+-->{#if children}<div data-edytor-children>{@render children()}</div><!--
+-->{:else}<EmptyBody {block} kind="callout" />{/if}<!--
+-->{/snippet}
 
-{#snippet todoItem({ block, content, children }: BlockSnippetPayload<{ checked?: boolean }>)}
-	<TodoCheckbox {block} toggle={toggleTodo} />
-	<div>
-		{@render content()}
-	</div>
-	{@render nested(children)}
-{/snippet}
+<!-- prettier-ignore -->
+{#snippet todoItem({ block, content, children }: BlockSnippetPayload<{ checked?: boolean }>)}<!--
+--><TodoCheckbox {block} /><!--
+--><div>{@render content()}</div><!--
+-->{#if children}<div data-edytor-children>{@render children()}</div>{/if}<!--
+-->{/snippet}
 
-{#snippet listItem({ content, children }: BlockSnippetPayload)}
-	<div>{@render content()}</div>
-	{@render nested(children)}
-{/snippet}
+<!--
+	The same kinds, their controls drawn by the app's snippets (`checkbox`,
+	`calloutIcon`, `emptyBody`) where it passes them.
+-->
+<!-- prettier-ignore -->
+{#snippet todoItemOwn({ block, content, children }: BlockSnippetPayload<{ checked?: boolean }>)}<!--
+--><RichTextControl {block} control="checkbox" /><!--
+--><div>{@render content()}</div><!--
+-->{#if children}<div data-edytor-children>{@render children()}</div>{/if}<!--
+-->{/snippet}
+
+<!-- prettier-ignore -->
+{#snippet detailsOwn({ block, content, children }: BlockSnippetPayload)}<!--
+--><summary>{@render content()}</summary><!--
+-->{#if children}<div data-edytor-children>{@render children()}</div><!--
+-->{:else}<RichTextControl {block} control="toggle" />{/if}<!--
+-->{/snippet}
+
+<!-- prettier-ignore -->
+{#snippet calloutOwn({ block, content, children }: BlockSnippetPayload<{ icon?: string }>)}<!--
+--><RichTextControl {block} control="calloutIcon" /><!--
+--><div data-edytor-callout-title>{@render content()}</div><!--
+-->{#if children}<div data-edytor-children>{@render children()}</div><!--
+-->{:else}<RichTextControl {block} control="callout" />{/if}<!--
+-->{/snippet}
+
+<!-- prettier-ignore -->
+{#snippet listItem({ content, children }: BlockSnippetPayload)}<!--
+--><div>{@render content()}</div><!--
+-->{#if children}<div data-edytor-children>{@render children()}</div>{/if}<!--
+-->{/snippet}
 
 <!--
 	A list container (HTML import's `ol`/`ul`) groups its items: they are its
 	rows, not blocks nested under its text, so its wrapper is not indented.
 -->
-{#snippet list({ children }: BlockSnippetPayload)}
-	{#if children}
-		<div>
-			{@render children()}
-		</div>
-	{/if}
-{/snippet}
+<!-- prettier-ignore -->
+{#snippet list({ children }: BlockSnippetPayload)}<!--
+-->{#if children}<div>{@render children()}</div>{/if}<!--
+-->{/snippet}
+
+<style>
+	/* An empty body's hint: chrome, not text (`body.hint`); its look is a theme's. */
+	:global([data-edytor-empty-body]) {
+		user-select: none;
+	}
+</style>

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

@@ -1,33 +1,52 @@
 import type { Plugin, PlaceholderView } from '../../plugins.js';
+import type { Edytor } from '../../edytor.svelte.js';
 import { richTextOperations } from './richTextOperations.js';
-import { type PartialLabels } from '../../labels.js';
+import type { Snippet } from 'svelte';
+import { type CalloutIconPayload, type EmptyBodyPayload, type TodoCheckboxPayload } from './controls.svelte.js';
+export type { CalloutIconPayload, EmptyBodyPayload, TodoCheckboxPayload };
 export { richTextOperations };
 /**
- * Notion's placeholders in `labels` (English by default): headings,
- * lists, to-dos, toggles and quotes name their kind while empty; a
- * paragraph invites a command only while focused.
+ * Notion's placeholders, in the view's `richText` labels (English by
+ * default): headings, lists, to-dos, toggles and quotes name their kind
+ * while empty; a paragraph invites a command only while focused.
  */
-export declare const createRichTextPlaceholder: (labels?: PartialLabels<"richText">) => ({ type, data, focused }: PlaceholderView) => string | null;
-/** Notion's placeholders, in English. */
-export declare const richTextPlaceholder: ({ type, data, focused }: PlaceholderView) => string | null;
+export declare const richTextPlaceholder: ({ type, data, focused }: PlaceholderView, edytor?: Edytor) => string | null;
 export type RichTextPluginOptions = {
-    /** The kinds', marks' and checkbox's words (English by default). */
-    labels?: PartialLabels<'richText'>;
+    /** Callouts' icons (their picker is `createCalloutIconsPlugin`'s). */
+    callout?: {
+        /**
+         * A new callout's icon, and the one a callout whose `data.icon` is
+         * unset shows (`💡` by default).
+         */
+        icon?: string;
+    };
+    /**
+     * A to-do's checkbox (default: a native `input type="checkbox"`). Spread
+     * `checkbox.attributes` on the control, an `input` (with
+     * `checked={checkbox.checked}`) or a `button`: its click checks the to-do
+     * through the document.
+     */
+    checkbox?: Snippet<[TodoCheckboxPayload]>;
+    /**
+     * A callout's icon (default: a `button` showing it, or the icon alone
+     * where it cannot be picked). Spread `icon.attributes` on its element:
+     * a click opens the view's picker (`createCalloutIconsPlugin`), which
+     * opens under it.
+     */
+    calloutIcon?: Snippet<[CalloutIconPayload]>;
     /**
-     * The slash menu's keywords of a kind, by command id (`block.heading1`):
-     * they replace that preset's own (list the English ones to keep them).
+     * The hint an open toggle's or a callout's empty body shows (default: a
+     * `div` with the view's `richText.emptyBody` words). Spread
+     * `hint.attributes` on it: a click starts the body, a dragged block
+     * drops inside.
      */
-    keywords?: Partial<Record<string, string[]>>;
+    emptyBody?: Snippet<[EmptyBodyPayload]>;
 };
-/** Recognize any rich text plugin instance (the component's default yields to yours). */
-export declare const isRichTextPlugin: (plugin: Plugin) => boolean;
 /**
- * The rich text kinds and marks, with their words in `labels` and their
- * slash keywords in `keywords` (English by default).
+ * The rich text kinds and marks, their words and slash keywords the
+ * view's (`labels`, English by default).
  */
 export declare const createRichTextPlugin: (options?: RichTextPluginOptions) => Plugin;
-/** The rich text kinds and marks, in English. */
-export declare const richTextPlugin: 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;