fix the editor

coder · aslilac · Dec 20, 2023 · Dec 18, 2023 · Dec 18, 2023 · Dec 18, 2023
commit d86c20e8049cac6f2abdb56a5e3639b1edf8b604
diff --git a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
@@ -92,8 +92,8 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
             }
 
             &.Mui-selected {
-              color: ${theme.palette.text.primary};
-              background: ${theme.colors.gray[14]};
+              color: ${theme.experimental.roles.active.text};
+              background: ${theme.experimental.roles.active.background};
             }
 
             &.Mui-focused {
@@ -133,16 +133,13 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
           } as CSSProperties
         }
       >
-        {isFolder ? (
+        {isFolder &&
           Object.keys(content)
             .sort(sortFileTree(content))
             .map((filename) => {
               const child = content[filename];
               return buildTreeItems(filename, child, currentPath);
-            })
-        ) : (
-          <></>
-        )}
+            })}
       </TreeItem>
     );
   };

diff --git a/site/src/pages/TemplateVersionEditorPage/MonacoEditor.tsx b/site/src/pages/TemplateVersionEditorPage/MonacoEditor.tsx
@@ -1,16 +1,22 @@
 import { useTheme } from "@emotion/react";
 import Editor, { loader } from "@monaco-editor/react";
 import * as monaco from "monaco-editor";
-import { FC, useMemo } from "react";
+import { type FC, useEffect, useMemo } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 
 loader.config({ monaco });
 
