@refrakt-md/editor 0.6.0

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

@@ -0,0 +1,322 @@
+<script lang="ts">
+	import { editorState } from '../state/editor.svelte.js';
+
+	interface Props {
+		onsave: () => void;
+	}
+
+	let { onsave }: Props = $props();
+
+	let breadcrumbs = $derived(
+		editorState.currentPath ? editorState.currentPath.split('/') : []
+	);
+
+	const showModeControls = $derived(
+		editorState.currentPath && editorState.currentFileType !== 'layout'
+	);
+	const isPreview = $derived(editorState.editorMode === 'preview');
+	const isEdit = $derived(editorState.editorMode === 'blocks' || editorState.editorMode === 'code');
+</script>
+
+<header class="header">
+	<button
+		class="header__sidebar-toggle"
+		onclick={() => { editorState.sidenavOpen = !editorState.sidenavOpen; }}
+		title={editorState.sidenavOpen ? 'Hide sidebar' : 'Show sidebar'}
+	>
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+			<rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+			<line x1="5.5" y1="2.5" x2="5.5" y2="13.5" />
+		</svg>
+	</button>
+
+	{#if showModeControls}
+		<div class="header__group">
+			<button
+				class="header__btn"
+				class:header__btn--active={isEdit}
+				onclick={() => { editorState.editorMode = 'blocks'; }}
+			>Edit</button>
+			<button
+				class="header__btn"
+				class:header__btn--active={isPreview}
+				onclick={() => { editorState.editorMode = 'preview'; }}
+			>Preview</button>
+		</div>
+	{/if}
+
+	{#if editorState.currentPath}
+		<nav class="header__breadcrumbs" aria-label="File path">
+			{#each breadcrumbs as segment, i}
+				{#if i > 0}
+					<span class="header__sep">/</span>
+				{/if}
+				{#if i === breadcrumbs.length - 1}
+					<span class="header__crumb header__crumb--current">
+						<svg class="header__doc-icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+							<path d="M9 1.5H4a1.5 1.5 0 0 0-1.5 1.5v10A1.5 1.5 0 0 0 4 14.5h8A1.5 1.5 0 0 0 13.5 13V6L9 1.5Z" />
+							<polyline points="9 1.5 9 6 13.5 6" />
+						</svg>
+						{segment}
+					</span>
+				{:else}
+					<span class="header__crumb">{segment}</span>
+				{/if}
+			{/each}
+			{#if editorState.dirty}
+				<span class="header__dot" title="Unsaved changes"></span>
+			{/if}
+		</nav>
+	{/if}
+
+	{#if editorState.error}
+		<span class="header__error">{editorState.error}</span>
+	{/if}
+
+	<div class="header__spacer"></div>
+
+	{#if showModeControls}
+		{#if isPreview}
+			<div class="header__group">
+				<button
+					class="header__btn header__btn--icon"
+					class:header__btn--active={editorState.viewport === 'desktop'}
+					onclick={() => editorState.viewport = 'desktop'}
+					title="Desktop"
+				>
+					<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+						<rect x="1.5" y="2" width="13" height="9" rx="1" />
+						<line x1="5.5" y1="14" x2="10.5" y2="14" />
+						<line x1="8" y1="11" x2="8" y2="14" />
+					</svg>
+				</button>
+				<button
+					class="header__btn header__btn--icon"
+					class:header__btn--active={editorState.viewport === 'tablet'}
+					onclick={() => editorState.viewport = 'tablet'}
+					title="Tablet"
+				>
+					<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+						<rect x="3" y="1.5" width="10" height="13" rx="1.5" />
+						<line x1="7" y1="12.5" x2="9" y2="12.5" />
+					</svg>
+				</button>
+				<button
+					class="header__btn header__btn--icon"
+					class:header__btn--active={editorState.viewport === 'mobile'}
+					onclick={() => editorState.viewport = 'mobile'}
+					title="Mobile"
+				>
+					<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+						<rect x="4" y="1.5" width="8" height="13" rx="2" />
+						<line x1="7" y1="12.5" x2="9" y2="12.5" />
+					</svg>
+				</button>
+			</div>
+		{:else if isEdit}
+			<div class="header__group">
+				<button
+					class="header__btn"
+					class:header__btn--active={editorState.editorMode === 'code'}
+					onclick={() => { editorState.editorMode = 'code'; }}
+				>Code</button>
+				<button
+					class="header__btn"
+					class:header__btn--active={editorState.editorMode === 'blocks'}
+					onclick={() => { editorState.editorMode = 'blocks'; }}
+				>Blocks</button>
+			</div>
+		{/if}
+	{/if}
+
+	{#if editorState.currentPath}
+		<button
+			class="header__btn header__btn--active"
+			class:header__btn--success={editorState.saveJustCompleted}
+			onclick={onsave}
+			disabled={!editorState.dirty || editorState.saving}
+		>
+			{#if editorState.saveJustCompleted}
+				<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<polyline points="3.5 8.5 6.5 11.5 12.5 4.5" />
+				</svg>
+				Saved
+			{:else if editorState.saving}
+				Saving...
+			{:else}
+				Save
+			{/if}
+			<kbd class="header__kbd">{navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}S</kbd>
+		</button>
+	{/if}
+</header>
+
+<style>
+	.header {
+		display: flex;
+		align-items: center;
+		gap: var(--ed-space-3);
+		padding: 0 var(--ed-space-5);
+		height: 60px;
+		flex-shrink: 0;
+		position: relative;
+		z-index: 10;
+	}
+
+	.header__sidebar-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 30px;
+		height: 30px;
+		border: none;
+		border-radius: var(--ed-radius-sm);
+		background: transparent;
+		color: var(--ed-text-muted);
+		cursor: pointer;
+		transition: color var(--ed-transition-fast), background var(--ed-transition-fast);
+	}
+
+	.header__sidebar-toggle:hover {
+		color: var(--ed-text-primary);
+		background: var(--ed-surface-2);
+	}
+
+	/* Breadcrumbs */
+	.header__breadcrumbs {
+		display: flex;
+		align-items: center;
+		gap: 0.3rem;
+		font-size: var(--ed-text-sm);
+		color: var(--ed-text-muted);
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	.header__sep {
+		color: var(--ed-border-strong);
+		flex-shrink: 0;
+	}
+
+	.header__crumb {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.header__crumb--current {
+		color: var(--ed-text-secondary);
+		font-weight: 500;
+		display: flex;
+		align-items: center;
+		gap: 0.3rem;
+	}
+
+	.header__doc-icon {
+		flex-shrink: 0;
+		opacity: 0.6;
+	}
+
+	/* Unsaved dot */
+	.header__dot {
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background: var(--ed-unsaved);
+		display: inline-block;
+		flex-shrink: 0;
+		animation: pulse-dot 2s ease-in-out infinite;
+	}
+
+	@keyframes pulse-dot {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.4; }
+	}
+
+	.header__error {
+		font-size: var(--ed-text-sm);
+		color: var(--ed-danger-text);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 300px;
+	}
+
+	.header__spacer {
+		flex: 1;
+	}
+
+	/* ── Button group ─────────────────────────────────── */
+
+	.header__group {
+		display: inline-flex;
+		gap: var(--ed-space-2);
+	}
+
+	/* ── Unified button style ─────────────────────────── */
+
+	.header__btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--ed-space-2);
+		height: 30px;
+		padding: 0 var(--ed-space-3);
+		border: 1px solid var(--ed-text-secondary);
+		border-radius: var(--ed-radius-sm);
+		background: transparent;
+		color: var(--ed-text-secondary);
+		font-size: var(--ed-text-sm);
+		font-weight: 500;
+		cursor: pointer;
+		transition: background var(--ed-transition-fast), color var(--ed-transition-fast), border-color var(--ed-transition-fast);
+		white-space: nowrap;
+	}
+
+	.header__btn:hover:not(.header__btn--active):not(:disabled) {
+		border-color: var(--ed-text-primary);
+		color: var(--ed-text-primary);
+	}
+
+	.header__btn--active {
+		background: var(--ed-text-primary);
+		color: #ffffff;
+		border-color: var(--ed-text-primary);
+	}
+
+	.header__btn--active:hover:not(:disabled) {
+		background: var(--ed-text-secondary);
+		border-color: var(--ed-text-secondary);
+	}
+
+	.header__btn:disabled {
+		opacity: 0.4;
+		cursor: default;
+	}
+
+	.header__btn--icon {
+		width: 30px;
+		padding: 0;
+	}
+
+	/* ── Save success state ───────────────────────────── */
+
+	.header__btn--success {
+		background: var(--ed-success);
+		border-color: var(--ed-success);
+	}
+
+	.header__btn--success:disabled {
+		opacity: 1;
+	}
+
+	.header__kbd {
+		font-size: 10px;
+		padding: 0.1rem 0.3rem;
+		border-radius: 3px;
+		background: rgba(255, 255, 255, 0.2);
+		color: rgba(255, 255, 255, 0.8);
+		font-family: var(--ed-font-sans);
+		line-height: 1;
+	}
+</style>

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

@@ -0,0 +1,234 @@
+<script lang="ts">
+	import { EditorState, Compartment } from '@codemirror/state';
+	import { EditorView, keymap } from '@codemirror/view';
+	import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+	import { markdown } from '@codemirror/lang-markdown';
+	import { syntaxHighlighting, LanguageDescription, defaultHighlightStyle } from '@codemirror/language';
+	import { languages } from '@codemirror/language-data';
+	import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+	import { autocompletion, startCompletion } from '@codemirror/autocomplete';
+	import { untrack } from 'svelte';
+	import type { RuneInfo } from '../api/client.js';
+	import { highlightTheme } from '../editor/codemirror-theme.js';
+	import { runeCompletionSource } from '../editor/rune-palette.js';
+	import { attributeCompletionSource } from '../editor/attribute-completion.js';
+	import { markdocHighlight } from '../editor/markdoc-highlight.js';
+
+	interface Props {
+		content: string;
+		onchange: (content: string) => void;
+		runes: () => RuneInfo[];
+		language?: string;
+	}
+
+	let { content, onchange, runes, language }: Props = $props();
+
+	let container: HTMLElement;
+	let view = $state<EditorView | undefined>(undefined);
+
+	const langCompartment = new Compartment();
+	const markdocCompartment = new Compartment();
+	const completionCompartment = new Compartment();
+
+	const inlineTheme = EditorView.theme(
+		{
+			'&': {
+				color: '#1a1a2e',
+				fontSize: '13px',
+				height: 'auto',
+			},
+			'.cm-scroller': {
+				overflow: 'visible',
+				fontFamily: "'SF Mono', 'Fira Code', ui-monospace, monospace",
+				lineHeight: '1.6',
+			},
+			'.cm-content': {
+				padding: '0.75rem',
+				caretColor: '#1e293b',
+				minHeight: '3rem',
+			},
+			'.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',
+			},
+			'.cm-activeLine': {
+				backgroundColor: 'transparent',
+			},
+			'.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',
+			},
+			'.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 },
+	);
+
+	// Create the CodeMirror instance (once, when container is available)
+	$effect(() => {
+		if (!container) return;
+
+		const codeMode = !!(untrack(() => language)?.trim());
+
+		const state = EditorState.create({
+			doc: untrack(() => content),
+			extensions: [
+				langCompartment.of(markdown()),
+				markdocCompartment.of(codeMode ? [] : markdocHighlight()),
+				completionCompartment.of(codeMode ? [] : autocompletion({
+					override: [
+						runeCompletionSource(runes),
+						attributeCompletionSource(runes),
+					],
+					icons: false,
+				})),
+				history(),
+				inlineTheme,
+				syntaxHighlighting(highlightTheme),
+				syntaxHighlighting(defaultHighlightStyle),
+				highlightSelectionMatches(),
+				keymap.of([
+					...defaultKeymap,
+					...historyKeymap,
+					...searchKeymap,
+					{ key: 'Mod-/', run: (v) => { startCompletion(v); return true; } },
+				]),
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged) {
+						onchange(update.state.doc.toString());
+					}
+				}),
+				EditorView.lineWrapping,
+			],
+		});
+
+		const editor = new EditorView({ state, parent: container });
+		view = editor;
+
+		return () => {
+			view = undefined;
+			editor.destroy();
+		};
+	});
+
+	// Load and apply the correct language when `language` prop or `view` changes
+	$effect(() => {
+		const editor = view;
+		if (!editor) return;
+
+		const lang = language?.trim();
+		if (!lang) {
+			// No language — use markdown with markdoc extras
+			editor.dispatch({
+				effects: [
+					langCompartment.reconfigure(markdown()),
+					markdocCompartment.reconfigure(markdocHighlight()),
+					completionCompartment.reconfigure(autocompletion({
+						override: [
+							runeCompletionSource(runes),
+							attributeCompletionSource(runes),
+						],
+						icons: false,
+					})),
+				],
+			});
+			return;
+		}
+
+		// Code mode — disable markdoc/rune extras
+		editor.dispatch({
+			effects: [
+				markdocCompartment.reconfigure([]),
+				completionCompartment.reconfigure([]),
+			],
+		});
+
+		// Find and load the language
+		const desc = LanguageDescription.matchLanguageName(languages, lang, true);
+		if (desc) {
+			desc.load().then((langSupport) => {
+				// Guard: only apply if this editor is still the current one
+				if (view === editor) {
+					editor.dispatch({
+						effects: langCompartment.reconfigure(langSupport),
+					});
+				}
+			});
+		}
+	});
+
+	// Sync external content changes into the CodeMirror instance
+	$effect(() => {
+		const current = content;
+		const editor = view;
+		if (!editor) return;
+
+		const cmContent = editor.state.doc.toString();
+		if (current !== cmContent) {
+			editor.dispatch({
+				changes: { from: 0, to: editor.state.doc.length, insert: current },
+			});
+		}
+	});
+</script>
+
+<div class="inline-editor" bind:this={container}></div>
+
+<style>
+	.inline-editor :global(.cm-editor) {
+		height: auto;
+	}
+
+	.inline-editor :global(.cm-scroller) {
+		overflow: visible;
+	}
+</style>