@d34dman/flowdrop 0.0.57 → 0.0.59

package/dist/components/form/FormMarkdownEditor.svelte

@@ -1,28 +1,30 @@
 <!--
   FormMarkdownEditor Component
-  EasyMDE-based Markdown editor for rich text content
-  
+  CodeMirror 6-based Markdown editor for rich text content
+
   Features:
-  - Full Markdown editing with EasyMDE (fork of SimpleMDE)
-  - Live preview with syntax highlighting
-  - Toolbar with common formatting options
-  - Autosave support (optional)
-  - Spell checking
+  - Full Markdown editing with CodeMirror 6
+  - Markdown syntax highlighting via @codemirror/lang-markdown
+  - Toolbar with common formatting options + keyboard shortcuts
+  - Autosave support (optional, localStorage)
+  - Status bar with word/line/character count
   - Consistent styling with other form components
   - Proper ARIA attributes for accessibility
-  - SSR-safe: Only loads EasyMDE on the client side
-  
+  - Dark/light theme support
+
   Usage:
   Use with schema format: "markdown" to render this editor
 -->
 
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { browser } from '$app/environment';
-	import type EasyMDEConstructor from 'easymde';
-
-	/** EasyMDE instance type */
-	type EasyMDEInstance = EasyMDEConstructor;
+	import { EditorView, lineNumbers, drawSelection, keymap } from '@codemirror/view';
+	import { EditorState, Compartment } from '@codemirror/state';
+	import { history, historyKeymap, defaultKeymap, indentWithTab } from '@codemirror/commands';
+	import { highlightSpecialChars, highlightActiveLine } from '@codemirror/view';
+	import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
+	import { markdown } from '@codemirror/lang-markdown';
+	import { oneDark } from '@codemirror/theme-one-dark';
 
 	interface Props {
 		/** Field identifier */
@@ -47,6 +49,8 @@
 		autosaveDelay?: number;
 		/** Whether the field is disabled (read-only) */
 		disabled?: boolean;
+		/** Whether to use dark theme */
+		darkTheme?: boolean;
 		/** ARIA description ID */
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
@@ -65,162 +69,406 @@
 		autosave = false,
 		autosaveDelay = 10000,
 		disabled = false,
+		darkTheme = false,
 		ariaDescribedBy,
 		onChange
 	}: Props = $props();
 
-	/** Reference to the textarea element */
-	let textareaRef: HTMLTextAreaElement | undefined = $state(undefined);
-
-	/** EasyMDE editor instance */
-	let easymde: EasyMDEInstance | undefined = $state(undefined);
+	/** Reference to the editor container element */
+	let containerRef: HTMLDivElement | undefined = $state(undefined);
 
-	/** Loading state for the editor */
-	let isLoading = $state(true);
+	/** CodeMirror editor instance */
+	let editorView: EditorView | undefined = $state(undefined);
 
 	/** Flag to prevent update loops */
 	let isInternalUpdate = false;
 
