feat(editor): integrate Monaco Editor for local file editing and enhance language inference

surfsense_web/components/editor-panel/editor-panel.tsx

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { closeEditorPanelAtom, editorPanelAtom } from "@/atoms/editor/editor-panel.atom";
 import { VersionHistoryButton } from "@/components/documents/version-history";
+import { LocalFileMonaco } from "@/components/editor/local-file-monaco";
 import { MarkdownViewer } from "@/components/markdown-viewer";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -14,6 +15,7 @@ import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/u
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { useElectronAPI } from "@/hooks/use-platform";
 import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
+import { inferMonacoLanguageFromPath } from "@/lib/editor-language";
 
 const PlateEditor = dynamic(
 	() => import("@/components/editor/plate-editor").then((m) => ({ default: m.PlateEditor })),
@@ -77,6 +79,7 @@ export function EditorPanelContent({
 	const [downloading, setDownloading] = useState(false);
 
 	const [editedMarkdown, setEditedMarkdown] = useState<string | null>(null);
+	const [localFileContent, setLocalFileContent] = useState("");
 	const markdownRef = useRef<string>("");
 	const initialLoadDone = useRef(false);
 	const changeCountRef = useRef(0);
@@ -91,6 +94,7 @@ export function EditorPanelContent({
 		setError(null);
 		setEditorDoc(null);
 		setEditedMarkdown(null);
+		setLocalFileContent("");
 		initialLoadDone.current = false;
 		changeCountRef.current = 0;
 
@@ -115,6 +119,7 @@ export function EditorPanelContent({
 						source_markdown: readResult.content,
 					};
 					markdownRef.current = content.source_markdown;
+					setLocalFileContent(content.source_markdown);
 					setDisplayTitle(title || inferredTitle);
 					setEditorDoc(content);
 					initialLoadDone.current = true;
@@ -244,6 +249,7 @@ export function EditorPanelContent({
 		? (isLocalFileMode || EDITABLE_DOCUMENT_TYPES.has(editorDoc.document_type ?? "")) &&
 			!isLargeDocument
 		: false;
+	const localFileLanguage = inferMonacoLanguageFromPath(localFilePath);
 
 	return (
 		<>
@@ -348,6 +354,20 @@ export function EditorPanelContent({
 						</Alert>
 						<MarkdownViewer content={editorDoc.source_markdown} />
 					</div>
+				) : isLocalFileMode ? (
+					<div className="h-full overflow-hidden">
+						<LocalFileMonaco
+							filePath={localFilePath ?? "local-file.txt"}
+							language={localFileLanguage}
+							value={localFileContent}
+							onChange={(next) => {
+								markdownRef.current = next;
+								setLocalFileContent(next);
+								if (!initialLoadDone.current) return;
+								setEditedMarkdown(next === (editorDoc?.source_markdown ?? "") ? null : next);
+							}}
+						/>
+					</div>
 				) : isEditableType ? (
 					<PlateEditor
 						key={isLocalFileMode ? localFilePath ?? "local-file" : documentId}

surfsense_web/components/editor/local-file-monaco.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useTheme } from "next-themes";
+
+const MonacoEditor = dynamic(() => import("@monaco-editor/react"), {
+	ssr: false,
+});
+
+interface LocalFileMonacoProps {
+	filePath: string;
+	language: string;
+	value: string;
+	onChange: (next: string) => void;
+}
+
+export function LocalFileMonaco({ filePath, language, value, onChange }: LocalFileMonacoProps) {
+	const { resolvedTheme } = useTheme();
+
+	return (
+		<div className="h-full w-full overflow-hidden bg-sidebar">
+			<MonacoEditor
+				path={filePath}
+				language={language}
+				value={value}
+				theme={resolvedTheme === "dark" ? "vs-dark" : "vs"}
+				onChange={(next) => onChange(next ?? "")}
+				options={{
+					automaticLayout: true,
+					minimap: { enabled: false },
+					lineNumbers: "on",
+					lineNumbersMinChars: 3,
+					lineDecorationsWidth: 12,
+					glyphMargin: false,
+					folding: true,
+					overviewRulerLanes: 0,
+					hideCursorInOverviewRuler: true,
+					scrollBeyondLastLine: false,
+					wordWrap: "off",
+					scrollbar: {
+						vertical: "hidden",
+						horizontal: "hidden",
+						alwaysConsumeMouseWheel: false,
+					},
+					tabSize: 2,
+					insertSpaces: true,
+					fontSize: 12,
+					fontFamily:
+						"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace",
+					renderWhitespace: "selection",
+					smoothScrolling: true,
+				}}
+			/>
+		</div>
+	);
+}