@mongoosejs/studio 0.0.46 → 0.0.47

package/frontend/public/app.js

@@ -425,11 +425,33 @@ module.exports = app => app.component('dashboard-result', {
       if (value.$document) {
         return 'dashboard-document';
       }
+      if (value.$text) {
+        return 'dashboard-text';
+      }
     }
   }
 });
 
 
+/***/ }),
+
+/***/ "./frontend/src/dashboard-result/dashboard-text/dashboard-text.js":
+/*!************************************************************************!*\
+  !*** ./frontend/src/dashboard-result/dashboard-text/dashboard-text.js ***!
+  \************************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./dashboard-text.html */ "./frontend/src/dashboard-result/dashboard-text/dashboard-text.html");
+
+module.exports = app => app.component('dashboard-text', {
+  template: template,
+  props: ['value']
+});
+
+
 /***/ }),
 
 /***/ "./frontend/src/dashboard/dashboard.js":
@@ -455,7 +477,8 @@ module.exports = app => app.component('dashboard', {
       description: '',
       showEditor: false,
       dashboard: null,
-      result: null
+      result: null,
+      errorMessage: null
     }
   },
   methods: {
@@ -466,15 +489,22 @@ module.exports = app => app.component('dashboard', {
       this.code = update.doc.code;
       this.title = update.doc.title;
       this.description = update.doc.description;
-      this.result = update.result;
+      if (update.result) {
+        this.result = update.result;
+      } else {
+        this.errorMessage = update.error.message;
+      }
     }
   },
   mounted: async function() {
-    const { dashboard, result } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
+    const { dashboard, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
     if (!dashboard) {
       return;
     }
     this.dashboard = dashboard;
+    if (error) {
+      this.errorMessage = error.message;
+    }
     this.code = this.dashboard.code;
     this.title = this.dashboard.title;
     this.description = this.dashboard.description ?? '';
@@ -515,13 +545,13 @@ module.exports = app => app.component('edit-dashboard', {
     },
     async updateCode() {
       console.log('this.title', this.title, 'this.description', this.description)
-      const { doc, result } = await api.Dashboard.updateDashboard({
+      const { doc, result, error } = await api.Dashboard.updateDashboard({
         dashboardId: this.dashboardId,
         code: this.editor.getValue(),
         title: this.title,
         description: this.description
       });
-      this.$emit('update', { doc, result });
+      this.$emit('update', { doc, result, error });
       this.editor.setValue(doc.code);
       this.closeEditor();
     }
@@ -801,6 +831,40 @@ module.exports = app => app.component('confirm-changes', {
 
 /***/ }),
 
+/***/ "./frontend/src/document/confirm-delete/confirm-delete.js":
+/*!****************************************************************!*\
+  !*** ./frontend/src/document/confirm-delete/confirm-delete.js ***!
+  \****************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+const template = __webpack_require__(/*! ./confirm-delete.html */ "./frontend/src/document/confirm-delete/confirm-delete.html");
+
+module.exports = app => app.component('confirm-delete', {
+  template: template,
+  props: ['value'],
+  computed: {
+    displayValue() {
+      return JSON.stringify(this.value, null, '  ').trim();
+    }
+  },
+  methods: {
+    closeDelete() {
+        this.$emit('close')
+    },
+    startDelete() {
+        this.$emit('remove');
+    }
+  },
+  mounted() {
+    Prism.highlightElement(this.$refs.code);
+  }
+});
+
+/***/ }),
+
 /***/ "./frontend/src/document/document.js":
 /*!*******************************************!*\
   !*** ./frontend/src/document/document.js ***!
@@ -830,7 +894,8 @@ module.exports = app => app.component('document', {
     invalid: {},
     editting: false,
     virtuals: [],
-    shouldShowConfirmModal: false
+    shouldShowConfirmModal: false,
+    shouldShowDeleteModal: false
   }),
   async mounted() {
     window.pageState = this;
@@ -900,7 +965,7 @@ module.exports = app => app.component('document', {
 
 const template = __webpack_require__(/*! ./edit-array.html */ "./frontend/src/edit-array/edit-array.html");
 
-const { BSON, EJSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.cjs");
+const { BSON } = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.cjs");
 
 const ObjectId = new Proxy(BSON.ObjectId, {
   apply (target, thisArg, argumentsList) {
@@ -927,15 +992,17 @@ module.exports = app => app.component('edit-array', {
     this.editor.on('change', ev => {
       this.currentValue = this.editor.getValue();
     });
-    this.status = 'loaded';
   },
   watch: {
-    currentValue() {
+    currentValue(newValue, oldValue) {
+      // Hacky way of skipping initial trigger because `immediate: false` doesn't work in Vue 3
       if (this.status === 'init') {
         return;
       }
+      this.status = 'loaded';
       try {
-        this.$emit('input', eval(`(${this.currentValue})`));
+        const array = eval(`(${this.currentValue})`);
+        this.$emit('input', array);
       } catch (err) {
         this.$emit('error', err);
       }
@@ -2537,6 +2604,17 @@ module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=
 
 /***/ }),
 
+/***/ "./frontend/src/dashboard-result/dashboard-text/dashboard-text.html":
+/*!**************************************************************************!*\
+  !*** ./frontend/src/dashboard-result/dashboard-text/dashboard-text.html ***!
+  \**************************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b border-gray-100 px-2 pb-2 text-xl font-bold\">\n    {{header}}\n  </div>\n  <div class=\"text-xl p-2\">\n    <pre v-text=\"value.$text\"></pre>\n  </div>\n</div>\n";
+
+/***/ }),
+
 /***/ "./frontend/src/dashboard/dashboard.html":
 /*!***********************************************!*\
   !*** ./frontend/src/dashboard/dashboard.html ***!
@@ -2544,7 +2622,7 @@ module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline mt-10\">\n  </div>\n  <div v-if=\"dashboard && status === 'loaded'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div>\n        <button\n          v-if=\"!showEditor\"\n          @click=\"showEditor = true\"\n          type=\"button\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1em]\" /> Edit\n        </button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <dashboard-result :result=\"result\"></dashboard-result>\n    </div>\n    <div v-if=\"showEditor\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n    \n  </div>\n  <div v-if=\"!dashboard && status === 'loaded'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n";
+module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline mt-10\">\n  </div>\n  <div v-if=\"dashboard && status === 'loaded'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div>\n        <button\n          v-if=\"!showEditor\"\n          @click=\"showEditor = true\"\n          type=\"button\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1em]\" /> Edit\n        </button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <dashboard-result :result=\"result\"></dashboard-result>\n    </div>\n    <div v-if=\"showEditor\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n    <div v-if=\"errorMessage\" class=\"rounded-md bg-red-50 p-4 mt-4\">\n      <div class=\"flex\">\n        <div class=\"flex-shrink-0\">\n          <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z\" clip-rule=\"evenodd\" />\n          </svg>\n        </div>\n        <div class=\"ml-3\">\n          <h3 class=\"text-sm font-medium text-red-800\">{{errorMessage}}</h3>\n        </div>\n      </div>\n    </div>\n    \n  </div>\n  <div v-if=\"!dashboard && status === 'loaded'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -2647,6 +2725,17 @@ module.exports = "<div>\n    <h2>\n        Are you sure you want to save the fol
 
 /***/ }),
 
+/***/ "./frontend/src/document/confirm-delete/confirm-delete.html":
+/*!******************************************************************!*\
+  !*** ./frontend/src/document/confirm-delete/confirm-delete.html ***!
+  \******************************************************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = "<div>\n    <h2>\n        Are you sure you want to delete the following document?\n    </h2>\n    <pre class=\"max-h-[50vh] overflow-auto\"><code ref=\"code\" class=\"language-javascript\" v-text=\"displayValue\"></code></pre>\n    <div class=\"flex gap-2 mt-2\">\n    <async-button\n        class=\"rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\"\n        @click=\"startDelete\">\n        Confirm\n    </async-button>\n    <button \n        class=\"rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300\"\n        @click=\"closeDelete\">\n        Cancel\n    </button>\n    </div>\n</div>";
+
+/***/ }),
+
 /***/ "./frontend/src/document/document.css":
 /*!********************************************!*\
   !*** ./frontend/src/document/document.css ***!
@@ -2665,7 +2754,7 @@ module.exports = ".document {\n  max-width: 1200px;\n  margin-left: auto;\n  mar
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button @click=\"$router.push('/model/' + this.model)\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        type=\"button\"\n        class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        class=\"rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"remove\"\n        type=\"button\"\n        class=\"rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n  </div>\n</div>\n";
+module.exports = "<div class=\"document\">\n  <div class=\"document-menu\">\n    <div class=\"left\">\n      <button @click=\"$router.push('/model/' + this.model)\">\n        &lsaquo; Back\n      </button>\n    </div>\n\n    <div class=\"right\">\n      <button\n        v-if=\"!editting\"\n        @click=\"editting = true\"\n        type=\"button\"\n        class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n        <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"editting = false\"\n        type=\"button\"\n        class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n        &times; Cancel\n      </button>\n      <button\n        v-if=\"editting\"\n        @click=\"shouldShowConfirmModal=true;\"\n        type=\"button\"\n        class=\"rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n        <img src=\"images/save.svg\" class=\"inline\" /> Save\n      </button>\n      <button\n        @click=\"shouldShowDeleteModal=true;\"\n        type=\"button\"\n        class=\"rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n        <img src=\"images/delete.svg\" class=\"inline\" /> Delete\n      </button>\n    </div>\n  </div>\n  <div v-if=\"status === 'loaded'\">\n    <document-details\n      :document=\"document\"\n      :schemaPaths=\"schemaPaths\"\n      :editting=\"editting\"\n      :changes=\"changes\"\n      :invalid=\"invalid\"></document-details>\n    <modal v-if=\"shouldShowConfirmModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n      </template>\n    </modal>\n    <modal v-if=\"shouldShowDeleteModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n        <confirm-delete @close=\"shouldShowConfirmModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n      </template>\n    </modal>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -10787,11 +10876,13 @@ __webpack_require__(/*! ./dashboard-result/dashboard-result */ "./frontend/src/d
 __webpack_require__(/*! ./dashboard-result/dashboard-chart/dashboard-chart */ "./frontend/src/dashboard-result/dashboard-chart/dashboard-chart.js")(app);
 __webpack_require__(/*! ./dashboard-result/dashboard-document/dashboard-document */ "./frontend/src/dashboard-result/dashboard-document/dashboard-document.js")(app);
 __webpack_require__(/*! ./dashboard-result/dashboard-primitive/dashboard-primitive */ "./frontend/src/dashboard-result/dashboard-primitive/dashboard-primitive.js")(app);
+__webpack_require__(/*! ./dashboard-result/dashboard-text/dashboard-text */ "./frontend/src/dashboard-result/dashboard-text/dashboard-text.js")(app);
 __webpack_require__(/*! ./dashboard/edit-dashboard/edit-dashboard */ "./frontend/src/dashboard/edit-dashboard/edit-dashboard.js")(app)
 __webpack_require__(/*! ./detail-array/detail-array */ "./frontend/src/detail-array/detail-array.js")(app);
 __webpack_require__(/*! ./detail-default/detail-default */ "./frontend/src/detail-default/detail-default.js")(app);
 __webpack_require__(/*! ./document/document */ "./frontend/src/document/document.js")(app);
 __webpack_require__(/*! ./document/confirm-changes/confirm-changes */ "./frontend/src/document/confirm-changes/confirm-changes.js")(app);
+__webpack_require__(/*! ./document/confirm-delete/confirm-delete */ "./frontend/src/document/confirm-delete/confirm-delete.js")(app);
 __webpack_require__(/*! ./document-details/document-details */ "./frontend/src/document-details/document-details.js")(app);
 __webpack_require__(/*! ./document-details/document-property/document-property */ "./frontend/src/document-details/document-property/document-property.js")(app);
 __webpack_require__(/*! ./edit-array/edit-array */ "./frontend/src/edit-array/edit-array.js")(app);
@@ -10842,6 +10933,7 @@ const router = VueRouter.createRouter({
 app.use(router);
 
 app.mount('#content');
+
 })();
 
 /******/ })()

