[POC] Create a monaco editor component

package.json

@@ -74,6 +74,8 @@
     "linux-ca": "2.0.1",
     "lodash": "4.17.21",
     "marked": "11.2.0",
+    "monaco-editor": "^0.46.0",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "native-reg": "1.1.1",
     "node-fetch": "2.7.0",
     "node-forge": "1.3.1",

pkg/rancher-desktop/components/MonacoEditor.vue

@@ -0,0 +1,58 @@
+<template>
+  <div ref="editor" style="width: 600px; height: 400px;"></div>
+</template>
+
+<script lang="ts">
+import * as monaco from 'monaco-editor';
+import { defineComponent, inject } from 'vue';
+
+interface NonReactiveProps {
+  editor: any;
+}
+
+const provideProps: NonReactiveProps = { editor: undefined };
+
+export default defineComponent({
+  name:  'MonacoEditor',
+  props: {
+    code: {
+      type:     String,
+      required: true,
+    },
+    language: {
+      type:    String,
+      default: 'javascript',
+    },
+  },
+  setup() {
+    const editor = inject('editor', provideProps.editor);
+
+    return { editor };
+  },
+  watch: {
+    code(newCode) {
+      if (this.editor) {
+        const model = this.editor.getModel();
+
+        model.setValue(newCode);
+      }
+    },
+  },
+  mounted() {
+    this.editor = monaco.editor.create(this.$refs.editor, {
+      value:           this.code,
+      language:        this.language,
+      automaticLayout: true,
+    });
+
+    this.editor.onDidChangeModelContent(() => {
+      this.$emit('update:code', this.editor.getValue());
+    });
+  },
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.dispose();
+    }
+  },
+});
+</script>

pkg/rancher-desktop/pages/snapshots/create.vue

@@ -5,6 +5,7 @@
 import Vue from 'vue';
 import { mapGetters } from 'vuex';
 
+import MonacoEditor from '@pkg/components/MonacoEditor.vue';
 import { Snapshot, SnapshotEvent } from '@pkg/main/snapshots/types';
 import { ipcRenderer } from '@pkg/utils/ipcRenderer';
 
@@ -18,7 +19,8 @@
   components: {
     Banner,
     LabeledInput,
     TextAreaAutoGrow,
+    MonacoEditor,
   },
 
   data() {
@@ -142,13 +144,7 @@
       </div>
       <div class="field description-field">
         <label>{{ t('snapshots.create.description.label') }}</label>
-        <TextAreaAutoGrow
-          ref="descriptionInput"
-          v-model="description"
-          data-test="createSnapshotDescInput"
-          class="input"
-          :disabled="creating"
-        />
+        <monaco-editor v-model="description" language="markdown" />
       </div>
       <div class="actions">
         <button

pkg/rancher-desktop/typings/monaco-editor.d.ts

@@ -0,0 +1 @@
+declare module 'monaco-editor';

pkg/rancher-desktop/vue.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 
 const _ = require('lodash');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const webpack = require('webpack');
 
 const babelConfig = require('../../babel.config');
@@ -41,6 +42,10 @@ module.exports = {
         featureExtensions:       true,
       }),
     }]);
+
+    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
+      { languages: ['markdown'] },
+    ]);
   },
 
   css: {

yarn.lock

@@ -9547,7 +9547,7 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
-loader-utils@^2.0.0:
+loader-utils@^2.0.0, loader-utils@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
   integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
@@ -10023,6 +10023,18 @@ module-alias@^2.2.2:
   resolved "https://registry.yarnpkg.com/module-alias/-/module-alias-2.2.3.tgz#ec2e85c68973bda6ab71ce7c93b763ec96053221"
   integrity sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==
 
+monaco-editor-webpack-plugin@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.1.0.tgz#16f265c2b5dbb5fe08681b6b3b7d00d3c5b2ee97"
+  integrity sha512-ZjnGINHN963JQkFqjjcBtn1XBtUATDZBMgNQhDQwd78w2ukRhFXAPNgWuacaQiDZsUr4h1rWv5Mv6eriKuOSzA==
+  dependencies:
+    loader-utils "^2.0.2"
+
+monaco-editor@^0.46.0:
+  version "0.46.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.46.0.tgz#013e453fd2408997e4fe0bf67b36a80a24bc7bcc"
+  integrity sha512-ADwtLIIww+9FKybWscd7OCfm9odsFYHImBRI1v9AviGce55QY8raT+9ihH8jX/E/e6QVSGM+pKj4jSUSRmALNQ==
+
 mrmime@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"