phormat 0.0.5

package/dist/editor/blocks/EditableInlineSurface.svelte

@@ -0,0 +1,423 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import type { EditorBlockType, InlineNode, TableCellAddress, DocumentSelection } from '../model/types';
+	import {
+		deleteCharAfter,
+		deleteCharBefore,
+		deletePlainRange,
+		draftInlinesFromBlock,
+		insertTextAtPlainOffset,
+		type InlineWrapKind,
+		wrapInlineSelection
+	} from '../model/inlineEditCommands';
+	import {
+		draftInlineMergeFingerprint,
+		mergeDraftInlineWithParser
+	} from '../model/inlineDraftMerge';
+	import { inlineNodesToPlainText } from '../model/inlinePlain';
+	import { inlineNodesEditSnippet } from '../plugins/shared/InlineNodesEdit.svelte';
+	import { plainOffsets, setCaretPlainOffset } from '../dom/plaintextCaret';
+	import { handleEditorUndoRedoKeydown } from '../dom/editorHistoryKeydown';
+	import { syncDocumentSelectionFocus } from '../dom/syncDocumentSelectionFocus';
+
+	let {
+		editor,
+		blockId,
+		surfaceBlockType,
+		modelInlines,
+		displayPlain,
+		singleLine = false,
+		ariaLabel,
+		ariaMultiline = true,
+		class: className = '',
+		onFocus,
+		onBlur,
+		onCommit,
+		onDraftChange,
+		onKeydownExtra,
+		supportsInlineWrap = false,
+		suppressEnterCommand = false,
+		tableCell,
+		onTableCellNavigate
+	}: {
+		editor: MarkdownEditor;
+		blockId: string;
+		/** Must match the block's post-command type so a dying surface cannot steal focus. */
+		surfaceBlockType?: EditorBlockType;
+		modelInlines: InlineNode[] | undefined;
+		displayPlain: string;
+		singleLine?: boolean;
+		ariaLabel: string;
+		ariaMultiline?: boolean;
+		class?: string;
+		onFocus?: () => void;
+		onBlur?: () => void;
+		onCommit: (inlines: InlineNode[], plainCaret: number) => void;
+		onDraftChange?: (plain: string, inlines: InlineNode[], plainCaret: number) => void;
+		onKeydownExtra?: (e: KeyboardEvent) => void;
+		supportsInlineWrap?: boolean;
+		suppressEnterCommand?: boolean;
+		tableCell?: TableCellAddress;
+		onTableCellNavigate?: (
+			direction: 'next' | 'prev' | 'down' | 'up',
+			inlines: InlineNode[],
+			plainCaret: number
+		) => void;
+	} = $props();
+
+	let focused = $state(false);
+	let el = $state.raw<HTMLDivElement | null>(null);
+	let draftInlines = $state<InlineNode[]>([]);
+	/** Bumps only during focused controlled-input re-renders — not on model sync. */
+	let draftRenderKey = $state(0);
+	let lastCommittedPlain = $state('');
+	let mergeRafId = 0;
+	let lastMergeFingerprint = '';
+
+	const committedInlines = $derived(draftInlinesFromBlock(modelInlines, displayPlain));
+
+	function hydrateDraft(): boolean {
+		const next = draftInlinesFromBlock(modelInlines, displayPlain);
+		const nextPlain = inlineNodesToPlainText(next);
+		const nextFingerprint = draftInlineMergeFingerprint(next);
+		const changed =
+			inlineNodesToPlainText(draftInlines) !== nextPlain ||
+			draftInlineMergeFingerprint(draftInlines) !== nextFingerprint;
+		if (changed) draftInlines = next;
+		lastCommittedPlain = nextPlain;
+		lastMergeFingerprint = nextFingerprint;
+		return changed;
+	}
+
+	function draftPlain(): string {
+		return inlineNodesToPlainText(draftInlines);
+	}
+
+	async function rerenderDraft(caret: number) {
+		draftRenderKey++;
+		await tick();
+		const node = el;
+		if (node) setCaretPlainOffset(node, caret);
+	}
+
+	async function applyWrap(kind: InlineWrapKind) {
+		const node = el;
+		if (!node || !supportsInlineWrap) return;
+		const { start, end } = plainOffsets(node);
+		const wrapped = wrapInlineSelection(draftInlines, start, end, kind);
+		if (!wrapped) return;
+		draftInlines = wrapped;
+		const caret = Math.min(end, draftPlain().length);
+		await rerenderDraft(caret);
+		onCommit(wrapped, caret);
+		lastCommittedPlain = draftPlain();
+		syncDocumentSelection();
+	}
+
+	function selectionPayload(plain: { start: number; end: number }): DocumentSelection {
+		return tableCell ? { blockId, plain, tableCell } : { blockId, plain };
+	}
+
+	function syncDocumentSelection() {
+		const node = el;
+		if (!node || document.activeElement !== node) return;
+		const { start, end } = plainOffsets(node);
+		editor.emitDocumentSelection(selectionPayload({ start, end }));
+	}
+
+	function emitDraftChange(inlines: InlineNode[], caret: number) {
+		onDraftChange?.(inlineNodesToPlainText(inlines), inlines, caret);
+	}
+
+	async function applyDraftMerge(caret: number) {
+		const merged = mergeDraftInlineWithParser(draftInlines);
+		const fp = draftInlineMergeFingerprint(merged);
+		if (fp !== lastMergeFingerprint) {
+			lastMergeFingerprint = fp;
+			draftInlines = merged;
+			emitDraftChange(merged, caret);
+		}
+		await rerenderDraft(caret);
+		syncDocumentSelection();
+	}
+
+	function scheduleDraftMerge(caret: number) {
+		cancelAnimationFrame(mergeRafId);
+		mergeRafId = requestAnimationFrame(() => {
+			void applyDraftMerge(caret);
+		});
+	}
+
+	async function applyDraftMergeImmediate(caret: number) {
+		cancelAnimationFrame(mergeRafId);
+		mergeRafId = 0;
+		await applyDraftMerge(caret);
+	}
+
+	async function finishControlledEdit(next: InlineNode[], caret: number, immediateMerge: boolean) {
+		draftInlines = next;
+		emitDraftChange(next, caret);
+		if (immediateMerge) await applyDraftMergeImmediate(caret);
+		else scheduleDraftMerge(caret);
+	}
+
+	async function handleBeforeInput(e: InputEvent) {
+		if (!focused || !el) return;
+		const inputType = e.inputType;
+		if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {
+			e.preventDefault();
+			return;
+		}
+		e.preventDefault();
+
+		const { start, end } = plainOffsets(el);
+		let next = draftInlines.map((n) => ({ ...n })) as InlineNode[];
+		let caret = start;
+
+		if (inputType === 'insertText' || inputType === 'insertReplacementText') {
+			let text = e.data ?? '';
+			if (singleLine) text = text.replace(/\n/g, '');
+			if (start !== end) next = deletePlainRange(next, start, end);
+			next = insertTextAtPlainOffset(next, start, text, { stripNewlines: singleLine });
+			caret = start + text.length;
+		} else if (inputType === 'deleteContentBackward') {
+			if (start !== end) {
+				next = deletePlainRange(next, start, end);
+				caret = start;
+			} else if (start > 0) {
+				const deleted = deleteCharBefore(next, start);
+				if (deleted) next = deleted;
+				caret = start - 1;
+			}
+		} else if (inputType === 'deleteContentForward') {
+			if (start !== end) {
+				next = deletePlainRange(next, start, end);
+				caret = start;
+			} else {
+				const deleted = deleteCharAfter(next, start);
+				if (deleted) next = deleted;
+				caret = start;
+			}
+		} else if (inputType === 'insertFromPaste') {
+			return;
+		} else {
+			return;
+		}
+
+		draftInlines = next;
+		emitDraftChange(next, caret);
+		scheduleDraftMerge(caret);
+	}
+
+	function onpaste(e: ClipboardEvent) {
+		e.preventDefault();
+		let text = e.clipboardData?.getData('text/plain') ?? '';
+		if (singleLine) text = text.replace(/\n/g, '');
+		const node = el;
+		if (!node || !text) return;
+		const { start, end } = plainOffsets(node);
+		let next = draftInlines;
+		if (start !== end) next = deletePlainRange(next, start, end);
+		next = insertTextAtPlainOffset(next, start, text, { stripNewlines: singleLine });
+		const caret = start + text.length;
+		void finishControlledEdit(next, caret, true);
+	}
+
+	function onkeydown(e: KeyboardEvent & { currentTarget: HTMLDivElement }) {
+		const node = e.currentTarget;
+
+		if (handleEditorUndoRedoKeydown(editor, e)) {
+			queueMicrotask(() => {
+				hydrateDraft();
+				void rerenderDraft(
+					Math.min(editor.documentSelection?.plain?.end ?? 0, draftPlain().length)
+				);
+			});
+			return;
+		}
+
+		if (onTableCellNavigate && e.key === 'Tab') {
+			e.preventDefault();
+			onTableCellNavigate(
+				e.shiftKey ? 'prev' : 'next',
+				draftInlines,
+				plainOffsets(node).start
+			);
+			return;
+		}
+
+		if (onTableCellNavigate && e.key === 'Enter') {
+			e.preventDefault();
+			onTableCellNavigate(
+				e.shiftKey ? 'up' : 'down',
+				draftInlines,
+				plainOffsets(node).start
+			);
+			return;
+		}
+
+		if (supportsInlineWrap && (e.metaKey || e.ctrlKey) && !e.altKey) {
+			const k = e.key.toLowerCase();
+			if (k === 'b') {
+				e.preventDefault();
+				void applyWrap('strong');
+				return;
+			}
+			if (k === 'i') {
+				e.preventDefault();
+				void applyWrap('emphasis');
+				return;
+			}
+			if (k === '`') {
+				e.preventDefault();
+				void applyWrap('code');
+				return;
+			}
+			if (k === 'k') {
+				e.preventDefault();
+				void applyWrap('link');
+				return;
+			}
+			if (e.shiftKey && k === 'x') {
+				e.preventDefault();
+				void applyWrap('strikethrough');
+				return;
+			}
+			if (e.shiftKey && k === 'h') {
+				e.preventDefault();
+				void applyWrap('highlight');
+				return;
+			}
+		}
+
+		if (!suppressEnterCommand && e.key === 'Enter' && e.shiftKey) {
+			e.preventDefault();
+			return;
+		}
+
+		onKeydownExtra?.(e);
+		if (e.defaultPrevented) return;
+
+		if (!suppressEnterCommand && e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			if (editor.shouldSuppressPlainInputForBlock(blockId)) return;
+			const { start, end } = plainOffsets(node);
+			const caret = Math.min(start, end);
+			onCommit(draftInlines, caret);
+			editor.enterAt({ blockId, plainOffset: caret, plainText: draftPlain() });
+			return;
+		}
+	}
+
+	function handleFocus() {
+		const node = el;
+		const wasFocused = focused;
+		// Capture click caret before swapping unfocused → focused DOM (that swap destroys selection).
+		const clickOffsets = !wasFocused && node ? plainOffsets(node) : null;
+
+		focused = true;
+		if (!wasFocused) {
+			hydrateDraft();
+			draftRenderKey++;
+		}
+		onFocus?.();
+
+		if (clickOffsets) {
+			void tick().then(() => {
+				const target = el;
+				if (!target || document.activeElement !== target) return;
+				setCaretPlainOffset(target, clickOffsets.start);
+				editor.claimDocumentSelection(
+					selectionPayload({ start: clickOffsets.start, end: clickOffsets.end })
+				);
+			});
+		} else if (node) {
+			const { start, end } = plainOffsets(node);
+			editor.claimDocumentSelection(selectionPayload({ start, end }));
+		}
+	}
+
+	function documentBlockMatchesSurface(): boolean {
+		if (!surfaceBlockType) return true;
+		return editor.document.blocks.find((b) => b.id === blockId)?.type === surfaceBlockType;
+	}
+
+	function handleBlur() {
+		focused = false;
+		editor.clearDocumentSelection(blockId);
+		if (editor.shouldSkipTableCellBlurCommit()) {
+			onBlur?.();
+			return;
+		}
+		const plain = draftPlain();
+		const node = el;
+		const caret = node ? plainOffsets(node).start : plain.length;
+		if (plain !== lastCommittedPlain && documentBlockMatchesSurface()) {
+			onCommit(draftInlines, caret);
+			lastCommittedPlain = plain;
+		}
+		onBlur?.();
+	}
+
+	function resyncDom() {
+		if (!focused) return;
+		if (hydrateDraft()) draftRenderKey++;
+	}
+
+	$effect(() => {
+		const sel = editor.documentSelection;
+		const node = el;
+		if (!sel?.plain || !node) return;
+		syncDocumentSelectionFocus({
+			blockId,
+			tableCell,
+			getNode: () => el,
+			isFocused: () => focused,
+			setFocused: (value) => {
+				focused = value;
+			},
+			getDisplayPlain: () => displayPlain,
+			setLocalPlain: () => {},
+			resyncDom,
+			setCaret: setCaretPlainOffset,
+			documentSelection: sel,
+			takePendingFocus: (id, cell) =>
+				editor.takePendingFocusForBlock(id, cell, surfaceBlockType)
+		});
+	});
+
+	$effect(() => {
+		const node = el;
+		if (!node) return;
+		const onSel = () => syncDocumentSelection();
+		document.addEventListener('selectionchange', onSel);
+		return () => document.removeEventListener('selectionchange', onSel);
+	});
+</script>
+
+<div
+	bind:this={el}
+	data-md-inline-surface={blockId}
+	role="textbox"
+	tabindex={editor.readonly ? -1 : 0}
+	aria-multiline={ariaMultiline}
+	aria-label={ariaLabel}
+	contenteditable={editor.readonly ? 'false' : 'true'}
+	draggable="false"
+	class="relative z-[1] w-full border-0 bg-transparent px-0 py-0.5 text-base leading-relaxed whitespace-pre-wrap text-txt-primary ring-0 outline-none focus:ring-0 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-focus-ring {className}"
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	onbeforeinput={handleBeforeInput}
+	onkeydown={onkeydown}
+	onkeyup={() => syncDocumentSelection()}
+	onpaste={onpaste}
+>
+	{#if focused}
+		{#key draftRenderKey}
+			{@render inlineNodesEditSnippet(draftInlines)}
+		{/key}
+	{:else}
+		{@render inlineNodesEditSnippet(committedInlines)}
+	{/if}
+</div>

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

@@ -0,0 +1,26 @@
+import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+import type { EditorBlockType, InlineNode, TableCellAddress } from '../model/types';
+type $$ComponentProps = {
+    editor: MarkdownEditor;
+    blockId: string;
+    /** Must match the block's post-command type so a dying surface cannot steal focus. */
+    surfaceBlockType?: EditorBlockType;
+    modelInlines: InlineNode[] | undefined;
+    displayPlain: string;
+    singleLine?: boolean;
+    ariaLabel: string;
+    ariaMultiline?: boolean;
+    class?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onCommit: (inlines: InlineNode[], plainCaret: number) => void;
+    onDraftChange?: (plain: string, inlines: InlineNode[], plainCaret: number) => void;
+    onKeydownExtra?: (e: KeyboardEvent) => void;
+    supportsInlineWrap?: boolean;
+    suppressEnterCommand?: boolean;
+    tableCell?: TableCellAddress;
+    onTableCellNavigate?: (direction: 'next' | 'prev' | 'down' | 'up', inlines: InlineNode[], plainCaret: number) => void;
+};
+declare const EditableInlineSurface: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableInlineSurface = ReturnType<typeof EditableInlineSurface>;
+export default EditableInlineSurface;

package/dist/editor/blocks/EditableList.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { InlineNode } from '../model/types';
+	import EditableListItemRow from './EditableListItemRow.svelte';
+	import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+	import type { EditorBlock, ListItemBlockData } from '../model/types';
+
+	export type ListStructFocusOpts = {
+		focusBlockId?: string;
+		focusPlain?: { start: number; end: number };
+	};
+
+	let {
+		editor,
+		blockIndex,
+		block
+	}: {
+		editor: MarkdownEditor;
+		blockIndex: number;
+		block: EditorBlock;
+	} = $props();
+
+	let rowFocusCount = $state(0);
+
+	const itemData = $derived(block.data as ListItemBlockData);
+
+	const siblingIndex = $derived.by(() => {
+		let count = 0;
+		for (let i = 0; i < blockIndex; i++) {
+			const b = editor.document.blocks[i];
+			if (b?.type !== 'listItem') break;
+			const d = b.data as ListItemBlockData;
+			if (d.ordered !== itemData.ordered) break;
+			count++;
+		}
+		return count;
+	});
+
+	function applyStruct(
+		fn: (blocks: EditorBlock[]) => EditorBlock[] | null,
+		opts?: ListStructFocusOpts
+	) {
+		editor.applyListStructMutation(blockIndex, block.id, fn, opts);
+	}
+
+	function updateBody(itemId: string, inlines: InlineNode[], caret: number) {
+		editor.commitListItemInlineDraftAt(blockIndex, itemId, inlines, caret);
+	}
+
+	function onRowFocus() {
+		rowFocusCount++;
+		editor.beginPlainEditSession(blockIndex);
+	}
+
+	function onRowBlur() {
+		rowFocusCount--;
+		queueMicrotask(() => {
+			if (rowFocusCount <= 0) {
+				rowFocusCount = 0;
+				editor.commitPlainEditSession();
+			}
+		});
+	}
+</script>
+
+<EditableListItemRow
+	{editor}
+	{blockIndex}
+	item={block}
+	{siblingIndex}
+	markerOrdered={itemData.ordered}
+	markerStart={itemData.ordinalValue}
+	sourceSnapshot={editor.source}
+	{applyStruct}
+	{updateBody}
+	{onRowFocus}
+	{onRowBlur}
+/>

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

@@ -0,0 +1,17 @@
+import type { MarkdownEditor } from '../MarkdownEditor.svelte';
+import type { EditorBlock } from '../model/types';
+export type ListStructFocusOpts = {
+    focusBlockId?: string;
+    focusPlain?: {
+        start: number;
+        end: number;
+    };
+};
+type $$ComponentProps = {
+    editor: MarkdownEditor;
+    blockIndex: number;
+    block: EditorBlock;
+};
+declare const EditableList: import("svelte").Component<$$ComponentProps, {}, "">;
+type EditableList = ReturnType<typeof EditableList>;
+export default EditableList;