@refrakt-md/editor 0.8.3 → 0.8.4

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,
+		};
+	};
+}

package/app/src/lib/editor/section-mapper.ts

@@ -0,0 +1,476 @@
+import { parseContentTree, type ContentNode } from './block-parser.js';
+import { stripInlineMarkdown } from './inline-markdown.js';
+
+export interface SectionMapping {
+	/** The data-name value from the rendered HTML */
+	dataName: string;
+	/** Plain text content (without markdown syntax) — used for matching */
+	text: string;
+	/** Original markdown source line(s) */
+	source: string;
+	/** Prefix to preserve when editing (e.g., "## " for headings, "> " for blockquotes) */
+	sourcePrefix: string;
+	/** Inline markdown content after prefix stripping, preserving formatting (links, bold, etc.) */
+	inlineSource: string;
+}
+
+/**
+ * Check whether a Shadow DOM element is an editable leaf section.
+ * Returns true for elements with only inline content (text, em, strong, a, code, etc.)
+ * and false for wrapper elements containing block-level children.
+ */
+export function isEditableSection(el: HTMLElement): boolean {
+	const blockTags = new Set([
+		'DIV', 'SECTION', 'ARTICLE', 'HEADER', 'FOOTER', 'NAV',
+		'UL', 'OL', 'LI', 'TABLE', 'BLOCKQUOTE', 'PRE', 'FIGURE',
+		'DETAILS', 'SUMMARY', 'ASIDE', 'MAIN', 'FORM',
+	]);
+	for (const child of el.children) {
+		if (blockTags.has(child.tagName)) return false;
+	}
+	return true;
+}
+
+/**
+ * Extract the plain text from a markdown source line, stripping syntax prefixes.
+ * Returns { text, prefix } where prefix is the markdown syntax to preserve.
+ */
+function stripMarkdownPrefix(source: string): { text: string; prefix: string } {
+	const trimmed = source.trim();
+
+	// Heading: ## text
+	const headingMatch = trimmed.match(/^(#{1,6}\s+)(.*)/);
+	if (headingMatch) return { text: headingMatch[2], prefix: headingMatch[1] };
+
+	// Blockquote: > text
+	const quoteMatch = trimmed.match(/^(>\s*)(.*)/);
+	if (quoteMatch) return { text: quoteMatch[2], prefix: quoteMatch[1] };
+
+	// Plain paragraph
+	return { text: trimmed, prefix: '' };
+}
+
+/**
+ * Normalize text for comparison: collapse whitespace, trim, lowercase.
+ */
+function normalizeText(s: string): string {
+	return s.replace(/\s+/g, ' ').trim().toLowerCase();
+}
+
+/**
+ * Find the section mapping for a given data-name and its rendered text content
+ * within a rune's inner content.
+ *
+ * Uses text-matching: strips markdown prefixes from each content node's source
+ * and compares with the rendered text to find the matching node.
+ */
+export function findSectionMapping(
+	innerContent: string,
+	dataName: string,
+	renderedText: string,
+): SectionMapping | null {
+	const nodes = parseContentTree(innerContent);
+	const normalizedRendered = normalizeText(renderedText);
+
+	// Try to match each node's text against the rendered text
+	for (const node of nodes) {
+		const { text, prefix } = stripMarkdownPrefix(node.source);
+		const plainText = stripInlineMarkdown(text);
+		if (normalizeText(plainText) === normalizedRendered) {
+			return {
+				dataName,
+				text: plainText,
+				source: node.source,
+				sourcePrefix: prefix,
+				inlineSource: text,
+			};
+		}
+
+		// For multi-line paragraphs, check if the joined text matches
+		if (node.type === 'paragraph') {
+			const joined = node.source.split('\n').map(l => l.trim()).join(' ');
+			const joinedPlain = stripInlineMarkdown(joined);
+			if (normalizeText(joinedPlain) === normalizedRendered) {
+				return {
+					dataName,
+					text: joinedPlain,
+					source: node.source,
+					sourcePrefix: '',
+					inlineSource: joined,
+				};
+			}
+		}
+	}
+
+	// For list nodes, try matching within individual list items
+	for (const node of nodes) {
+		if (node.type !== 'list') continue;
+		const result = findListItemMapping(node.source, dataName, normalizedRendered);
+		if (result) return result;
+	}
+
+	// Fallback: try matching against child nodes of rune nodes
+	for (const node of nodes) {
+		if (node.children) {
+			const result = findSectionMapping(
+				node.innerContent ?? '',
+				dataName,
+				renderedText,
+			);
+			if (result) return result;
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Split a list source into individual item sources.
+ * Each item starts with a list marker (-, *, +, or 1.) and may have
+ * indented continuation lines.
+ */
+function splitListItems(listSource: string): string[] {
+	const lines = listSource.split('\n');
+	const items: string[] = [];
+	let current: string[] = [];
+
+	for (const line of lines) {
+		if (/^[-*+]\s|^\d+\.\s/.test(line) && current.length > 0) {
+			items.push(current.join('\n'));
+			current = [line];
+		} else {
+			current.push(line);
+		}
+	}
+	if (current.length > 0) items.push(current.join('\n'));
+	return items;
+}
+
+/**
+ * Try to find a section mapping within a list item's content.
+ * Handles bold text on the first line (definition title) and
+ * continuation lines (definition description).
+ */
+function findListItemMapping(
+	listSource: string,
+	dataName: string,
+	normalizedRendered: string,
+): SectionMapping | null {
+	const items = splitListItems(listSource);
+
+	for (const itemSrc of items) {
+		const lines = itemSrc.split('\n');
+		const firstLine = lines[0];
+
+		// Match simple list item: "- text" or "1. text"
+		const simpleMatch = firstLine.match(/^([-*+]\s+|(\d+)\.\s+)(.*)/);
+		if (simpleMatch) {
+			const [, prefix, , itemText] = simpleMatch;
+			const plainText = stripInlineMarkdown(itemText);
+			if (normalizeText(plainText) === normalizedRendered) {
+				return {
+					dataName,
+					text: plainText,
+					source: firstLine,
+					sourcePrefix: prefix,
+					inlineSource: itemText,
+				};
+			}
+		}
+
+		// Match bold text on first line: "- **Title**", "- **Title** extra",
+		// or with content before bold: "- {% icon ... /%} **Title**"
+		const boldMatch = firstLine.match(/^([-*+]\s+.*?)\*\*(.+?)\*\*(.*)/);
+		if (boldMatch) {
+			const [, prefix, boldText] = boldMatch;
+			if (normalizeText(boldText) === normalizedRendered) {
+				return {
+					dataName,
+					text: boldText,
+					source: firstLine,
+					sourcePrefix: prefix,
+					inlineSource: `**${boldText}**${boldMatch[3]}`,
+				};
+			}
+		}
+
+		// Match continuation lines (description text)
+		if (lines.length > 1) {
+			const contLines = lines.slice(1)
+				.map(l => l.replace(/^\s+/, ''))
+				.filter(Boolean);
+			const contText = contLines.join(' ');
+			const contPlain = stripInlineMarkdown(contText);
+			if (contLines.length > 0 && normalizeText(contPlain) === normalizedRendered) {
+				const contSource = lines.slice(1).join('\n');
+				// Find indentation from first non-empty continuation line
+				// (lines[1] may be a blank separator line)
+				const firstContentLine = lines.slice(1).find(l => l.trim().length > 0);
+				const indentMatch = firstContentLine?.match(/^(\s+)/);
+				const indent = indentMatch ? indentMatch[1] : '';
+				// Include leading blank lines in the prefix so the replacement
+				// preserves the blank-line separator between title and description
+				const firstContentIdx = firstContentLine ? contSource.indexOf(firstContentLine) : 0;
+				const prefix = contSource.slice(0, firstContentIdx) + indent;
+				return {
+					dataName,
+					text: contPlain,
+					source: contSource,
+					sourcePrefix: prefix,
+					inlineSource: contText,
+				};
+			}
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Apply an inline edit to a section within the rune's inner content.
+ * Finds the original source and replaces it with the new inline markdown,
+ * preserving markdown syntax prefixes (e.g., "## " for headings).
+ */
+export function applySectionEdit(
+	innerContent: string,
+	mapping: SectionMapping,
+	newInlineSource: string,
+): string {
+	const newSource = mapping.sourcePrefix + newInlineSource;
+	const idx = innerContent.indexOf(mapping.source);
+	if (idx === -1) return innerContent;
+	return innerContent.slice(0, idx) + newSource + innerContent.slice(idx + mapping.source.length);
+}
+
+// ── Action item mapping ──────────────────────────────────────────────
+
+export interface ActionMapping {
+	/** The full source line (e.g., "- [Get started](/docs/getting-started)") */
+	source: string;
+	/** The list item prefix (e.g., "- ") */
+	listPrefix: string;
+	/** Link display text */
+	text: string;
+	/** Link URL */
+	href: string;
+}
+
+/**
+ * Find a markdown link within a list item in the rune's inner content,
+ * matching by rendered text and href.
+ */
+export function findActionMapping(
+	innerContent: string,
+	renderedText: string,
+	href: string,
+): ActionMapping | null {
+	const normalizedRendered = normalizeText(renderedText);
+	const lines = innerContent.split('\n');
+
+	for (const line of lines) {
+		const match = line.match(/^(\s*[-*+]\s+)\[([^\]]*)\]\(([^)]*)\)\s*$/);
+		if (!match) continue;
+
+		const [, listPrefix, linkText, linkUrl] = match;
+		if (
+			normalizeText(linkText) === normalizedRendered ||
+			linkUrl === href
+		) {
+			return { source: line, listPrefix, text: linkText, href: linkUrl };
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Apply an action edit: replace the markdown link in the inner content.
+ */
+export function applyActionEdit(
+	innerContent: string,
+	mapping: ActionMapping,
+	newText: string,
+	newHref: string,
+): string {
+	const newSource = `${mapping.listPrefix}[${newText}](${newHref})`;
+	const idx = innerContent.indexOf(mapping.source);
+	if (idx === -1) return innerContent;
+	return innerContent.slice(0, idx) + newSource + innerContent.slice(idx + mapping.source.length);
+}
+
+// ── Command (fenced code block) mapping ──────────────────────────────
+
+export interface CommandMapping {
+	/** Full fenced code block source (including backtick delimiters) */
+	source: string;
+	/** Just the code content between the fences */
+	code: string;
+	/** Language tag (e.g., 'bash', 'sh') */
+	language: string;
+	/** Full opening line before the newline (e.g., "```js" or "````markdoc") */
+	opener: string;
+	/** Backtick delimiter sequence (e.g., "```" or "````") */
+	delimiter: string;
+}
+
+/**
+ * Find a fenced code block in the rune's inner content,
+ * matching by comparing the code content to the rendered text.
+ *
+ * Handles 3+ backtick delimiters and info strings after the language tag
+ * (e.g., `` ```yaml title="config.ts" `` or `` ````markdoc ``).
+ */
+export function findCommandMapping(
+	innerContent: string,
+	renderedText: string,
+): CommandMapping | null {
+	const normalizedRendered = normalizeText(renderedText);
+	// Match 3+ backticks, optional language, optional info string, then
+	// use a backreference (\2) to match the same-length closing delimiter.
+	const fenceRegex = /^((`{3,})(\w*)[^\n]*\n)([\s\S]*?)\n\2\s*$/gm;
+	let match;
+
+	while ((match = fenceRegex.exec(innerContent)) !== null) {
+		const [fullMatch, opener, delimiter, language, code] = match;
+		if (normalizeText(code) === normalizedRendered) {
+			return {
+				source: fullMatch,
+				code,
+				language: language || '',
+				opener: opener.trimEnd(),
+				delimiter,
+			};
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Apply a command edit: replace the code content within the fenced code block.
+ * Preserves the original opening line (including delimiter length and info string)
+ * and uses the same backtick delimiter for the closing fence.
+ */
+export function applyCommandEdit(
+	innerContent: string,
+	mapping: CommandMapping,
+	newCode: string,
+): string {
+	const newSource = mapping.opener + '\n' + newCode + '\n' + mapping.delimiter;
+	const idx = innerContent.indexOf(mapping.source);
+	if (idx === -1) return innerContent;
+	return innerContent.slice(0, idx) + newSource + innerContent.slice(idx + mapping.source.length);
+}
+
+/**
+ * Apply a language change to a fenced code block.
+ * Reconstructs the opener line with the new language, preserving
+ * the backtick delimiter length and any info string after the language tag.
+ */
+export function applyLanguageEdit(
+	innerContent: string,
+	mapping: CommandMapping,
+	newLanguage: string,
+): string {
+	const afterDelimiter = mapping.opener.slice(mapping.delimiter.length);
+	const infoString = afterDelimiter.replace(/^\w*/, '').trim();
+	const newOpener = mapping.delimiter + newLanguage + (infoString ? ' ' + infoString : '');
+	const newSource = newOpener + '\n' + mapping.code + '\n' + mapping.delimiter;
+	const idx = innerContent.indexOf(mapping.source);
+	if (idx === -1) return innerContent;
+	return innerContent.slice(0, idx) + newSource + innerContent.slice(idx + mapping.source.length);
+}
+
+// ── Image mapping ────────────────────────────────────────────────────
+
+export interface ImageMapping {
+	/** Full source line (e.g., "![alt text](/path/to/image.png)") */
+	source: string;
+	/** Alt text */
+	alt: string;
+	/** Image path */
+	src: string;
+}
+
+/**
+ * Find a markdown image in the rune's inner content,
+ * matching by rendered src (from the <img> element's src attribute).
+ */
+export function findImageMapping(
+	innerContent: string,
+	renderedSrc: string,
+): ImageMapping | null {
+	const lines = innerContent.split('\n');
+	for (const line of lines) {
+		const match = line.trim().match(/^!\[([^\]]*)\]\(([^)]*)\)\s*$/);
+		if (!match) continue;
+		const [, alt, src] = match;
+		if (src === renderedSrc) {
+			return { source: line.trim(), alt, src };
+		}
+	}
+	return null;
+}
+
+/**
+ * Apply an image edit: replace the markdown image syntax in the inner content.
+ */
+export function applyImageEdit(
+	innerContent: string,
+	mapping: ImageMapping,
+	newAlt: string,
+	newSrc: string,
+): string {
+	const newSource = `![${newAlt}](${newSrc})`;
+	const idx = innerContent.indexOf(mapping.source);
+	if (idx === -1) return innerContent;
+	return innerContent.slice(0, idx) + newSource + innerContent.slice(idx + mapping.source.length);
+}
+
+// ── Icon (self-closing tag) mapping ──────────────────────────────────
+
+export interface IconMapping {
+	/** Full source text of the icon tag (e.g., '{% icon name="rocket" /%}') */
+	source: string;
+	/** Current icon name (e.g., "rocket" or "hint/warning") */
+	name: string;
+}
+
+/**
+ * Find a {% icon name="..." /%} tag in the rune's inner content,
+ * matching by the rendered icon name (from the data-icon attribute).
+ */
+export function findIconMapping(
+	innerContent: string,
+	renderedIconName: string,
+): IconMapping | null {
+	const iconRegex = /\{%\s*icon\s+[^%]*name=["']([^"']+)["'][^%]*\/%\}/g;
+	let match;
+
+	while ((match = iconRegex.exec(innerContent)) !== null) {
+		const [fullMatch, name] = match;
+		if (name === renderedIconName) {
+			return { source: fullMatch, name };
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Apply an icon edit: replace the icon name in the {% icon %} tag.
+ * Preserves all other attributes (size, etc.) and the tag structure.
+ */
+export function applyIconEdit(
+	innerContent: string,
+	mapping: IconMapping,
+	newIconName: string,
+): string {
+	const newSource = mapping.source.replace(
+		/name=["'][^"']+["']/,
+		`name="${newIconName}"`,
+	);
+	const idx = innerContent.indexOf(mapping.source);
+	if (idx === -1) return innerContent;
+	return innerContent.slice(0, idx) + newSource + innerContent.slice(idx + mapping.source.length);
+}