@refrakt-md/editor 0.8.3 → 0.8.4

package/app/src/lib/state/editor.svelte.ts

@@ -0,0 +1,151 @@
+import { parseFrontmatterClient, serializeFrontmatter, type Frontmatter } from '../utils/frontmatter.js';
+import type { RuneInfo, RouteRule } from '../api/client.js';
+import type { RendererNode } from '@refrakt-md/transform';
+
+interface TreeNode {
+	name: string;
+	type: 'directory' | 'page' | 'layout';
+	path: string;
+	draft?: boolean;
+	children?: TreeNode[];
+	layout?: TreeNode;
+}
+
+class EditorState {
+	tree: TreeNode | null = $state(null);
+	currentPath: string | null = $state(null);
+	savedContent = $state('');
+	editorContent = $state('');
+	frontmatter: Frontmatter = $state({});
+	bodyContent = $state('');
+
+	/** Whether the frontmatter panel is open */
+	frontmatterOpen = $state(false);
+	/** Whether raw YAML mode is active */
+	frontmatterRawMode = $state(false);
+
+	/** Editor view mode */
+	editorMode: 'preview' | 'blocks' | 'code' = $state('blocks');
+
+	treeLoading = $state(false);
+	fileLoading = $state(false);
+	saving = $state(false);
+	saveJustCompleted = $state(false);
+	error: string | null = $state(null);
+
+	/** Rune metadata for autocomplete/palette */
+	runes: RuneInfo[] = $state([]);
+
+	/** Route rules from refrakt.config.json */
+	routeRules: RouteRule[] = $state([]);
+
+	/** Preview viewport preset */
+	viewport: 'desktop' | 'tablet' | 'mobile' = $state('desktop');
+
+	/** Preview color scheme */
+	previewTheme: 'light' | 'dark' = $state('light');
+
+	/** Theme CSS for inline block previews */
+	themeCss = $state('');
+	/** Theme config for inline block previews (JSON-safe, no postTransform) */
+	themeConfig: import('@refrakt-md/transform').ThemeConfig | null = $state(null);
+
+	/** Syntax highlight transform (loaded async via Shiki) */
+	highlightTransform: ((tree: RendererNode) => RendererNode) | null = $state(null);
+	/** CSS generated by the highlight transform (e.g. theme overrides) */
+	highlightCss = $state('');
+
+	/** Whether the Svelte preview runtime is available */
+	previewRuntimeAvailable = $state(false);
+	/** Whether the preview runtime iframe has signalled ready */
+	previewRuntimeReady = $state(false);
+
+	/** Directories the user has explicitly expanded (all start collapsed) */
+	expandedDirs: Set<string> = $state(new Set());
+
+	/** External file change notification (set by SSE watcher) */
+	externalChange: { path: string; event: string } | null = $state(null);
+
+	/** Community rune Markdoc schemas (loaded from /api/community-tags.js bundle) */
+	communityTags: Record<string, unknown> | null = $state(null);
+	/** Community rune postTransform functions (loaded from /api/community-tags.js bundle) */
+	communityPostTransforms: Record<string, Function> | null = $state(null);
+	/** Community rune styles configs (loaded from /api/community-tags.js bundle) */
+	communityStyles: Record<string, Record<string, unknown>> | null = $state(null);
+
+	/** Aggregated cross-page pipeline data (fetched from /api/aggregated on startup) */
+	aggregated: Record<string, unknown> = $state({});
+
+	/** Whether the left sidenav is open */
+	sidenavOpen = $state(true);
+
+	dirty = $derived(this.editorContent !== this.savedContent);
+
+	/** Whether the current file is a layout or a regular page */
+	currentFileType = $derived<'page' | 'layout'>(
+		this.currentPath?.endsWith('_layout.md') ? 'layout' : 'page'
+	);
+
+	/**
+	 * Load a file's raw content into the editor, splitting frontmatter and body.
+	 */
+	loadFile(path: string, raw: string) {
+		const { frontmatter, body } = parseFrontmatterClient(raw);
+		this.currentPath = path;
+		this.savedContent = raw;
+		this.editorContent = raw;
+		this.frontmatter = frontmatter;
+		this.bodyContent = body;
+		this.frontmatterRawMode = false;
+	}
+
+	/**
+	 * Update the markdown body (called from CodeMirror).
+	 * Reconstructs editorContent from frontmatter + new body.
+	 */
+	updateBody(body: string) {
+		this.bodyContent = body;
+		this.editorContent = serializeFrontmatter(this.frontmatter, body);
+	}
+
+	/**
+	 * Update a single frontmatter field.
+	 * Reconstructs editorContent from updated frontmatter + body.
+	 */
+	updateFrontmatterField(key: string, value: unknown) {
+		if (value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
+			const { [key]: _, ...rest } = this.frontmatter;
+			this.frontmatter = rest;
+		} else {
+			this.frontmatter = { ...this.frontmatter, [key]: value };
+		}
+		this.editorContent = serializeFrontmatter(this.frontmatter, this.bodyContent);
+	}
+
+	/**
+	 * Replace the entire frontmatter object (e.g. from raw YAML editor).
+	 * Reconstructs editorContent from new frontmatter + body.
+	 */
+	replaceFrontmatter(fm: Frontmatter) {
+		this.frontmatter = fm;
+		this.editorContent = serializeFrontmatter(fm, this.bodyContent);
+	}
+
+	toggleDir(path: string): void {
+		const next = new Set(this.expandedDirs);
+		if (next.has(path)) {
+			next.delete(path);
+		} else {
+			next.add(path);
+		}
+		this.expandedDirs = next;
+	}
+
+	isDirExpanded(path: string): boolean {
+		return this.expandedDirs.has(path);
+	}
+}
+
+export const editorState = new EditorState();
+
+export type { TreeNode, Frontmatter, RuneInfo };

