Merge pull request #448 from cloudflare/vshinde/md-support

fix: support markdown in monaco editor

Author: vaibhavshn

src/components/cloudflare-account-selector.tsx

@@ -11,10 +11,17 @@ import { Switch } from '@/components/ui/switch';
 import { toast } from 'sonner';
 import { apiClient } from '@/lib/api-client';
 import { CloudflareLogo } from '@cloudflare/kumo';
-import { Loader2, CheckCircle2, AlertCircle, MoreVertical, ExternalLink, LogOut, RefreshCw } from 'lucide-react';
+import {
+	Loader2,
+	CheckCircle2,
+	AlertCircle,
+	MoreVertical,
+	RefreshCw,
+} from 'lucide-react';
 import { useLimitsContext } from '@/contexts/limits-context';
 import { CloudflareLogoThemed } from './shared/CloudflareLogoThemed';
 import { startCloudflareConnect } from '@/lib/cloudflare-connect';
+import { ArrowSquareOutIcon, SignOutIcon } from '@phosphor-icons/react';
 
 interface CloudflareAccount {
 	id: string;
@@ -309,17 +316,17 @@ export function CloudflareAccountSelector() {
 								<DropdownMenu.Content align="end">
 									{gatewayDashUrl && (
 										<DropdownMenu.Item
+											icon={ArrowSquareOutIcon}
 											onClick={() => window.open(gatewayDashUrl, '_blank')}
 										>
-											<ExternalLink className="size-4" />
 											View gateway
 										</DropdownMenu.Item>
 									)}
 									<DropdownMenu.Item
+										icon={SignOutIcon}
 										onClick={handleDisconnect}
 										variant="danger"
 									>
-										<LogOut className="size-4" />
 										Disconnect
 									</DropdownMenu.Item>
 								</DropdownMenu.Content>

src/components/monaco-editor/monaco-editor.tsx

@@ -30,6 +30,22 @@ self.MonacoEnvironment = {
 	},
 };
 
+/** Resolve Monaco language id, including markdown when only a path is known. */
+function resolveLanguage(
+	language: string | undefined,
+	path: string | undefined,
+): string {
+	if (language && language !== 'plaintext') {
+		return language;
+	}
+	if (path) {
+		const ext = path.split('.').pop()?.toLowerCase();
+		if (ext === 'md' || ext === 'markdown') return 'markdown';
+		if (ext === 'mdx') return 'mdx';
+	}
+	return language || 'typescript';
+}
+
 monaco.editor.defineTheme('vesper', vesperTheme);
 
 monaco.editor.defineTheme('vibesdk', {
@@ -247,7 +263,7 @@ export const MonacoEditor = memo<MonacoEditorProps>(function MonacoEditor({
 			...restOptions
 		} = options;
 
-		const initialLanguage = language || 'typescript';
+		const initialLanguage = resolveLanguage(language, pathRef.current);
 		const initialValue = value ?? '';
 		const model = getOrCreateModel(
 			initialValue,
@@ -320,7 +336,7 @@ export const MonacoEditor = memo<MonacoEditorProps>(function MonacoEditor({
 		if (!editor.current) return;
 
 		const nextValue = createOptions.value ?? '';
-		const nextLanguage = createOptions.language || 'typescript';
+		const nextLanguage = resolveLanguage(createOptions.language, path);
 		const pathChanged = path !== prevPath.current;
 		const valueChanged = nextValue !== prevValue.current;
 
@@ -550,8 +566,8 @@ export const MonacoDiffEditor = memo<MonacoDiffEditorProps>(
 
 		useEffect(() => {
 			if (!diffEditor.current) return;
-			const lang = language || 'plaintext';
-			const prevOriginal = originalModel.current;
+		const lang = resolveLanguage(language, path);
+		const prevOriginal = originalModel.current;
 			const prevModified = modifiedModel.current;
 			const original = monaco.editor.createModel(
 				originalValue,

src/utils/string.ts

@@ -15,6 +15,11 @@ export const getFileType = (path: string): string => {
 			return 'html';
 		case 'json':
 			return 'json';
+		case 'md':
+		case 'markdown':
+			return 'markdown';
+		case 'mdx':
+			return 'mdx';
 		default:
 			return 'plaintext';
 	}