Show dashboard code in CodeMirror

Author: vkarpov15

frontend/src/chat/chat-message-script/chat-message-script.html

@@ -74,7 +74,7 @@
         <div class="my-4">
           <label class="block text-sm font-medium leading-6 text-gray-900">Code</label>
           <div class="border border-gray-200">
-            <textarea class="p-2 h-[300px] w-full" v-model="dashboardCode"></textarea>
+            <textarea class="p-2 h-[300px] w-full" ref="dashboardCodeEditor"></textarea>
           </div>
         </div>
         <async-button

frontend/src/chat/chat-message-script/chat-message-script.js

@@ -14,7 +14,8 @@ module.exports = app => app.component('chat-message-script', {
       showCreateDashboardModal: false,
       newDashboardTitle: '',
       dashboardCode: '',
-      createErrors: []
+      createErrors: [],
+      dashboardEditor: null
     };
   },
   computed: {
@@ -39,8 +40,22 @@ module.exports = app => app.component('chat-message-script', {
       this.dashboardCode = this.script;
       this.createErrors = [];
       this.showCreateDashboardModal = true;
+      this.$nextTick(() => {
+        if (this.dashboardEditor) {
+          this.dashboardEditor.toTextArea();
+        }
+        this.$refs.dashboardCodeEditor.value = this.dashboardCode;
+        this.dashboardEditor = CodeMirror.fromTextArea(this.$refs.dashboardCodeEditor, {
+          mode: 'javascript',
+          lineNumbers: true
+        });
+        this.dashboardEditor.on('change', () => {
+          this.dashboardCode = this.dashboardEditor.getValue();
+        });
+      });
     },
     async createDashboardFromScript() {
+      this.dashboardCode = this.dashboardEditor.getValue();
       const { dashboard } = await api.Dashboard.createDashboard({
         code: this.dashboardCode,
         title: this.newDashboardTitle
@@ -70,6 +85,14 @@ module.exports = app => app.component('chat-message-script', {
       });
     }
   },
+  watch: {
+    showCreateDashboardModal(val) {
+      if (!val && this.dashboardEditor) {
+        this.dashboardEditor.toTextArea();
+        this.dashboardEditor = null;
+      }
+    }
+  },
   mounted() {
     Prism.highlightElement(this.$refs.code);
     if (this.message.executionResult?.output) {