Replace Ace Editor with monaco (#2949)

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

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

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
           />
         </>
         }