@refrakt-md/editor 0.8.2 → 0.8.4

package/app/src/lib/editor/codemirror-theme.ts

@@ -0,0 +1,115 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+export const lightTheme = EditorView.theme(
+	{
+		'&': {
+			backgroundColor: '#f8fafc',
+			color: '#1a1a2e',
+			fontSize: '13px',
+			height: '100%',
+		},
+		'.cm-scroller': {
+			overflow: 'auto',
+			fontFamily: "'SF Mono', 'Fira Code', ui-monospace, monospace",
+			lineHeight: '1.6',
+		},
+		'.cm-content': {
+			padding: '1rem 0',
+			caretColor: '#1e293b',
+		},
+		'.cm-gutters': {
+			backgroundColor: '#f8fafc',
+			color: '#94a3b8',
+			border: 'none',
+			paddingRight: '0.5rem',
+		},
+		'.cm-activeLineGutter': {
+			backgroundColor: '#e2e8f0',
+			color: '#64748b',
+		},
+		'.cm-activeLine': {
+			backgroundColor: 'rgba(0, 0, 0, 0.03)',
+		},
+		'.cm-cursor': {
+			borderLeftColor: '#1e293b',
+		},
+		'&.cm-focused .cm-selectionBackground, ::selection': {
+			backgroundColor: 'rgba(14, 165, 233, 0.2)',
+		},
+		'.cm-selectionBackground': {
+			backgroundColor: 'rgba(14, 165, 233, 0.12)',
+		},
+		'&.cm-focused': {
+			outline: 'none',
+		},
+		// Autocomplete dropdown styling
+		'.cm-tooltip.cm-tooltip-autocomplete': {
+			border: '1px solid #e2e8f0',
+			borderRadius: '6px',
+			boxShadow: '0 8px 24px rgba(0, 0, 0, 0.12)',
+			backgroundColor: '#ffffff',
+			overflow: 'hidden',
+		},
+		'.cm-tooltip.cm-tooltip-autocomplete ul': {
+			fontFamily: 'system-ui, -apple-system, sans-serif',
+			fontSize: '12px',
+			maxHeight: '280px',
+		},
+		'.cm-tooltip.cm-tooltip-autocomplete ul li': {
+			padding: '4px 8px',
+			borderBottom: '1px solid #f1f5f9',
+		},
+		'.cm-tooltip.cm-tooltip-autocomplete ul li[aria-selected]': {
+			backgroundColor: '#f0f9ff',
+			color: '#0369a1',
+		},
+		'.cm-tooltip.cm-completionInfo': {
+			border: '1px solid #e2e8f0',
+			borderRadius: '6px',
+			boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+			backgroundColor: '#ffffff',
+			padding: '6px 10px',
+			fontFamily: 'system-ui, -apple-system, sans-serif',
+			fontSize: '12px',
+			color: '#475569',
+			maxWidth: '300px',
+		},
+		'.cm-completionDetail': {
+			color: '#94a3b8',
+			fontStyle: 'normal',
+			marginLeft: '0.5em',
+		},
+		// Markdoc tag highlighting
+		'.cm-markdoc-tag': {
+			backgroundColor: 'rgba(217, 119, 6, 0.06)',
+			borderRadius: '2px',
+		},
+		'.cm-markdoc-bracket': {
+			color: '#94a3b8',
+		},
+		'.cm-markdoc-name': {
+			color: '#d97706',
+			fontWeight: '600',
+		},
+	},
+	{ dark: false },
+);
+
+export const highlightTheme = HighlightStyle.define([
+	{ tag: tags.heading1, color: '#0369a1', fontWeight: 'bold', fontSize: '1.4em' },
+	{ tag: tags.heading2, color: '#0369a1', fontWeight: 'bold', fontSize: '1.2em' },
+	{ tag: tags.heading3, color: '#0369a1', fontWeight: 'bold', fontSize: '1.1em' },
+	{ tag: tags.heading, color: '#0369a1', fontWeight: 'bold' },
+	{ tag: tags.emphasis, color: '#9333ea', fontStyle: 'italic' },
+	{ tag: tags.strong, color: '#9333ea', fontWeight: 'bold' },
+	{ tag: tags.link, color: '#0ea5e9', textDecoration: 'underline' },
+	{ tag: tags.url, color: '#0ea5e9' },
+	{ tag: tags.quote, color: '#64748b' },
+	{ tag: tags.monospace, color: '#16a34a' },
+	{ tag: tags.processingInstruction, color: '#d97706' },
+	{ tag: tags.meta, color: '#94a3b8' },
+	{ tag: tags.comment, color: '#94a3b8' },
+	{ tag: tags.punctuation, color: '#94a3b8' },
+]);

