edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/richtext/TodoCheckbox.svelte

@@ -1,35 +1,24 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import type { Block } from '../../block/block.svelte.js';
 	import type { Edytor } from '../../edytor.svelte.js';
 	import type { BlockView } from '../../plugins.js';
-	import { checkboxLabels } from './labels.js';
+	import { todoCheckbox } from './controls.svelte.js';
 
 	/**
 	 * A to-do's checkbox, named in the labels of the view rendering it (a
-	 * suggestion's preview included).
+	 * suggestion's preview included): a native checkbox (the default; an
+	 * app's `checkbox` snippet replaces it, `RichTextControl`).
 	 */
-	let {
-		block,
-		toggle
-	}: { block: BlockView<{ checked?: boolean }>; toggle: (block: Block) => void } = $props();
-	const labels = checkboxLabels.of(getContext<Edytor>('edytor'));
+	let { block }: { block: BlockView<{ checked?: boolean }> } = $props();
+	const box = todoCheckbox(getContext<Edytor>('edytor'), () => block);
 </script>
 
+<!-- What a server render shows (a readonly view's) is written here; the attachment acts in the browser. -->
 <input
 	type="checkbox"
-	checked={Boolean(block.data.checked)}
-	contenteditable="false"
-	aria-label={labels.checkbox}
 	data-edytor-todo-checkbox
-	onmousedown={(event) => event.preventDefault()}
-	onclick={(event) => {
-		// Never cancel the click: the browser reverts a canceled checkbox click after
-		// its handlers, over the re-render this write makes, so the box would show the
-		// old state here while peers show the new one. Toggle the document, then show
-		// what it holds (a refused write, readonly or vetoed, shows unchanged).
-		// A suggestion's preview (no handle) writes nothing.
-		if (block.handle) toggle(block.handle);
-		event.currentTarget.checked = Boolean(block.data.checked);
-	}}
+	contenteditable="false"
+	aria-label={box.label}
+	checked={box.checked}
+	{@attach box.control}
 />

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

@@ -1,10 +1,8 @@
-import type { Block } from '../../block/block.svelte.js';
 import type { BlockView } from '../../plugins.js';
 type $$ComponentProps = {
     block: BlockView<{
         checked?: boolean;
     }>;
-    toggle: (block: Block) => void;
 };
 declare const TodoCheckbox: import("svelte").Component<$$ComponentProps, {}, "">;
 type TodoCheckbox = ReturnType<typeof TodoCheckbox>;

package/dist/plugins/richtext/body.d.ts

@@ -0,0 +1,9 @@
+import type { Block } from '../../block/block.svelte.js';
+/**
+ * Start the body of `block`, a container whose body shows and is empty
+ * (`body.hint`): a block of its default child kind as its first child, the
+ * caret in it. One command, one undo step (refused in a view that may not
+ * write). A body that has a child by now (a peer's) takes the caret in its
+ * first child instead. Answers the first child.
+ */
+export declare const openBody: (block: Block) => Block | undefined;

package/dist/plugins/richtext/body.js

@@ -0,0 +1,16 @@
+/**
+ * Start the body of `block`, a container whose body shows and is empty
+ * (`body.hint`): a block of its default child kind as its first child, the
+ * caret in it. One command, one undo step (refused in a view that may not
+ * write). A body that has a child by now (a peer's) takes the caret in its
+ * first child instead. Answers the first child.
+ */
+export const openBody = (block) => {
+    const { edytor } = block;
+    return edytor.dispatcher.run('openBody', () => {
+        const added = () => edytor.insertBlocks({ parent: block.id, index: 0 }, [{ type: edytor.defaultChild(block) }]);
+        const child = block.children[0] ?? edytor.idToBlock.get(added().ids[0] ?? '');
+        edytor.dispatcher.caret(child?.firstText, 0);
+        return child ?? undefined;
+    });
+};

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

@@ -0,0 +1,97 @@
+/**
+ * The callout icon picker (`callout.icon` in the delete contract), its own
+ * plugin: a menu in the overlay, under the icon of the callout it is open
+ * on: a choice writes `data.icon` (one `patchData` command, one undo step)
+ * and gives the keys back to the editor, with the selection it held;
+ * Escape, a press outside or focus leaving closes it with nothing written.
+ * Its markup is the app's `picker` snippet, which takes the keys and
+ * publishes the popup through the controller's attachments (`keys`,
+ * `popup`) and rows (`option`). A view without the plugin shows each
+ * callout's icon, which opens nothing.
+ */
+import { type Snippet } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+import type { Block } from '../../block/block.svelte.js';
+import type { Edytor } from '../../edytor.svelte.js';
+import { ChromeList } from '../list.svelte.js';
+import type { Plugin } from '../../plugins.js';
+/** The picker's choices unless `createCalloutIconsPlugin({ icons })` names others. */
+export declare const CALLOUT_ICONS: readonly string[];
+/** The choices on a row of the picker: the arrows up and down move by a row (`picker.columns`). */
+export declare const ICON_COLUMNS = 8;
+/**
+ * A view's callout icon picker: what a `callout.picker` snippet receives.
+ * The callout it is open on (`block`), the choices (`icons`) and the icon
+ * that callout shows (`current`); `set(icon)` and `remove()` write it and
+ * close, `close()` closes with nothing written. Put `{@attach picker.keys}`
+ * and `{@attach picker.popup}` on the picker's element (it takes the focus
+ * and the keys, names the keyboard's row and is published to the view's
+ * root), attach `picker.option(i)` to each row (`i` in `icons`,
+ * `icons.length` for Remove icon) and run `picker.pick(i)` on its click.
+ */
+export declare class CalloutIconPicker extends ChromeList {
+    #private;
+    /** The picker's choices. */
+    readonly icons: readonly string[];
+    /** The callout the picker is open on (its id), `null` when closed. */
+    target: string | null;
+    /** The choices on a row: ArrowUp and ArrowDown move by a row, so lay the icons out in as many columns. */
+    readonly columns = 8;
+    constructor(edytor: Edytor, 
+    /** The picker's choices. */
+    icons?: readonly string[]);
+    /** Whether the picker is open (reactive). */
+    get isOpen(): boolean;
+    /** The callout it is open on (reactive). */
+    get block(): Block | undefined;
+    /** The icon that callout shows (`''`: none; reactive). */
+    get current(): string | undefined;
+    /** The keyboard's rows: the icons, then Remove icon. */
+    protected get count(): number;
+    /** The view is readonly (reactive): the picker closes. */
+    get readonly(): boolean;
+    /** Open the picker on `block`, or close it when it is open there. */
+    toggle: (block: Block) => void;
+    /** Open the picker on the callout `block`, its icon the keyboard's row (refused in a view that may not write). */
+    open: (block: Block) => void;
+    /** Close the picker; with `keys` (by default), the editor takes the keys back, with its selection. */
+    close: (keys?: boolean) => void;
+    /** Write `icon` on the callout (one undo step), then close. */
+    set: (icon: string) => void;
+    /** Leave the callout without an icon (`data.icon` is `''`), then close. */
+    remove: () => void;
+    /** Pick row `index`: its icon, or Remove icon (`icons.length`). */
+    pick: (index: number) => void;
+    /**
+     * Row `index`'s attachment (`icons.length`: Remove icon), as every menu's
+     * rows: its id, `menuitemradio` role and `aria-checked` (`menuitem` for
+     * Remove icon); its highlight is the markup's (`index`).
+     */
+    option(index: number): Attachment<HTMLElement>;
+    /**
+     * The picker's element (`{@attach picker.keys}`): it takes the focus as
+     * it opens and names the keyboard's row (`aria-activedescendant`). The
+     * arrows walk the rows (up and down by `ICON_COLUMNS`), Home and End
+     * reach the ends, Enter or Space picks, Escape and Tab close; no key
+     * reaches the page behind it. Focus leaving it closes it.
+     */
+    keys: Attachment<HTMLElement>;
+}
+export type CalloutIconsOptions = {
+    /**
+     * The icon picker's markup and its words: it renders while the picker is
+     * open, placed under the icon (without it, the icon opens nothing). Put
+     * `{@attach picker.keys}` and `{@attach picker.popup}` on its element and
+     * attach `picker.option(i)` to each row (`picker.icons.length`: Remove icon).
+     */
+    picker?: Snippet<[CalloutIconPicker]>;
+    /** The picker's choices (`CALLOUT_ICONS` by default). */
+    icons?: readonly string[];
+};
+/**
+ * Callout icons (Notion's): a callout's icon opens the view's picker, and
+ * its block menu has a Change icon row (rich text's, while a picker is
+ * listed), the keyboard's way to it. The first plugin listed claims the
+ * view's picker.
+ */
+export declare const createCalloutIconsPlugin: ({ picker: menu, icons }?: CalloutIconsOptions) => Plugin;

package/dist/plugins/richtext/calloutIcons.svelte.js

@@ -0,0 +1,214 @@
+/**
+ * The callout icon picker (`callout.icon` in the delete contract), its own
+ * plugin: a menu in the overlay, under the icon of the callout it is open
+ * on: a choice writes `data.icon` (one `patchData` command, one undo step)
+ * and gives the keys back to the editor, with the selection it held;
+ * Escape, a press outside or focus leaving closes it with nothing written.
+ * Its markup is the app's `picker` snippet, which takes the keys and
+ * publishes the popup through the controller's attachments (`keys`,
+ * `popup`) and rows (`option`). A view without the plugin shows each
+ * callout's icon, which opens nothing.
+ */
+import { untrack } from 'svelte';
+import { takeKeys } from '../../events/onFocus.js';
+import { ChromeList, holdKeys, menuKey, optionAttachment } from '../list.svelte.js';
+import { Anchored } from '../anchored.svelte.js';
+import { calloutPickers, iconOf } from './callouts.js';
+import CalloutIconHost from './CalloutIconPicker.svelte';
+import { all, listen } from '../../utils/listen.js';
+/** The picker's choices unless `createCalloutIconsPlugin({ icons })` names others. */
+export const CALLOUT_ICONS = [
+    '💡',
+    '⚠️',
+    '❗',
+    '❓',
+    'ℹ️',
+    '✅',
+    '❌',
+    '📌',
+    '📝',
+    '📣',
+    '🔔',
+    '💬',
+    '🔥',
+    '⭐',
+    '✨',
+    '🚀',
+    '🎯',
+    '🎉',
+    '❤️',
+    '👍',
+    '👀',
+    '⏰',
+    '📅',
+    '📚',
+    '🧪',
+    '🐛',
+    '🛠️',
+    '🔒',
+    '🌱',
+    '🤔'
+];
+/** The choices on a row of the picker: the arrows up and down move by a row (`picker.columns`). */
+export const ICON_COLUMNS = 8;
+/**
+ * A view's callout icon picker: what a `callout.picker` snippet receives.
+ * The callout it is open on (`block`), the choices (`icons`) and the icon
+ * that callout shows (`current`); `set(icon)` and `remove()` write it and
+ * close, `close()` closes with nothing written. Put `{@attach picker.keys}`
+ * and `{@attach picker.popup}` on the picker's element (it takes the focus
+ * and the keys, names the keyboard's row and is published to the view's
+ * root), attach `picker.option(i)` to each row (`i` in `icons`,
+ * `icons.length` for Remove icon) and run `picker.pick(i)` on its click.
+ */
+export class CalloutIconPicker extends ChromeList {
+    icons;
+    /** The callout the picker is open on (its id), `null` when closed. */
+    target = $state(null);
+    /** The choices on a row: ArrowUp and ArrowDown move by a row, so lay the icons out in as many columns. */
+    columns = ICON_COLUMNS;
+    /**
+     * The picker's panel under the target's icon (its block without one): its
+     * place, and what closes it (a press or focus outside, the icon gone,
+     * readonly).
+     * @internal
+     */
+    panel;
+    /** The selection the picker gives back when it closes. */
+    #before = null;
+    constructor(edytor, 
+    /** The picker's choices. */
+    icons = CALLOUT_ICONS) {
+        super(edytor, 'callout-icons', 'menu');
+        this.icons = icons;
+        this.panel = new Anchored(edytor, 'edytor-callout-icons-host', () => {
+            if (this.target === null)
+                return undefined;
+            const node = this.block?.node;
+            const icon = [...(node?.querySelectorAll('[data-edytor-callout-icon]') ?? [])].find((element) => element.closest('[data-edytor-block="true"]') === node);
+            return icon ?? node ?? null;
+        }, () => this.close(false));
+    }
+    /** Whether the picker is open (reactive). */
+    get isOpen() {
+        return this.target !== null;
+    }
+    /** The callout it is open on (reactive). */
+    get block() {
+        const block = this.target ? this.edytor.idToBlock.get(this.target) : undefined;
+        return block?.isInTree ? block : undefined;
+    }
+    /** The icon that callout shows (`''`: none; reactive). */
+    get current() {
+        const block = this.block;
+        return block ? iconOf(block.data, this.edytor) : undefined;
+    }
+    /** The keyboard's rows: the icons, then Remove icon. */
+    get count() {
+        return this.icons.length + 1;
+    }
+    /** The view is readonly (reactive): the picker closes. */
+    get readonly() {
+        return this.edytor.readonly;
+    }
+    /** Open the picker on `block`, or close it when it is open there. */
+    toggle = (block) => (this.target === block.id ? this.close() : this.open(block));
+    /** Open the picker on the callout `block`, its icon the keyboard's row (refused in a view that may not write). */
+    open = (block) => {
+        if (!this.edytor.dispatcher.permits() || !block.isInTree)
+            return;
+        const at = this.icons.indexOf(iconOf(block.data, this.edytor));
+        this.index = at === -1 ? 0 : at;
+        this.#before = null;
+        this.target = block.id;
+        this.edytor.overlay.invalidate();
+    };
+    /** Close the picker; with `keys` (by default), the editor takes the keys back, with its selection. */
+    close = (keys = true) => {
+        if (this.target === null)
+            return;
+        const before = this.#before;
+        this.target = null;
+        this.panel.box = null;
+        this.#before = null;
+        this.edytor.overlay.invalidate();
+        if (!keys)
+            return;
+        if (before && before.kind !== 'none')
+            this.edytor.selection.select(before);
+        takeKeys(this.edytor);
+    };
+    /** Write `icon` on the callout (one undo step), then close. */
+    set = (icon) => {
+        const block = this.block;
+        if (block && block.data.icon !== icon)
+            block.edytor.patchData(block.id, [{ path: ['icon'], value: icon }]);
+        this.close();
+    };
+    /** Leave the callout without an icon (`data.icon` is `''`), then close. */
+    remove = () => this.set('');
+    /** Pick row `index`: its icon, or Remove icon (`icons.length`). */
+    pick = (index) => {
+        const icon = this.icons[index];
+        if (icon === undefined)
+            this.remove();
+        else
+            this.set(icon);
+    };
+    /**
+     * Row `index`'s attachment (`icons.length`: Remove icon), as every menu's
+     * rows: its id, `menuitemradio` role and `aria-checked` (`menuitem` for
+     * Remove icon); its highlight is the markup's (`index`).
+     */
+    option(index) {
+        const icon = this.icons[index];
+        return optionAttachment(this.rowId(index), icon === undefined ? 'menuitem' : 'menuitemradio', index === this.index, icon === undefined ? {} : { 'aria-checked': icon === this.current }, false);
+    }
+    /**
+     * The picker's element (`{@attach picker.keys}`): it takes the focus as
+     * it opens and names the keyboard's row (`aria-activedescendant`). The
+     * arrows walk the rows (up and down by `ICON_COLUMNS`), Home and End
+     * reach the ends, Enter or Space picks, Escape and Tab close; no key
+     * reaches the page behind it. Focus leaving it closes it.
+     */
+    keys = (node) => untrack(() => this.#keys(node));
+    #keys = (node) => {
+        const keydown = (event) => {
+            event.stopPropagation();
+            const at = this.index;
+            menuKey(event, {
+                at,
+                count: this.count,
+                to: (index) => (this.index = index),
+                pick: () => this.pick(at),
+                close: this.close
+            }, 
+            // Left and right wrap; up and down stop at the first and last rows.
+            { columns: ICON_COLUMNS });
+        };
+        // Focus leaving for somewhere else closes it (the window going to the background does not).
+        node.tabIndex = -1;
+        const off2 = listen(node, 'focusout', this.panel.blurred);
+        // It gives back the editor's selection as it is now: a block menu that
+        // opened it gave its caret back first.
+        this.#before ??= this.edytor.selection.value;
+        const off = holdKeys(node, keydown, () => this.rowId(this.index));
+        return all(off, off2);
+    };
+}
+/**
+ * Callout icons (Notion's): a callout's icon opens the view's picker, and
+ * its block menu has a Change icon row (rich text's, while a picker is
+ * listed), the keyboard's way to it. The first plugin listed claims the
+ * view's picker.
+ */
+export const createCalloutIconsPlugin = ({ picker: menu, icons } = {}) => (edytor) => {
+    const picker = edytor && !calloutPickers.has(edytor) && new CalloutIconPicker(edytor, icons);
+    if (!picker)
+        return {};
+    calloutPickers.set(edytor, picker);
+    return {
+        // With the menus: above the handles and the image chrome.
+        onEdytorAttached: ({ node }) => menu && picker.panel.mount(node, CalloutIconHost, { picker, menu }, 70)
+    };
+};

package/dist/plugins/richtext/callouts.d.ts

@@ -0,0 +1,15 @@
+import type { CalloutIconPicker } from './calloutIcons.svelte.js';
+/** A new callout's icon unless `createRichTextPlugin({ callout: { icon } })` names another. */
+export declare const DEFAULT_CALLOUT_ICON = "\uD83D\uDCA1";
+/** Each view's default callout icon (the first rich text plugin listed sets it). */
+export declare const calloutIcons: WeakMap<object, string>;
+/** Each view's callout icon picker (the first callout icons plugin listed claims it). */
+export declare const calloutPickers: WeakMap<object, CalloutIconPicker>;
+/** The icon a callout of `view` with `data` shows: its own (`''`: none), else the view's default. */
+export declare const iconOf: (data: Record<string, unknown> | undefined, view?: object) => string;
+/**
+ * A callout's HTML: a `div` naming its icon (`data-edytor-callout`), its
+ * title, then its content. A generic tag: only its attribute claims it back
+ * (`parse`), never a tag another kind may export.
+ */
+export declare const calloutHtml: (icon: string, content: string, children: string) => string;

package/dist/plugins/richtext/callouts.js

@@ -0,0 +1,23 @@
+/**
+ * A callout's icon (`callout.icon` in the delete contract): its `data.icon`,
+ * the view's default when it has none of its own, no icon when it is `''`.
+ * The view's default is the first rich text plugin's; the icon picker is the
+ * callout icons plugin's (`calloutIcons.svelte.ts`), when one is listed.
+ */
+import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
+/** A new callout's icon unless `createRichTextPlugin({ callout: { icon } })` names another. */
+export const DEFAULT_CALLOUT_ICON = '💡';
+/** Each view's default callout icon (the first rich text plugin listed sets it). */
+export const calloutIcons = new WeakMap();
+/** Each view's callout icon picker (the first callout icons plugin listed claims it). */
+export const calloutPickers = new WeakMap();
+/** The icon a callout of `view` with `data` shows: its own (`''`: none), else the view's default. */
+export const iconOf = (data, view) => typeof data?.icon === 'string'
+    ? data.icon
+    : ((view && calloutIcons.get(view)) ?? DEFAULT_CALLOUT_ICON);
+/**
+ * A callout's HTML: a `div` naming its icon (`data-edytor-callout`), its
+ * title, then its content. A generic tag: only its attribute claims it back
+ * (`parse`), never a tag another kind may export.
+ */
+export const calloutHtml = (icon, content, children) => `<div data-edytor-callout="${escapeHtml(icon)}"><p>${content}</p>${children}</div>`;

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

@@ -0,0 +1,110 @@
+/**
+ * The controls inside the rich text kinds (a to-do's checkbox, a callout's
+ * icon, an empty body's hint): the package's markup by default, the app's
+ * snippet when `createRichTextPlugin` names one. Each snippet receives a
+ * payload: the state, the action (written through the document) and the
+ * words the markup reads, and the control's attachment (its marker, its
+ * ARIA, its press and click), so custom markup keeps the keys, the
+ * accessibility and what the editor reads of it.
+ */
+import type { Snippet } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+import type { Block } from '../../block/block.svelte.js';
+import type { Edytor } from '../../edytor.svelte.js';
+import type { BlockView } from '../../plugins.js';
+/** What a to-do's `checkbox` snippet receives. */
+export type TodoCheckboxPayload = {
+    /** The to-do; `undefined` in a suggestion's preview (its box writes nothing). */
+    readonly block: Block | undefined;
+    /** It is checked: its `data.checked` (reactive). */
+    readonly checked: boolean;
+    /** The checkbox's accessible name (the view's `richText.checkbox`). */
+    readonly label: string;
+    /** Check or uncheck it: one data write, refused in a readonly view. */
+    toggle: () => void;
+    /**
+     * The control's attachment (`{@attach box.control}`), on an `input
+     * type="checkbox"` (give it `checked={box.checked}`) or a `button` (it
+     * gets `role="checkbox"` and `aria-checked`): its marker
+     * (`data-edytor-todo-checkbox`), `contenteditable="false"`, its
+     * `aria-label`, a press that keeps the editor's selection and a click
+     * that toggles the to-do.
+     */
+    readonly control: Attachment<HTMLElement>;
+};
+/** What a callout's `calloutIcon` snippet receives. */
+export type CalloutIconPayload = {
+    /** The callout; `undefined` in a suggestion's preview. */
+    readonly block: Block | undefined;
+    /** Its icon: its `data.icon`, the view's default without one, `''` for none (reactive). */
+    readonly icon: string;
+    /**
+     * The icon opens the view's picker: an editable view listing a picker,
+     * not a suggestion's preview. Draw a `button` then, else the icon alone.
+     */
+    readonly editable: boolean;
+    /** The picker is open on this callout (reactive). */
+    readonly expanded: boolean;
+    /** The button's accessible name: Change icon, or Add icon over an empty slot. */
+    readonly label: string;
+    /** Open the view's picker on this callout, or close it. */
+    toggle: () => void;
+    /**
+     * The icon's attachment (`{@attach icon.control}`): its marker
+     * (`data-edytor-callout-icon`, which the picker opens under), `data-empty`
+     * without an icon, `contenteditable="false"`; editable, its
+     * `aria-label`, `aria-haspopup`, `aria-expanded`, `aria-controls`, a
+     * press that keeps the editor's selection and a click that toggles the
+     * picker; else `aria-hidden`.
+     */
+    readonly control: Attachment<HTMLElement>;
+};
+/** What the `emptyBody` snippet of an open toggle's or a callout's empty body receives. */
+export type EmptyBodyPayload = {
+    /** The toggle or callout. */
+    readonly block: Block;
+    /** Which kind's body. */
+    readonly kind: 'toggle' | 'callout';
+    /** The hint (the view's `richText.emptyBody`). */
+    readonly label: string;
+    /** Start the body: a first child, the caret in it (one command, one undo step). */
+    open: () => void;
+    /**
+     * The hint's attachment (`{@attach hint.control}`): its marker
+     * (`data-edytor-empty-body`, where a dragged block drops inside),
+     * `contenteditable="false"`, `aria-hidden` (Enter at the end of the
+     * header is the keyboard's way in) and a click that starts the body.
+     */
+    readonly control: Attachment<HTMLElement>;
+};
+/** `createRichTextPlugin`'s control snippets. */
+export type RichTextControls = {
+    checkbox?: Snippet<[TodoCheckboxPayload]>;
+    calloutIcon?: Snippet<[CalloutIconPayload]>;
+    emptyBody?: Snippet<[EmptyBodyPayload]>;
+};
+/** Each view's control snippets (the first rich text plugin listed sets them). */
+export declare const richTextControls: WeakMap<object, RichTextControls>;
+/** Check or uncheck a to-do: one key patched, so a peer's concurrent edit of another key is kept. */
+export declare const toggleTodo: (block: Block) => import("../../index.js").OpResult;
+/**
+ * A to-do's checkbox in `view` (a suggestion's preview included: no
+ * handle, no write), named in its labels.
+ */
+export declare const todoCheckbox: (view: Edytor, block: () => BlockView<{
+    checked?: boolean;
+}>) => TodoCheckboxPayload;
+/**
+ * A callout's icon in `view` (`callout.icon`): its `data.icon`, the view's
+ * default without one, none when it is `''`; a button opening the view's
+ * picker where it may be picked (an editable view listing a picker, not a
+ * suggestion's preview), else the icon alone.
+ */
+export declare const calloutIcon: (view: Edytor, block: () => BlockView<{
+    icon?: string;
+}>) => CalloutIconPayload;
+/**
+ * The hint of `block`'s empty body in `view` (`body.hint`), or `null` where
+ * none shows: a readonly view, a suggestion's preview (no handle).
+ */
+export declare const emptyBody: (view: Edytor, block: BlockView, kind: "toggle" | "callout") => EmptyBodyPayload | null;