-export const MonacoEditor: FC<{
+interface MonacoEditorProps {
   value?: string;
   path?: string;
   onChange?: (value: string) => void;
-}> = ({ onChange, value, path }) => {
+}
+
+export const MonacoEditor: FC<MonacoEditorProps> = ({
+  onChange,
+  value,
+  path,
+}) => {
   const theme = useTheme();
 
   const language = useMemo(() => {
@@ -31,6 +37,20 @@ export const MonacoEditor: FC<{
     }
   }, [path]);
 
+  useEffect(() => {
+    document.fonts.ready
+      .then(() => {
+        // Ensures that all text is measured properly.
+        // If this isn't done, there can be weird selection issues.
+        monaco.editor.remeasureFonts();
+      })
+      .catch(() => {
+        // Not a biggie!
+      });
+
+    monaco.editor.defineTheme("min", theme.monaco);
+  }, [theme]);
+
   return (
     <Editor
       value={value}
@@ -52,62 +72,16 @@ export const MonacoEditor: FC<{
           onChange(newValue);
         }
       }}
-      onMount={(editor, monaco) => {
+      onMount={(editor) => {
         // This jank allows for Ctrl + Enter to work outside the editor.
         // We use this keybind to trigger a build.
         // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Private type in Monaco!
         (editor as any)._standaloneKeybindingService.addDynamicKeybinding(
           `-editor.action.insertLineAfter`,
           monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-          () => {
-            //
-          },
+          () => {},
         );
 
-        document.fonts.ready
-          .then(() => {
-            // Ensures that all text is measured properly.
-            // If this isn't done, there can be weird selection issues.
-            monaco.editor.remeasureFonts();
-          })
-          .catch(() => {
-            // Not a biggie!
-          });
-
-        monaco.editor.defineTheme("min", {
-          base: "vs-dark",
-          inherit: true,
-          rules: [
-            {
-              token: "comment",
-              foreground: "6B737C",
-            },
-            {
-              token: "type",
-              foreground: "B392F0",
-            },
-            {
-              token: "string",
-              foreground: "9DB1C5",
-            },
-            {
-              token: "variable",
-              foreground: "BBBBBB",
-            },
-            {
-              token: "identifier",
-              foreground: "B392F0",
-            },
-            {
-              token: "delimiter.curly",
-              foreground: "EBB325",
-            },
-          ],
-          colors: {
-            "editor.foreground": theme.palette.text.primary,
-            "editor.background": theme.palette.background.paper,
-          },
-        });
         editor.updateOptions({
           theme: "min",
         });

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
@@ -1,3 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
 import {
   MockFailedProvisionerJob,
   MockRunningProvisionerJob,
@@ -14,19 +16,19 @@ import {
   MockWorkspaceVolumeResource,
 } from "testHelpers/entities";
 import { TemplateVersionEditor } from "./TemplateVersionEditor";
-import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof TemplateVersionEditor> = {
-  title: "pages/TemplateVersionEditorPage",
+  title: "pages/TemplateVersionEditor",
+  parameters: {
+    chromatic,
+    layout: "fullscreen",
+  },
   component: TemplateVersionEditor,
   args: {
     template: MockTemplate,
     templateVersion: MockTemplateVersion,
     defaultFileTree: MockTemplateVersionFileTree,
   },
-  parameters: {
-    layout: "fullscreen",
-  },
 };
 
 export default meta;

diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts
@@ -1,9 +1,11 @@
 import colors from "./colors";
 import experimental from "./experimental";
+import monaco from "./monaco";
 import muiTheme from "./mui";
 
 export default {
   ...muiTheme,
   colors,
   experimental,
+  monaco,
 };
diff --git a/site/src/theme/dark/monaco.ts b/site/src/theme/dark/monaco.ts
@@ -0,0 +1,37 @@
+import muiTheme from "./mui";
+import type * as monaco from "monaco-editor";
+
+export default {
+  base: "vs-dark",
+  inherit: true,
+  rules: [
+    {
+      token: "comment",
+      foreground: "6B737C",
+    },
+    {
+      token: "type",
+      foreground: "B392F0",
+    },
+    {
+      token: "string",
+      foreground: "9DB1C5",
+    },
+    {
+      token: "variable",
+      foreground: "DDDDDD",
+    },
+    {
+      token: "identifier",
+      foreground: "B392F0",
+    },
+    {
+      token: "delimiter.curly",
+      foreground: "EBB325",
+    },
+  ],
+  colors: {
+    "editor.foreground": muiTheme.palette.text.primary,
+    "editor.background": muiTheme.palette.background.paper,
+  },
+} satisfies monaco.editor.IStandaloneThemeData;
diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts
@@ -1,9 +1,11 @@
 import colors from "./colors";
 import experimental from "./experimental";
+import monaco from "./monaco";
 import muiTheme from "./mui";
 
 export default {
   ...muiTheme,
   colors,
   experimental,
+  monaco,
 };
diff --git a/site/src/theme/darkBlue/monaco.ts b/site/src/theme/darkBlue/monaco.ts
@@ -0,0 +1,37 @@
+import muiTheme from "./mui";
+import type * as monaco from "monaco-editor";
+
+export default {
+  base: "vs-dark",
+  inherit: true,
+  rules: [
+    {
+      token: "comment",
+      foreground: "6B737C",
+    },
+    {
+      token: "type",
+      foreground: "B392F0",
+    },
+    {
+      token: "string",
+      foreground: "9DB1C5",
+    },
+    {
+      token: "variable",
+      foreground: "DDDDDD",
+    },
+    {
+      token: "identifier",
+      foreground: "B392F0",
+    },
+    {
+      token: "delimiter.curly",
+      foreground: "EBB325",
+    },
+  ],
+  colors: {
+    "editor.foreground": muiTheme.palette.text.primary,
+    "editor.background": muiTheme.palette.background.paper,
+  },
+} satisfies monaco.editor.IStandaloneThemeData;
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
@@ -1,4 +1,5 @@
 import type { Theme as MuiTheme } from "@mui/material/styles";
+import type * as monaco from "monaco-editor";
 import dark from "./dark";
 import darkBlue from "./darkBlue";
 import light from "./light";
@@ -8,6 +9,7 @@ import type { Colors } from "./colors";
 export interface Theme extends MuiTheme {
   colors: Colors;
   experimental: NewTheme;
+  monaco: monaco.editor.IStandaloneThemeData;
 }
 
 export const DEFAULT_THEME = "auto";

diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
@@ -109,7 +109,7 @@ export default {
       },
     },
     active: {
-      background: colors.sky[50],
+      background: colors.sky[100],
       outline: colors.sky[500],
       fill: colors.sky[600],
       text: colors.sky[950],

diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts
@@ -1,9 +1,11 @@
 import colors from "./colors";
 import experimental from "./experimental";
+import monaco from "./monaco";
 import muiTheme from "./mui";
 
 export default {
   ...muiTheme,
   colors,
   experimental,
+  monaco,
 };
diff --git a/site/src/theme/light/monaco.ts b/site/src/theme/light/monaco.ts
@@ -0,0 +1,37 @@
+import muiTheme from "./mui";
+import type * as monaco from "monaco-editor";
+
+export default {
+  base: "vs",
+  inherit: true,
+  rules: [
+    {
+      token: "comment",
+      foreground: "6B737C",
+    },
+    {
+      token: "type",
+      foreground: "682CD7",
+    },
+    {
+      token: "string",
+      foreground: "1766B4",
+    },
+    {
+      token: "variable",
+      foreground: "444444",
+    },
+    {
+      token: "identifier",
+      foreground: "682CD7",
+    },
+    {
+      token: "delimiter.curly",
+      foreground: "EBB325",
+    },
+  ],
+  colors: {
+    "editor.foreground": muiTheme.palette.text.primary,
+    "editor.background": muiTheme.palette.background.paper,
+  },
+} satisfies monaco.editor.IStandaloneThemeData;