package/app/src/lib/editor/content-model-resolver.ts

@@ -0,0 +1,196 @@
+/**
+ * Client-side content model resolver.
+ *
+ * Matches parsed ContentNodes (from parseContentTree) against a serialized
+ * content model to determine which fields are filled and which are empty.
+ */
+
+import type { ContentNode } from './block-parser.js';
+import type {
+	SerializedContentModel,
+	SerializedFieldDef,
+	SerializedSequenceModel,
+	SerializedDelimitedZone,
+} from '../api/client.js';
+
+// ---------------------------------------------------------------------------
+// Output types
+// ---------------------------------------------------------------------------
+
+export interface ResolvedField {
+	/** Field name from the content model */
+	name: string;
+	/** Expected node type pattern (e.g. 'paragraph', 'heading', 'list|fence') */
+	match: string;
+	/** Whether the field can be absent */
+	optional: boolean;
+	/** Whether the field consumes multiple consecutive matches */
+	greedy: boolean;
+	/** Whether content was matched to this field */
+	filled: boolean;
+	/** Matched content nodes (empty if unfilled) */
+	nodes: ContentNode[];
+	/** Human-readable description from field definition */
+	description?: string;
+	/** Markdoc template for inserting content */
+	template?: string;
+	/** If field emits child rune tags */
+	emitTag?: string;
+}
+
+export interface ResolvedZone {
+	name: string;
+	fields: ResolvedField[];
+}
+
+export type ResolvedStructure =
+	| { type: 'sequence'; fields: ResolvedField[] }
+	| { type: 'delimited'; delimiter: string; zones: ResolvedZone[] }
+	| { type: 'sections'; description: string }
+	| { type: 'custom'; description: string };
+
+// ---------------------------------------------------------------------------
+// Node matching
+// ---------------------------------------------------------------------------
+
+/** Check if a ContentNode matches a field's match pattern */
+function nodeMatchesType(node: ContentNode, match: string): boolean {
+	if (match === 'any') return true;
+
+	// Pipe-separated alternatives: 'list|fence'
+	if (match.includes('|')) {
+		return match.split('|').some(m => nodeMatchesType(node, m));
+	}
+
+	// heading:N
+	if (match.startsWith('heading:')) {
+		const level = parseInt(match.slice(8), 10);
+		return node.type === 'heading' && node.headingLevel === level;
+	}
+
+	// list:ordered / list:unordered
+	if (match === 'list:ordered') {
+		return node.type === 'list' && node.listOrdered === true;
+	}
+	if (match === 'list:unordered') {
+		return node.type === 'list' && node.listOrdered !== true;
+	}
+
+	// tag:NAME — ContentNodes use 'rune' type
+	if (match.startsWith('tag:')) {
+		const tagName = match.slice(4);
+		return node.type === 'rune' && node.runeName === tagName;
+	}
+
+	// Simple type match (ContentNode types: rune, heading, paragraph, fence, list, quote, hr, image)
+	// Map content model match names to ContentNode type names
+	if (match === 'blockquote') return node.type === 'quote';
+
+	return node.type === match;
+}
+
+// ---------------------------------------------------------------------------
+// Sequence resolver
+// ---------------------------------------------------------------------------
+
+function resolveSequence(nodes: ContentNode[], fields: SerializedFieldDef[]): ResolvedField[] {
+	const result: ResolvedField[] = [];
+	let cursor = 0;
+
+	for (const field of fields) {
+		const resolved: ResolvedField = {
+			name: field.name,
+			match: field.match,
+			optional: field.optional ?? false,
+			greedy: field.greedy ?? false,
+			filled: false,
+			nodes: [],
+			description: field.description,
+			template: field.template,
+			emitTag: field.emitTag,
+		};
+
+		if (field.greedy) {
+			// Consume all consecutive matching nodes
+			while (cursor < nodes.length && nodeMatchesType(nodes[cursor], field.match)) {
+				resolved.nodes.push(nodes[cursor]);
+				cursor++;
+			}
+			resolved.filled = resolved.nodes.length > 0;
+		} else {
+			// Match the next node if it fits
+			if (cursor < nodes.length && nodeMatchesType(nodes[cursor], field.match)) {
+				resolved.nodes.push(nodes[cursor]);
+				resolved.filled = true;
+				cursor++;
+			}
+		}
+
+		result.push(resolved);
+	}
+
+	return result;
+}
+
+// ---------------------------------------------------------------------------
+// Main resolver
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve a content tree against a serialized content model.
+ * Returns a structure describing which fields are filled and which are empty.
+ */
+export function resolveContentStructure(
+	nodes: ContentNode[],
+	model: SerializedContentModel,
+): ResolvedStructure {
+	switch (model.type) {
+		case 'sequence':
+			return {
+				type: 'sequence',
+				fields: resolveSequence(nodes, model.fields),
+			};
+
+		case 'delimited': {
+			// Split nodes at delimiter (hr) boundaries
+			const zones: ResolvedZone[] = [];
+			const chunks: ContentNode[][] = [[]];
+			for (const node of nodes) {
+				if (node.type === 'hr') {
+					chunks.push([]);
+				} else {
+					chunks[chunks.length - 1].push(node);
+				}
+			}
+
+			if (model.zones) {
+				for (let i = 0; i < model.zones.length; i++) {
+					const zone = model.zones[i];
+					const chunk = chunks[i] ?? [];
+					zones.push({
+						name: zone.name,
+						fields: resolveSequence(chunk, zone.fields),
+					});
+				}
+			} else if (model.dynamicZones && model.zoneModel) {
+				for (let i = 0; i < chunks.length; i++) {
+					zones.push({
+						name: `zone-${i + 1}`,
+						fields: resolveSequence(chunks[i], model.zoneModel.fields),
+					});
+				}
+			}
+
+			return { type: 'delimited', delimiter: model.delimiter, zones };
+		}
+
+		case 'sections':
+			return {
+				type: 'sections',
+				description: `Sections split by ${model.sectionHeading}${model.emitTag ? `, each emits ${model.emitTag}` : ''}`,
+			};
+
+		case 'custom':
+			return { type: 'custom', description: model.description };
+	}
+}