package/app/src/lib/utils/frontmatter.ts

@@ -0,0 +1,43 @@
+import yaml from 'yaml';
+
+export interface Frontmatter {
+	title?: string;
+	description?: string;
+	slug?: string;
+	draft?: boolean;
+	redirect?: string;
+	order?: number;
+	date?: string;
+	author?: string;
+	tags?: string[];
+	image?: string;
+	[key: string]: unknown;
+}
+
+/**
+ * Parse YAML frontmatter from raw markdown content (browser-side).
+ * Returns the frontmatter object and the body content without frontmatter.
+ */
+export function parseFrontmatterClient(raw: string): { frontmatter: Frontmatter; body: string } {
+	const match = raw.match(/^---\r?\n([\s\S]*?\r?\n)?---\r?\n?([\s\S]*)$/);
+
+	if (!match) {
+		return { frontmatter: {}, body: raw };
+	}
+
+	const frontmatter = (yaml.parse(match[1] ?? '') as Frontmatter) ?? {};
+	const body = match[2];
+
+	return { frontmatter, body };
+}
+
+/**
+ * Serialize a frontmatter object and body content back into a raw markdown string.
+ * If frontmatter has no keys, returns just the body content.
+ */
+export function serializeFrontmatter(frontmatter: Frontmatter, body: string): string {
+	const keys = Object.keys(frontmatter);
+	if (keys.length === 0) return body;
+	const yamlStr = yaml.stringify(frontmatter, { lineWidth: 0 }).trimEnd();
+	return `---\n${yamlStr}\n---\n${body}`;
+}

package/app/src/lib/utils/layout-parser.ts

