Add monaco editor

src/components/MonacoEditor.vue

@@ -0,0 +1,60 @@
+<template>
+<div :id="name"></div>
+</template>
+
+<script>
+import loader from '@monaco-editor/loader';
+
+let monacoResultInst = null;
+
+export default {
+  name: "monacoEditor",
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    language: {
+      type: String,
+      default: 'text',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    readonly: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  mounted() {
+    loader.init().then((monaco) => {
+      monacoResultInst = monaco;
+
+      monaco.editor.create(document.querySelector(`#${this.name}`), {
+        value: '',
+        language: this.language,
+        readOnly: this.readonly,
+      });
+    });
+  },
+  watch: {
+    value: {
+      // the callback will be called immediately after the start of the observation
+      immediate: true,
+      deep: true,
+      async handler(value, oldValue) {
+        while (!monacoResultInst) {
+          await new Promise(r => setTimeout(r, 10));
+        }
+
+        monacoResultInst.editor.getModels()[0].setValue(value.toString());
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+</style>