package/app/src/lib/editor/inline-markdown.ts

@@ -0,0 +1,237 @@
+import Markdoc from '@markdoc/markdoc';
+import type { Node } from '@markdoc/markdoc';
+
+/**
+ * Parse inline markdown source into HTML suitable for contentEditable.
+ *
+ * Uses Markdoc.parse() on a synthetic paragraph, then walks the inline AST
+ * to produce clean HTML with only the inline elements we support:
+ * strong, em, code, and links.
+ */
+export function parseInlineMarkdown(source: string): string {
+	if (!source) return '';
+
+	const ast = Markdoc.parse(source);
+	// The AST is: document > paragraph > inline children
+	const doc = ast;
+	if (!doc.children?.length) return escapeHtml(source);
+
+	const paragraph = doc.children[0];
+	if (!paragraph?.children?.length) return escapeHtml(source);
+
+	return renderInlineNodes(paragraph.children);
+}
+
+function renderInlineNodes(nodes: Node[]): string {
+	return nodes.map(renderInlineNode).join('');
+}
+
+function renderInlineNode(node: Node): string {
+	switch (node.type) {
+		case 'text':
+			return escapeHtml(node.attributes.content ?? '');
+
+		case 'strong':
+			return `<strong>${renderInlineNodes(node.children)}</strong>`;
+
+		case 'em':
+			return `<em>${renderInlineNodes(node.children)}</em>`;
+
+		case 's':
+			return `<s>${renderInlineNodes(node.children)}</s>`;
+
+		case 'code':
+			return `<code>${escapeHtml(node.attributes.content ?? '')}</code>`;
+
+		case 'link': {
+			const href = node.attributes.href ?? '';
+			const title = node.attributes.title;
+			const titleAttr = title ? ` title="${escapeAttr(title)}"` : '';
+			return `<a href="${escapeAttr(href)}"${titleAttr}>${renderInlineNodes(node.children)}</a>`;
+		}
+
+		case 'hardbreak':
+			return ' ';
+
+		case 'softbreak':
+			return ' ';
+
+		default:
+			// Graceful fallback: render children if any
+			if (node.children?.length) {
+				return renderInlineNodes(node.children);
+			}
+			return '';
+	}
+}
+
+/**
+ * Serialize the DOM contents of a contentEditable element back to inline markdown.
+ */
+export function serializeInlineHtml(el: HTMLElement): string {
+	return serializeNodes(el.childNodes);
+}
+
+function serializeNodes(nodes: NodeListOf<ChildNode> | ChildNode[]): string {
+	const parts: string[] = [];
+	for (const node of nodes) {
+		parts.push(serializeNode(node));
+	}
+	return parts.join('');
+}
+
+const TEXT_NODE = 3;
+const ELEMENT_NODE = 1;
+
+function serializeNode(node: ChildNode): string {
+	if (node.nodeType === TEXT_NODE) {
+		return escapeMarkdown(node.textContent ?? '');
+	}
+
+	if (node.nodeType !== ELEMENT_NODE) return '';
+
+	const el = node as HTMLElement;
+	const tag = el.tagName;
+
+	switch (tag) {
+		case 'STRONG':
+		case 'B':
+			return `**${serializeNodes(el.childNodes)}**`;
+
+		case 'EM':
+		case 'I':
+			return `*${serializeNodes(el.childNodes)}*`;
+
+		case 'S':
+		case 'STRIKE':
+		case 'DEL':
+			return `~~${serializeNodes(el.childNodes)}~~`;
+
+		case 'CODE':
+			return `\`${el.textContent ?? ''}\``;
+
+		case 'A': {
+			const href = el.getAttribute('href') ?? '';
+			const text = serializeNodes(el.childNodes);
+			return `[${text}](${href})`;
+		}
+
+		case 'BR':
+			return ' ';
+
+		// Browser quirks: contentEditable may wrap text in divs/spans
+		case 'DIV':
+		case 'P':
+		case 'SPAN':
+			return serializeNodes(el.childNodes);
+
+		default:
+			return serializeNodes(el.childNodes);
+	}
+}
+
+/**
+ * Strip inline markdown formatting to produce plain text (for matching).
+ */
+export function stripInlineMarkdown(source: string): string {
+	return source
+		// Links: [text](url) or [text](url "title") → text
+		.replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+		// Images: ![alt](url) → alt
+		.replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
+		// Bold: **text** or __text__
+		.replace(/\*\*(.+?)\*\*/g, '$1')
+		.replace(/__(.+?)__/g, '$1')
+		// Italic: *text* or _text_
+		.replace(/\*(.+?)\*/g, '$1')
+		.replace(/_(.+?)_/g, '$1')
+		// Strikethrough: ~~text~~
+		.replace(/~~(.+?)~~/g, '$1')
+		// Inline code: `text`
+		.replace(/`([^`]+)`/g, '$1');
+}
+
+// ── Helpers ──────────────────────────────────────────────────
+
+function escapeHtml(s: string): string {
+	return s
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;');
+}
+
+function escapeAttr(s: string): string {
+	return s
+		.replace(/&/g, '&amp;')
+		.replace(/"/g, '&quot;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;');
+}
+
+/**
+ * Escape markdown-significant characters in plain text that will be
+ * inserted into a markdown context. Only escapes characters that would
+ * otherwise trigger formatting.
+ */
+function escapeMarkdown(s: string): string {
+	// Escape characters that start markdown formatting tokens
+	// when they appear in text nodes (i.e. user typed them literally)
+	return s.replace(/([\\*_`~\[\]])/g, '\\$1');
+}
+
+/**
+ * Normalize a contentEditable element's DOM to clean up browser quirks.
+ * Call this after paste or format operations.
+ */
+export function normalizeEditableDom(el: HTMLElement): void {
+	// Replace <b> with <strong>, <i> with <em>
+	for (const b of Array.from(el.querySelectorAll('b'))) {
+		const strong = document.createElement('strong');
+		strong.innerHTML = b.innerHTML;
+		b.replaceWith(strong);
+	}
+	for (const i of Array.from(el.querySelectorAll('i'))) {
+		const em = document.createElement('em');
+		em.innerHTML = i.innerHTML;
+		i.replaceWith(em);
+	}
+
+	// Remove styled spans (browser formatting artifacts)
+	for (const span of Array.from(el.querySelectorAll('span[style]'))) {
+		// Check if the style indicates bold or italic and convert
+		const style = (span as HTMLElement).style;
+		const parent = span.parentNode;
+		if (!parent) continue;
+
+		if (style.fontWeight === 'bold' || parseInt(style.fontWeight) >= 700) {
+			const strong = document.createElement('strong');
+			strong.innerHTML = span.innerHTML;
+			span.replaceWith(strong);
+		} else if (style.fontStyle === 'italic') {
+			const em = document.createElement('em');
+			em.innerHTML = span.innerHTML;
+			span.replaceWith(em);
+		} else {
+			// Unwrap the span, keeping its children
+			while (span.firstChild) {
+				parent.insertBefore(span.firstChild, span);
+			}
+			span.remove();
+		}
+	}
+
+	// Flatten block elements that contentEditable may create
+	for (const div of Array.from(el.querySelectorAll('div, p'))) {
+		const parent = div.parentNode;
+		if (!parent || div === el) continue;
+		// Replace with a space + children
+		if (div.previousSibling) {
+			parent.insertBefore(document.createTextNode(' '), div);
+		}
+		while (div.firstChild) {
+			parent.insertBefore(div.firstChild, div);
+		}
+		div.remove();
+	}
+}

