From fe15edc1a65608ad80f3a85bf08605e7177bc5b6 Mon Sep 17 00:00:00 2001
From: Dennis Tuan Anh Quach <83472928+Dboy0ZDev@users.noreply.github.com>
Date: Tue, 14 Apr 2026 12:16:42 +0200
Subject: [PATCH 1/3] Added tab whitespacing, save through hotkey and toast

---
 src/components/common/CodeEditor.tsx       | 21 +++++++++++++++++++++
 src/components/common/ConfigFileEditor.tsx |  7 +++++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/common/CodeEditor.tsx b/src/components/common/CodeEditor.tsx
index 7c3fed27..62580f99 100644
--- a/src/components/common/CodeEditor.tsx
+++ b/src/components/common/CodeEditor.tsx
@@ -13,6 +13,8 @@ import { useTheme } from "next-themes";
 import { useEffect, useRef } from "react";
 import { StreamLanguage } from "@codemirror/language";
 import { toml } from "@codemirror/legacy-modes/mode/toml";
+import { keymap } from "@codemirror/view";
+import { indentWithTab } from "@codemirror/commands";
 
 function tomlParseLinter() {
   return (view: EditorView): Diagnostic[] => {
@@ -52,6 +54,7 @@ interface Props {
   language?: Language;
   onChange: (value: string) => void;
   onValidation?: (isValid: boolean) => void;
+  onSave: () => void;
   readOnly?: boolean;
 }
 
@@ -72,6 +75,7 @@ const CodeEditor = ({
   language = "json",
   onChange,
   onValidation,
+  onSave,
   readOnly = false,
 }: Props) => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -80,12 +84,27 @@ const CodeEditor = ({
   onChangeRef.current = onChange;
   const onValidationRef = useRef(onValidation);
   onValidationRef.current = onValidation;
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
   const valueRef = useRef(value);
   valueRef.current = value;
 
   const { resolvedTheme } = useTheme();
   const currentTheme = resolvedTheme === "dark" ? vscodeDark : vscodeLight;
 
+  const tabExtension = keymap.of([indentWithTab]);
+
+  const saveKeymap = keymap.of([
+    {
+      key: "Mod-s",
+      preventDefault: true,
+      run: () => {
+        onSaveRef.current();
+        return true;
+      },
+    },
+  ]);
+
   useEffect(() => {
     if (!containerRef.current) return;
 
@@ -118,6 +137,8 @@ const CodeEditor = ({
             "&": { height: "100%", fontSize: "13px" },
             ".cm-scroller": { overflow: "auto", fontFamily: "monospace" },
           }),
+          tabExtension,
+          saveKeymap,
         ],
       }),
       parent: containerRef.current,
diff --git a/src/components/common/ConfigFileEditor.tsx b/src/components/common/ConfigFileEditor.tsx
index 5fbbf626..1cb0b23b 100644
--- a/src/components/common/ConfigFileEditor.tsx
+++ b/src/components/common/ConfigFileEditor.tsx
@@ -9,6 +9,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { browserApiClient } from "@/services/devGuardApi";
 import { Pencil } from "lucide-react";
 import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import useSWR from "swr";
 
 const defaultConfigFiles = [
@@ -71,6 +72,7 @@ const ConfigFileEditor = ({
     if (!configFileUrl) {
       return;
     }
+
     const resp = await browserApiClient(configFileUrl, {
       method: "PUT",
       headers: { "Content-Type": "text/plain" },
@@ -81,6 +83,7 @@ const ConfigFileEditor = ({
       setCodeError("Failed to save the new Configuration");
       return;
     }
+    toast.success("Config saved successfully");
     setEditorValue(newConfig);
     setCodeError(null);
     mutate();
@@ -118,6 +121,10 @@ const ConfigFileEditor = ({
           value={editorValue}
           onChange={setEditorValue}
           onValidation={handleEditorValidation}
+          onSave={() => {
+            if (!!codeError || editorValue === configFile) return;
+            handleConfigFileChange(editorValue);
+          }}
           language={selectedLanguage}
         />
         {codeError && <p className="text-sm text-destructive">{codeError}</p>}

From 6d2e98982d5ca470e8f0075380ccb4765ede2095 Mon Sep 17 00:00:00 2001
From: Dennis Tuan Anh Quach <83472928+Dboy0ZDev@users.noreply.github.com>
Date: Tue, 14 Apr 2026 12:29:57 +0200
Subject: [PATCH 2/3] Adjusted rendering behavior

---
 src/components/common/CodeEditor.tsx | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/common/CodeEditor.tsx b/src/components/common/CodeEditor.tsx
index 62580f99..610bb8be 100644
--- a/src/components/common/CodeEditor.tsx
+++ b/src/components/common/CodeEditor.tsx
@@ -92,21 +92,20 @@ const CodeEditor = ({
   const { resolvedTheme } = useTheme();
   const currentTheme = resolvedTheme === "dark" ? vscodeDark : vscodeLight;
 
-  const tabExtension = keymap.of([indentWithTab]);
-
-  const saveKeymap = keymap.of([
-    {
-      key: "Mod-s",
-      preventDefault: true,
-      run: () => {
-        onSaveRef.current();
-        return true;
-      },
-    },
-  ]);
-
   useEffect(() => {
     if (!containerRef.current) return;
+    const tabExtension = keymap.of([indentWithTab]);
+
+    const saveKeymap = keymap.of([
+      {
+        key: "Mod-s",
+        preventDefault: true,
+        run: () => {
+          onSaveRef.current();
+          return true;
+        },
+      },
+    ]);
 
     const langLinter = languageLinters[language];
 

From 46db9c374a389d8bcc6aa79e86e633ad8b6ed0b9 Mon Sep 17 00:00:00 2001
From: Dennis Tuan Anh Quach <83472928+Dboy0ZDev@users.noreply.github.com>
Date: Tue, 14 Apr 2026 12:32:46 +0200
Subject: [PATCH 3/3] Added Saveguards for save function

---
 src/components/common/ConfigFileEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/ConfigFileEditor.tsx b/src/components/common/ConfigFileEditor.tsx
index 1cb0b23b..691ff0e2 100644
--- a/src/components/common/ConfigFileEditor.tsx
+++ b/src/components/common/ConfigFileEditor.tsx
@@ -122,7 +122,7 @@ const ConfigFileEditor = ({
           onChange={setEditorValue}
           onValidation={handleEditorValidation}
           onSave={() => {
-            if (!!codeError || editorValue === configFile) return;
+            if (!!codeError || editorValue === configFile || configFile === undefined) return;
             handleConfigFileChange(editorValue);
           }}
           language={selectedLanguage}