From 9faf4a2692767b0bef4efe727b92071d2487d1d0 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Mon, 11 Dec 2023 16:00:19 -0700
Subject: [PATCH] Address review comments and enable light theme for vscode

---
 web-new/src/pages/ConfigEditor.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/web-new/src/pages/ConfigEditor.tsx b/web-new/src/pages/ConfigEditor.tsx
index 69ea7b766..59577b647 100644
--- a/web-new/src/pages/ConfigEditor.tsx
+++ b/web-new/src/pages/ConfigEditor.tsx
@@ -1,22 +1,28 @@
 import useSWR from "swr";
 import * as monaco from "monaco-editor";
 import { configureMonacoYaml } from "monaco-yaml";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useApiHost } from "@/api";
 import Heading from "@/components/ui/heading";
 import ActivityIndicator from "@/components/ui/activity-indicator";
 import { Button } from "@/components/ui/button";
 import axios from "axios";
 import copy from "copy-to-clipboard";
+import { useTheme } from "@/context/theme-provider";
 
 type SaveOptions = "saveonly" | "restart";
 
 function ConfigEditor() {
   const apiHost = useApiHost();
+
   const { data: config } = useSWR<string>("config/raw");
+
+  const { theme } = useTheme();
   const [success, setSuccess] = useState<string | undefined>();
   const [error, setError] = useState<string | undefined>();
-  const editorRef = useRef<any | null>();
+
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>();
+  const modelRef = useRef<monaco.editor.IEditorModel | null>();
 
   const onHandleSaveConfig = useCallback(
     async (save_option: SaveOptions) => {
@@ -64,18 +70,17 @@ function ConfigEditor() {
       return;
     }
 
-    if ((document?.getElementById("container")?.children || []).length > 0) {
+    if (modelRef.current != null) {
       // we don't need to recreate the editor if it already exists
       return;
     }
 
     const modelUri = monaco.Uri.parse("a://b/api/config/schema.json");
 
-    let yamlModel;
     if (monaco.editor.getModels().length > 0) {
-      yamlModel = monaco.editor.getModel(modelUri);
+      modelRef.current = monaco.editor.getModel(modelUri);
     } else {
-      yamlModel = monaco.editor.createModel(config, "yaml", modelUri);
+      modelRef.current = monaco.editor.createModel(config, "yaml", modelUri);
     }
 
     configureMonacoYaml(monaco, {
@@ -97,9 +102,9 @@ function ConfigEditor() {
     if (container != undefined) {
       editorRef.current = monaco.editor.create(container, {
         language: "yaml",
-        model: yamlModel,
+        model: modelRef.current,
         scrollBeyondLastLine: false,
-        theme: "vs-dark",
+        theme: theme == "dark" ? "vs-dark" : "vs-light",
       });
     }
   });