package/app/src/lib/editor/markdoc-highlight.ts

@@ -0,0 +1,74 @@
+import {
+	ViewPlugin,
+	Decoration,
+	type DecorationSet,
+	type EditorView,
+	type ViewUpdate,
+} from '@codemirror/view';
+import { RangeSetBuilder } from '@codemirror/state';
+import type { Extension } from '@codemirror/state';
+
+const tagDeco = Decoration.mark({ class: 'cm-markdoc-tag' });
+const bracketDeco = Decoration.mark({ class: 'cm-markdoc-bracket' });
+const nameDeco = Decoration.mark({ class: 'cm-markdoc-name' });
+
+// Matches: {% tagname ... %}, {% /tagname %}, {% tagname ... /%}
+const TAG_RE = /\{%\s*(\/?)(\w[\w-]*)((?:\s+[^%]*)?)(\/?)\s*%\}/g;
+
+function buildDecorations(view: EditorView): DecorationSet {
+	const ranges: { from: number; to: number; deco: Decoration }[] = [];
+
+	for (const { from, to } of view.visibleRanges) {
+		const text = view.state.doc.sliceString(from, to);
+		TAG_RE.lastIndex = 0;
+
+		let match: RegExpExecArray | null;
+		while ((match = TAG_RE.exec(text)) !== null) {
+			const start = from + match.index;
+			const end = start + match[0].length;
+
+			ranges.push({ from: start, to: end, deco: tagDeco });
+			ranges.push({ from: start, to: start + 2, deco: bracketDeco });
+			ranges.push({ from: end - 2, to: end, deco: bracketDeco });
+
+			const slash = match[1];
+			const name = match[2];
+			const nameOffset = match[0].indexOf(slash + name, 2);
+			const nameStart = start + nameOffset + slash.length;
+			ranges.push({ from: nameStart, to: nameStart + name.length, deco: nameDeco });
+		}
+	}
+
+	ranges.sort((a, b) => a.from - b.from || a.to - b.to);
+
+	const builder = new RangeSetBuilder<Decoration>();
+	for (const r of ranges) {
+		builder.add(r.from, r.to, r.deco);
+	}
+	return builder.finish();
+}
+
+const markdocPlugin = ViewPlugin.fromClass(
+	class {
+		decorations: DecorationSet;
+
+		constructor(view: EditorView) {
+			this.decorations = buildDecorations(view);
+		}
+
+		update(update: ViewUpdate) {
+			if (update.docChanged || update.viewportChanged) {
+				this.decorations = buildDecorations(update.view);
+			}
+		}
+	},
+	{ decorations: (v) => v.decorations },
+);
+
+/**
+ * Creates a CodeMirror extension that highlights Markdoc tag syntax.
+ * Adds visual decoration to `{% tagname %}` and `{% /tagname %}` blocks.
+ */
+export function markdocHighlight(): Extension {
+	return markdocPlugin;
+}

