phormat 0.0.5

package/dist/editor/blocks/EditableCalloutParagraph.svelte

@@ -0,0 +1,39 @@
+<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.commitCalloutParagraphInlineDraftAt(topBlockIndex, block.id, inlines, plainCaret);
+	}
+</script>
+
+<EditableInlineSurface
+	{editor}
+	blockId={block.id}
+	surfaceBlockType="paragraph"
+	modelInlines={block.inlines}
+	{displayPlain}
+	ariaLabel="Callout paragraph"
+	class="min-h-[1.5lh] py-1 text-txt-primary"
+	onFocus={onRowFocus}
+	onBlur={onRowBlur}
+	onCommit={commitDraft}
+/>

package/dist/editor/blocks/EditableCalloutParagraph.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 EditableCalloutParagraph: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableCalloutParagraph = ReturnType<typeof EditableCalloutParagraph>;
+export default EditableCalloutParagraph;

package/dist/editor/blocks/EditableCodeBlock.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import type { EditorBlock } from '../model/types';
+	import { serializeEditorBlock } from '../model';
+
+	let {
+		editor,
+		blockIndex,
+		block
+	}: {
+		editor: MarkdownEditor;
+		blockIndex: number;
+		block: EditorBlock;
+	} = $props();
+
+	let focused = $state(false);
+	let local = $state('');
+
+	$effect(() => {
+		const md = serializeEditorBlock(block);
+		if (!focused) {
+			local = md;
+		}
+	});
+
+	function commit() {
+		editor.replaceBlockMarkdown(blockIndex, local);
+	}
+</script>
+
+<label class="sr-only" for="code-block-{blockIndex}">Code block markdown</label>
+<textarea
+	id="code-block-{blockIndex}"
+	draggable="false"
+	class="mb-1 min-h-[8rem] w-full resize-y rounded-md border border-border-default bg-surface-sunken p-3 font-mono text-sm leading-relaxed text-txt-primary ring-0 outline-none focus-visible:border-focus-ring focus-visible:outline-none"
+	spellcheck={false}
+	bind:value={local}
+	onfocus={() => (focused = true)}
+	onblur={() => {
+		focused = false;
+		commit();
+	}}
+></textarea>

package/dist/editor/blocks/EditableCodeBlock.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 EditableCodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableCodeBlock = ReturnType<typeof EditableCodeBlock>;
+export default EditableCodeBlock;

