@refrakt-md/editor 0.8.3 → 0.8.5

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,95 @@
+import {
+	type CompletionContext,
+	type CompletionResult,
+	type Completion,
+	type CompletionSource,
+} from '@codemirror/autocomplete';
+import type { RuneInfo } from '../api/client.js';
+
+/**
+ * Strip VSCode snippet placeholder syntax for plain-text insertion:
+ *   ${N:text} → text
+ *   ${N|a,b,c|} → a (first choice)
+ *   $0 / $N → empty string
+ */
+function stripSnippetPlaceholders(line: string): string {
+	return line
+		.replace(/\$\{\d+\|([^,}]+)[^}]*\}/g, '$1')  // ${N|first,...|} → first
+		.replace(/\$\{\d+:([^}]*)}/g, '$1')             // ${N:text} → text
+		.replace(/\$\d+/g, '');                          // $0, $1 → empty
+}
+
+/**
+ * Build a snippet string for inserting a rune.
+ * Prefers the rune's hand-crafted snippet (with VSCode placeholders stripped).
+ * Falls back to a basic template from schema attributes.
+ */
+function buildSnippet(rune: RuneInfo): string {
+	// Use hand-crafted snippet if available
+	if (rune.snippet && rune.snippet.length > 0) {
+		return rune.snippet.map(stripSnippetPlaceholders).join('\n');
+	}
+
+	// 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,
+		};
+	};
+}