Fully cherry pick injectablizing custom monaco themes

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/monaco-editor/monaco-themes.ts

@@ -4,27 +4,16 @@
  */
 
 // Monaco editor themes customization
-import { editor } from "monaco-editor";
-import cloudsMidnight from "./monaco-themes/clouds-midnight.json";
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type { editor } from "monaco-editor";
 
 export type MonacoTheme = "vs" | "vs-dark" | "hc-black" | MonacoCustomTheme;
 export type MonacoCustomTheme = "clouds-midnight";
 
 export interface MonacoThemeData extends editor.IStandaloneThemeData {
-  name?: string;
+  name: string;
 }
 
-// Registered names could be then used in "themes/*.json" in "{monacoTheme: [name]}"
-export const customThemes: Partial<Record<MonacoCustomTheme, MonacoThemeData>> = {
-  "clouds-midnight": cloudsMidnight as MonacoThemeData,
-};
-
-export function registerCustomThemes(): void {
-  Object.entries(customThemes).forEach(([name, theme]) => {
-    editor.defineTheme(name, theme);
-  });
-}
-
-export async function loadCustomTheme(name: string): Promise<MonacoThemeData> {
-  return import(`./monaco-themes/${name}.json`);
-}
+export const customMonacoThemeInjectionToken = getInjectionToken<MonacoThemeData>({
+  id: "custom-monaco-theme-token",
+});

src/renderer/components/monaco-editor/monaco-themes/clouds-midnight.injectable.ts

@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { customMonacoThemeInjectionToken } from "../monaco-themes";
+
+import { getInjectable } from "@ogre-tools/injectable";
+
+const cloudsMidnightThemeInjectable = getInjectable({
+  id: "clouds-midnight-theme",
+  instantiate: () => ({
+    "name": "clouds-midnight",
+    "base": "vs-dark" as const,
+    "inherit": true,
+    "rules": [
+      {
+        "background": "191919",
+        "token": "",
+      },
+      {
+        "foreground": "3c403b",
+        "token": "comment",
+      },
+      {
+        "foreground": "5d90cd",
+        "token": "string",
+      },
+      {
+        "foreground": "46a609",
+        "token": "constant.numeric",
+      },
+      {
+        "foreground": "39946a",
+        "token": "constant.language",
+      },
+      {
+        "foreground": "927c5d",
+        "token": "keyword",
+      },
+      {
+        "foreground": "927c5d",
+        "token": "support.constant.property-value",
+      },
+      {
+        "foreground": "927c5d",
+        "token": "constant.other.color",
+      },
+      {
+        "foreground": "366f1a",
+        "token": "keyword.other.unit",
+      },
+      {
+        "foreground": "a46763",
+        "token": "entity.other.attribute-name.html",
+      },
+      {
+        "foreground": "4b4b4b",
+        "token": "keyword.operator",
+      },
+      {
+        "foreground": "e92e2e",
+        "token": "storage",
+      },
+      {
+        "foreground": "858585",
+        "token": "entity.other.inherited-class",
+      },
+      {
+        "foreground": "606060",
+        "token": "entity.name.tag",
+      },
+      {
+        "foreground": "a165ac",
+        "token": "constant.character.entity",
+      },
+      {
+        "foreground": "a165ac",
+        "token": "support.class.js",
+      },
+      {
+        "foreground": "606060",
+        "token": "entity.other.attribute-name",
+      },
+      {
+        "foreground": "e92e2e",
+        "token": "meta.selector.css",
+      },
+      {
+        "foreground": "e92e2e",
+        "token": "entity.name.tag.css",
+      },
+      {
+        "foreground": "e92e2e",
+        "token": "entity.other.attribute-name.id.css",
+      },
+      {
+        "foreground": "e92e2e",
+        "token": "entity.other.attribute-name.class.css",
+      },
+      {
+        "foreground": "616161",
+        "token": "meta.property-name.css",
+      },
+      {
+        "foreground": "e92e2e",
+        "token": "support.function",
+      },
+      {
+        "foreground": "ffffff",
+        "background": "e92e2e",
+        "token": "invalid",
+      },
+      {
+        "foreground": "e92e2e",
+        "token": "punctuation.section.embedded",
+      },
+      {
+        "foreground": "606060",
+        "token": "punctuation.definition.tag",
+      },
+      {
+        "foreground": "a165ac",
+        "token": "constant.other.color.rgb-value.css",
+      },
+      {
+        "foreground": "a165ac",
+        "token": "support.constant.property-value.css",
+      },
+    ],
+    "colors": {
+      "editor.foreground": "#929292",
+      "editor.background": "#191919",
+      "editor.selectionBackground": "#000000",
+      "editor.lineHighlightBackground": "#D7D7D708",
+      "editorCursor.foreground": "#7DA5DC",
+      "editorWhitespace.foreground": "#BFBFBF",
+    },
+  }),
+  injectionToken: customMonacoThemeInjectionToken,
+});
+
+export default cloudsMidnightThemeInjectable;

src/renderer/monaco/add-new-theme.global-override-for-injectable.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getGlobalOverride } from "../../common/test-utils/get-global-override";
+import addNewMonacoThemeInjectable from "./add-new-theme.injectable";
+
+export default getGlobalOverride(addNewMonacoThemeInjectable, () => () => {});

src/renderer/monaco/add-new-theme.injectable.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { editor } from "monaco-editor";
+import type { MonacoThemeData } from "../components/monaco-editor";
+
+const addNewMonacoThemeInjectable = getInjectable({
+  id: "add-new-monaco-theme",
+  instantiate: () => (data: MonacoThemeData) => editor.defineTheme(data.name, data),
+  causesSideEffects: true,
+});
+
+export default addNewMonacoThemeInjectable;