package/dist/editor/blocks/EditableHeading.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import { useContextMenuAPI } from 'phoundry-ui';
+	import EditableInlineSurface from './EditableInlineSurface.svelte';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import type { EditorBlock, InlineNode } from '../model/types';
+	import { headingDisplayPlain, isStructuralMarkdownShortcutLine } from '../model/blockEditCommands';
+	import type { HeaderBlock } from '../block-specs/heading/types';
+	import { plainOffsets } from '../dom/plaintextCaret';
+	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);
+
+	const data = $derived(block.data as HeaderBlock);
+	const displayFromDoc = $derived(headingDisplayPlain(block));
+
+	const slashCommandCtx = $derived<EditorCommandContext>({
+		editor,
+		blockIndex,
+		blockId: block.id,
+		blockType: 'heading',
+		blockSynthetic: block.sourceRange.synthetic === true,
+		canMoveUp: blockIndex > 0,
+		canMoveDown: blockIndex < editor.document.blocks.length - 1,
+		slashKind: 'heading'
+	});
+
+	const headingClassSizes = $derived(
+		'font-semibold tracking-tight text-txt-primary ' +
+			(data.level === 1
+				? 'text-2xl'
+				: data.level === 2
+					? 'text-xl'
+					: data.level === 3
+						? 'text-lg'
+						: data.level === 4
+							? 'text-base'
+							: data.level === 5
+								? 'text-sm'
+								: 'text-xs')
+	);
+
+	const headingClass = $derived(`${headingClassSizes} tracking-wide`);
+
+	const showPlaceholder = $derived(
+		focused ? localPlain.trim() === '' : displayFromDoc.trim() === ''
+	);
+
+	$effect(() => {
+		if (!focused) localPlain = displayFromDoc;
+	});
+
+	function commitDraft(inlines: InlineNode[], plainCaret: number) {
+		editor.commitHeadingInlineDraftAt(blockIndex, inlines, plainCaret);
+		localPlain = headingDisplayPlain(editor.document.blocks[blockIndex] ?? block);
+	}
+
+	function closeSlashMenu({ commandSelected }: { commandSelected: boolean }) {
+		if (commandSelected) return;
+		editor.setFocusOutcome({
+			mode: 'blockId',
+			blockId: block.id,
+			plain: { start: 0, end: 0 }
+		});
+	}
+
+	function openSlashMenu() {
+		if (!anchorWrap) return;
+		const rect = anchorWrap.getBoundingClientRect();
+		openEditorCommandMenu(contextMenu, {
+			surface: 'slash',
+			ctx: slashCommandCtx,
+			x: rect.left,
+			y: rect.bottom + 6,
+			ariaLabel: 'Insert block',
+			onClose: closeSlashMenu
+		});
+	}
+
+	function onKeydownExtra(e: KeyboardEvent) {
+		const target = (e.currentTarget as HTMLDivElement | null) ?? null;
+		if (!target) return;
+		const plain = target.textContent ?? '';
+		const { start, end } = plainOffsets(target);
+
+		if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && start === 0 && start === end) {
+			e.preventDefault();
+			openSlashMenu();
+			return;
+		}
+
+		if (
+			(e.key === ' ' || e.key === 'Enter') &&
+			!e.shiftKey &&
+			!e.ctrlKey &&
+			!e.metaKey &&
+			!e.altKey &&
+			isStructuralMarkdownShortcutLine(plain)
+		) {
+			e.preventDefault();
+			editor.tryStructuralMarkdownShortcut(blockIndex, plain);
+			return;
+		}
+
+		if (e.key === 'Backspace' && start === 0 && end === 0) {
+			e.preventDefault();
+			editor.mergeWithPrevious(blockIndex);
+		}
+	}
+
+	function onblur() {
+		focused = false;
+		editor.commitPlainEditSession();
+		editor.tryStructuralMarkdownShortcut(blockIndex, localPlain);
+	}
+</script>
+
+<div class="relative flex flex-col" bind:this={anchorWrap}>
+	{#if showPlaceholder}
+		<span class="pointer-events-none absolute top-1 left-0 z-0 font-semibold tracking-tight text-txt-tertiary {headingClass}">
+			Heading — type / for blocks
+		</span>
+	{/if}
+	<EditableInlineSurface
+		{editor}
+		blockId={block.id}
+		surfaceBlockType="heading"
+		modelInlines={block.inlines}
+		displayPlain={displayFromDoc}
+		singleLine={true}
+		ariaMultiline={false}
+		ariaLabel="Heading"
+		class={headingClass}
+		supportsInlineWrap={true}
+		onFocus={() => {
+			focused = true;
+			localPlain = displayFromDoc;
+			editor.beginPlainEditSession(blockIndex);
+		}}
+		onBlur={onblur}
+		onCommit={commitDraft}
+		onDraftChange={(plain) => {
+			localPlain = plain;
+		}}
+		{onKeydownExtra}
+	/>
+</div>

package/dist/editor/blocks/EditableHeading.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 EditableHeading: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableHeading = ReturnType<typeof EditableHeading>;
+export default EditableHeading;

package/dist/editor/blocks/EditableHorizontalRule.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { horizontalRuleRenderer } from '../block-specs/horizontalRule/HorizontalRuleRenderer.svelte';
+	import type { HorizontalRuleBlock } from '../block-specs/horizontalRule/types';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import type { EditorBlock } from '../model/types';
+
+	let {
+		editor: _editor,
+		blockIndex: _blockIndex,
+		block
+	}: {
+		editor: MarkdownEditor;
+		blockIndex: number;
+		block: EditorBlock;
+	} = $props();
+
+	const data = $derived(block.data as HorizontalRuleBlock);
+</script>
+
+{@render horizontalRuleRenderer(data)}

package/dist/editor/blocks/EditableHorizontalRule.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 EditableHorizontalRule: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableHorizontalRule = ReturnType<typeof EditableHorizontalRule>;
+export default EditableHorizontalRule;