@refrakt-md/editor 0.8.3 → 0.8.4

package/app/src/lib/editor/attribute-completion.ts

@@ -0,0 +1,159 @@
+import {
+	type CompletionContext,
+	type CompletionResult,
+	type CompletionSource,
+} from '@codemirror/autocomplete';
+import type { RuneInfo } from '../api/client.js';
+
+type AggregatedData = Record<string, unknown>;
+
+/**
+ * Find the Markdoc tag context at the cursor position.
+ * Returns the tag name and whether we're completing an attribute value.
+ */
+function findTagContext(
+	doc: string,
+	pos: number,
+): { tagName: string; attrName?: string; valueStart?: number } | null {
+	const before = doc.slice(Math.max(0, pos - 500), pos);
+
+	const lastClose = before.lastIndexOf('%}');
+	const lastOpen = before.lastIndexOf('{%');
+
+	if (lastOpen === -1 || (lastClose !== -1 && lastClose > lastOpen)) {
+		return null;
+	}
+
+	const tagContent = before.slice(lastOpen + 2).trimStart();
+
+	if (tagContent.startsWith('/')) return null;
+
+	const nameMatch = tagContent.match(/^(\w[\w-]*)/);
+	if (!nameMatch) return null;
+	const tagName = nameMatch[1];
+
+	const afterName = tagContent.slice(nameMatch[0].length);
+
+	// Check if we're inside an attribute value: attr="...
+	const valueMatch = afterName.match(/(\w[\w-]*)="[^"]*$/);
+	if (valueMatch) {
+		const quoteIdx = before.lastIndexOf('="');
+		return {
+			tagName,
+			attrName: valueMatch[1],
+			valueStart: Math.max(0, pos - 500) + quoteIdx + 2,
+		};
+	}
+
+	return { tagName };
+}
+
+/**
+ * Returns dynamic completion values for a given rune + attribute combination.
+ * Currently supports:
+ *   - sandbox.context  → design-context scope names
+ *   - design-context.scope → existing scope names (to warn of collisions)
+ */
+function getDynamicValues(tagName: string, attrName: string, aggregated: AggregatedData): string[] {
+	const design = aggregated['design'] as { contexts?: Record<string, unknown> } | undefined;
+	if (!design?.contexts) return [];
+	const scopes = Object.keys(design.contexts);
+	if ((tagName === 'sandbox' && attrName === 'context') ||
+		(tagName === 'design-context' && attrName === 'scope')) {
+		return scopes;
+	}
+	return [];
+}
+
+/**
+ * Creates a CompletionSource for Markdoc tag attribute names and values.
+ * Accepts getter functions so runes and aggregated data are read at query time.
+ */
+export function attributeCompletionSource(
+	getRunes: () => RuneInfo[],
+	getAggregated?: () => AggregatedData,
+): CompletionSource {
+	return (context: CompletionContext): CompletionResult | null => {
+		const doc = context.state.doc.toString();
+		const pos = context.pos;
+
+		const tagCtx = findTagContext(doc, pos);
+		if (!tagCtx) return null;
+
+		const runes = getRunes();
+		const runeMap = new Map<string, RuneInfo>();
+		for (const r of runes) {
+			runeMap.set(r.name, r);
+			for (const alias of r.aliases) {
+				runeMap.set(alias, r);
+			}
+		}
+
+		const rune = runeMap.get(tagCtx.tagName);
+		if (!rune) return null;
+
+		// Completing attribute value
+		if (tagCtx.attrName && tagCtx.valueStart !== undefined) {
+			const attr = rune.attributes[tagCtx.attrName];
+
+			// Try static enum values first
+			if (attr?.values?.length) {
+				return {
+					from: tagCtx.valueStart,
+					options: attr.values.map((v) => ({
+						label: v,
+						type: 'enum',
+					})),
+					filter: true,
+				};
+			}
+
+			// Fall back to dynamic values from aggregated data
+			const dynamic = getAggregated
+				? getDynamicValues(tagCtx.tagName, tagCtx.attrName, getAggregated())
+				: [];
+			if (dynamic.length) {
+				return {
+					from: tagCtx.valueStart,
+					options: dynamic.map((v) => ({
+						label: v,
+						type: 'variable',
+					})),
+					filter: true,
+				};
+			}
+
+			return null;
+		}
+
+		// Completing attribute name
+		const word = context.matchBefore(/\w*/);
+		if (!word) return null;
+
+		if (!context.explicit && word.from === word.to) return null;
+
+		// Get already-used attributes
+		const before = doc.slice(Math.max(0, pos - 500), pos);
+		const usedAttrs = new Set(
+			[...before.matchAll(/(\w[\w-]*)="/g)].map((m) => m[1]),
+		);
+
+		const options = Object.entries(rune.attributes)
+			.filter(([name]) => !usedAttrs.has(name))
+			.map(([name, attr]) => ({
+				label: name,
+				detail: attr.required ? 'required' : undefined,
+				type: 'property' as const,
+				apply: `${name}="`,
+				boost: attr.required ? 1 : 0,
+			}));
+
+		if (options.length === 0) return null;
+
+		return {
+			from: word.from,
+			options,
+			filter: true,
+		};
+	};
+}

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();
+	}
+}