@refrakt-md/editor 0.6.0

package/app/src/lib/components/LayoutEditor.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+	import { editorState } from '../state/editor.svelte.js';
+	import {
+		parseLayoutClient, serializeLayout,
+		type ParsedLayout, type ParsedRegion,
+	} from '../utils/layout-parser.js';
+	import RegionCard from './RegionCard.svelte';
+	import MarkdownEditor from './MarkdownEditor.svelte';
+
+	let rawMode = $state(false);
+	let layout: ParsedLayout = $state({ regions: [] });
+
+	// Parse the editor content into regions when it changes externally
+	// (e.g., file switch or save)
+	let lastParsedFrom = '';
+
+	$effect(() => {
+		const content = editorState.editorContent;
+		if (content !== lastParsedFrom) {
+			layout = parseLayoutClient(content);
+			lastParsedFrom = content;
+		}
+	});
+
+	function syncToEditor() {
+		const serialized = serializeLayout(layout);
+		lastParsedFrom = serialized;
+		editorState.editorContent = serialized;
+		editorState.bodyContent = serialized;
+	}
+
+	function handleRegionChange(idx: number, region: ParsedRegion) {
+		layout.regions[idx] = region;
+		layout = { ...layout };
+		syncToEditor();
+	}
+
+	function handleRegionDelete(idx: number) {
+		layout.regions.splice(idx, 1);
+		layout = { ...layout };
+		syncToEditor();
+	}
+
+	function handleAddRegion() {
+		layout.regions.push({ name: '', mode: 'replace', content: '' });
+		layout = { ...layout };
+		syncToEditor();
+	}
+</script>
+
+<div class="layout-editor">
+	<div class="layout-editor__header">
+		<div class="layout-editor__title-row">
+			<svg class="layout-editor__icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+				<rect x="1" y="1" width="14" height="14" rx="2" stroke="currentColor" stroke-width="1.2"/>
+				<path d="M1 5h14M6 5v10" stroke="currentColor" stroke-width="1.2"/>
+			</svg>
+			<span class="layout-editor__title">Layout</span>
+			{#if editorState.currentPath}
+				<span class="layout-editor__path">{editorState.currentPath}</span>
+			{/if}
+		</div>
+		<div class="layout-editor__mode-track">
+			<button
+				class="layout-editor__mode-btn"
+				class:active={!rawMode}
+				onclick={() => { rawMode = false; }}
+			>Visual</button>
+			<button
+				class="layout-editor__mode-btn"
+				class:active={rawMode}
+				onclick={() => { rawMode = true; }}
+			>Raw</button>
+		</div>
+	</div>
+
+	{#if rawMode}
+		<div class="layout-editor__raw">
+			<MarkdownEditor />
+		</div>
+	{:else}
+		<div class="layout-editor__regions">
+			{#if layout.regions.length === 0}
+				<div class="layout-editor__empty">
+					<p>No regions defined. Add a region to get started.</p>
+				</div>
+			{/if}
+
+			{#each layout.regions as region, idx}
+				<RegionCard
+					{region}
+					onchange={(r) => handleRegionChange(idx, r)}
+					ondelete={() => handleRegionDelete(idx)}
+				/>
+			{/each}
+
+			<button class="layout-editor__add-btn" onclick={handleAddRegion}>
+				<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+					<path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+				</svg>
+				Add Region
+			</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.layout-editor {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.layout-editor__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--ed-space-2) var(--ed-space-3);
+		border-bottom: 1px solid var(--ed-border-default);
+		background: var(--ed-surface-1);
+		flex-shrink: 0;
+	}
+
+	.layout-editor__title-row {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		min-width: 0;
+	}
+
+	.layout-editor__icon {
+		color: var(--ed-warning);
+		flex-shrink: 0;
+	}
+
+	.layout-editor__title {
+		font-size: var(--ed-text-base);
+		font-weight: 600;
+		color: var(--ed-text-primary);
+	}
+
+	.layout-editor__path {
+		font-size: var(--ed-text-xs);
+		color: var(--ed-text-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.layout-editor__mode-track {
+		display: inline-flex;
+		background: var(--ed-surface-2);
+		border-radius: var(--ed-radius-md);
+		padding: 2px;
+		gap: 2px;
+		flex-shrink: 0;
+	}
+
+	.layout-editor__mode-btn {
+		font-size: var(--ed-text-xs);
+		padding: 0.15rem var(--ed-space-2);
+		border: none;
+		border-radius: calc(var(--ed-radius-md) - 2px);
+		background: transparent;
+		color: var(--ed-text-tertiary);
+		cursor: pointer;
+		font-weight: 500;
+		transition: background var(--ed-transition-fast), color var(--ed-transition-fast), box-shadow var(--ed-transition-fast);
+	}
+
+	.layout-editor__mode-btn:hover:not(.active) {
+		color: var(--ed-text-secondary);
+	}
+
+	.layout-editor__mode-btn.active {
+		background: var(--ed-surface-0);
+		color: var(--ed-text-primary);
+		box-shadow: var(--ed-shadow-sm);
+	}
+
+	.layout-editor__raw {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.layout-editor__regions {
+		flex: 1;
+		overflow-y: auto;
+		padding: var(--ed-space-3);
+		display: flex;
+		flex-direction: column;
+		gap: var(--ed-space-3);
+		background: var(--ed-surface-1);
+	}
+
+	.layout-editor__empty {
+		text-align: center;
+		padding: 2rem var(--ed-space-4);
+		color: var(--ed-text-muted);
+		font-size: var(--ed-text-md);
+	}
+
+	.layout-editor__empty p {
+		margin: 0;
+	}
+
+	.layout-editor__add-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.35rem;
+		padding: var(--ed-space-2) var(--ed-space-4);
+		border: 1px dashed var(--ed-border-default);
+		border-radius: var(--ed-radius-md);
+		background: none;
+		color: var(--ed-text-muted);
+		font-size: var(--ed-text-base);
+		cursor: pointer;
+	}
+
+	.layout-editor__add-btn:hover {
+		border-color: var(--ed-accent);
+		color: var(--ed-accent);
+	}
+</style>

package/app/src/lib/components/MarkdownEditor.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { EditorState } from '@codemirror/state';
+	import {
+		EditorView,
+		keymap,
+		lineNumbers,
+		highlightActiveLineGutter,
+		highlightActiveLine,
+	} from '@codemirror/view';
+	import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+	import { markdown } from '@codemirror/lang-markdown';
+	import { syntaxHighlighting } from '@codemirror/language';
+	import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+	import { autocompletion, startCompletion } from '@codemirror/autocomplete';
+	import { untrack } from 'svelte';
+	import { editorState } from '../state/editor.svelte.js';
+	import { runeCompletionSource } from '../editor/rune-palette.js';
+	import { attributeCompletionSource } from '../editor/attribute-completion.js';
+	import { markdocHighlight } from '../editor/markdoc-highlight.js';
+	import { lightTheme, highlightTheme } from '../editor/codemirror-theme.js';
+
+	let container: HTMLElement;
+	let editorView: EditorView;
+
+	// Create CodeMirror when container is available, destroy on cleanup
+	$effect(() => {
+		if (!container) return;
+
+		const state = EditorState.create({
+			doc: untrack(() => editorState.bodyContent),
+			extensions: [
+				lineNumbers(),
+				highlightActiveLineGutter(),
+				highlightActiveLine(),
+				history(),
+				markdown(),
+				lightTheme,
+				syntaxHighlighting(highlightTheme),
+				highlightSelectionMatches(),
+				keymap.of([
+					...defaultKeymap,
+					...historyKeymap,
+					...searchKeymap,
+					{ key: 'Mod-/', run: (view) => { startCompletion(view); return true; } },
+				]),
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged) {
+						editorState.updateBody(update.state.doc.toString());
+					}
+				}),
+				EditorView.lineWrapping,
+				// Markdoc extensions
+				markdocHighlight(),
+				autocompletion({
+					override: [
+						runeCompletionSource(() => editorState.runes),
+						attributeCompletionSource(() => editorState.runes),
+					],
+					icons: false,
+				}),
+			],
+		});
+
+		editorView = new EditorView({ state, parent: container });
+
+		return () => {
+			editorView?.destroy();
+		};
+	});
+
+	// Sync external value changes (file switch) into CodeMirror
+	$effect(() => {
+		const current = editorState.bodyContent;
+		if (!editorView) return;
+
+		const cmContent = editorView.state.doc.toString();
+		if (current !== cmContent) {
+			editorView.dispatch({
+				changes: {
+					from: 0,
+					to: editorView.state.doc.length,
+					insert: current,
+				},
+			});
+		}
+	});
+</script>
+
+<div class="md-editor" bind:this={container} class:hidden={!editorState.currentPath}></div>
+{#if !editorState.currentPath}
+	<div class="md-editor__empty">
+		<span class="md-editor__empty-text">Select a file to edit</span>
+	</div>
+{/if}
+
+<style>
+	.md-editor {
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.md-editor.hidden {
+		display: none;
+	}
+
+	.md-editor :global(.cm-editor) {
+		height: 100%;
+	}
+
+	.md-editor__empty {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+
+	.md-editor__empty-text {
+		color: var(--ed-text-secondary);
+		font-size: var(--ed-text-md);
+	}
+</style>

package/app/src/lib/components/NavEditor.svelte

@@ -0,0 +1,359 @@
+<script lang="ts">
+	import {
+		extractNavContent, replaceNavContent,
+		parseNavContent, serializeNavContent,
+		type ParsedNav, type NavGroup,
+	} from '../utils/layout-parser.js';
+	import NavItemRow from './NavItemRow.svelte';
+
+	interface Props {
+		content: string;
+		onchange: (content: string) => void;
+	}
+
+	let { content, onchange }: Props = $props();
+
+	let nav: ParsedNav = $state({ groups: [], ungrouped: [] });
+	let addItemGroupIdx: number | null = $state(null);
+	let addItemValue = $state('');
+	let addGroupValue = $state('');
+	let showAddGroup = $state(false);
+
+	// Drag state
+	let dragSource: { groupIdx: number; itemIdx: number } | null = $state(null);
+	let dragOverTarget: { groupIdx: number; itemIdx: number } | null = $state(null);
+
+	// Parse content into nav structure
+	$effect(() => {
+		const inner = extractNavContent(content);
+		if (inner !== null) {
+			nav = parseNavContent(inner);
+		}
+	});
+
+	function emitChange() {
+		const inner = serializeNavContent(nav);
+		const newContent = replaceNavContent(content, inner);
+		onchange(newContent);
+	}
+
+	// ── Group operations ─────────────────────────────────────────
+
+	function handleGroupTitleChange(idx: number, title: string) {
+		nav.groups[idx] = { ...nav.groups[idx], title };
+		nav = { ...nav };
+		emitChange();
+	}
+
+	function handleDeleteGroup(idx: number) {
+		const group = nav.groups[idx];
+		if (group.items.length > 0) {
+			if (!confirm(`Delete group "${group.title}" and its ${group.items.length} items?`)) return;
+		}
+		nav.groups.splice(idx, 1);
+		nav = { ...nav };
+		emitChange();
+	}
+
+	function handleAddGroup() {
+		const title = addGroupValue.trim();
+		if (!title) return;
+		nav.groups.push({ title, items: [] });
+		nav = { ...nav };
+		addGroupValue = '';
+		showAddGroup = false;
+		emitChange();
+	}
+
+	// ── Item operations ──────────────────────────────────────────
+
+	function handleItemChange(groupIdx: number, itemIdx: number, newSlug: string) {
+		nav.groups[groupIdx].items[itemIdx] = newSlug;
+		nav = { ...nav };
+		emitChange();
+	}
+
+	function handleItemDelete(groupIdx: number, itemIdx: number) {
+		nav.groups[groupIdx].items.splice(itemIdx, 1);
+		nav = { ...nav };
+		emitChange();
+	}
+
+	function handleAddItem(groupIdx: number) {
+		const slug = addItemValue.trim();
+		if (!slug) return;
+		nav.groups[groupIdx].items.push(slug);
+		nav = { ...nav };
+		addItemValue = '';
+		addItemGroupIdx = null;
+		emitChange();
+	}
+
+	function handleAddItemKeydown(e: KeyboardEvent, groupIdx: number) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			handleAddItem(groupIdx);
+		} else if (e.key === 'Escape') {
+			addItemGroupIdx = null;
+			addItemValue = '';
+		}
+	}
+
+	function handleAddGroupKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			handleAddGroup();
+		} else if (e.key === 'Escape') {
+			showAddGroup = false;
+			addGroupValue = '';
+		}
+	}
+
+	// ── Drag and drop ────────────────────────────────────────────
+
+	function handleDragStart(e: PointerEvent, groupIdx: number, itemIdx: number) {
+		const el = e.currentTarget as HTMLElement;
+		el.setPointerCapture(e.pointerId);
+		dragSource = { groupIdx, itemIdx };
+	}
+
+	function handleDragMove(e: PointerEvent, groupIdx: number, itemIdx: number) {
+		if (!dragSource) return;
+		dragOverTarget = { groupIdx, itemIdx };
+	}
+
+	function handleDragEnd(e: PointerEvent) {
+		if (!dragSource || !dragOverTarget) {
+			dragSource = null;
+			dragOverTarget = null;
+			return;
+		}
+
+		const { groupIdx: srcGroup, itemIdx: srcItem } = dragSource;
+		const { groupIdx: dstGroup, itemIdx: dstItem } = dragOverTarget;
+
+		if (srcGroup === dstGroup && srcItem === dstItem) {
+			dragSource = null;
+			dragOverTarget = null;
+			return;
+		}
+
+		// Remove from source
+		const [removed] = nav.groups[srcGroup].items.splice(srcItem, 1);
+
+		// Insert at destination (adjust index if same group and source was before dest)
+		let insertIdx = dstItem;
+		if (srcGroup === dstGroup && srcItem < dstItem) {
+			insertIdx = dstItem - 1;
+		}
+
+		nav.groups[dstGroup].items.splice(insertIdx, 0, removed);
+		nav = { ...nav };
+
+		dragSource = null;
+		dragOverTarget = null;
+		emitChange();
+	}
+</script>
+
+<div class="nav-editor">
+	{#each nav.groups as group, groupIdx}
+		<div class="nav-editor__group">
+			<div class="nav-editor__group-header">
+				<input
+					class="nav-editor__group-title"
+					type="text"
+					value={group.title}
+					oninput={(e) => handleGroupTitleChange(groupIdx, (e.target as HTMLInputElement).value)}
+					placeholder="Group title"
+				/>
+				<button
+					class="nav-editor__group-delete"
+					onclick={() => handleDeleteGroup(groupIdx)}
+					title="Delete group"
+				>
+					<svg width="12" height="12" viewBox="0 0 16 16" fill="none">
+						<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+					</svg>
+				</button>
+			</div>
+			<div class="nav-editor__items">
+				{#each group.items as slug, itemIdx}
+					<div
+						class="nav-editor__item-wrapper"
+						class:drag-over={dragOverTarget?.groupIdx === groupIdx && dragOverTarget?.itemIdx === itemIdx}
+						onpointermove={(e) => handleDragMove(e, groupIdx, itemIdx)}
+						onpointerup={handleDragEnd}
+						role="listitem"
+					>
+						<NavItemRow
+							{slug}
+							onchange={(newSlug) => handleItemChange(groupIdx, itemIdx, newSlug)}
+							ondelete={() => handleItemDelete(groupIdx, itemIdx)}
+							ondragstart={(e) => handleDragStart(e, groupIdx, itemIdx)}
+						/>
+					</div>
+				{/each}
+			</div>
+			{#if addItemGroupIdx === groupIdx}
+				<div class="nav-editor__add-item">
+					<input
+						class="nav-editor__add-input"
+						type="text"
+						bind:value={addItemValue}
+						onkeydown={(e) => handleAddItemKeydown(e, groupIdx)}
+						onblur={() => { addItemGroupIdx = null; addItemValue = ''; }}
+						placeholder="Page slug..."
+						autofocus
+					/>
+				</div>
+			{:else}
+				<button
+					class="nav-editor__add-item-btn"
+					onclick={() => { addItemGroupIdx = groupIdx; addItemValue = ''; }}
+				>
+					+ Add item
+				</button>
+			{/if}
+		</div>
+	{/each}
+
+	{#if showAddGroup}
+		<div class="nav-editor__add-group">
+			<input
+				class="nav-editor__add-input"
+				type="text"
+				bind:value={addGroupValue}
+				onkeydown={handleAddGroupKeydown}
+				onblur={() => { showAddGroup = false; addGroupValue = ''; }}
+				placeholder="Group title..."
+				autofocus
+			/>
+		</div>
+	{:else}
+		<button
+			class="nav-editor__add-group-btn"
+			onclick={() => { showAddGroup = true; addGroupValue = ''; }}
+		>
+			+ Add group
+		</button>
+	{/if}
+</div>
+
+<style>
+	.nav-editor {
+		padding: var(--ed-space-2) 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--ed-space-4);
+	}
+
+	.nav-editor__group {
+	}
+
+	.nav-editor__group-header {
+		display: flex;
+		align-items: center;
+		gap: var(--ed-space-2);
+		padding: var(--ed-space-1) 0;
+		background: transparent;
+		border-bottom: 1px solid var(--ed-border-default);
+		margin-bottom: var(--ed-space-1);
+	}
+
+	.nav-editor__group-title {
+		flex: 1;
+		font-size: var(--ed-text-sm);
+		font-weight: 600;
+		color: var(--ed-text-tertiary);
+		border: 1px solid transparent;
+		border-radius: var(--ed-radius-sm);
+		padding: 0.1rem 0.25rem;
+		background: transparent;
+		outline: none;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.nav-editor__group-title:focus {
+		border-color: var(--ed-accent);
+		background: var(--ed-surface-0);
+		text-transform: none;
+	}
+
+	.nav-editor__group-delete {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 18px;
+		height: 18px;
+		border: none;
+		background: none;
+		color: var(--ed-border-strong);
+		cursor: pointer;
+		border-radius: var(--ed-radius-sm);
+	}
+
+	.nav-editor__group-delete:hover {
+		color: var(--ed-danger);
+		background: var(--ed-danger-subtle);
+	}
+
+	.nav-editor__items {
+		padding: 0;
+	}
+
+	.nav-editor__item-wrapper.drag-over {
+		border-top: 2px solid var(--ed-accent);
+	}
+
+	.nav-editor__add-item {
+		padding: var(--ed-space-1) var(--ed-space-2) 0.35rem;
+	}
+
+	.nav-editor__add-input {
+		width: 100%;
+		font-size: var(--ed-text-sm);
+		padding: 0.2rem 0.35rem;
+		border: 1px solid var(--ed-accent);
+		border-radius: var(--ed-radius-sm);
+		outline: none;
+		color: var(--ed-text-primary);
+		background: var(--ed-surface-0);
+	}
+
+	.nav-editor__add-item-btn {
+		font-size: var(--ed-text-xs);
+		color: var(--ed-text-muted);
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0.2rem 0.25rem;
+		text-align: left;
+	}
+
+	.nav-editor__add-item-btn:hover {
+		color: var(--ed-accent);
+	}
+
+	.nav-editor__add-group {
+		padding: var(--ed-space-1) 0;
+	}
+
+	.nav-editor__add-group-btn {
+		font-size: var(--ed-text-sm);
+		color: var(--ed-text-muted);
+		background: none;
+		border: 1px dashed var(--ed-border-default);
+		border-radius: var(--ed-radius-md);
+		cursor: pointer;
+		padding: var(--ed-space-2) var(--ed-space-3);
+		width: 100%;
+		text-align: center;
+	}
+
+	.nav-editor__add-group-btn:hover {
+		color: var(--ed-accent);
+		border-color: var(--ed-accent);
+	}
+</style>