ayanova/package-lock.json

@@ -14079,11 +14079,6 @@
       "dev": true,
       "optional": true
     },
-    "nano-assign": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/nano-assign/-/nano-assign-1.0.1.tgz",
-      "integrity": "sha512-1K8ncUoAYFPYcCZqrB+K2XQaFCmA35rryJCtPkGrG3zYkwm+iIUZRIHyaAfuy6zxaK9siPdjeJq7+Inijm6xhw=="
-    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -19027,15 +19022,6 @@
         }
       }
     },
-    "vue-monaco": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/vue-monaco/-/vue-monaco-1.2.1.tgz",
-      "integrity": "sha512-2orch8gJ9sxb95UJbFe7YIS5t9q0Op5ppU+rWUjHgHHsY2Hc2svcnJsbXBKNJYYyJLdzRq0uO4eP0N7mi1iG7w==",
-      "requires": {
-        "monaco-editor": "^0.20.0",
-        "nano-assign": "^1.0.0"
-      }
-    },
     "vue-router": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.3.4.tgz",

ayanova/package.json

@@ -20,6 +20,7 @@
     "jwt-decode": "^2.2.0",
     "luxon": "^1.24.1",
     "marked": "^0.8.2",
+    "monaco-editor": "^0.20.0",
     "monaco-editor-webpack-plugin": "^1.9.0",
     "nprogress": "^0.2.0",
     "register-service-worker": "^1.7.1",
@@ -27,7 +28,6 @@
     "vue": "^2.6.11",
     "vue-chartjs": "^3.5.0",
     "vue-currency-input": "^1.19.0",
-    "vue-monaco": "^1.2.1",
     "vue-router": "^3.3.4",
     "vuetify": "^2.3.0",
     "vuex": "^3.4.0",

ayanova/src/views/ay-report-edit.vue

@@ -32,12 +32,17 @@
         </v-btn-toggle>
       </v-col>
       <v-col cols="12" v-show="activeTab != 'properties'">
-        <MonacoEditor
+        <h6>Editor here</h6>
+        <div
+          id="editContainer"
+          style="width:100%;height:100%;border:1px solid #ccc;"
+        ></div>
+        <!-- <MonacoEditor
           ref="editor"
           v-model="obj.template"
           language="javascript"
           :options="monacoOptions"
-        />
+        /> -->
       </v-col>
       <v-col cols="12" v-show="activeTab == 'properties'">
         <h5>Properties</h5>
@@ -72,13 +77,24 @@
 //
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 //https://github.com/egoist/vue-monaco
-import MonacoEditor from "vue-monaco";
-
+// import MonacoEditor from "vue-monaco";
+import * as monaco from "monaco-editor";
 
 const FORM_KEY = "ay-report-edit";
 export default {
-  components: {
-    MonacoEditor
+  // components: {
+  //   MonacoEditor
+  // },
+  mounted() {
+    this.editor = monaco.editor.create(
+      document.getElementById("editContainer"),
+      {
+        value: 'console.log("Hello, world");',
+        theme: "vs",
+        language: "javascript"
+      }
+    );
+    console.log(this.editor);
   },
   beforeCreate() {
     window.$gz.eventBus.$emit("menu-change", {
@@ -98,9 +114,10 @@ export default {
       editingActiveTranslation: false,
       duplicating: false,
       monacoOptions: { automaticLayout: true },
+      editor: null,
       editAreaHeight: 300,
-      activeTab: "properties",
-      lastTab: "properties",
+      activeTab: "template",
+      lastTab: "template",
       obj: {
         id: 0,
         concurrency: 0,
@@ -155,6 +172,7 @@ import router from "./router";
     //probably should do this way
     //https://github.com/Microsoft/monaco-editor/issues/604
     //https://github.com/Microsoft/monaco-editor/blob/bad3c34056624dca34ac8be5028ae3454172125c/website/playground/playground.js#L108
+    //https://github.com/microsoft/monaco-editor-samples/tree/master/browser-esm-webpack-monaco-plugin
     onViewChange() {
       let vm = this;
       let editor = vm.$refs.editor ? vm.$refs.editor.getEditor() : null;

ayanova/vue.config.js

@@ -4,6 +4,7 @@ module.exports = {
     plugins: [
       new MonacoWebpackPlugin({
         // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+        //https://github.com/Microsoft/monaco-editor-webpack-plugin
         languages: [
           "javascript",
           "css",