@@ -0,0 +1,197 @@
+// ── Types ────────────────────────────────────────────────────────────────
+
+export interface ParsedRegion {
+	name: string;
+	mode: 'replace' | 'prepend' | 'append';
+	content: string;
+}
+
+export interface ParsedLayout {
+	regions: ParsedRegion[];
+}
+
+export interface NavGroup {
+	title: string;
+	items: string[];
+}
+
+export interface ParsedNav {
+	groups: NavGroup[];
+	ungrouped: string[];
+}
+
+// ── Layout Parsing ───────────────────────────────────────────────────────
+
+const REGION_RE = /\{%\s*region\s+([^%]*?)%\}([\s\S]*?)\{%\s*\/region\s*%\}/g;
+const ATTR_RE = /(\w+)="([^"]*)"/g;
+
+/**
+ * Parse raw `_layout.md` content into structured regions.
+ * Extracts `{% region name="..." mode="..." %}...{% /region %}` blocks.
+ */
+export function parseLayoutClient(raw: string): ParsedLayout {
+	const regions: ParsedRegion[] = [];
+
+	let match: RegExpExecArray | null;
+	REGION_RE.lastIndex = 0;
+
+	while ((match = REGION_RE.exec(raw)) !== null) {
+		const attrsStr = match[1];
+		const content = match[2];
+
+		const attrs: Record<string, string> = {};
+		let attrMatch: RegExpExecArray | null;
+		ATTR_RE.lastIndex = 0;
+		while ((attrMatch = ATTR_RE.exec(attrsStr)) !== null) {
+			attrs[attrMatch[1]] = attrMatch[2];
+		}
+
+		const name = attrs.name || '';
+		const mode = (attrs.mode as ParsedRegion['mode']) || 'replace';
+
+		// Trim one leading and one trailing newline from content
+		let trimmed = content;
+		if (trimmed.startsWith('\n')) trimmed = trimmed.slice(1);
+		if (trimmed.endsWith('\n')) trimmed = trimmed.slice(0, -1);
+
+		regions.push({ name, mode, content: trimmed });
+	}
+
+	return { regions };
+}
+
+/**
+ * Serialize a `ParsedLayout` back to `_layout.md` format.
+ */
+export function serializeLayout(layout: ParsedLayout): string {
+	const parts: string[] = ['{% layout %}'];
+
+	for (const region of layout.regions) {
+		const modeAttr = region.mode !== 'replace' ? ` mode="${region.mode}"` : '';
+		parts.push(`{% region name="${region.name}"${modeAttr} %}`);
+		parts.push(region.content);
+		parts.push('{% /region %}');
+		parts.push('');
+	}
+
+	parts.push('{% /layout %}');
+
+	return parts.join('\n');
+}
+
+// ── Nav Parsing ──────────────────────────────────────────────────────────
+
+const NAV_OPEN_RE = /\{%\s*nav\s*%\}/;
+const NAV_CLOSE_RE = /\{%\s*\/nav\s*%\}/;
+
+/**
+ * Check if a string contains a `{% nav %}` block.
+ */
+export function containsNav(content: string): boolean {
+	return NAV_OPEN_RE.test(content);
+}
+
+/**
+ * Extract the content inside `{% nav %}...{% /nav %}` tags.
+ * Returns the inner content, or null if no nav block found.
+ */
+export function extractNavContent(content: string): string | null {
+	const openMatch = NAV_OPEN_RE.exec(content);
+	if (!openMatch) return null;
+
+	const afterOpen = openMatch.index + openMatch[0].length;
+	const closeMatch = NAV_CLOSE_RE.exec(content.slice(afterOpen));
+	if (!closeMatch) return null;
+
+	let inner = content.slice(afterOpen, afterOpen + closeMatch.index);
+	if (inner.startsWith('\n')) inner = inner.slice(1);
+	if (inner.endsWith('\n')) inner = inner.slice(0, -1);
+	return inner;
+}
+
+/**
+ * Replace the content inside `{% nav %}...{% /nav %}` with new content.
+ */
+export function replaceNavContent(regionContent: string, newNavContent: string): string {
+	const openMatch = NAV_OPEN_RE.exec(regionContent);
+	if (!openMatch) return regionContent;
+
+	const afterOpen = openMatch.index + openMatch[0].length;
+	const closeMatch = NAV_CLOSE_RE.exec(regionContent.slice(afterOpen));
+	if (!closeMatch) return regionContent;
+
+	const before = regionContent.slice(0, afterOpen);
+	const after = regionContent.slice(afterOpen + closeMatch.index);
+
+	return `${before}\n${newNavContent}\n${after}`;
+}
+
+/**
+ * Parse the inner content of a `{% nav %}` block into groups + items.
+ * Groups are delimited by `## Heading` lines.
+ * Items are `- slug` list items.
+ */
+export function parseNavContent(content: string): ParsedNav {
+	const lines = content.split('\n');
+	const groups: NavGroup[] = [];
+	const ungrouped: string[] = [];
+
+	let currentGroup: NavGroup | null = null;
+
+	for (const line of lines) {
+		const trimmed = line.trim();
+
+		// Heading = new group
+		const headingMatch = trimmed.match(/^##\s+(.+)$/);
+		if (headingMatch) {
+			currentGroup = { title: headingMatch[1], items: [] };
+			groups.push(currentGroup);
+			continue;
+		}
+
+		// List item = nav item
+		const itemMatch = trimmed.match(/^-\s+(.+)$/);
+		if (itemMatch) {
+			const slug = itemMatch[1].trim();
+			if (currentGroup) {
+				currentGroup.items.push(slug);
+			} else {
+				ungrouped.push(slug);
+			}
+			continue;
+		}
+
+		// Skip blank lines and anything else
+	}
+
+	return { groups, ungrouped };
+}
+
+/**
+ * Serialize a `ParsedNav` back to nav content markdown.
+ */
+export function serializeNavContent(nav: ParsedNav): string {
+	const parts: string[] = [];
+
+	for (const slug of nav.ungrouped) {
+		parts.push(`- ${slug}`);
+	}
+
+	if (nav.ungrouped.length > 0 && nav.groups.length > 0) {
+		parts.push('');
+	}
+
+	for (let i = 0; i < nav.groups.length; i++) {
+		const group = nav.groups[i];
+		parts.push(`## ${group.title}`);
+		parts.push('');
+		for (const slug of group.items) {
+			parts.push(`- ${slug}`);
+		}
+		if (i < nav.groups.length - 1) {
+			parts.push('');
+		}
+	}
+
+	return parts.join('\n');
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/editor",
   "description": "Browser-based content editor for refrakt.md",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -40,8 +40,10 @@
     "dist",
     "app/dist",
     "app/src/lib/components",
-    "app/src/lib/editor/block-parser.ts",
-    "app/src/lib/preview/block-renderer.ts",
+    "app/src/lib/editor",
+    "app/src/lib/preview",
+    "app/src/lib/state",
+    "app/src/lib/utils",
     "app/src/lib/api/client.ts",
     "preview-runtime"
   ],
@@ -50,11 +52,11 @@
   },
   "dependencies": {
     "@markdoc/markdoc": "0.4.0",
-    "@refrakt-md/content": "0.8.3",
-    "@refrakt-md/highlight": "0.8.3",
-    "@refrakt-md/runes": "0.8.3",
-    "@refrakt-md/transform": "0.8.3",
-    "@refrakt-md/types": "0.8.3"
+    "@refrakt-md/content": "0.8.4",
+    "@refrakt-md/highlight": "0.8.4",
+    "@refrakt-md/runes": "0.8.4",
+    "@refrakt-md/transform": "0.8.4",
+    "@refrakt-md/types": "0.8.4"
   },
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.0",