package/app/src/lib/editor/rune-palette.ts

@@ -0,0 +1,77 @@
+import {
+	type CompletionContext,
+	type CompletionResult,
+	type Completion,
+	type CompletionSource,
+} from '@codemirror/autocomplete';
+import type { RuneInfo } from '../api/client.js';
+
+/**
+ * Build a snippet string for inserting a rune.
+ * Self-closing runes: `{% name /%}`
+ * Block runes: `{% name %}\n\n{% /name %}`
+ */
+function buildSnippet(rune: RuneInfo): string {
+	// Build required attribute defaults
+	const attrParts: string[] = [];
+	for (const [name, attr] of Object.entries(rune.attributes)) {
+		if (attr.required) {
+			const defaultVal = attr.values?.[0] ?? '';
+			attrParts.push(`${name}="${defaultVal}"`);
+		}
+	}
+	const attrStr = attrParts.length > 0 ? ' ' + attrParts.join(' ') : '';
+
+	if (rune.selfClosing) {
+		return `{% ${rune.name}${attrStr} /%}`;
+	}
+	return `{% ${rune.name}${attrStr} %}\n\n{% /${rune.name} %}`;
+}
+
+/**
+ * Creates a CompletionSource for the rune palette triggered by `/`.
+ * Accepts a getter function so runes are read at query time (not creation time).
+ */
+export function runeCompletionSource(getRunes: () => RuneInfo[]): CompletionSource {
+	return (context: CompletionContext): CompletionResult | null => {
+		const word = context.matchBefore(/\/\w*/);
+		if (!word) return null;
+
+		// Only trigger at start of line or after whitespace
+		if (word.from > 0) {
+			const charBefore = context.state.doc.sliceString(word.from - 1, word.from);
+			if (charBefore.trim() !== '') return null;
+		}
+
+		const runes = getRunes();
+		if (runes.length === 0) return null;
+
+		const slashFrom = word.from; // position of the `/` trigger character
+
+		const completions: Completion[] = runes.map((rune) => ({
+			label: rune.name,
+			detail: rune.category,
+			info: rune.description,
+			section: rune.category,
+			type: 'keyword',
+			apply: (view, _completion, from, to) => {
+				const snippet = buildSnippet(rune);
+				// Replace from the `/` to remove the trigger character
+				view.dispatch({
+					changes: { from: slashFrom, to, insert: snippet },
+					selection: {
+						anchor: rune.selfClosing
+							? slashFrom + snippet.indexOf('/%}')
+							: slashFrom + snippet.indexOf('%}') + 2 + 1,
+					},
+				});
+			},
+		}));
+
+		return {
+			from: slashFrom + 1, // filter starts after `/` so "hint" matches typed "h"
+			options: completions,
+			filter: true,
+		};
+	};
+}