package/frontend/public/index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="tw.css">
     <link rel="stylesheet" href="vanillatoasts/vanillatoasts.css">
     <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.16/lib/codemirror.css">
+    <link rel="icon" href="images/logo.svg" type="image/svg+xml">
     <script src="https://unpkg.com/vue@3.x"></script>
     <script src="https://unpkg.com/vue-router@4.0.10"></script>
     <script src="https://unpkg.com/chart.js@4.2.0/dist/chart.umd.js"></script>
@@ -25,4 +26,4 @@
     <script src="https://unpkg.com/chart.js@4.2.0/dist/chart.umd.js"></script>
     <script src="app.js"></script>
   </body>
-</html>
+</html>

package/frontend/src/dashboard/dashboard.html

@@ -27,6 +27,18 @@
         @close="showEditor=false;"
         @update="updateCode"></edit-dashboard>
     </div>
+    <div v-if="errorMessage" class="rounded-md bg-red-50 p-4 mt-4">
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
+          </svg>
+        </div>
+        <div class="ml-3">
+          <h3 class="text-sm font-medium text-red-800">{{errorMessage}}</h3>
+        </div>
+      </div>
+    </div>
     
   </div>
   <div v-if="!dashboard && status === 'loaded'">

package/frontend/src/dashboard/dashboard.js

