Replace Ace Editor with monaco (#2949)

Signed-off-by: Pavel Ashevskii <pashevskii@mirantis.com>

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

integration/__tests__/cluster-pages.tests.ts

@@ -448,8 +448,9 @@ describe("Lens cluster pages", () => {
         await app.client.click(".Icon.new-dock-tab");
         await app.client.waitUntilTextExists("li.MenuItem.create-resource-tab", "Create resource");
         await app.client.click("li.MenuItem.create-resource-tab");
-        await app.client.waitForVisible(".CreateResource div.ace_content");
+        await app.client.waitForVisible(".CreateResource div.react-monaco-editor-container");
         // Write pod manifest to editor
+        await app.client.click(".CreateResource div.react-monaco-editor-container");
         await app.client.keys("apiVersion: v1\n");
         await app.client.keys("kind: Pod\n");
         await app.client.keys("metadata:\n");

package.json

@@ -222,6 +222,7 @@
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
     "node-fetch": "^2.6.1",
+    "monaco-editor": "^0.26.1",
     "node-pty": "^0.10.1",
     "npm": "^6.14.8",
     "openid-client": "^3.15.2",
@@ -230,6 +231,7 @@
     "proper-lockfile": "^4.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-monaco-editor": "^0.44.0",
     "react-router": "^5.2.0",
     "react-virtualized-auto-sizer": "^1.0.5",
     "readable-stream": "^3.6.0",
@@ -317,7 +319,6 @@
     "@types/webpack-node-externals": "^1.7.1",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.1",
-    "ace-builds": "^1.4.12",
     "ansi_up": "^5.0.0",
     "chart.js": "^2.9.4",
     "circular-dependency-plugin": "^5.2.2",

src/common/__tests__/search-store.test.ts

@@ -23,6 +23,8 @@ import { SearchStore } from "../search-store";
 import { Console } from "console";
 import { stdout, stderr } from "process";
 
+jest.mock("react-monaco-editor", () => null);
+
 jest.mock("electron", () => ({
   app: {
     getPath: () => "/foo",

src/common/routes/preferences.ts

@@ -38,6 +38,10 @@ export const kubernetesRoute: RouteProps = {
   path: `${preferencesRoute.path}/kubernetes`
 };
 
+export const editorRoute: RouteProps = {
+  path: `${preferencesRoute.path}/editor`
+};
+
 export const telemetryRoute: RouteProps = {
   path: `${preferencesRoute.path}/telemetry`
 };
@@ -50,5 +54,6 @@ export const preferencesURL = buildURL(preferencesRoute.path);
 export const appURL = buildURL(appRoute.path);
 export const proxyURL = buildURL(proxyRoute.path);
 export const kubernetesURL = buildURL(kubernetesRoute.path);
+export const editorURL = buildURL(editorRoute.path);
 export const telemetryURL = buildURL(telemetryRoute.path);
 export const extensionURL = buildURL(extensionRoute.path);

src/common/user-store/preferences-helpers.ts

@@ -24,6 +24,8 @@ import path from "path";
 import os from "os";
 import { ThemeStore } from "../../renderer/theme.store";
 import { ObservableToggleSet } from "../utils";
+import type {monaco} from "react-monaco-editor";
+import merge from "lodash/merge";
 
 export interface KubeconfigSyncEntry extends KubeconfigSyncValue {
   filePath: string;
@@ -31,6 +33,20 @@ export interface KubeconfigSyncEntry extends KubeconfigSyncValue {
 
 export interface KubeconfigSyncValue { }
 
+export interface EditorConfiguration {
+  miniMap?: monaco.editor.IEditorMinimapOptions;
+  lineNumbers?: monaco.editor.LineNumbersType;
+  tabSize?: number;
+}
+
+export const defaultEditorConfig: EditorConfiguration = {
+  lineNumbers: "on",
+  miniMap: {
+    enabled: true
+  },
+  tabSize: 2
+};
+
 interface PreferenceDescription<T, R = T> {
   fromStore(val: T | undefined): R;
   toStore(val: R): T | undefined;
@@ -222,6 +238,15 @@ const syncKubeconfigEntries: PreferenceDescription<KubeconfigSyncEntry[], Map<st
   },
 };
 
+const editorConfiguration: PreferenceDescription<EditorConfiguration, EditorConfiguration> = {
+  fromStore(val) {
+    return merge(defaultEditorConfig, val);
+  },
+  toStore(val) {
+    return val;
+  },
+};
+
 type PreferencesModelType<field extends keyof typeof DESCRIPTORS> = typeof DESCRIPTORS[field] extends PreferenceDescription<infer T, any> ? T : never;
 type UserStoreModelType<field extends keyof typeof DESCRIPTORS> = typeof DESCRIPTORS[field] extends PreferenceDescription<any, infer T> ? T : never;
 
@@ -248,4 +273,5 @@ export const DESCRIPTORS = {
   openAtLogin,
   hiddenTableColumns,
   syncKubeconfigEntries,
+  editorConfiguration,
 };

src/common/user-store/user-store.ts

@@ -30,8 +30,9 @@ import { appEventBus } from "../event-bus";
 import path from "path";
 import { fileNameMigration } from "../../migrations/user-store";
 import { ObservableToggleSet, toJS } from "../../renderer/utils";
-import { DESCRIPTORS, KubeconfigSyncValue, UserPreferencesModel } from "./preferences-helpers";
+import { DESCRIPTORS, KubeconfigSyncValue, UserPreferencesModel, EditorConfiguration } from "./preferences-helpers";
 import logger from "../../main/logger";
+import type {monaco} from "react-monaco-editor";
 
 export interface UserStoreModel {
   lastSeenAppVersion: string;
@@ -68,7 +69,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
   @observable shell?: string;
   @observable downloadBinariesPath?: string;
   @observable kubectlBinariesPath?: string;
-
+  
   /**
    * Download kubectl binaries matching cluster version
    */
@@ -81,6 +82,11 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
    */
   hiddenTableColumns = observable.map<string, ObservableToggleSet<string>>();
 
+  /**
+   * Monaco editor configs
+   */
+   @observable editorConfiguration:EditorConfiguration = {tabSize: null, miniMap: null, lineNumbers: null};
+  
   /**
    * The set of file/folder paths to be synced
    */
@@ -109,7 +115,29 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
       });
     }, {
       fireImmediately: true,
-    });
+    }); 
+  }
+
+  // Returns monaco editor options for selected editor type (the place, where a particular instance of the editor is mounted)
+  getEditorOptions(): monaco.editor.IStandaloneEditorConstructionOptions {
+    return {
+      automaticLayout: true,
+      tabSize: this.editorConfiguration.tabSize,
+      minimap: this.editorConfiguration.miniMap,
+      lineNumbers: this.editorConfiguration.lineNumbers
+    };
+  }
+
+  setEditorLineNumbers(lineNumbers: monaco.editor.LineNumbersType) {
+    this.editorConfiguration.lineNumbers = lineNumbers;
+  }
+
+  setEditorTabSize(tabSize: number) {
+    this.editorConfiguration.tabSize = tabSize;
+  }
+
+  enableEditorMinimap(miniMap: boolean ) {
+    this.editorConfiguration.miniMap.enabled = miniMap;
   }
 
   /**
@@ -182,6 +210,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
     this.openAtLogin = DESCRIPTORS.openAtLogin.fromStore(preferences?.openAtLogin);
     this.hiddenTableColumns.replace(DESCRIPTORS.hiddenTableColumns.fromStore(preferences?.hiddenTableColumns));
     this.syncKubeconfigEntries.replace(DESCRIPTORS.syncKubeconfigEntries.fromStore(preferences?.syncKubeconfigEntries));
+    this.editorConfiguration = DESCRIPTORS.editorConfiguration.fromStore(preferences?.editorConfiguration);
   }
 
   toJSON(): UserStoreModel {
@@ -202,6 +231,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
         openAtLogin: DESCRIPTORS.openAtLogin.toStore(this.openAtLogin),
         hiddenTableColumns: DESCRIPTORS.hiddenTableColumns.toStore(this.hiddenTableColumns),
         syncKubeconfigEntries: DESCRIPTORS.syncKubeconfigEntries.toStore(this.syncKubeconfigEntries),
+        editorConfiguration: DESCRIPTORS.editorConfiguration.toStore(this.editorConfiguration),
       },
     };
 

src/extensions/registries/__tests__/page-registry.test.ts

@@ -29,6 +29,8 @@ import { ThemeStore } from "../../../renderer/theme.store";
 import { TerminalStore } from "../../renderer-api/components";
 import { UserStore } from "../../../common/user-store";
 
+jest.mock("react-monaco-editor", () => null);
+
 jest.mock("electron", () => ({
   app: {
     getPath: () => "tmp",

src/renderer/bootstrap.tsx

@@ -28,6 +28,7 @@ import * as ReactRouter from "react-router";
 import * as ReactRouterDom from "react-router-dom";
 import * as LensExtensionsCommonApi from "../extensions/common-api";
 import * as LensExtensionsRendererApi from "../extensions/renderer-api";
+import { monaco } from "react-monaco-editor";
 import { render, unmountComponentAtNode } from "react-dom";
 import { delay } from "../common/utils";
 import { isMac, isDevelopment } from "../common/vars";
@@ -49,6 +50,7 @@ import { FilesystemProvisionerStore } from "../main/extension-filesystem";
 import { ThemeStore } from "./theme.store";
 import { SentryInit } from "../common/sentry";
 import { TerminalStore } from "./components/dock/terminal.store";
+import cloudsMidnight from "./monaco-themes/Clouds Midnight.json";
 
 configurePackages();
 
@@ -102,6 +104,12 @@ export async function bootstrap(App: AppComponent) {
   ExtensionsStore.createInstance();
   FilesystemProvisionerStore.createInstance();
 
+  // define Monaco Editor themes
+  const { base, ...params } = cloudsMidnight;
+  const baseTheme = base as monaco.editor.BuiltinTheme;
+
+  monaco.editor.defineTheme("clouds-midnight", {base: baseTheme, ...params});
+
   // ThemeStore depends on: UserStore
   ThemeStore.createInstance();
 

src/renderer/components/+add-cluster/add-cluster.scss

@@ -23,7 +23,7 @@
   --flex-gap: #{$unit * 2};
   $spacing: $padding * 2;
 
-  .AceEditor {
+  .MonacoEditor {
     min-height: 600px;
     max-height: 600px;
     border: 1px solid var(--colorVague);

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -34,11 +34,13 @@ import { appEventBus } from "../../../common/event-bus";
 import { loadConfigFromString, splitConfig } from "../../../common/kube-helpers";
 import { docsUrl } from "../../../common/vars";
 import { navigate } from "../../navigation";
-import { getCustomKubeConfigPath, iter } from "../../utils";
-import { AceEditor } from "../ace-editor";
+import { getCustomKubeConfigPath, cssNames, iter } from "../../utils";
 import { Button } from "../button";
 import { Notifications } from "../notifications";
 import { SettingLayout } from "../layout/setting-layout";
+import MonacoEditor from "react-monaco-editor";
+import { ThemeStore } from "../../theme.store";
+import { UserStore } from "../../../common/user-store";
 
 interface Option {
   config: KubeConfig;
@@ -114,10 +116,11 @@ export class AddCluster extends React.Component {
           Read more about adding clusters <a href={`${docsUrl}/catalog/add-clusters/`} rel="noreferrer" target="_blank">here</a>.
         </p>
         <div className="flex column">
-          <AceEditor
-            autoFocus
-            showGutter={false}
-            mode="yaml"
+          <MonacoEditor
+            options={{...UserStore.getInstance().getEditorOptions()}}
+            className={cssNames("MonacoEditor")}
+            theme={ThemeStore.getInstance().activeTheme.monacoTheme}
+            language="yaml"
             value={this.customConfig}
             onChange={value => {
               this.customConfig = value;

src/renderer/components/+apps-releases/release-details.scss

@@ -82,11 +82,11 @@
   }
 
   .values {
-    .AceEditor {
+    .MonacoEditor {
       min-height: 300px;
     }
 
-    .AceEditor + .Button {
+    .MonacoEditor + .Button {
       align-self: flex-start;
     }
   }

src/renderer/components/+apps-releases/release-details.tsx

@@ -35,7 +35,6 @@ import { cssNames, stopPropagation } from "../../utils";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Spinner } from "../spinner";
 import { Table, TableCell, TableHead, TableRow } from "../table";
-import { AceEditor } from "../ace-editor";
 import { Button } from "../button";
 import { releaseStore } from "./release.store";
 import { Notifications } from "../notifications";
@@ -47,6 +46,8 @@ import { secretsStore } from "../+config-secrets/secrets.store";
 import { Secret } from "../../../common/k8s-api/endpoints";
 import { getDetailsUrl } from "../kube-detail-params";
 import { Checkbox } from "../checkbox";
+import MonacoEditor from "react-monaco-editor";
+import { UserStore } from "../../../common/user-store";
 
 interface Props {
   release: HelmRelease;
@@ -158,15 +159,16 @@ export class ReleaseDetails extends Component<Props> {
             onChange={value => this.showOnlyUserSuppliedValues = value}
             disabled={valuesLoading}
           />
-          <AceEditor
-            mode="yaml"
+          <MonacoEditor
+            language="yaml"
             value={values}
             onChange={text => this.values = text}
-            className={cssNames({ loading: valuesLoading })}
-            readOnly={valuesLoading || this.showOnlyUserSuppliedValues}
+            theme={ThemeStore.getInstance().activeTheme.monacoTheme}
+            className={cssNames("MonacoEditor", {loading: valuesLoading})}
+            options={{readOnly: valuesLoading || this.showOnlyUserSuppliedValues, ...UserStore.getInstance().getEditorOptions()}}
           >
             {valuesLoading && <Spinner center />}
-          </AceEditor>
+          </MonacoEditor>
           <Button
             primary
             label="Save"

src/renderer/components/+custom-resources/crd-details.tsx

@@ -25,13 +25,16 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
 import type { CustomResourceDefinition } from "../../../common/k8s-api/endpoints/crd.api";
-import { AceEditor } from "../ace-editor";
+import { cssNames } from "../../utils";
+import { ThemeStore } from "../../theme.store";
 import { Badge } from "../badge";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { Input } from "../input";
 import { KubeObjectMeta } from "../kube-object-meta";
+import MonacoEditor from "react-monaco-editor";
+import { UserStore } from "../../../common/user-store";
 
 interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
 }
@@ -143,11 +146,12 @@ export class CRDDetails extends React.Component<Props> {
         {validation &&
         <>
           <DrawerTitle title="Validation"/>
-          <AceEditor
-            mode="yaml"
-            className="validation"
+          <MonacoEditor
+            options={{readOnly: true, ...UserStore.getInstance().getEditorOptions()}}
+            className={cssNames("MonacoEditor", "validation")}
+            theme={ThemeStore.getInstance().activeTheme.monacoTheme}
+            language="yaml"
             value={validation}
-            readOnly
           />
         </>
         }

src/renderer/components/+preferences/editor.tsx

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import { observer } from "mobx-react";
+import React from "react";
+import { UserStore } from "../../../common/user-store";
+import { FormSwitch, Switcher } from "../switch";
+import { SubTitle } from "../layout/sub-title";
+import { Input } from "../input";
+import { isNumber } from "../input/input_validators";
+import { Select, SelectOption } from "../select";
+
+enum EditorLineNumbersStyles {
+  on = "On",
+  off = "Off",
+  relative = "Relative",
+  interval = "Interval"
+}
+
+export const Editor = observer(() => {
+
+  return (
+    <section id="editor">
+      <h2 data-testid="editor-configuration-header">Editor configuration</h2>
+      <section>
+        <FormSwitch
+          control={
+            <Switcher
+              checked={UserStore.getInstance().editorConfiguration.miniMap.enabled}
+              onChange={v => UserStore.getInstance().enableEditorMinimap(v.target.checked)}
+              name="minimap"
+            />
+          }
+          label="Show minimap"
+        />
+      </section>
+      <section>
+        <SubTitle title="Line numbers"/>
+        <Select
+          options={Object.entries(EditorLineNumbersStyles).map(entry => ({label: entry[1], value: entry[0]}))}
+          value={UserStore.getInstance().editorConfiguration?.lineNumbers}
+          onChange={({ value }: SelectOption) => UserStore.getInstance().setEditorLineNumbers(value)}
+          themeName="lens"
+        />
+      </section>
+      <section>
+        <SubTitle title="Tab size"/>
+        <Input
+          theme="round-black"
+          min={1}
+          max={10}
+          validators={[isNumber]}
+          value={UserStore.getInstance().editorConfiguration.tabSize?.toString()}
+          onChange={(value) => {(Number(value) || value=="") && UserStore.getInstance().setEditorTabSize(Number(value));}}
+        />
+      </section>
+    </section>
+  );
+});
+    

src/renderer/components/+preferences/preferences.tsx

@@ -28,6 +28,7 @@ import { matchPath, Redirect, Route, RouteProps, Switch } from "react-router";
 import {
   appRoute,
   appURL,
+  editorURL,
   extensionRoute,
   extensionURL,
   kubernetesRoute,
@@ -35,6 +36,7 @@ import {
   preferencesURL,
   proxyRoute,
   proxyURL,
+  editorRoute,
   telemetryRoute,
   telemetryURL,
 } from "../../../common/routes";
@@ -45,6 +47,7 @@ import { SubTitle } from "../layout/sub-title";
 import { Tab, Tabs } from "../tabs";
 import { Application } from "./application";
 import { Kubernetes } from "./kubernetes";
+import { Editor } from "./editor";
 import { LensProxy } from "./proxy";
 import { Telemetry } from "./telemetry";
 import { Extensions } from "./extensions";
@@ -71,6 +74,7 @@ export class Preferences extends React.Component {
         <Tab value={appURL()} label="Application" data-testid="application-tab" active={isActive(appRoute)}/>
         <Tab value={proxyURL()} label="Proxy" data-testid="proxy-tab" active={isActive(proxyRoute)}/>
         <Tab value={kubernetesURL()} label="Kubernetes" data-testid="kubernetes-tab" active={isActive(kubernetesRoute)}/>
+        <Tab value={editorURL()} label="Editor" data-testid="editor-tab" active={isActive(editorRoute)}/>
         {telemetryExtensions.length > 0 || !!sentryDsn &&
           <Tab value={telemetryURL()} label="Telemetry" data-testid="telemetry-tab" active={isActive(telemetryRoute)}/>
         }
@@ -92,6 +96,7 @@ export class Preferences extends React.Component {
           <Route path={appURL()} component={Application}/>
           <Route path={proxyURL()} component={LensProxy}/>
           <Route path={kubernetesURL()} component={Kubernetes}/>
+          <Route path={editorURL()} component={Editor}/>
           <Route path={telemetryURL()} component={Telemetry}/>
           <Route path={extensionURL()} component={Extensions}/>
           <Redirect exact from={`${preferencesURL()}/`} to={appURL()}/>

src/renderer/components/+user-management/+cluster-roles/add-dialog.scss

@@ -19,8 +19,8 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.AddClusterRoleDialog {
-  .AceEditor {
+.AddRoleDialog {
+  .MonacoEditor {
     min-height: 200px;
   }
 }

src/renderer/components/+user-management/+roles/add-dialog.scss

@@ -1,5 +1,5 @@
 .AddRoleDialog {
-  .AceEditor {
+  .MonacoEditor {
     min-height: 200px;
   }
 }

src/renderer/components/+workloads-pods/pod-details-affinities.tsx

@@ -22,9 +22,12 @@
 import "./pod-details-affinities.scss";
 import React from "react";
 import jsYaml from "js-yaml";
-import { AceEditor } from "../ace-editor";
 import { DrawerParamToggler, DrawerItem } from "../drawer";
 import type { Pod, Deployment, DaemonSet, StatefulSet, ReplicaSet, Job } from "../../../common/k8s-api/endpoints";
+import MonacoEditor from "react-monaco-editor";
+import { cssNames } from "../../utils";
+import { ThemeStore } from "../../theme.store";
+import { UserStore } from "../../../common/user-store";
 
 interface Props {
   workload: Pod | Deployment | DaemonSet | StatefulSet | ReplicaSet | Job;
@@ -42,11 +45,12 @@ export class PodDetailsAffinities extends React.Component<Props> {
       <DrawerItem name="Affinities" className="PodDetailsAffinities">
         <DrawerParamToggler label={affinitiesNum}>
           <div className="ace-container">
-            <AceEditor
-              mode="yaml"
+            <MonacoEditor
+              options={{readOnly: true, ...UserStore.getInstance().getEditorOptions()}}
+              className={cssNames("MonacoEditor")}
+              theme={ThemeStore.getInstance().activeTheme.monacoTheme}
+              language="yaml"
               value={jsYaml.dump(affinities)}
-              showGutter={false}
-              readOnly
             />
           </div>
         </DrawerParamToggler>

src/renderer/components/ace-editor/ace-editor.scss

@@ -1,92 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-.AceEditor {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  flex: 1;
-  z-index: 10;
-
-  .theme-light & {
-    border: 1px solid gainsboro;
-  }
-
-  &.loading {
-    pointer-events: none;
-    &:after {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: transparentize(white, .85);
-    }
-  }
-
-  > .editor {
-    position: absolute;
-    width: inherit;
-    height: inherit;
-    font-size: 90%;
-  }
-
-  // --Theme customization
-
-  .ace-terminal-theme {
-    background: var(--dockEditorBackground) !important;
-  }
-
-  .ace_gutter {
-    color: #a0a0a0;
-    background-color: var(--dockEditorBackground);
-  }
-
-  .ace_line {
-    color: var(--dockEditorKeyword);
-  }
-
-  .ace_active-line,
-  .ace_gutter-active-line {
-    background: var(--dockEditorActiveLineBackground) !important;
-  }
-
-  .ace_meta.ace_tag {
-    color: var(--dockEditorTag);
-  }
-
-  .ace_constant {
-    color: var(--lensBlue) !important;
-  }
-
-  .ace_keyword {
-    color: var(--dockEditorKeyword);
-  }
-
-  .ace_string {
-    color: var(--colorOk);
-  }
-
-  .ace_comment {
-    color: var(--dockEditorComment);
-  }
-}

src/renderer/components/ace-editor/ace-editor.tsx

@@ -1,181 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-// Ace code editor - https://ace.c9.io
-// Playground - https://ace.c9.io/build/kitchen-sink.html
-import "./ace-editor.scss";
-
-import React from "react";
-import { observer } from "mobx-react";
-import AceBuild, { Ace } from "ace-builds";
-import { boundMethod, cssNames, noop } from "../../utils";
-
-interface Props extends Partial<Ace.EditorOptions> {
-  className?: string;
-  autoFocus?: boolean;
-  hidden?: boolean;
-  cursorPos?: Ace.Point;
-  onFocus?(evt: FocusEvent, value: string): void;
-  onBlur?(evt: FocusEvent, value: string): void;
-  onChange?(value: string, delta: Ace.Delta): void;
-  onCursorPosChange?(point: Ace.Point): void;
-}
-
-interface State {
-  ready?: boolean;
-}
-
-const defaultProps: Partial<Props> = {
-  value: "",
-  mode: "yaml",
-  tabSize: 2,
-  showGutter: true, // line-numbers
-  foldStyle: "markbegin",
-  printMargin: false,
-  useWorker: false,
-  onBlur: noop,
-  onFocus: noop,
-  cursorPos: { row: 0, column: 0 },
-};
-
-@observer
-export class AceEditor extends React.Component<Props, State> {
-  static defaultProps = defaultProps as object;
-
-  private editor: Ace.Editor;
-  private elem: HTMLElement;
-
-  constructor(props: Props) {
-    super(props);
-    require("ace-builds/src-noconflict/mode-yaml");
-    require("ace-builds/src-noconflict/mode-json");
-    require("ace-builds/src-noconflict/theme-terminal");
-    require("ace-builds/src-noconflict/ext-searchbox");
-  }
-
-  async componentDidMount() {
-    const {
-      mode, autoFocus, className, hidden, cursorPos,
-      onBlur, onFocus, onChange, onCursorPosChange, children,
-      ...options
-    } = this.props;
-
-    // setup editor
-    this.editor = AceBuild.edit(this.elem, options);
-    this.setTheme("terminal");
-    this.setMode(mode);
-    this.setCursorPos(cursorPos);
-
-    // bind events
-    this.editor.on("blur", (evt: any) => onBlur(evt, this.getValue()));
-    this.editor.on("focus", (evt: any) => onFocus(evt, this.getValue()));
-    this.editor.on("change", this.onChange);
-    this.editor.selection.on("changeCursor", this.onCursorPosChange);
-
-    if (autoFocus) {
-      this.focus();
-    }
-  }
-
-  componentDidUpdate() {
-    if (!this.editor) return;
-    const { value, cursorPos } = this.props;
-
-    if (value !== this.getValue()) {
-      this.editor.setValue(value);
-      this.editor.clearSelection();
-      this.setCursorPos(cursorPos || this.editor.getCursorPosition());
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.editor) {
-      this.editor.destroy();
-    }
-  }
-
-  resize() {
-    if (this.editor) {
-      this.editor.resize();
-    }
-  }
-
-  focus() {
-    if (this.editor) {
-      this.editor.focus();
-    }
-  }
-
-  getValue() {
-    return this.editor.getValue();
-  }
-
-  setValue(value: string, cursorPos?: number) {
-    return this.editor.setValue(value, cursorPos);
-  }
-
-  async setMode(mode: string) {
-    this.editor.session.setMode(`ace/mode/${mode}`);
-  }
-
-  async setTheme(theme: string) {
-    this.editor.setTheme(`ace/theme/${theme}`);
-  }
-
-  setCursorPos(pos: Ace.Point) {
-    if (!pos) return;
-    const { row, column } = pos;
-
-    this.editor.moveCursorToPosition(pos);
-    requestAnimationFrame(() => {
-      this.editor.gotoLine(row + 1, column, false);
-    });
-  }
-
-  @boundMethod
-  onCursorPosChange() {
-    const { onCursorPosChange } = this.props;
-
-    if (onCursorPosChange) {
-      onCursorPosChange(this.editor.getCursorPosition());
-    }
-  }
-
-  @boundMethod
-  onChange(delta: Ace.Delta) {
-    const { onChange } = this.props;
-
-    if (onChange) {
-      onChange(this.getValue(), delta);
-    }
-  }
-
-  render() {
-    const { className, hidden, children } = this.props;
-
-    return (
-      <div className={cssNames("AceEditor", className, { hidden })}>
-        <div className="editor" ref={e => this.elem = e}/>
-        {children}
-      </div>
-    );
-  }
-}

src/renderer/components/dock/__test__/dock-tabs.test.tsx

@@ -31,6 +31,14 @@ import { ThemeStore } from "../../../theme.store";
 import { TerminalStore } from "../terminal.store";
 import { UserStore } from "../../../../common/user-store";
 
+jest.mock("react-monaco-editor", () => ({
+  monaco: {
+    editor: {
+      getModel: jest.fn()
+    }
+  },
+}));
+
 jest.mock("electron", () => ({
   app: {
     getPath: () => "tmp",

src/renderer/components/dock/__test__/log-resource-selector.test.tsx

@@ -32,6 +32,8 @@ import { ThemeStore } from "../../../theme.store";
 import { UserStore } from "../../../../common/user-store";
 import mockFs from "mock-fs";
 
+jest.mock("react-monaco-editor", () => null);
+
 jest.mock("electron", () => ({
   app: {
     getPath: () => "tmp",

src/renderer/components/dock/__test__/log-tab.store.test.ts

@@ -29,6 +29,8 @@ import { TerminalStore } from "../terminal.store";
 import { deploymentPod1, deploymentPod2, deploymentPod3, dockerPod } from "./pod.mock";
 import fse from "fs-extra";
 
+jest.mock("react-monaco-editor", () => null);
+
 jest.mock("electron", () => ({
   app: {
     getPath: () => "tmp",

src/renderer/components/dock/create-resource.tsx

@@ -36,6 +36,7 @@ import { InfoPanel } from "./info-panel";
 import { resourceApplierApi } from "../../../common/k8s-api/endpoints/resource-applier.api";
 import type { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
 import { Notifications } from "../notifications";
+import { monacoModelsManager } from "./monaco-model-manager";
 
 interface Props {
   className?: string;
@@ -88,7 +89,10 @@ export class CreateResource extends React.Component<Props> {
 
   onSelectTemplate = (item: SelectOption) => {
     this.currentTemplates.set(this.tabId, item);
-    fs.readFile(item.value,"utf8").then(v => createResourceStore.setData(this.tabId,v));
+    fs.readFile(item.value,"utf8").then(v => {
+      createResourceStore.setData(this.tabId,v);
+      monacoModelsManager.getModel(this.tabId).setValue(v ?? "");
+    });
   };
 
   create = async () => {

src/renderer/components/dock/dock.scss

@@ -82,7 +82,7 @@
     }
   }
 
-  .AceEditor {
+  .MonacoEditor {
     border: none;
   }
 }

src/renderer/components/dock/dock.store.ts

@@ -23,6 +23,7 @@ import * as uuid from "uuid";
 import { action, computed, IReactionOptions, makeObservable, observable, reaction } from "mobx";
 import { autoBind, createStorage } from "../../utils";
 import throttle from "lodash/throttle";
+import {monacoModelsManager} from "./monaco-model-manager";
 
 export type TabId = string;
 
@@ -157,6 +158,12 @@ export class DockStore implements DockStorageState {
   private init() {
     // adjust terminal height if window size changes
     window.addEventListener("resize", throttle(this.adjustHeight, 250));
+    // create monaco models
+    this.whenReady.then(() => {this.tabs.forEach(tab => {
+      if (this.usesMonacoEditor(tab)) {     
+        monacoModelsManager.addModel(tab.id);
+      }
+    });});
   }
 
   get maxHeight() {
@@ -186,6 +193,13 @@ export class DockStore implements DockStorageState {
     return this.tabs.length > 0;
   }
 
+  usesMonacoEditor(tab: DockTab): boolean {
+    return [TabKind.CREATE_RESOURCE,
+      TabKind.EDIT_RESOURCE,
+      TabKind.INSTALL_CHART,
+      TabKind.UPGRADE_CHART].includes(tab.kind);
+  }
+
   @action
   open(fullSize?: boolean) {
     this.isOpen = true;
@@ -260,6 +274,11 @@ export class DockStore implements DockStorageState {
       title
     };
 
+    // add monaco model 
+    if (this.usesMonacoEditor(tab)) {
+      monacoModelsManager.addModel(id);
+    }
+
     this.tabs.push(tab);
     this.selectTab(tab.id);
     this.open();
@@ -274,6 +293,12 @@ export class DockStore implements DockStorageState {
     if (!tab || tab.pinned) {
       return;
     }
+
+    // remove monaco model 
+    if (this.usesMonacoEditor(tab)) {
+      monacoModelsManager.removeModel(tabId);
+    }
+
     this.tabs = this.tabs.filter(tab => tab.id !== tabId);
 
     if (this.selectedTabId === tab.id) {

src/renderer/components/dock/edit-resource.store.ts

@@ -26,6 +26,7 @@ import { dockStore, DockTab, DockTabCreateSpecific, TabId, TabKind } from "./doc
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import { apiManager } from "../../../common/k8s-api/api-manager";
 import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
+import {monacoModelsManager} from "./monaco-model-manager";
 
 export interface EditingResource {
   resource: string; // resource path, e.g. /api/v1/namespaces/default
@@ -61,6 +62,7 @@ export class EditResourceStore extends DockTabStore<EditingResource> {
             // preload resource for editing
             if (!obj && !store.isLoaded && !store.isLoading && isActiveTab) {
               store.loadFromPath(resource).catch(noop);
+              monacoModelsManager.getModel(tabId).setValue(resource);
             }
             // auto-close tab when resource removed from store
             else if (!obj && store.isLoaded) {

src/renderer/components/dock/editor-panel.tsx

@@ -19,29 +19,30 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import MonacoEditor, {monaco} from "react-monaco-editor";
 import React from "react";
 import jsYaml from "js-yaml";
 import { observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { cssNames } from "../../utils";
-import { AceEditor } from "../ace-editor";
 import { dockStore, TabId } from "./dock.store";
-import { DockTabStore } from "./dock-tab.store";
-import type { Ace } from "ace-builds";
+import { monacoModelsManager } from "./monaco-model-manager";
+import { ThemeStore } from "../../theme.store";
+import { UserStore } from "../../../common/user-store";
+
+import "monaco-editor";
 
 interface Props {
   className?: string;
   tabId: TabId;
-  value: string;
+  value?: string;
   onChange(value: string, error?: string): void;
 }
 
+
 @observer
 export class EditorPanel extends React.Component<Props> {
-  static cursorPos = new DockTabStore<Ace.Point>();
-
-  public editor: AceEditor;
-
+  model: monaco.editor.ITextModel;
+  public editor: monaco.editor.IStandaloneCodeEditor;
   @observable yamlError = "";
 
   constructor(props: Props) {
@@ -59,6 +60,14 @@ export class EditorPanel extends React.Component<Props> {
     ]);
   }
 
+  editorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
+    this.editor = editor;
+    const model = monacoModelsManager.getModel(this.props.tabId);
+    
+    model.setValue(this.props.value ?? "");
+    this.editor.setModel(model);
+  };
+
   validate(value: string) {
     try {
       jsYaml.safeLoadAll(value);
@@ -70,17 +79,16 @@ export class EditorPanel extends React.Component<Props> {
 
   onTabChange = () => {
     this.editor.focus();
+    const model = monacoModelsManager.getModel(this.props.tabId);
+
+    model.setValue(this.props.value ?? "");
+    this.editor.setModel(model);
   };
 
   onResize = () => {
-    this.editor.resize();
     this.editor.focus();
   };
 
-  onCursorPosChange = (pos: Ace.Point) => {
-    EditorPanel.cursorPos.setData(this.props.tabId, pos);
-  };
-
   onChange = (value: string) => {
     this.validate(value);
 
@@ -90,21 +98,13 @@ export class EditorPanel extends React.Component<Props> {
   };
 
   render() {
-    const { value, tabId } = this.props;
-    let { className } = this.props;
-
-    className = cssNames("EditorPanel", className);
-    const cursorPos = EditorPanel.cursorPos.getData(tabId);
-
     return (
-      <AceEditor
-        autoFocus mode="yaml"
-        className={className}
-        value={value}
-        cursorPos={cursorPos}
-        onChange={this.onChange}
-        onCursorPosChange={this.onCursorPosChange}
-        ref={e => this.editor = e}
+      <MonacoEditor
+        options={{model: null, ...UserStore.getInstance().getEditorOptions()}}
+        theme={ThemeStore.getInstance().activeTheme.monacoTheme}
+        language = "yaml"
+        onChange = {this.onChange}
+        editorDidMount={this.editorDidMount}
       />
     );
   }

src/renderer/components/dock/install-chart.store.ts

@@ -25,6 +25,7 @@ import { DockTabStore } from "./dock-tab.store";
 import { getChartDetails, getChartValues, HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
 import type { IReleaseUpdateDetails } from "../../../common/k8s-api/endpoints/helm-releases.api";
 import { Notifications } from "../notifications";
+import { monacoModelsManager } from "./monaco-model-manager";
 
 export interface IChartInstallData {
   name: string;
@@ -90,10 +91,15 @@ export class InstallChartStore extends DockTabStore<IChartInstallData> {
 
     if (values) {
       this.setData(tabId, { ...data, values });
+      monacoModelsManager.getModel(tabId).setValue(values);
     } else if (attempt < 4) {
       return this.loadValues(tabId, attempt + 1);
     }
   }
+
+  setData(tabId: TabId, data: IChartInstallData){
+    super.setData(tabId, data);
+  }
 }
 
 export const installChartStore = new InstallChartStore();

src/renderer/components/dock/monaco-model-manager.ts

@@ -18,5 +18,44 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
+import {monaco} from "react-monaco-editor";
 
-export * from "./ace-editor";
+export type TabId = string;
+
+interface ModelEntry {
+    id?: TabId;
+    modelUri?: monaco.Uri;
+    lang?: string;
+  }
+
+export interface ModelsState {
+    models: ModelEntry[];
+  }
+
+export class MonacoModelsManager implements ModelsState {
+  models: ModelEntry[] = [];
+
+  addModel(tabId: string, { value = "", lang = "yaml" } = {}) {
+    const uri = this.getUri(tabId);
+    const model = monaco.editor.createModel(value, lang, uri); 
+
+    if(!uri) this.models = this.models.concat({ id: tabId, modelUri: model.uri, lang});
+  }
+
+  getModel(tabId: string): monaco.editor.ITextModel {
+    return monaco.editor.getModel(this.getUri(tabId));
+  }
+
+  getUri(tabId: string): monaco.Uri {
+    return this.models.find(model => model.id == tabId)?.modelUri;
+  }
+
+  removeModel(tabId: string) {
+    const uri = this.getUri(tabId);
+
+    this.models = this.models.filter(v => v.id != tabId);
+    monaco.editor.getModel(uri)?.dispose();
+  }
+}
+
+export const monacoModelsManager = new MonacoModelsManager();

src/renderer/components/dock/upgrade-chart.store.ts

@@ -25,6 +25,7 @@ import { DockTabStore } from "./dock-tab.store";
 import { getReleaseValues, HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
 import { releaseStore } from "../+apps-releases/release.store";
 import { iter } from "../../utils";
+import { monacoModelsManager } from "./monaco-model-manager";
 
 export interface IChartUpgradeData {
   releaseName: string;
@@ -118,6 +119,7 @@ export class UpgradeChartStore extends DockTabStore<IChartUpgradeData> {
     const values = await getReleaseValues(releaseName, releaseNamespace, true);
 
     this.values.setData(tabId, values);
+    monacoModelsManager.getModel(tabId).setValue(values);
   }
 
   getTabByRelease(releaseName: string): DockTab {

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.scss

@@ -21,7 +21,7 @@
 
 .KubeConfigDialog {
   .theme-light & {
-    .AceEditor {
+    .MonacoEditor {
       border: 1px solid gainsboro;
       border-radius: $radius;
     }

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx

@@ -25,7 +25,6 @@ import React from "react";
 import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import jsYaml from "js-yaml";
-import { AceEditor } from "../ace-editor";
 import type { ServiceAccount } from "../../../common/k8s-api/endpoints";
 import { copyToClipboard, cssNames, saveFileDialog } from "../../utils";
 import { Button } from "../button";
@@ -34,6 +33,9 @@ import { Icon } from "../icon";
 import { Notifications } from "../notifications";
 import { Wizard, WizardStep } from "../wizard";
 import { apiBase } from "../../api";
+import MonacoEditor from "react-monaco-editor";
+import { ThemeStore } from "../../theme.store";
+import { UserStore } from "../../../common/user-store";
 
 interface IKubeconfigDialogData {
   title?: React.ReactNode;
@@ -127,7 +129,13 @@ export class KubeConfigDialog extends React.Component<Props> {
       >
         <Wizard header={header}>
           <WizardStep customButtons={buttons} prev={this.close}>
-            <AceEditor mode="yaml" value={yamlConfig} readOnly/>
+            <MonacoEditor
+              language="yaml"
+              value={yamlConfig}
+              theme={ThemeStore.getInstance().activeTheme.monacoTheme}
+              className={cssNames( "MonacoEditor")}
+              options={{readOnly: true, ...UserStore.getInstance().getEditorOptions()}}
+            />
             <textarea
               className="config-copy"
               readOnly defaultValue={yamlConfig}

src/renderer/monaco-themes/Clouds Midnight.json

@@ -0,0 +1,127 @@
+{
+  "base": "vs-dark",
+  "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"
+  }
+}

src/renderer/theme.store.ts

@@ -29,6 +29,11 @@ import type { SelectOption } from "./components/select";
 
 export type ThemeId = string;
 
+export enum MonacoTheme {
+  DARK = "clouds-midnight",
+  LIGHT = "vs"
+}
+
 export enum ThemeType {
   DARK = "dark",
   LIGHT = "light",
@@ -40,6 +45,7 @@ export interface Theme {
   colors: Record<string, string>;
   description: string;
   author: string;
+  monacoTheme: string;
 }
 
 export interface ThemeItems extends Theme {
@@ -52,8 +58,8 @@ export class ThemeStore extends Singleton {
 
   // bundled themes from `themes/${themeId}.json`
   private allThemes = observable.map<string, Theme>([
-    ["lens-dark", { ...darkTheme, type: ThemeType.DARK }],
-    ["lens-light", { ...lightTheme, type: ThemeType.LIGHT }],
+    ["lens-dark", { ...darkTheme, type: ThemeType.DARK, monacoTheme: MonacoTheme.DARK }],
+    ["lens-light", { ...lightTheme, type: ThemeType.LIGHT, monacoTheme: MonacoTheme.LIGHT }],
   ]);
 
   @computed get themes(): ThemeItems[] {

src/renderer/themes/lens-dark.json

@@ -3,6 +3,7 @@
   "type": "dark",
   "description": "Original Lens dark theme",
   "author": "Mirantis",
+  "monacoTheme": "clouds-midnight",
   "colors": {
     "blue": "#3d90ce",
     "magenta": "#c93dce",

src/renderer/themes/lens-light.json

@@ -3,6 +3,7 @@
   "type": "light",
   "description": "Original Lens light theme",
   "author": "Mirantis",
+  "monacoTheme": "vs",
   "colors": {
     "blue": "#3d90ce",
     "magenta": "#c93dce",

yarn.lock

@@ -2428,11 +2428,6 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-ace-builds@^1.4.12:
-  version "1.4.12"
-  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.12.tgz#888efa386e36f4345f40b5233fcc4fe4c588fae7"
-  integrity sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg==
-
 acorn-globals@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
@@ -10012,6 +10007,11 @@ moment-timezone@^0.5.33:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
+monaco-editor@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.26.1.tgz#62bb5f658bc95379f8abb64b147632bd1c019d73"
+  integrity sha512-mm45nUrBDk0DgZKgbD7+bhDOtcAFNGPJJRAdS6Su1kTGl6XEgC7U3xOmDUW/0RrLf+jlvCGaqLvD4p2VjwuwwQ==
+
 moo-color@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
@@ -12034,6 +12034,14 @@ react-input-autosize@^2.2.2:
   dependencies:
     prop-types "^15.5.8"
 
+react-monaco-editor@^0.44.0:
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.44.0.tgz#9f966fd00b6c30e8be8873a3fbc86f14a0da2ba4"
+  integrity sha512-GPheXTIpBXpwv857H7/jA8HX5yae4TJ7vFwDJ5iTvy05LxIQTsD3oofXznXGi66lVA93ST/G7wRptEf4CJ9dOg==
+  dependencies:
+    monaco-editor "^0.26.1"
+    prop-types "^15.7.2"
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"