phormat 0.0.5

package/dist/editor/blocks/EditableBlockquoteNodes.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import Self from './EditableBlockquoteNodes.svelte';
+	import BlockRow from '../BlockRow.svelte';
+	import EditableInlineSurface from './EditableInlineSurface.svelte';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import type { EditorBlock, InlineNode } from '../model/types';
+	import { isNestedQuoteChild } from '../block-specs/blockquote/parse';
+	import {
+		blockquoteDisplayPlain,
+		nodeAtQuotePath,
+		quoteBlockCanMoveSibling,
+		type QuotePath
+	} from '../model/quoteEditCommands';
+
+	let {
+		editor,
+		topBlockIndex,
+		draftRoot,
+		quotePath,
+		onRowFocus,
+		onRowBlur
+	}: {
+		editor: MarkdownEditor;
+		topBlockIndex: number;
+		draftRoot: EditorBlock;
+		quotePath: QuotePath;
+		onRowFocus: () => void;
+		onRowBlur: () => void;
+	} = $props();
+
+	const quoteNode = $derived(nodeAtQuotePath(draftRoot, quotePath)!);
+	const isNested = $derived(quotePath.length > 0);
+	const displayPlain = $derived(blockquoteDisplayPlain(quoteNode, editor.source));
+
+	function commitDraft(inlines: InlineNode[], plainCaret: number) {
+		editor.commitBlockquoteBodyInlineDraftAt(
+			topBlockIndex,
+			quoteNode.id,
+			inlines,
+			plainCaret
+		);
+	}
+
+	function commitChildDraft(child: EditorBlock, inlines: InlineNode[], plainCaret: number) {
+		editor.commitBlockquoteBodyInlineDraftAt(topBlockIndex, child.id, inlines, plainCaret);
+	}
+
+	function onBodyBlur() {
+		onRowBlur();
+	}
+
+	function childCanMove(path: QuotePath, direction: 'up' | 'down'): boolean {
+		return quoteBlockCanMoveSibling(draftRoot, path, direction);
+	}
+</script>
+
+<div class="{isNested ? '' : 'mb-1'} border-l border-border-emphasis pl-4 text-txt-secondary">
+	<EditableInlineSurface
+		{editor}
+		blockId={quoteNode.id}
+		surfaceBlockType="blockquote"
+		modelInlines={quoteNode.inlines}
+		{displayPlain}
+		ariaLabel="Blockquote"
+		class="min-h-[1.5lh] py-1 text-txt-primary"
+		onFocus={onRowFocus}
+		onBlur={onBodyBlur}
+		onCommit={commitDraft}
+	/>
+
+	{#each quoteNode.children ?? [] as child, ci (child.id)}
+		{#if child.type === 'blockquote'}
+			{@const childPath = [...quotePath, ci] as QuotePath}
+			{@const nested = isNestedQuoteChild(quoteNode, child, editor.source)}
+			<BlockRow
+				{editor}
+				blockIndex={topBlockIndex}
+				blockId={child.id}
+				blockType="blockquote"
+				blockSynthetic={false}
+				nestedRowBlockId={child.id}
+				nestedRowBlockType="blockquote"
+				moveUpCommandId="moveQuoteParagraphUp"
+				moveDownCommandId="moveQuoteParagraphDown"
+				canMoveUp={childCanMove(childPath, 'up')}
+				canMoveDown={childCanMove(childPath, 'down')}
+			>
+				{#if nested}
+					<Self {editor} {topBlockIndex} {draftRoot} quotePath={childPath} {onRowFocus} {onRowBlur} />
+				{:else}
+					<EditableInlineSurface
+						{editor}
+						blockId={child.id}
+						surfaceBlockType="paragraph"
+						modelInlines={child.inlines}
+						displayPlain={blockquoteDisplayPlain(child, editor.source)}
+						ariaLabel="Blockquote"
+						class="min-h-[1.5lh] py-1 text-txt-primary"
+						onFocus={onRowFocus}
+						onBlur={onBodyBlur}
+						onCommit={(inlines, plainCaret) => commitChildDraft(child, inlines, plainCaret)}
+					/>
+					{#each child.children ?? [] as grandchild, gi (grandchild.id)}
+						{#if grandchild.type === 'blockquote'}
+							{@const grandchildPath = [...childPath, gi] as QuotePath}
+							<BlockRow
+								{editor}
+								blockIndex={topBlockIndex}
+								blockId={grandchild.id}
+								blockType="blockquote"
+								blockSynthetic={false}
+								nestedRowBlockId={grandchild.id}
+								nestedRowBlockType="blockquote"
+								moveUpCommandId="moveQuoteParagraphUp"
+								moveDownCommandId="moveQuoteParagraphDown"
+								canMoveUp={childCanMove(grandchildPath, 'up')}
+								canMoveDown={childCanMove(grandchildPath, 'down')}
+							>
+								<Self
+									{editor}
+									{topBlockIndex}
+									{draftRoot}
+									quotePath={grandchildPath}
+									{onRowFocus}
+									{onRowBlur}
+								/>
+							</BlockRow>
+						{/if}
+					{/each}
+				{/if}
+			</BlockRow>
+		{/if}
+	{/each}
+</div>

package/dist/editor/blocks/EditableBlockquoteNodes.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+import type { EditorBlock } from '../model/types';
+import { type QuotePath } from '../model/quoteEditCommands';
+type $$ComponentProps = {
+    editor: MarkdownEditor;
+    topBlockIndex: number;
+    draftRoot: EditorBlock;
+    quotePath: QuotePath;
+    onRowFocus: () => void;
+    onRowBlur: () => void;
+};
+declare const EditableBlockquoteNodes: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableBlockquoteNodes = ReturnType<typeof EditableBlockquoteNodes>;
+export default EditableBlockquoteNodes;

package/dist/editor/blocks/EditableBlockquoteParagraph.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import EditableInlineSurface from './EditableInlineSurface.svelte';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import type { EditorBlock, InlineNode } from '../model/types';
+	import { paragraphDisplayPlain } from '../model/blockEditCommands';
+
+	let {
+		block,
+		editor,
+		topBlockIndex,
+		onRowFocus,
+		onRowBlur
+	}: {
+		block: EditorBlock;
+		editor: MarkdownEditor;
+		topBlockIndex: number;
+		onRowFocus: () => void;
+		onRowBlur: () => void;
+	} = $props();
+
+	const displayPlain = $derived(paragraphDisplayPlain(block));
+
+	function commitDraft(inlines: InlineNode[], plainCaret: number) {
+		editor.commitBlockquoteParagraphInlineDraftAt(
+			topBlockIndex,
+			block.id,
+			inlines,
+			plainCaret
+		);
+	}
+</script>
+
+<EditableInlineSurface
+	{editor}
+	blockId={block.id}
+	surfaceBlockType="paragraph"
+	modelInlines={block.inlines}
+	{displayPlain}
+	ariaLabel="Blockquote paragraph"
+	class="min-h-[1.5lh] py-1 text-txt-primary"
+	onFocus={onRowFocus}
+	onBlur={onRowBlur}
+	onCommit={commitDraft}
+/>

package/dist/editor/blocks/EditableBlockquoteParagraph.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+import type { EditorBlock } from '../model/types';
+type $$ComponentProps = {
+    block: EditorBlock;
+    editor: MarkdownEditor;
+    topBlockIndex: number;
+    onRowFocus: () => void;
+    onRowBlur: () => void;
+};
+declare const EditableBlockquoteParagraph: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableBlockquoteParagraph = ReturnType<typeof EditableBlockquoteParagraph>;
+export default EditableBlockquoteParagraph;

package/dist/editor/blocks/EditableCallout.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import { Button, Popover } from 'phoundry-ui';
+	import EditableCalloutNodes from './EditableCalloutNodes.svelte';
+	import CalloutTypeIcon from '../block-specs/callout/CalloutTypeIcon.svelte';
+	import {
+		CURATED_CALLOUT_TYPES,
+		calloutAccentFor,
+		calloutIconFor,
+		calloutTypeLabel,
+		type CuratedCalloutType
+	} from '../block-specs/callout/icons';
+	import type { CalloutBlock } from '../block-specs/callout/types';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import type { EditorBlock } from '../model/types';
+	import {
+		makeCalloutBodySyntheticParagraph,
+		isCalloutBodySyntheticParagraphId
+	} from '../model/calloutEditCommands';
+	import { deepCloneBlock } from '../model/blockTree';
+
+	let {
+		editor,
+		blockIndex,
+		block,
+		nested = false
+	}: {
+		editor: MarkdownEditor;
+		blockIndex: number;
+		block: EditorBlock;
+		nested?: boolean;
+	} = $props();
+
+	let titleEl = $state.raw<HTMLDivElement | null>(null);
+	let popoverOpen = $state(false);
+	let titleDraft = $state('');
+	let rowFocusCount = $state(0);
+
+	const data = $derived(block.data as CalloutBlock);
+	const accent = $derived(calloutAccentFor(data.type));
+	const parsedChildren = $derived(block.children ?? []);
+
+	const bodyChildren = $derived.by((): EditorBlock[] => {
+		if (parsedChildren.length > 0) return parsedChildren;
+		return [makeCalloutBodySyntheticParagraph(block.id)];
+	});
+
+	const draftCallout = $derived.by(() => {
+		if (rowFocusCount > 0) return deepCloneBlock(block);
+		return block;
+	});
+
+	$effect(() => {
+		void block.id;
+		void editor.document.source;
+		const el = titleEl;
+		if (!el || el.contains(document.activeElement)) return;
+		titleDraft = data.title;
+		el.textContent = data.title;
+	});
+
+	function readOpener(): CalloutBlock {
+		return block.data as CalloutBlock;
+	}
+
+	function commitOpener(patch: Partial<Pick<CalloutBlock, 'type' | 'title'>>) {
+		const prev = readOpener();
+		const next: CalloutBlock = {
+			...prev,
+			...patch
+		};
+		editor.commitCalloutOpenerDraftAt(blockIndex, block.id, next);
+	}
+
+	function selectType(type: CuratedCalloutType) {
+		commitOpener({ type });
+		popoverOpen = false;
+	}
+
+	function onTitleFocus() {
+		titleDraft = data.title;
+	}
+
+	function onTitleBlur() {
+		const el = titleEl;
+		if (!el) return;
+		const text = (el.textContent ?? '').replace(/\n/g, ' ').trim();
+		titleDraft = text;
+		if (text !== data.title) {
+			commitOpener({ title: text });
+		}
+	}
+
+	function onTitleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			(e.currentTarget as HTMLDivElement).blur();
+		}
+	}
+
+	function onRowFocus() {
+		rowFocusCount++;
+		if (parsedChildren.length === 0) {
+			editor.ensureCalloutEmptyBodyAt(blockIndex);
+		}
+		editor.beginPlainEditSession(blockIndex);
+	}
+
+	function onRowBlur() {
+		rowFocusCount--;
+		queueMicrotask(() => {
+			if (rowFocusCount <= 0) {
+				rowFocusCount = 0;
+				editor.commitPlainEditSession();
+			}
+		});
+	}
+</script>
+
+<aside
+	class="{nested
+		? 'my-2 border-l-2 border-border-default pl-3'
+		: ''} border-l-4 py-1 pl-2 {accent.bar}"
+>
+	<div class="mb-2 flex items-start gap-2">
+		<Popover bind:open={popoverOpen} placement="bottom-start">
+			{#snippet trigger(toggle)}
+				<Button
+					variant="ghost"
+					size="sm"
+					iconOnly
+					icon={calloutIconFor(data.type)}
+					class="mt-0.5 shrink-0 !px-1 {accent.title}"
+					aria-label="Change callout type"
+					onclick={toggle}
+				/>
+			{/snippet}
+			<div
+				class="grid min-w-[10rem] gap-0.5 rounded-lg border border-border-default bg-surface-base p-1 shadow-lg"
+				role="menu"
+			>
+				{#each CURATED_CALLOUT_TYPES as t (t)}
+					<button
+						type="button"
+						role="menuitem"
+						class="flex items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-txt-primary hover:bg-surface-raised"
+						class:bg-surface-raised={data.type.toLowerCase() === t ||
+							(data.type.toLowerCase() === 'info' && t === 'note') ||
+							(data.type.toLowerCase() === 'danger' && t === 'error')}
+						onclick={() => selectType(t)}
+					>
+						<CalloutTypeIcon type={t} class="h-4 w-4 shrink-0" />
+						<span>{calloutTypeLabel(t)}</span>
+					</button>
+				{/each}
+			</div>
+		</Popover>
+
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<div
+			bind:this={titleEl}
+			contenteditable="plaintext-only"
+			role="textbox"
+			tabindex="0"
+			aria-label="Callout title"
+			class="min-h-[1.5rem] min-w-[4rem] flex-1 text-base font-semibold outline-none empty:before:text-txt-tertiary empty:before:content-['Title…'] {accent.title}"
+			onfocus={onTitleFocus}
+			onblur={onTitleBlur}
+			onkeydown={onTitleKeydown}
+		></div>
+	</div>
+
+	<div class="callout-body pl-1">
+		<EditableCalloutNodes
+			{editor}
+			topBlockIndex={blockIndex}
+			calloutBlock={draftCallout}
+			children={bodyChildren}
+			onRowFocus={onRowFocus}
+			onRowBlur={onRowBlur}
+		/>
+	</div>
+</aside>

package/dist/editor/blocks/EditableCallout.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+import type { EditorBlock } from '../model/types';
+type $$ComponentProps = {
+    editor: MarkdownEditor;
+    blockIndex: number;
+    block: EditorBlock;
+    nested?: boolean;
+};
+declare const EditableCallout: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableCallout = ReturnType<typeof EditableCallout>;
+export default EditableCallout;

package/dist/editor/blocks/EditableCalloutListItemRow.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import EditableInlineSurface from './EditableInlineSurface.svelte';
+	import { plainOffsets } from '../dom/plaintextCaret';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import { findBlockLocation } from '../model/blockTree';
+	import type { EditorBlock, InlineNode, ListItemBlockData } from '../model/types';
+	import { StatusCheckbox } from 'phoundry-ui';
+	import {
+		listDemoteEmptyItemAt,
+		listIndentItem,
+		listItemDisplayPlain,
+		listMergeWithPrevious,
+		listOutdentItem,
+		listPromoteToTaskFromBodyShortcut,
+		isListItemTaskBodyShortcutPlain,
+		isListItemTaskBodyShortcutTrigger,
+		listSetTaskState
+	} from '../model/listEditCommands';
+	import { inlineNodesToPlainText } from '../model/inlinePlain';
+	import type { TaskCheckboxState } from '../model/types';
+	import { taskCheckboxStates } from '../taskCheckboxStates.js';
+
+	let {
+		item,
+		editor,
+		topBlockIndex,
+		markerOrdered,
+		markerStart,
+		siblingIndex,
+		onRowFocus,
+		onRowBlur
+	}: {
+		item: EditorBlock;
+		editor: MarkdownEditor;
+		topBlockIndex: number;
+		markerOrdered: boolean;
+		markerStart?: number;
+		siblingIndex: number;
+		onRowFocus: () => void;
+		onRowBlur: () => void;
+	} = $props();
+
+	const data = $derived(item.data as ListItemBlockData);
+	const listMarkerNumber = $derived((markerStart ?? 1) + siblingIndex);
+	const displayPlain = $derived(listItemDisplayPlain(item, editor.source));
+
+	function applyStruct(
+		fn: (blocks: EditorBlock[]) => EditorBlock[] | null,
+		opts?: { focusBlockId?: string; focusPlain?: { start: number; end: number } }
+	) {
+		editor.applyCalloutStructMutation(topBlockIndex, item.id, fn, opts);
+	}
+
+	function commitDraft(inlines: InlineNode[], plainCaret: number) {
+		void plainCaret;
+		const current = findBlockLocation(editor.document.blocks, item.id)?.block;
+		if (!current || current.type !== 'listItem') return;
+		const plain = inlineNodesToPlainText(inlines);
+		const d = current.data as ListItemBlockData;
+		if (d.task !== undefined && isListItemTaskBodyShortcutPlain(plain)) return;
+		editor.commitCalloutListItemInlineDraftAt(topBlockIndex, item.id, inlines, plainCaret);
+	}
+
+	function onKeydownExtra(e: KeyboardEvent) {
+		const node = e.currentTarget as HTMLDivElement;
+		const plain = node.textContent ?? '';
+		const { start, end } = plainOffsets(node);
+
+		if (
+			data.task === undefined &&
+			(e.key === ' ' || e.key === 'Enter') &&
+			!e.shiftKey &&
+			!e.ctrlKey &&
+			!e.metaKey &&
+			!e.altKey &&
+			isListItemTaskBodyShortcutTrigger(plain, e.key === 'Enter' ? 'enter' : 'space')
+		) {
+			e.preventDefault();
+			applyStruct((blocks) => listPromoteToTaskFromBodyShortcut(blocks, item.id, plain), {
+				focusBlockId: item.id,
+				focusPlain: { start: 0, end: 0 }
+			});
+			return;
+		}
+		if (e.key === 'Backspace' && start === 0 && end === 0) {
+			e.preventDefault();
+			const draftPlain = node.textContent ?? '';
+			if (draftPlain.trim().length === 0) {
+				applyStruct((blocks) => listDemoteEmptyItemAt(blocks, item.id), {
+					focusBlockId: item.id,
+					focusPlain: { start: 0, end: 0 }
+				});
+				return;
+			}
+			const loc = findBlockLocation(editor.document.blocks, item.id);
+			if (!loc || loc.index === 0) return;
+			const prev = loc.siblings[loc.index - 1];
+			if (!prev || prev.type !== 'listItem') return;
+			const joinPlain = listItemDisplayPlain(prev, editor.source).replace(/[ \t]+$/, '').length;
+			applyStruct(
+				(blocks) => listMergeWithPrevious(blocks, item.id, editor.source)?.blocks ?? null,
+				{ focusBlockId: prev.id, focusPlain: { start: joinPlain, end: joinPlain } }
+			);
+			return;
+		}
+		if (e.key === 'Tab') {
+			e.preventDefault();
+			const len = node.textContent?.length ?? 0;
+			const caret = Math.max(0, Math.min(start, len));
+			const focusPlain = { start: caret, end: caret };
+			if (e.shiftKey) {
+				applyStruct((blocks) => listOutdentItem(blocks, item.id), {
+					focusBlockId: item.id,
+					focusPlain
+				});
+			} else {
+				applyStruct((blocks) => listIndentItem(blocks, item.id), {
+					focusBlockId: item.id,
+					focusPlain
+				});
+			}
+		}
+	}
+
+	function onTaskChange(key: string) {
+		applyStruct((blocks) => listSetTaskState(blocks, item.id, key as TaskCheckboxState));
+	}
+</script>
+
+<div class="flex items-start gap-2">
+	{#if data.task !== undefined}
+		<div class="flex h-lh shrink-0 items-center">
+			<StatusCheckbox
+				activeKey={data.task}
+				states={taskCheckboxStates}
+				fallbackChar={data.task === 'other' ? data.taskMarkerChar : undefined}
+				ariaLabelPrefix="Task"
+				onchange={(key: string) => onTaskChange(key)}
+				onmousedown={(e: MouseEvent) => e.preventDefault()}
+			/>
+		</div>
+	{:else if markerOrdered}
+		<span
+			class="mt-0.5 w-5 shrink-0 text-right text-txt-tertiary tabular-nums select-none"
+			aria-hidden="true"
+		>
+			{listMarkerNumber}.
+		</span>
+	{:else}
+		<span class="mt-0.5 w-4 shrink-0 text-center text-txt-tertiary select-none" aria-hidden="true">
+			•
+		</span>
+	{/if}
+	<div class="min-w-0 flex-1 pt-0.5">
+		<EditableInlineSurface
+			{editor}
+			blockId={item.id}
+			surfaceBlockType="listItem"
+			modelInlines={item.inlines}
+			{displayPlain}
+			ariaLabel="Callout list item"
+			class="min-h-lh py-0 text-txt-primary"
+			onFocus={onRowFocus}
+			onBlur={onRowBlur}
+			onCommit={commitDraft}
+			onKeydownExtra={onKeydownExtra}
+		/>
+	</div>
+</div>

package/dist/editor/blocks/EditableCalloutListItemRow.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+import type { EditorBlock } from '../model/types';
+type $$ComponentProps = {
+    item: EditorBlock;
+    editor: MarkdownEditor;
+    topBlockIndex: number;
+    markerOrdered: boolean;
+    markerStart?: number;
+    siblingIndex: number;
+    onRowFocus: () => void;
+    onRowBlur: () => void;
+};
+declare const EditableCalloutListItemRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableCalloutListItemRow = ReturnType<typeof EditableCalloutListItemRow>;
+export default EditableCalloutListItemRow;

package/dist/editor/blocks/EditableCalloutNodes.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import EditableCallout from './EditableCallout.svelte';
+	import EditableCalloutListItemRow from './EditableCalloutListItemRow.svelte';
+	import EditableCalloutParagraph from './EditableCalloutParagraph.svelte';
+	import BlockRow from '../BlockRow.svelte';
+	import { getBlockSpec } from '../block-specs/registry';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import type { EditorBlock, ListItemBlockData } from '../model/types';
+	import { calloutChildCanMoveSibling } from '../model/calloutEditCommands';
+
+	let {
+		editor,
+		topBlockIndex,
+		calloutBlock,
+		children,
+		onRowFocus,
+		onRowBlur
+	}: {
+		editor: MarkdownEditor;
+		topBlockIndex: number;
+		calloutBlock: EditorBlock;
+		children: EditorBlock[];
+		onRowFocus: () => void;
+		onRowBlur: () => void;
+	} = $props();
+
+	function listMarkerStart(index: number): number | undefined {
+		const item = children[index];
+		if (!item || item.type !== 'listItem') return undefined;
+		return (item.data as ListItemBlockData).ordinalValue;
+	}
+
+	function childCanMove(childId: string, direction: 'up' | 'down'): boolean {
+		return calloutChildCanMoveSibling(calloutBlock, childId, direction);
+	}
+
+</script>
+
+<div>
+	{#each children as child, ci (child.id)}
+		<BlockRow
+			{editor}
+			blockIndex={topBlockIndex}
+			blockId={child.id}
+			blockType="callout"
+			blockSynthetic={false}
+			nestedRowBlockId={child.id}
+			nestedRowBlockType={child.type}
+			moveUpCommandId="moveCalloutChildUp"
+			moveDownCommandId="moveCalloutChildDown"
+			canMoveUp={childCanMove(child.id, 'up')}
+			canMoveDown={childCanMove(child.id, 'down')}
+		>
+			{#if child.type === 'paragraph'}
+				<EditableCalloutParagraph
+					block={child}
+					{editor}
+					{topBlockIndex}
+					{onRowFocus}
+					{onRowBlur}
+				/>
+			{:else if child.type === 'listItem'}
+				{@const itemData = child.data as ListItemBlockData}
+				<EditableCalloutListItemRow
+					item={child}
+					{editor}
+					{topBlockIndex}
+					siblingIndex={ci}
+					markerOrdered={itemData.ordered}
+					markerStart={listMarkerStart(ci)}
+					{onRowFocus}
+					{onRowBlur}
+				/>
+			{:else if child.type === 'callout'}
+				<EditableCallout
+					{editor}
+					blockIndex={topBlockIndex}
+					block={child}
+					nested={true}
+				/>
+			{:else}
+				{@const spec = getBlockSpec(child.type)}
+				{#if spec}
+					<div class="rounded border border-border-muted/60 bg-surface-sunken/30 p-2">
+						{@render spec.render(child)}
+					</div>
+				{/if}
+			{/if}
+		</BlockRow>
+	{/each}
+</div>

package/dist/editor/blocks/EditableCalloutNodes.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+import type { EditorBlock } from '../model/types';
+type $$ComponentProps = {
+    editor: MarkdownEditor;
+    topBlockIndex: number;
+    calloutBlock: EditorBlock;
+    children: EditorBlock[];
+    onRowFocus: () => void;
+    onRowBlur: () => void;
+};
+declare const EditableCalloutNodes: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableCalloutNodes = ReturnType<typeof EditableCalloutNodes>;
+export default EditableCalloutNodes;