phormat 0.0.5

package/dist/editor/blocks/EditableListItemRow.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+	import Self from './EditableListItemRow.svelte';
+	import BlockRow from '../BlockRow.svelte';
+	import EditableInlineSurface from './EditableInlineSurface.svelte';
+	import { plainOffsets } from '../dom/plaintextCaret';
+	import type { ListStructFocusOpts } from './EditableList.svelte';
+	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 {
+		editor,
+		blockIndex,
+		item,
+		siblingIndex,
+		markerOrdered,
+		markerStart,
+		sourceSnapshot,
+		applyStruct,
+		updateBody,
+		onRowFocus,
+		onRowBlur
+	}: {
+		editor: MarkdownEditor;
+		blockIndex: number;
+		item: EditorBlock;
+		siblingIndex: number;
+		markerOrdered: boolean;
+		markerStart?: number;
+		sourceSnapshot: string;
+		applyStruct: (
+			fn: (blocks: EditorBlock[]) => EditorBlock[] | null,
+			opts?: ListStructFocusOpts
+		) => void;
+		updateBody: (itemId: string, inlines: InlineNode[], caret: number) => void;
+		onRowFocus: () => void;
+		onRowBlur: () => void;
+	} = $props();
+
+	let focused = $state(false);
+
+	const data = $derived(item.data as ListItemBlockData);
+	const listMarkerNumber = $derived((markerStart ?? 1) + siblingIndex);
+	const displayPlain = $derived(listItemDisplayPlain(item, sourceSnapshot));
+
+	function nestedItems(): { child: EditorBlock; childIndex: number }[] {
+		const out: { child: EditorBlock; childIndex: number }[] = [];
+		const chs = item.children ?? [];
+		for (let idx = 0; idx < chs.length; idx++) {
+			const ch = chs[idx]!;
+			if (ch.type === 'listItem') out.push({ child: ch, childIndex: idx });
+		}
+		return out;
+	}
+
+	function commitDraft(inlines: InlineNode[], plainCaret: number) {
+		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;
+		updateBody(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 || loc.block.type !== 'listItem') 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));
+	}
+
+	function onBodyBlur() {
+		if (editor.isPendingFocusTarget(item.id)) return;
+		focused = false;
+		onRowBlur();
+	}
+</script>
+
+<div class="list-item-node">
+	<BlockRow
+		{editor}
+		{blockIndex}
+		blockId={item.id}
+		blockType="listItem"
+		blockSynthetic={false}
+		nestedRowBlockId={item.id}
+		nestedRowBlockType="listItem"
+		moveUpCommandId="moveListItemUp"
+		moveDownCommandId="moveListItemDown"
+	>
+		<div class="flex items-center gap-2 -mt-0.5">
+			{#if data.task !== undefined}
+
+					<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()}
+					/>
+
+			{: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="List item"
+					class="min-h-lh py-0 text-txt-primary"
+					onFocus={() => {
+						focused = true;
+						onRowFocus();
+					}}
+					onBlur={onBodyBlur}
+					onCommit={commitDraft}
+					onKeydownExtra={onKeydownExtra}
+				/>
+			</div>
+		</div>
+	</BlockRow>
+
+	{#if nestedItems().length > 0}
+		<div class="pl-4">
+			{#each nestedItems() as { child, childIndex } (child.id)}
+				<Self
+					{editor}
+					{blockIndex}
+					item={child}
+					siblingIndex={childIndex}
+					markerOrdered={(child.data as ListItemBlockData).ordered}
+					markerStart={(child.data as ListItemBlockData).ordinalValue}
+					sourceSnapshot={editor.source}
+					{applyStruct}
+					{updateBody}
+					{onRowFocus}
+					{onRowBlur}
+				/>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,19 @@
+import type { ListStructFocusOpts } from './EditableList.svelte';
+import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+import type { EditorBlock, InlineNode } from '../model/types';
+type $$ComponentProps = {
+    editor: MarkdownEditor;
+    blockIndex: number;
+    item: EditorBlock;
+    siblingIndex: number;
+    markerOrdered: boolean;
+    markerStart?: number;
+    sourceSnapshot: string;
+    applyStruct: (fn: (blocks: EditorBlock[]) => EditorBlock[] | null, opts?: ListStructFocusOpts) => void;
+    updateBody: (itemId: string, inlines: InlineNode[], caret: number) => void;
+    onRowFocus: () => void;
+    onRowBlur: () => void;
+};
+declare const EditableListItemRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableListItemRow = ReturnType<typeof EditableListItemRow>;
+export default EditableListItemRow;

package/dist/editor/blocks/EditableParagraph.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+	import { useContextMenuAPI } from 'phoundry-ui';
+	import EditableInlineSurface from './EditableInlineSurface.svelte';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import EditableParagraphNodes from './EditableParagraphNodes.svelte';
+	import type { ListStructFocusOpts } from './EditableList.svelte';
+	import type { EditorBlock, InlineNode } from '../model/types';
+	import {
+		paragraphDisplayPlain,
+		isStructuralMarkdownShortcutLine,
+		isStructuralMarkdownShortcutTrigger,
+	} from '../model/blockEditCommands';
+	import type { ParagraphBlock } from '../block-specs/paragraph/types';
+	import { offsetAtLineStart, plainOffsets } from '../dom/plaintextCaret';
+	import { inlineNodesToPlainText } from '../model/inlinePlain';
+	import { openEditorCommandMenu } from '../commandMenu.js';
+	import type { EditorCommandContext } from '../commandRegistry.js';
+
+	let {
+		editor,
+		blockIndex,
+		block
+	}: {
+		editor: MarkdownEditor;
+		blockIndex: number;
+		block: EditorBlock;
+	} = $props();
+
+	const contextMenu = useContextMenuAPI();
+
+	let focused = $state(false);
+	let localPlain = $state('');
+	let anchorWrap = $state.raw<HTMLDivElement | null>(null);
+	let slashOpen = $state(false);
+	let surfaceEl = $state.raw<HTMLDivElement | null>(null);
+
+	const data = $derived(block.data as ParagraphBlock);
+	const displayFromDoc = $derived(paragraphDisplayPlain(block));
+
+	const slashCommandCtx = $derived<EditorCommandContext>({
+		editor,
+		blockIndex,
+		blockId: block.id,
+		blockType: 'paragraph',
+		blockSynthetic: block.sourceRange.synthetic === true,
+		canMoveUp: blockIndex > 0,
+		canMoveDown: blockIndex < editor.document.blocks.length - 1,
+		slashKind: 'paragraph'
+	});
+
+	const showPlaceholder = $derived(
+		focused ? localPlain.trim() === '' : displayFromDoc.trim() === ''
+	);
+
+	const hasChildBlocks = $derived((block.children?.length ?? 0) > 0);
+
+	function applyStruct(
+		fn: (blocks: EditorBlock[]) => EditorBlock[] | null,
+		opts?: ListStructFocusOpts
+	) {
+		editor.applyListStructMutation(blockIndex, block.id, fn, opts);
+	}
+
+	function updateNestedListBody(itemId: string, inlines: InlineNode[], caret: number) {
+		editor.commitListItemInlineDraftAt(blockIndex, itemId, inlines, caret);
+	}
+
+	$effect(() => {
+		if (!focused) localPlain = displayFromDoc;
+	});
+
+	function commitDraft(inlines: InlineNode[], plainCaret: number) {
+		const current = editor.document.blocks[blockIndex];
+		if (!current || current.id !== block.id || current.type !== 'paragraph') return;
+		editor.commitParagraphInlineDraftAt(blockIndex, inlines, plainCaret);
+		localPlain = paragraphDisplayPlain(editor.document.blocks[blockIndex] ?? block);
+	}
+
+	function closeSlashMenu({ commandSelected }: { commandSelected: boolean }) {
+		slashOpen = false;
+		if (commandSelected) return;
+		editor.setFocusOutcome({
+			mode: 'blockId',
+			blockId: block.id,
+			plain: { start: 0, end: 0 }
+		});
+	}
+
+	function openSlashMenu() {
+		if (!anchorWrap) return;
+		const rect = anchorWrap.getBoundingClientRect();
+		slashOpen = true;
+		openEditorCommandMenu(contextMenu, {
+			surface: 'slash',
+			ctx: slashCommandCtx,
+			x: rect.left,
+			y: rect.bottom + 6,
+			ariaLabel: 'Insert block',
+			onClose: closeSlashMenu
+		});
+	}
+
+	function onKeydownExtra(e: KeyboardEvent) {
+		const node = surfaceEl?.querySelector('[contenteditable="true"]') as HTMLDivElement | null;
+		if (!node) return;
+		const plain = node.textContent ?? '';
+		const { start, end } = plainOffsets(node);
+
+		if (
+			e.key === '/' &&
+			!e.ctrlKey &&
+			!e.metaKey &&
+			!e.altKey &&
+			offsetAtLineStart(plain, start) &&
+			start === end
+		) {
+			e.preventDefault();
+			openSlashMenu();
+			return;
+		}
+
+		if (
+			(e.key === ' ' || e.key === 'Enter') &&
+			!e.shiftKey &&
+			!e.ctrlKey &&
+			!e.metaKey &&
+			!e.altKey &&
+			isStructuralMarkdownShortcutTrigger(plain, e.key === 'Enter' ? 'enter' : 'space', {
+				allowMarkerOnlyList: true
+			})
+		) {
+			e.preventDefault();
+			editor.tryStructuralMarkdownShortcut(blockIndex, plain);
+			return;
+		}
+
+		if (e.key === 'Backspace' && start === 0 && end === 0) {
+			e.preventDefault();
+			if (slashOpen) return;
+			editor.mergeWithPrevious(blockIndex);
+			return;
+		}
+
+		if (e.key === 'Tab') {
+			e.preventDefault();
+			const caret = Math.max(0, Math.min(start, node.textContent?.length ?? 0));
+			editor.applyBlockTreeTabReparent(block.id, e.shiftKey, { start: caret, end: caret });
+		}
+	}
+
+	function onblur() {
+		focused = false;
+		if (editor.isReparsing) return;
+		if (slashOpen) return;
+		if (editor.isPendingFocusTarget(block.id)) return;
+		editor.commitPlainEditSession();
+		editor.tryStructuralMarkdownShortcut(blockIndex, localPlain);
+	}
+</script>
+
+<div class="relative" bind:this={anchorWrap}>
+	{#if showPlaceholder}
+		<p
+			class="pointer-events-none absolute top-0.5 left-0 z-0 text-base leading-relaxed text-txt-tertiary"
+		>
+			Empty — type / for blocks
+		</p>
+	{/if}
+	<div bind:this={surfaceEl}>
+		<EditableInlineSurface
+			{editor}
+			blockId={block.id}
+			surfaceBlockType="paragraph"
+			modelInlines={block.inlines}
+			displayPlain={displayFromDoc}
+			ariaLabel="Paragraph"
+			supportsInlineWrap={true}
+			onFocus={() => {
+				focused = true;
+				localPlain = displayFromDoc;
+				editor.beginPlainEditSession(blockIndex);
+			}}
+			onBlur={onblur}
+			onCommit={commitDraft}
+			onDraftChange={(plain) => {
+				localPlain = plain;
+			}}
+			{onKeydownExtra}
+		/>
+	</div>
+	{#if hasChildBlocks}
+		<EditableParagraphNodes
+			{editor}
+			{blockIndex}
+			parentBlock={block}
+			{applyStruct}
+			updateBody={updateNestedListBody}
+			onRowFocus={() => {
+				focused = true;
+				editor.beginPlainEditSession(blockIndex);
+			}}
+			onRowBlur={() => {
+				focused = false;
+				editor.commitPlainEditSession();
+			}}
+		/>
+	{/if}
+</div>

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

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

package/dist/editor/blocks/EditableParagraphNodes.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import BlockRow from '../BlockRow.svelte';
+	import BlockSpecMissing from '../block-specs/BlockSpecMissing.svelte';
+	import EditableListItemRow from './EditableListItemRow.svelte';
+	import type { ListStructFocusOpts } from './EditableList.svelte';
+	import { getBlockSpec } from '../block-specs/registry';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import type { EditorBlock, InlineNode, ListItemBlockData } from '../model/types';
+
+	let {
+		editor,
+		blockIndex,
+		parentBlock,
+		applyStruct,
+		updateBody,
+		onRowFocus,
+		onRowBlur
+	}: {
+		editor: MarkdownEditor;
+		blockIndex: number;
+		parentBlock: EditorBlock;
+		applyStruct: (
+			fn: (blocks: EditorBlock[]) => EditorBlock[] | null,
+			opts?: ListStructFocusOpts
+		) => void;
+		updateBody: (itemId: string, inlines: InlineNode[], caret: number) => void;
+		onRowFocus: () => void;
+		onRowBlur: () => void;
+	} = $props();
+
+	function listMarkerStart(childIndex: number): number | undefined {
+		const chs = parentBlock.children ?? [];
+		const item = chs[childIndex];
+		if (!item || item.type !== 'listItem') return undefined;
+		const d = item.data as ListItemBlockData;
+		if (!d.ordered) return undefined;
+		let start = d.ordinalValue ?? 1;
+		for (let i = 0; i < childIndex; i++) {
+			const prev = chs[i];
+			if (prev?.type !== 'listItem') continue;
+			const pd = prev.data as ListItemBlockData;
+			if (pd.ordered !== d.ordered) break;
+			start++;
+		}
+		return start;
+	}
+</script>
+
+{#if (parentBlock.children?.length ?? 0) > 0}
+	<div class="pl-4">
+		{#each parentBlock.children ?? [] as child, childIndex (child.id)}
+			<BlockRow
+				{editor}
+				{blockIndex}
+				blockId={child.id}
+				blockType={child.type}
+				blockSynthetic={child.sourceRange.synthetic === true}
+				nestedRowBlockId={child.id}
+				nestedRowBlockType={child.type}
+				moveUpCommandId={child.type === 'listItem' ? 'moveListItemUp' : 'moveBlockUp'}
+				moveDownCommandId={child.type === 'listItem' ? 'moveListItemDown' : 'moveBlockDown'}
+			>
+				{#if child.type === 'listItem'}
+					{@const itemData = child.data as ListItemBlockData}
+					<EditableListItemRow
+						{editor}
+						{blockIndex}
+						item={child}
+						siblingIndex={childIndex}
+						markerOrdered={itemData.ordered}
+						markerStart={listMarkerStart(childIndex)}
+						sourceSnapshot={editor.source}
+						{applyStruct}
+						{updateBody}
+						{onRowFocus}
+						{onRowBlur}
+					/>
+				{:else}
+					{@const spec = getBlockSpec(child.type)}
+					{#if spec}
+						<spec.editComponent {editor} {blockIndex} block={child} />
+					{:else}
+						<BlockSpecMissing blockType={child.type} />
+					{/if}
+				{/if}
+			</BlockRow>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { ListStructFocusOpts } from './EditableList.svelte';
+import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+import type { EditorBlock, InlineNode } from '../model/types';
+type $$ComponentProps = {
+    editor: MarkdownEditor;
+    blockIndex: number;
+    parentBlock: EditorBlock;
+    applyStruct: (fn: (blocks: EditorBlock[]) => EditorBlock[] | null, opts?: ListStructFocusOpts) => void;
+    updateBody: (itemId: string, inlines: InlineNode[], caret: number) => void;
+    onRowFocus: () => void;
+    onRowBlur: () => void;
+};
+declare const EditableParagraphNodes: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableParagraphNodes = ReturnType<typeof EditableParagraphNodes>;
+export default EditableParagraphNodes;

package/dist/editor/blocks/EditableTable.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { Button } from 'phoundry-ui';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import type { EditorBlock, TableBlockData } from '../model/types';
+	import EditableTableCell from './EditableTableCell.svelte';
+
+	let {
+		editor,
+		blockIndex,
+		block
+	}: {
+		editor: MarkdownEditor;
+		blockIndex: number;
+		block: EditorBlock;
+	} = $props();
+
+	const data = $derived(block.data as TableBlockData);
+</script>
+
+<div class="mb-4 overflow-x-auto">
+	<table
+		class="w-full min-w-[16rem] border-collapse border border-border-muted text-sm text-txt-primary"
+	>
+		<thead>
+			<tr class="border-b border-border-muted">
+				{#each data.headers as _, col (col)}
+					<EditableTableCell
+						{editor}
+						{block}
+						{blockIndex}
+						row={-1}
+						{col}
+						align={data.aligns[col] ?? null}
+						header
+					/>
+				{/each}
+				<th class="w-8 border-r border-border-muted bg-surface-base/60 align-middle">
+					<Button
+						size="sm"
+						variant="ghost"
+						icon="carbon:add"
+						iconOnly
+						title="Add column"
+						aria-label="Add column"
+						class="h-8! w-10! px-0! text-txt-tertiary hover:text-txt-primary hover:bg-surface-overlay/30! rounded-none"
+						onclick={() => editor.appendTableColumnAt(blockIndex)}
+					/>
+				</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each data.rows as _, row (row)}
+				<tr class="border-t border-border-muted relative">
+					{#each data.headers as _, col (col)}
+						<EditableTableCell
+							{editor}
+							{block}
+							{blockIndex}
+							{row}
+							{col}
+							align={data.aligns[col] ?? null}
+						/>
+					{/each}
+					<td class="w-10 border-r border-border-muted px-1 py-1"></td>
+				</tr>
+			{/each}
+			<tr class="border-t border-border-muted">
+				<td colspan={data.headers.length} class="border-r border-border-muted ">
+					<Button
+						size="sm"
+						variant="ghost"
+						fullWidth
+						class="h-8! justify-start px-2! text-xs text-txt-tertiary hover:text-txt-primary hover:bg-surface-overlay/30! rounded-none!"
+						onclick={() => editor.appendTableRowAt(blockIndex)}
+					>
+						+ Row
+					</Button>
+				</td>
+				<td class="w-10 border-r border-border-muted px-1 py-1"></td>
+			</tr>
+		</tbody>
+	</table>
+</div>

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

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