vmui: remove monaco-editor (#4698)

* fix: remove monaco editor due to bundle size

* vmui: update dependencies

* fix: disable source map generation

app/vmui/packages/vmui/package.json

@@ -4,7 +4,6 @@
   "private": true,
   "homepage": "./",
   "dependencies": {
-    "@monaco-editor/react": "^4.5.1",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.get": "^4.4.6",
     "@types/lodash.throttle": "^4.1.6",

app/vmui/packages/vmui/src/components/MonacoEditor/MonacoEditor.tsx

@@ -1,52 +0,0 @@
-import React, { FC } from "preact/compat";
-import Editor, { useMonaco } from "@monaco-editor/react";
-import useMonacoTheme from "./hooks/useMonacoTheme";
-import useLabelsSyntax from "./hooks/useLabelsSyntax";
-import useKeybindings from "./hooks/useKeybindings";
-import "./style.scss";
-import classNames from "classnames";
-
-interface MonacoEditorProps {
-  value: string;
-  label?: string;
-  language?: string;
-  disabled?: boolean;
-  resize?: "vertical" | "horizontal" | "both" | "none";
-  onChange: (val: string | undefined) => void;
-  onEnter?: (val: string) => void;
-}
-
-const MonacoEditor: FC<MonacoEditorProps> = ({ value, label, language, disabled, resize = "none", onChange, onEnter }) => {
-  const monaco = useMonaco();
-  useMonacoTheme(monaco);
-  useLabelsSyntax(monaco);
-  useKeybindings(monaco, onEnter);
-
-  return (
-    <div className="vm-text-field vm-monaco-editor">
-      <Editor
-        className={classNames({
-          "vm-text-field__input": true,
-          "vm-monaco-editor__input": true,
-          [`vm-monaco-editor__input_resize-${resize}`]: resize,
-        })}
-        defaultLanguage={language}
-        value={value}
-        theme={"vm-theme"}
-        options={{
-          readOnly: disabled,
-          scrollBeyondLastLine: false,
-          automaticLayout: true,
-          lineNumbers: "off",
-          minimap: {
-            enabled: false
-          },
-        }}
-        onChange={onChange}
-      />
-      {label && <span className="vm-text-field__label">{label}</span>}
-    </div>
-  );
-};
-
-export default MonacoEditor;

app/vmui/packages/vmui/src/components/MonacoEditor/hooks/useKeybindings.ts

@@ -1,22 +0,0 @@
-import { Monaco } from "@monaco-editor/react";
-import { useEffect } from "preact/compat";
-import * as monaco from "monaco-editor";
-
-const useKeybindings = (monaco: Monaco | null, onEnter?: (val: string) => void) => {
-
-  const handleRunEnter = (e: monaco.editor.ICodeEditor) => {
-    onEnter && onEnter(e.getValue() || "");
-  };
-
-  useEffect(() => {
-    if (!monaco) return;
-    monaco.editor.addEditorAction({
-      id: "execute-ctrl-enter",
-      label: "Execute",
-      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
-      run: handleRunEnter
-    });
-  }, [monaco, onEnter]);
-};
-
-export default useKeybindings;

app/vmui/packages/vmui/src/components/MonacoEditor/hooks/useLabelsSyntax.ts

@@ -1,84 +0,0 @@
-import { useEffect } from "preact/compat";
-import { Monaco } from "@monaco-editor/react";
-import * as monaco from "monaco-editor";
-
-const languageId = "vm-labels";
-
-export const language = {
-  ignoreCase: false,
-  defaultToken: "",
-  tokenizer: {
-    root: [
-      // labels
-      [ /[a-z_]\w*(?=\s*(=|!=|=~|!~))/, "tag" ],
-
-      // strings
-      [ /"([^"\\]|\\.)*$/, "string.invalid" ],
-      [ /'([^'\\]|\\.)*$/, "string.invalid" ],
-      [ /"/, "string", "@string_double" ],
-      [ /'/, "string", "@string_single" ],
-      [ /`/, "string", "@string_backtick" ],
-
-      // delimiters and operators
-      [ /[{}()[]]/, "@brackets" ],
-    ],
-
-    string_double: [
-      [ /[^\\"]+/, "string" ],
-      [ /\\./, "string.escape.invalid" ],
-      [ /"/, "string", "@pop" ]
-    ],
-
-    string_single: [
-      [ /[^\\']+/, "string" ],
-      [ /\\./, "string.escape.invalid" ],
-      [ /'/, "string", "@pop" ]
-    ],
-
-    string_backtick: [
-      [ /[^\\`$]+/, "string" ],
-      [ /\\./, "string.escape.invalid" ],
-      [ /`/, "string", "@pop" ]
-    ],
-  },
-} as monaco.languages.IMonarchLanguage;
-
-export const languageConfiguration: monaco.languages.LanguageConfiguration = {
-  wordPattern: /(-?\d*\.\d\w*)|([^`~!#%^&*()\-=+[{\]}\\|;:'",.<>/?\s]+)/g,
-  comments: {
-    lineComment: "#",
-  },
-  brackets: [
-    [ "{", "}" ],
-    [ "[", "]" ],
-    [ "(", ")" ],
-  ],
-  autoClosingPairs: [
-    { open: "{", close: "}" },
-    { open: "[", close: "]" },
-    { open: "(", close: ")" },
-    { open: "\"", close: "\"" },
-    { open: "'", close: "'" },
-  ],
-  surroundingPairs: [
-    { open: "{", close: "}" },
-    { open: "[", close: "]" },
-    { open: "(", close: ")" },
-    { open: "\"", close: "\"" },
-    { open: "'", close: "'" },
-    { open: "<", close: ">" },
-  ],
-  folding: {}
-};
-
-const useLabelsSyntax = (monaco: Monaco | null) => {
-
-  useEffect(() => {
-    if (!monaco) return;
-    monaco.languages.register({ id: languageId });
-    monaco.languages.setMonarchTokensProvider(languageId, language);
-    monaco.languages.setLanguageConfiguration(languageId, languageConfiguration);
-  }, [monaco]);
-};
-
-export default useLabelsSyntax;

app/vmui/packages/vmui/src/components/MonacoEditor/hooks/useMonacoTheme.ts

@@ -1,25 +0,0 @@
-import { useEffect } from "preact/compat";
-import { useAppState } from "../../../state/common/StateContext";
-import { Monaco } from "@monaco-editor/react";
-
-const useMonacoTheme = (monaco: Monaco | null) => {
-  const { isDarkTheme } = useAppState();
-
-  useEffect(() => {
-    if (!monaco) return;
-    monaco.editor.defineTheme("vm-theme", {
-      base: isDarkTheme ? "vs-dark" : "vs",
-      inherit: true,
-      rules: [],
-      colors: {
-        // #00000000 - for transparent
-        "editor.background": "#00000000",
-        "editor.lineHighlightBackground": "#00000000",
-        "editor.lineHighlightBorder": "#00000000"
-      }
-    });
-    monaco.editor.setTheme("vm-theme");
-  }, [monaco, isDarkTheme]);
-};
-
-export default useMonacoTheme;

app/vmui/packages/vmui/src/components/MonacoEditor/style.scss

@@ -1,27 +0,0 @@
-@use "src/styles/variables" as *;
-
-.vm-monaco-editor {
-  display: grid;
-  height: 100%;
-  min-height: inherit;
-
-  &__input {
-    height: 100%;
-    padding: $padding-small 0;
-    resize: none;
-
-    &_resize {
-      &-vertical {
-        resize: vertical;
-      }
-
-      &-horizontal {
-        resize: horizontal;
-      }
-
-      &-both {
-        resize: both;
-      }
-    }
-  }
-}

app/vmui/packages/vmui/src/pages/Relabel/index.tsx

@@ -8,7 +8,7 @@ import Spinner from "../../components/Main/Spinner/Spinner";
 import Alert from "../../components/Main/Alert/Alert";
 import { useSearchParams } from "react-router-dom";
 import useStateSearchParams from "../../hooks/useStateSearchParams";
-import MonacoEditor from "../../components/MonacoEditor/MonacoEditor";
+import TextField from "../../components/Main/TextField/TextField";
 
 const example = {
   config: `- if: '{bar_label=~"b.*"}'
@@ -70,21 +70,20 @@ const Relabel: FC = () => {
       {loading && <Spinner/>}
       <div className="vm-relabeling-header vm-block">
         <div className="vm-relabeling-header-configs">
-          <MonacoEditor
+          <TextField
+            type="textarea"
             label="Relabel configs"
             value={config}
-            language={"yaml"}
+            autofocus
-            resize={"vertical"}
             onChange={handleChangeConfig}
             onEnter={handleRunQuery}
           />
         </div>
         <div className="vm-relabeling-header__labels">
-          <MonacoEditor
+          <TextField
+            type="textarea"
             label="Labels"
             value={labels}
-            language={"vm-labels"}
-            resize={"vertical"}
             onChange={handleChangeLabels}
             onEnter={handleRunQuery}
           />

app/vmui/packages/vmui/src/pages/Relabel/style.scss

@@ -11,11 +11,22 @@
     width: 100%;
 
     &-configs {
-      min-height: 200px;
+      textarea {
+        min-height: 200px;
+      }
     }
 
     &__labels {
-      min-height: 60px;
+      textarea {
+        min-height: 60px;
+      }
+    }
+
+    textarea {
+      font-family: $font-family-monospace;
+      overflow: auto;
+      width: 100%;
+      height: 100%;
     }
 
     &-bottom {