-	/**
-	 * Custom toolbar configuration
-	 * Provides a clean set of commonly used formatting options
-	 */
-	const toolbarConfig = [
-		'bold',
-		'italic',
-		'strikethrough',
-		'|',
-		'heading-1',
-		'heading-2',
-		'heading-3',
-		'|',
-		'quote',
-		'unordered-list',
-		'ordered-list',
+	/** Flag to skip $effect when change originated from the editor */
+	let isEditorUpdate = false;
+
+	/** Status bar stats */
+	let wordCount = $state(0);
+	let lineCount = $state(0);
+	let charCount = $state(0);
+
+	/** Autosave timer */
+	let autosaveTimer: ReturnType<typeof setTimeout> | undefined;
+
+	/** Theme compartment for dynamic theme switching */
+	const themeCompartment = new Compartment();
+
+	// ── Toolbar actions ──────────────────────────────────────
+
+	type ToolbarAction = {
+		id: string;
+		label: string;
+		icon: string;
+		/** If true, icon is an SVG string rendered with {@html} */
+		isSvg?: boolean;
+		shortcut?: string;
+		action: () => void;
+	};
+
+	// Inline SVG icons (heroicons outline, 16x16)
+	const icons = {
+		link: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"/><path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"/></svg>',
+		image:
+			'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0L2.5 11.06Zm6.5-3.31a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd"/></svg>',
+		table:
+			'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M.99 5.24A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm8.26 4.51v3.75h1.5v-3.75h-1.5Zm1.5-1.5v-3.75h-1.5v3.75h1.5Zm-3-3.75H3.25a.75.75 0 0 0-.75.75v3h5.25v-3.75Zm-5.25 5.25v3.75c0 .414.336.75.75.75h4.5v-4.5H2.5Zm14.5 0h-5.25v4.5h4.5a.75.75 0 0 0 .75-.75v-3.75Zm0-1.5v-3a.75.75 0 0 0-.75-.75h-4.5v3.75H17Z" clip-rule="evenodd"/></svg>'
+	};
+
+	function wrapSelection(before: string, after: string) {
+		if (!editorView) return;
+		const { from, to } = editorView.state.selection.main;
+		const selected = editorView.state.sliceDoc(from, to);
+		const replacement = `${before}${selected || 'text'}${after}`;
+		editorView.dispatch({
+			changes: { from, to, insert: replacement },
+			selection: {
+				anchor: selected ? from + before.length : from + before.length,
+				head: selected ? from + before.length + selected.length : from + before.length + 4
+			}
+		});
+		editorView.focus();
+	}
+
+	function prefixLine(prefix: string) {
+		if (!editorView) return;
+		const { from } = editorView.state.selection.main;
+		const line = editorView.state.doc.lineAt(from);
+		const currentText = line.text;
+
+		// If already has this prefix, remove it (toggle)
+		if (currentText.startsWith(prefix)) {
+			editorView.dispatch({
+				changes: { from: line.from, to: line.from + prefix.length, insert: '' }
+			});
+		} else {
+			// Remove any existing heading prefix before adding new one
+			const headingMatch = currentText.match(/^#{1,6}\s/);
+			const removeLen = headingMatch ? headingMatch[0].length : 0;
+			editorView.dispatch({
+				changes: { from: line.from, to: line.from + removeLen, insert: prefix }
+			});
+		}
+		editorView.focus();
+	}
+
+	function insertAtCursor(text: string) {
+		if (!editorView) return;
+		const { from, to } = editorView.state.selection.main;
+		editorView.dispatch({
+			changes: { from, to, insert: text },
+			selection: { anchor: from + text.length }
+		});
+		editorView.focus();
+	}
+
+	const toolbarActions: (ToolbarAction | '|')[] = [
+		{
+			id: 'bold',
+			label: 'Bold',
+			icon: 'B',
+			shortcut: 'Mod-b',
+			action: () => wrapSelection('**', '**')
+		},
+		{
+			id: 'italic',
+			label: 'Italic',
+			icon: 'I',
+			shortcut: 'Mod-i',
+			action: () => wrapSelection('_', '_')
+		},
+		{
+			id: 'strikethrough',
+			label: 'Strikethrough',
+			icon: 'S',
+			action: () => wrapSelection('~~', '~~')
+		},
 		'|',
-		'link',
-		'image',
-		'table',
+		{
+			id: 'heading-1',
+			label: 'Heading 1',
+			icon: 'H1',
+			action: () => prefixLine('# ')
+		},
+		{
+			id: 'heading-2',
+			label: 'Heading 2',
+			icon: 'H2',
+			action: () => prefixLine('## ')
+		},
+		{
+			id: 'heading-3',
+			label: 'Heading 3',
+			icon: 'H3',
+			action: () => prefixLine('### ')
+		},
 		'|',
-		'preview',
+		{
+			id: 'quote',
+			label: 'Quote',
+			icon: '"',
+			action: () => prefixLine('> ')
+		},
+		{
+			id: 'unordered-list',
+			label: 'Unordered List',
+			icon: '•',
+			action: () => prefixLine('- ')
+		},
+		{
+			id: 'ordered-list',
+			label: 'Ordered List',
+			icon: '1.',
+			action: () => prefixLine('1. ')
+		},
 		'|',
-		'guide'
-	] as const;
-
-	/**
-	 * Initialize EasyMDE editor on mount (client-side only)
-	 */
-	onMount(async () => {
-		// Only run in browser environment
-		if (!browser || !textareaRef) {
-			isLoading = false;
-			return;
+		{
+			id: 'link',
+			label: 'Link',
+			icon: icons.link,
+			isSvg: true,
+			shortcut: 'Mod-k',
+			action: () => {
+				if (!editorView) return;
+				const { from, to } = editorView.state.selection.main;
+				const selected = editorView.state.sliceDoc(from, to);
+				const text = selected || 'link text';
+				const replacement = `[${text}](url)`;
+				editorView.dispatch({
+					changes: { from, to, insert: replacement },
+					selection: {
+						anchor: from + text.length + 3,
+						head: from + text.length + 6
+					}
+				});
+				editorView.focus();
+			}
+		},
+		{
+			id: 'image',
+			label: 'Image',
+			icon: icons.image,
+			isSvg: true,
+			action: () => insertAtCursor('![alt text](image-url)')
+		},
+		{
+			id: 'table',
+			label: 'Table',
+			icon: icons.table,
+			isSvg: true,
+			action: () =>
+				insertAtCursor('\n| Header | Header |\n| ------ | ------ |\n| Cell   | Cell   |\n')
 		}
+	];
 
-		try {
-			// Dynamically import EasyMDE and its styles (client-side only)
-			const [EasyMDE] = await Promise.all([
-				import('easymde').then((m) => m.default),
-				import('easymde/dist/easymde.min.css')
-			]);
-
-			// Build autosave config if enabled
-			const autosaveConfig = autosave
-				? {
-						enabled: true,
-						uniqueId: `flowdrop-markdown-${id}`,
-						delay: autosaveDelay
-					}
-				: undefined;
-
-			// Create EasyMDE instance
-			easymde = new EasyMDE({
-				element: textareaRef,
-				initialValue: value,
-				placeholder: placeholder,
-				spellChecker: spellChecker,
-				autosave: autosaveConfig,
-				toolbar: disabled ? false : showToolbar ? [...toolbarConfig] : false,
-				status: showStatusBar,
-				forceSync: true,
-				minHeight: height,
-				renderingConfig: {
-					singleLineBreaks: false,
-					codeSyntaxHighlighting: true
-				},
-				shortcuts: disabled
-					? {}
-					: {
-							toggleBold: 'Cmd-B',
-							toggleItalic: 'Cmd-I',
-							toggleStrikethrough: 'Cmd-Alt-S',
-							toggleHeadingSmaller: 'Cmd-H',
-							toggleHeadingBigger: 'Shift-Cmd-H',
-							toggleCodeBlock: 'Cmd-Alt-C',
-							toggleBlockquote: "Cmd-'",
-							toggleOrderedList: 'Cmd-Alt-L',
-							toggleUnorderedList: 'Cmd-L',
-							cleanBlock: 'Cmd-E',
-							drawLink: 'Cmd-K',
-							drawImage: 'Cmd-Alt-I',
-							drawTable: 'Cmd-Alt-T',
-							togglePreview: 'Cmd-P',
-							toggleSideBySide: 'F9',
-							toggleFullScreen: 'F11'
-						}
-			});
+	// ── CM6 Keyboard shortcuts for toolbar actions ───────────
 
-			// When disabled, make the underlying CodeMirror read-only
-			if (disabled && easymde.codemirror) {
-				easymde.codemirror.setOption('readOnly', true);
+	function createToolbarKeymap() {
+		return keymap.of([
+			{
+				key: 'Mod-b',
+				run: () => {
+					wrapSelection('**', '**');
+					return true;
+				}
+			},
+			{
+				key: 'Mod-i',
+				run: () => {
+					wrapSelection('_', '_');
+					return true;
+				}
+			},
+			{
+				key: 'Mod-k',
+				run: () => {
+					const action = toolbarActions.find((a) => a !== '|' && a.id === 'link');
+					if (action && action !== '|') action.action();
+					return true;
+				}
+			},
+			{
+				key: 'Mod-h',
+				run: () => {
+					prefixLine('## ');
+					return true;
+				}
+			},
+			{
+				key: "Mod-'",
+				run: () => {
+					prefixLine('> ');
+					return true;
+				}
+			},
+			{
+				key: 'Mod-l',
+				run: () => {
+					prefixLine('- ');
+					return true;
+				}
 			}
-
-			// Listen for changes
-			easymde.codemirror.on('change', () => {
-				if (isInternalUpdate) {
-					return;
+		]);
+	}
+
+	// ── Stats computation ────────────────────────────────────
+
+	function updateStats(doc: { toString: () => string; lines: number }) {
+		const text = doc.toString();
+		charCount = text.length;
+		lineCount = doc.lines;
+		const trimmed = text.trim();
+		wordCount = trimmed ? trimmed.split(/\s+/).length : 0;
+	}
+
+	// ── Editor setup ─────────────────────────────────────────
+
+	function createExtensions() {
+		const extensions = [
+			lineNumbers(),
+			highlightSpecialChars(),
+			highlightActiveLine(),
+			drawSelection(),
+
+			// Editing features (skip when read-only)
+			...(disabled
+				? [EditorState.readOnly.of(true), EditorView.editable.of(false)]
+				: [
+						history(),
+						keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+						createToolbarKeymap()
+					]),
+
+			// Theme
+			themeCompartment.of(
+				darkTheme ? oneDark : syntaxHighlighting(defaultHighlightStyle, { fallback: true })
+			),
+
+			// Markdown language support
+			markdown(),
+
+			// Update listener
+			EditorView.updateListener.of((update) => {
+				if (!update.docChanged || isInternalUpdate) return;
+
+				const content = update.state.doc.toString();
+				isEditorUpdate = true;
+				onChange(content);
+
+				updateStats(update.state.doc);
+
+				// Autosave
+				if (autosave) {
+					clearTimeout(autosaveTimer);
+					autosaveTimer = setTimeout(() => {
+						try {
+							localStorage.setItem(`flowdrop-markdown-${id}`, content);
+						} catch {
+							// localStorage may be full or unavailable
+						}
+					}, autosaveDelay);
 				}
+			}),
+
+			// Custom theme
+			EditorView.theme({
+				'&': {
+					height: height,
+					fontSize: 'var(--fd-text-sm, 0.8125rem)',
+					fontFamily: "'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace"
+				},
+				'.cm-scroller': {
+					overflow: 'auto'
+				},
+				'.cm-content': {
+					minHeight: '100px',
+					padding: '0.5rem 0'
+				},
+				'&.cm-focused': {
+					outline: 'none'
+				}
+			}),
+			EditorView.lineWrapping,
+
+			// Accessibility
+			EditorView.contentAttributes.of({
+				'aria-label': 'Markdown editor',
+				'aria-multiline': 'true'
+			})
+		];
+
+		return extensions;
+	}
+
+	onMount(() => {
+		if (!containerRef) return;
+
+		// Load autosaved content if available
+		let initialContent = value;
+		if (autosave) {
+			try {
+				const saved = localStorage.getItem(`flowdrop-markdown-${id}`);
+				if (saved !== null) {
+					initialContent = saved;
+					onChange(saved);
+				}
+			} catch {
+				// localStorage unavailable
+			}
+		}
 
-				const newValue = easymde?.value() ?? '';
-				onChange(newValue);
-			});
+		editorView = new EditorView({
+			state: EditorState.create({
+				doc: initialContent,
+				extensions: createExtensions()
+			}),
+			parent: containerRef
+		});
 
-			isLoading = false;
-		} catch (error) {
-			console.error('Failed to load EasyMDE:', error);
-			isLoading = false;
-		}
+		updateStats(editorView.state.doc);
 	});
 
-	/**
-	 * Clean up editor on destroy
-	 */
 	onDestroy(() => {
-		if (easymde) {
-			easymde.toTextArea();
-		}
+		if (autosaveTimer) clearTimeout(autosaveTimer);
+		if (editorView) editorView.destroy();
 	});
 
 	/**
 	 * Update editor content when value prop changes externally
 	 */
 	$effect(() => {
-		if (!easymde) {
+		if (!editorView) return;
+
+		// Skip if the change originated from the editor itself
+		if (isEditorUpdate) {
+			isEditorUpdate = false;
 			return;
 		}
 
-		const currentValue = easymde.value();
-
-		// Only update if content actually changed and wasn't from internal edit
-		if (value !== currentValue && !isInternalUpdate) {
+		const currentContent = editorView.state.doc.toString();
+		if (value !== currentContent && !isInternalUpdate) {
 			isInternalUpdate = true;
-			easymde.value(value);
+			editorView.dispatch({
+				changes: {
+					from: 0,
+					to: editorView.state.doc.length,
+					insert: value
+				}
+			});
 			isInternalUpdate = false;
+			updateStats(editorView.state.doc);
 		}
 	});
 </script>
 
-<div class="form-markdown-editor" style="--editor-height: {height}">
+<div
+	class="form-markdown-editor"
+	class:form-markdown-editor--dark={darkTheme}
+	style="--editor-height: {height}"
+>
 	<!-- Hidden input for form submission compatibility -->
 	<input
 		type="hidden"
@@ -231,20 +479,47 @@
 		aria-required={required}
 	/>
 
-	<!-- Loading state -->
-	{#if isLoading}
-		<div class="form-markdown-editor__loading">
-			<div class="form-markdown-editor__spinner"></div>
-			<span>Loading editor...</span>
+	<!-- Toolbar -->
+	{#if showToolbar && !disabled}
+		<div class="form-markdown-editor__toolbar" role="toolbar" aria-label="Markdown formatting">
+			{#each toolbarActions as item}
+				{#if item === '|'}
+					<span class="form-markdown-editor__separator"></span>
+				{:else}
+					<button
+						type="button"
+						class="form-markdown-editor__btn"
+						title="{item.label}{item.shortcut ? ` (${item.shortcut.replace('Mod', '⌘')})` : ''}"
+						onclick={item.action}
+					>
+						{#if item.isSvg}
+							<span class="form-markdown-editor__btn-svg">{@html item.icon}</span>
+						{:else}
+							<span
+								class="form-markdown-editor__btn-icon"
+								class:form-markdown-editor__btn-icon--bold={item.id === 'bold'}
+								class:form-markdown-editor__btn-icon--italic={item.id === 'italic'}
+								class:form-markdown-editor__btn-icon--strike={item.id === 'strikethrough'}
+								>{item.icon}</span
+							>
+						{/if}
+					</button>
+				{/if}
+			{/each}
 		</div>
 	{/if}
 
-	<!-- EasyMDE textarea container -->
-	<textarea
-		bind:this={textareaRef}
-		aria-label="Markdown editor"
-		class:form-markdown-editor__textarea--hidden={!isLoading && easymde}>{value}</textarea
-	>
+	<!-- CodeMirror container -->
+	<div bind:this={containerRef} class="form-markdown-editor__body"></div>
+
+	<!-- Status bar -->
+	{#if showStatusBar}
+		<div class="form-markdown-editor__status">
+			<span>words: {wordCount}</span>
+			<span>lines: {lineCount}</span>
+			<span>characters: {charCount}</span>
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -253,376 +528,225 @@
 		width: 100%;
 	}
 
-	/* Loading state */
-	.form-markdown-editor__loading {
+	/* ── Toolbar ───────────────────────────────────── */
+
+	.form-markdown-editor__toolbar {
 		display: flex;
 		align-items: center;
-		justify-content: center;
-		gap: 0.75rem;
-		padding: 2rem;
-		background-color: var(--fd-muted);
+		gap: 0.125rem;
 		border: 1px solid var(--fd-border);
-		border-radius: var(--fd-radius-lg);
-		color: var(--fd-muted-foreground);
-		font-size: var(--fd-text-sm);
-	}
-
-	.form-markdown-editor__spinner {
-		width: 1.25rem;
-		height: 1.25rem;
-		border: 2px solid var(--fd-border);
-		border-top-color: var(--fd-primary);
-		border-radius: 50%;
-		animation: spin 0.8s linear infinite;
-	}
-
-	@keyframes spin {
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	/* Hide the raw textarea when editor is loaded */
-	.form-markdown-editor__textarea--hidden {
-		display: none;
-	}
-
-	/* Fallback textarea styling (shown during loading or if editor fails) */
-	.form-markdown-editor textarea:not(.form-markdown-editor__textarea--hidden) {
-		width: 100%;
-		min-height: var(--editor-height, 300px);
-		padding: 0.75rem;
-		border: 1px solid var(--fd-border);
-		border-radius: var(--fd-radius-lg);
-		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
-		font-size: var(--fd-text-sm);
-		line-height: 1.5;
-		resize: vertical;
-		background-color: var(--fd-muted);
-	}
-
-	/* EasyMDE container styling */
-	.form-markdown-editor :global(.CodeMirror) {
-		border: 1px solid var(--fd-border);
-		border-top: none;
-		border-radius: 0;
-		background-color: var(--fd-muted);
-		color: var(--fd-foreground);
-		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
-		font-size: var(--fd-text-sm);
-		min-height: var(--editor-height, 300px);
-		transition: border-color var(--fd-transition-normal);
-	}
-
-	/* CodeMirror cursor styling for visibility in dark mode */
-	.form-markdown-editor :global(.CodeMirror-cursor) {
-		border-left-color: var(--fd-foreground);
-	}
-
-	/* CodeMirror selection styling */
-	.form-markdown-editor :global(.CodeMirror-selected) {
-		background-color: var(--fd-primary-muted) !important;
-	}
-
-	.form-markdown-editor :global(.CodeMirror-focused .CodeMirror-selected) {
-		background-color: var(--fd-primary-muted) !important;
-	}
-
-	/* CodeMirror line number gutter */
-	.form-markdown-editor :global(.CodeMirror-gutters) {
+		border-bottom: none;
+		border-radius: var(--fd-radius-lg) var(--fd-radius-lg) 0 0;
 		background-color: var(--fd-subtle);
-		border-right: 1px solid var(--fd-border);
+		padding: 0.375rem 0.5rem;
 	}
 
-	.form-markdown-editor :global(.CodeMirror-linenumber) {
+	.form-markdown-editor__btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border: none;
+		border-radius: var(--fd-radius-md);
+		background: none;
 		color: var(--fd-muted-foreground);
+		cursor: pointer;
+		font-size: 0.8125rem;
+		transition: all var(--fd-transition-fast);
 	}
 
-	/* Header styling inside the editor - keep sizes reasonable */
-	.form-markdown-editor :global(.cm-header-1) {
-		font-size: 1.25rem;
-		line-height: 1.4;
-	}
-
-	.form-markdown-editor :global(.cm-header-2) {
-		font-size: 1.125rem;
-		line-height: 1.4;
-	}
-
-	.form-markdown-editor :global(.cm-header-3) {
-		font-size: 1rem;
-		line-height: 1.4;
-	}
-
-	.form-markdown-editor :global(.cm-header-4),
-	.form-markdown-editor :global(.cm-header-5),
-	.form-markdown-editor :global(.cm-header-6) {
-		font-size: 0.9375rem;
-		line-height: 1.4;
-	}
-
-	/* Keep all headers in monospace and reasonable weight */
-	.form-markdown-editor :global(.cm-header) {
-		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
-		font-weight: 600;
+	.form-markdown-editor__btn:hover {
+		background-color: var(--fd-border);
 		color: var(--fd-foreground);
 	}
 
-	/* Markdown syntax highlighting in editor */
-	.form-markdown-editor :global(.cm-s-easymde .cm-comment) {
-		color: var(--fd-muted-foreground);
-	}
-
-	.form-markdown-editor :global(.cm-s-easymde .cm-link) {
-		color: var(--fd-primary);
+	.form-markdown-editor__btn-icon--bold {
+		font-weight: 700;
 	}
 
-	.form-markdown-editor :global(.cm-s-easymde .cm-url) {
-		color: var(--fd-primary-hover);
+	.form-markdown-editor__btn-icon--italic {
+		font-style: italic;
 	}
 
-	.form-markdown-editor :global(.cm-s-easymde .cm-string) {
-		color: var(--fd-success);
+	.form-markdown-editor__btn-icon--strike {
+		text-decoration: line-through;
 	}
 
-	.form-markdown-editor :global(.cm-s-easymde .cm-formatting) {
-		color: var(--fd-muted-foreground);
+	.form-markdown-editor__btn-svg {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
-	.form-markdown-editor :global(.cm-s-easymde .cm-quote) {
-		color: var(--fd-muted-foreground);
-		font-style: italic;
+	.form-markdown-editor__separator {
+		width: 1px;
+		height: 1.25rem;
+		background-color: var(--fd-border-strong);
+		margin: 0 0.25rem;
 	}
 
-	.form-markdown-editor :global(.cm-s-easymde .cm-strong) {
-		color: var(--fd-foreground);
-		font-weight: 700;
-	}
+	/* ── Editor body ───────────────────────────────── */
 
-	.form-markdown-editor :global(.cm-s-easymde .cm-em) {
-		color: var(--fd-foreground);
-		font-style: italic;
+	.form-markdown-editor__body {
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
+		overflow: hidden;
+		background-color: var(--fd-muted);
+		transition: border-color var(--fd-transition-normal);
 	}
 
-	.form-markdown-editor :global(.cm-s-easymde .cm-strikethrough) {
-		color: var(--fd-muted-foreground);
-		text-decoration: line-through;
+	/* When toolbar is present, remove top radius */
+	.form-markdown-editor__toolbar + .form-markdown-editor__body {
+		border-top: none;
+		border-radius: 0;
 	}
 
-	.form-markdown-editor :global(.CodeMirror:hover) {
+	.form-markdown-editor__body:hover {
 		border-color: var(--fd-border-strong);
 	}
 
-	.form-markdown-editor :global(.CodeMirror-focused) {
+	.form-markdown-editor__body:focus-within {
 		border-color: var(--fd-primary);
 		background-color: var(--fd-background);
-		color: var(--fd-foreground);
 		box-shadow:
-			0 0 0 3px rgba(59, 130, 246, 0.12),
+			0 0 0 3px var(--fd-primary-muted),
 			var(--fd-shadow-sm);
 	}
 
-	/* Editor wrapper */
-	.form-markdown-editor :global(.editor-toolbar) {
-		border: 1px solid var(--fd-border);
-		border-bottom: none;
-		border-radius: var(--fd-radius-lg) var(--fd-radius-lg) 0 0;
-		background-color: var(--fd-subtle);
-		padding: 0.5rem;
-	}
-
-	.form-markdown-editor :global(.editor-toolbar::before),
-	.form-markdown-editor :global(.editor-toolbar::after) {
-		display: none;
-	}
-
-	/* Toolbar buttons */
-	.form-markdown-editor :global(.editor-toolbar button) {
-		color: var(--fd-muted-foreground);
-		border: none;
-		border-radius: var(--fd-radius-md);
-		width: 2rem;
-		height: 2rem;
-		transition: all var(--fd-transition-fast);
-	}
-
-	.form-markdown-editor :global(.editor-toolbar button:hover) {
-		background-color: var(--fd-border);
-		color: var(--fd-foreground);
-	}
-
-	.form-markdown-editor :global(.editor-toolbar button.active) {
-		background-color: var(--fd-primary-muted);
-		color: var(--fd-primary-hover);
-	}
+	/* ── Status bar ────────────────────────────────── */
 
-	/* Separator */
-	.form-markdown-editor :global(.editor-toolbar i.separator) {
-		border-left: 1px solid var(--fd-border-strong);
-		margin: 0 0.25rem;
-	}
-
-	/* Status bar */
-	.form-markdown-editor :global(.editor-statusbar) {
+	.form-markdown-editor__status {
+		display: flex;
+		gap: 1rem;
+		justify-content: flex-end;
 		border: 1px solid var(--fd-border);
 		border-top: none;
 		border-radius: 0 0 var(--fd-radius-lg) var(--fd-radius-lg);
 		background-color: var(--fd-muted);
-		padding: 0.5rem 0.75rem;
+		padding: 0.375rem 0.75rem;
 		font-size: var(--fd-text-xs);
 		color: var(--fd-muted-foreground);
 	}
 
-	/* Preview pane */
-	.form-markdown-editor :global(.editor-preview) {
-		background-color: var(--fd-background);
-		padding: 1rem;
-		font-family: inherit;
-		font-size: var(--fd-text-sm);
-		line-height: 1.6;
-		color: var(--fd-foreground);
+	/* When no toolbar, body gets top radius */
+	.form-markdown-editor:not(:has(.form-markdown-editor__toolbar)) .form-markdown-editor__body {
+		border-radius: var(--fd-radius-lg) var(--fd-radius-lg) 0 0;
 	}
 
-	.form-markdown-editor :global(.editor-preview h1),
-	.form-markdown-editor :global(.editor-preview h2),
-	.form-markdown-editor :global(.editor-preview h3),
-	.form-markdown-editor :global(.editor-preview h4),
-	.form-markdown-editor :global(.editor-preview h5),
-	.form-markdown-editor :global(.editor-preview h6) {
-		margin-top: 1.5em;
-		margin-bottom: 0.5em;
-		font-weight: 600;
-		color: var(--fd-foreground);
+	/* When no status bar, body gets bottom radius */
+	.form-markdown-editor:not(:has(.form-markdown-editor__status)) .form-markdown-editor__body {
+		border-radius: 0 0 var(--fd-radius-lg) var(--fd-radius-lg);
 	}
 
-	.form-markdown-editor :global(.editor-preview h1) {
-		font-size: 1.5rem;
-		border-bottom: 1px solid var(--fd-border);
-		padding-bottom: 0.5rem;
+	/* When no toolbar AND no status bar, body gets full radius */
+	.form-markdown-editor:not(:has(.form-markdown-editor__toolbar)):not(
+			:has(.form-markdown-editor__status)
+		)
+		.form-markdown-editor__body {
+		border-radius: var(--fd-radius-lg);
 	}
 
-	.form-markdown-editor :global(.editor-preview h2) {
-		font-size: 1.25rem;
-	}
+	/* ── CM6 overrides ─────────────────────────────── */
+	/* Design tokens (--fd-*) auto-resolve for dark mode via [data-theme='dark'] */
+	/* !important needed to override oneDark's JS-injected styles */
 
-	.form-markdown-editor :global(.editor-preview h3) {
-		font-size: 1.125rem;
+	.form-markdown-editor__body :global(.cm-editor) {
+		height: var(--editor-height, 300px);
+		background-color: var(--fd-muted) !important;
+		color: var(--fd-foreground) !important;
 	}
 
-	.form-markdown-editor :global(.editor-preview p) {
-		margin: 0.75em 0;
+	.form-markdown-editor__body :global(.cm-scroller) {
+		overflow: auto;
 	}
 
-	.form-markdown-editor :global(.editor-preview code) {
-		padding: 0.125rem 0.375rem;
-		background-color: var(--fd-subtle);
-		border-radius: var(--fd-radius-sm);
-		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
-		font-size: 0.8125rem;
+	.form-markdown-editor__body :global(.cm-content) {
+		color: var(--fd-foreground) !important;
+		caret-color: var(--fd-foreground) !important;
 	}
 
-	.form-markdown-editor :global(.editor-preview pre) {
-		padding: 1rem;
-		background-color: var(--fd-foreground);
-		border-radius: var(--fd-radius-lg);
-		overflow-x: auto;
+	.form-markdown-editor__body :global(.cm-line) {
+		color: var(--fd-foreground) !important;
 	}
 
-	.form-markdown-editor :global(.editor-preview pre code) {
-		padding: 0;
-		background-color: transparent;
-		color: var(--fd-subtle);
+	.form-markdown-editor__body :global(.cm-gutters) {
+		background-color: var(--fd-subtle) !important;
+		border-right: 1px solid var(--fd-border);
 	}
 
-	.form-markdown-editor :global(.editor-preview blockquote) {
-		margin: 1rem 0;
-		padding: 0.5rem 1rem;
-		border-left: 4px solid var(--fd-primary);
-		background-color: var(--fd-primary-muted);
-		color: var(--fd-foreground);
+	.form-markdown-editor__body :global(.cm-linenumber) {
+		color: var(--fd-muted-foreground) !important;
 	}
 
-	.form-markdown-editor :global(.editor-preview ul),
-	.form-markdown-editor :global(.editor-preview ol) {
-		margin: 0.75em 0;
-		padding-left: 1.5rem;
+	.form-markdown-editor__body :global(.cm-cursor) {
+		border-left-color: var(--fd-muted-foreground) !important;
 	}
 
-	.form-markdown-editor :global(.editor-preview li) {
-		margin: 0.25em 0;
+	.form-markdown-editor__body :global(.cm-activeLine) {
+		background-color: var(--fd-subtle) !important;
 	}
 
-	.form-markdown-editor :global(.editor-preview a) {
-		color: var(--fd-primary-hover);
-		text-decoration: underline;
+	.form-markdown-editor__body :global(.cm-activeLineGutter) {
+		background-color: var(--fd-subtle) !important;
 	}
 
-	.form-markdown-editor :global(.editor-preview a:hover) {
-		color: var(--fd-primary);
-	}
+	/* ── Markdown syntax styling ───────────────────── */
 
-	.form-markdown-editor :global(.editor-preview table) {
-		width: 100%;
-		border-collapse: collapse;
-		margin: 1rem 0;
+	.form-markdown-editor__body :global(.cm-header-1) {
+		font-size: 1.25rem;
+		line-height: 1.4;
 	}
 
-	.form-markdown-editor :global(.editor-preview th),
-	.form-markdown-editor :global(.editor-preview td) {
-		border: 1px solid var(--fd-border);
-		padding: 0.5rem 0.75rem;
-		text-align: left;
+	.form-markdown-editor__body :global(.cm-header-2) {
+		font-size: 1.125rem;
+		line-height: 1.4;
 	}
 
-	.form-markdown-editor :global(.editor-preview th) {
-		background-color: var(--fd-subtle);
-		font-weight: 600;
+	.form-markdown-editor__body :global(.cm-header-3) {
+		font-size: 1rem;
+		line-height: 1.4;
 	}
 
-	.form-markdown-editor :global(.editor-preview img) {
-		max-width: 100%;
-		border-radius: var(--fd-radius-lg);
+	.form-markdown-editor__body :global(.cm-header) {
+		font-weight: 600;
+		color: var(--fd-foreground) !important;
 	}
 
-	/* Side-by-side mode */
-	.form-markdown-editor :global(.CodeMirror-sided) {
-		width: 50% !important;
+	.form-markdown-editor__body :global(.cm-processingInstruction) {
+		color: var(--fd-success) !important;
 	}
 
-	.form-markdown-editor :global(.editor-preview-side) {
-		width: 50%;
-		border: 1px solid var(--fd-border);
-		border-left: none;
-		border-radius: 0 0 var(--fd-radius-lg) 0;
+	.form-markdown-editor__body :global(.cm-emphasis) {
+		color: var(--fd-foreground) !important;
+		font-style: italic;
 	}
 
-	/* Fullscreen mode adjustments */
-	.form-markdown-editor :global(.editor-toolbar.fullscreen) {
-		border-radius: 0;
+	.form-markdown-editor__body :global(.cm-strong) {
+		color: var(--fd-foreground) !important;
+		font-weight: 700;
 	}
 
-	.form-markdown-editor :global(.CodeMirror-fullscreen) {
-		border-radius: 0;
+	.form-markdown-editor__body :global(.cm-strikethrough) {
+		color: var(--fd-muted-foreground) !important;
+		text-decoration: line-through;
 	}
 
-	/* Placeholder */
-	.form-markdown-editor :global(.CodeMirror .CodeMirror-placeholder) {
-		color: var(--fd-muted-foreground);
-		font-style: italic;
+	.form-markdown-editor__body :global(.cm-url) {
+		color: var(--fd-primary) !important;
 	}
 
-	/* EasyMDE specific wrapper */
-	.form-markdown-editor :global(.EasyMDEContainer) {
-		width: 100%;
+	.form-markdown-editor__body :global(.cm-link) {
+		color: var(--fd-primary) !important;
+		text-decoration: underline;
 	}
 
-	/* When no status bar, CodeMirror gets bottom rounded corners */
-	.form-markdown-editor :global(.EasyMDEContainer:not(:has(.editor-statusbar)) .CodeMirror) {
-		border-radius: 0 0 0.5rem 0.5rem;
+	.form-markdown-editor__body :global(.cm-meta) {
+		color: var(--fd-muted-foreground) !important;
 	}
 
-	/* When status bar exists, it gets the bottom rounded corners */
-	.form-markdown-editor :global(.EasyMDEContainer:has(.editor-statusbar) .CodeMirror) {
-		border-bottom: none;
+	.form-markdown-editor__body :global(.cm-quote) {
+		color: var(--fd-success) !important;
+		font-style: italic;
 	}
 </style>