@@ -14,7 +14,8 @@ module.exports = app => app.component('dashboard', {
       description: '',
       showEditor: false,
       dashboard: null,
-      result: null
+      result: null,
+      errorMessage: null
     }
   },
   methods: {
@@ -25,15 +26,22 @@ module.exports = app => app.component('dashboard', {
       this.code = update.doc.code;
       this.title = update.doc.title;
       this.description = update.doc.description;
-      this.result = update.result;
+      if (update.result) {
+        this.result = update.result;
+      } else {
+        this.errorMessage = update.error.message;
+      }
     }
   },
   mounted: async function() {
-    const { dashboard, result } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
+    const { dashboard, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
     if (!dashboard) {
       return;
     }
     this.dashboard = dashboard;
+    if (error) {
+      this.errorMessage = error.message;
+    }
     this.code = this.dashboard.code;
     this.title = this.dashboard.title;
     this.description = this.dashboard.description ?? '';

package/frontend/src/dashboard/edit-dashboard/edit-dashboard.js

@@ -20,13 +20,13 @@ module.exports = app => app.component('edit-dashboard', {
     },
     async updateCode() {
       console.log('this.title', this.title, 'this.description', this.description)
-      const { doc, result } = await api.Dashboard.updateDashboard({
+      const { doc, result, error } = await api.Dashboard.updateDashboard({
         dashboardId: this.dashboardId,
         code: this.editor.getValue(),
         title: this.title,
         description: this.description
       });
-      this.$emit('update', { doc, result });
+      this.$emit('update', { doc, result, error });
       this.editor.setValue(doc.code);
       this.closeEditor();
     }

package/frontend/src/dashboard-result/dashboard-result.js

@@ -24,6 +24,9 @@ module.exports = app => app.component('dashboard-result', {
       if (value.$document) {
         return 'dashboard-document';
       }
+      if (value.$text) {
+        return 'dashboard-text';
+      }
     }
   }
 });

package/frontend/src/dashboard-result/dashboard-text/dashboard-text.html

@@ -0,0 +1,8 @@
+<div class="py-2">
+  <div v-if="header" class="border-b border-gray-100 px-2 pb-2 text-xl font-bold">
+    {{header}}
+  </div>
+  <div class="text-xl p-2">
+    <pre v-text="value.$text"></pre>
+  </div>
+</div>

package/frontend/src/dashboard-result/dashboard-text/dashboard-text.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const template = require('./dashboard-text.html');
+
+module.exports = app => app.component('dashboard-text', {
+  template: template,
+  props: ['value']
+});

package/frontend/src/document/confirm-delete/confirm-delete.html

@@ -0,0 +1,18 @@
+<div>
+    <h2>
+        Are you sure you want to delete the following document?
+    </h2>
+    <pre class="max-h-[50vh] overflow-auto"><code ref="code" class="language-javascript" v-text="displayValue"></code></pre>
+    <div class="flex gap-2 mt-2">
+    <async-button
+        class="rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+        @click="startDelete">
+        Confirm
+    </async-button>
+    <button 
+        class="rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300"
+        @click="closeDelete">
+        Cancel
+    </button>
+    </div>
+</div>

package/frontend/src/document/confirm-delete/confirm-delete.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const template = require('./confirm-delete.html');
+
+module.exports = app => app.component('confirm-delete', {
+  template: template,
+  props: ['value'],
+  computed: {
+    displayValue() {
+      return JSON.stringify(this.value, null, '  ').trim();
+    }
+  },
+  methods: {
+    closeDelete() {
+        this.$emit('close')
+    },
+    startDelete() {
+        this.$emit('remove');
+    }
+  },
+  mounted() {
+    Prism.highlightElement(this.$refs.code);
+  }
+});

package/frontend/src/document/document.html

@@ -29,7 +29,7 @@
         <img src="images/save.svg" class="inline" /> Save
       </button>
       <button
-        @click="remove"
+        @click="shouldShowDeleteModal=true;"
         type="button"
         class="rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
         <img src="images/delete.svg" class="inline" /> Delete
@@ -49,5 +49,11 @@
         <confirm-changes @close="shouldShowConfirmModal = false;" @save="save" :value="changes"></confirm-changes>
       </template>
     </modal>
+    <modal v-if="shouldShowDeleteModal">
+      <template v-slot:body>
+        <div class="modal-exit" @click="shouldShowConfirmModal = false;">&times;</div>
+        <confirm-delete @close="shouldShowConfirmModal = false;" @remove="remove" :value="document"></confirm-delete>
+      </template>
+    </modal>
   </div>
 </div>

package/frontend/src/document/document.js

@@ -20,7 +20,8 @@ module.exports = app => app.component('document', {
     invalid: {},
     editting: false,
     virtuals: [],
-    shouldShowConfirmModal: false
+    shouldShowConfirmModal: false,
+    shouldShowDeleteModal: false
   }),
   async mounted() {
     window.pageState = this;

package/frontend/src/edit-array/edit-array.js

@@ -2,7 +2,7 @@
 
 const template = require('./edit-array.html');
 
-const { BSON, EJSON } = require('bson');
+const { BSON } = require('bson');
 
 const ObjectId = new Proxy(BSON.ObjectId, {
   apply (target, thisArg, argumentsList) {
@@ -29,15 +29,17 @@ module.exports = app => app.component('edit-array', {
     this.editor.on('change', ev => {
       this.currentValue = this.editor.getValue();
     });
-    this.status = 'loaded';
   },
   watch: {
-    currentValue() {
+    currentValue(newValue, oldValue) {
+      // Hacky way of skipping initial trigger because `immediate: false` doesn't work in Vue 3
       if (this.status === 'init') {
         return;
       }
+      this.status = 'loaded';
       try {
-        this.$emit('input', eval(`(${this.currentValue})`));
+        const array = eval(`(${this.currentValue})`);
+        this.$emit('input', array);
       } catch (err) {
         this.$emit('error', err);
       }

package/frontend/src/index.js

@@ -19,11 +19,13 @@ require('./dashboard-result/dashboard-result')(app);
 require('./dashboard-result/dashboard-chart/dashboard-chart')(app);
 require('./dashboard-result/dashboard-document/dashboard-document')(app);
 require('./dashboard-result/dashboard-primitive/dashboard-primitive')(app);
+require('./dashboard-result/dashboard-text/dashboard-text')(app);
 require('./dashboard/edit-dashboard/edit-dashboard')(app)
 require('./detail-array/detail-array')(app);
 require('./detail-default/detail-default')(app);
 require('./document/document')(app);
 require('./document/confirm-changes/confirm-changes')(app);
+require('./document/confirm-delete/confirm-delete')(app);
 require('./document-details/document-details')(app);
 require('./document-details/document-property/document-property')(app);
 require('./edit-array/edit-array')(app);
@@ -73,4 +75,4 @@ const router = VueRouter.createRouter({
 
 app.use(router);
 
-app.mount('#content');
+app.mount('#content');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "dependencies": {
     "archetype": "0.13.1",
     "csv-stringify": "6.3.0",