@mongoosejs/studio 0.2.6 → 0.2.7

package/frontend/public/app.js

@@ -704,6 +704,14 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     updateDocument: function updateDocument(params) {
       return client.post('', { action: 'Model.updateDocument', ...params }).then(res => res.data);
     },
+    createChatMessage(params) {
+      return client.post('', { action: 'Model.createChatMessage', ...params }).then(res => res.data);
+    },
+    streamChatMessage: async function* streamChatMessage(params) {
+      // Don't stream on Next.js or Netlify for now.
+      const data = await client.post('', { action: 'Model.createChatMessage', ...params }).then(res => res.data);
+      yield { textPart: data.text };
+    },
     updateDocuments: function updateDocuments(params) {
       return client.post('', { action: 'Model.updateDocuments', ...params }).then(res => res.data);
     }
@@ -807,6 +815,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     createChart: function(params) {
       return client.post('/Model/createChart', params).then(res => res.data);
     },
+    createChatMessage: function(params) {
+      return client.post('/Model/createChatMessage', params).then(res => res.data);
+    },
     createDocument: function(params) {
       return client.post('/Model/createDocument', params).then(res => res.data);
     },
@@ -913,6 +924,55 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     updateDocument: function updateDocument(params) {
       return client.post('/Model/updateDocument', params).then(res => res.data);
     },
+    streamChatMessage: async function* streamChatMessage(params) {
+      const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
+      const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/streamChatMessage?' + new URLSearchParams(params).toString();
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          Authorization: `${accessToken}`,
+          Accept: 'text/event-stream'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder('utf-8');
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        let eventEnd;
+        while ((eventEnd = buffer.indexOf('\n\n')) !== -1) {
+          const eventStr = buffer.slice(0, eventEnd);
+          buffer = buffer.slice(eventEnd + 2);
+
+          // Parse SSE event
+          const lines = eventStr.split('\n');
+          let data = '';
+          for (const line of lines) {
+            if (line.startsWith('data:')) {
+              data += line.slice(5).trim();
+            }
+          }
+          if (data) {
+            try {
+              yield JSON.parse(data);
+            } catch (err) {
+              // If not JSON, yield as string
+              yield data;
+            }
+          }
+        }
+      }
+    },
     updateDocuments: function updateDocument(params) {
       return client.post('/Model/updateDocuments', params).then(res => res.data);
     }
@@ -1869,7 +1929,7 @@ module.exports = "";
 (module) {
 
 "use strict";
-module.exports = "<div>\n  <div class=\"mb-2\">\n    <textarea class=\"border border-gray-200 p-2 h-[300px] w-full\" ref=\"codeEditor\"></textarea>\n  </div>\n  <button @click=\"createDocument()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Submit</button>\n  <div v-if=\"errors.length > 0\" class=\"rounded-md bg-red-50 p-4 mt-1\">\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\">\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-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\">There were {{errors.length}} errors with your submission</h3>\n        <div class=\"mt-2 text-sm text-red-700\">\n          <ul role=\"list\" class=\"list-disc space-y-1 pl-5\">\n            <li v-for=\"error in errors\">\n              {{error}}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div>\n  <div class=\"mb-4\">\n    <label class=\"block text-sm font-bold text-gray-900\">AI Mode</label>\n    <div class=\"mt-2 flex flex-col gap-2 sm:flex-row sm:items-center\">\n      <input\n        v-model=\"aiPrompt\"\n        type=\"text\"\n        placeholder=\"Describe the document you'd like to create...\"\n        @keydown.enter.prevent=\"requestAiSuggestion()\"\n        class=\"w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-ultramarine-500 focus:outline-none focus:ring-1 focus:ring-ultramarine-500\"\n      />\n      <button\n        @click=\"requestAiSuggestion()\"\n        :disabled=\"aiStreaming || !aiPrompt.trim()\"\n        class=\"inline-flex items-center justify-center rounded-md bg-ultramarine-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 disabled:cursor-not-allowed disabled:opacity-50\"\n      >\n        {{ aiStreaming ? 'Generating...' : 'Generate' }}\n      </button>\n    </div>\n    <p class=\"mt-2 text-xs text-gray-500\">Use AI to draft the document. You can accept or reject the suggestion once it finishes.</p>\n    <div v-if=\"aiSuggestionReady\" class=\"mt-3 flex flex-wrap gap-2\">\n      <button\n        @click=\"acceptAiSuggestion()\"\n        class=\"rounded-md bg-emerald-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500\"\n      >\n        Accept suggestion\n      </button>\n      <button\n        @click=\"rejectAiSuggestion()\"\n        class=\"rounded-md bg-gray-100 px-2.5 py-1.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-200\"\n      >\n        Reject suggestion\n      </button>\n    </div>\n  </div>\n  <div class=\"mb-2\">\n    <label class=\"block text-sm font-bold text-gray-900\">Document to Create</label>\n    <textarea class=\"border border-gray-200 p-2 h-[300px] w-full mt-2\" ref=\"codeEditor\"></textarea>\n  </div>\n  <button @click=\"createDocument()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Submit</button>\n  <div v-if=\"errors.length > 0\" class=\"rounded-md bg-red-50 p-4 mt-1\">\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\">\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-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\">There were {{errors.length}} errors with your submission</h3>\n        <div class=\"mt-2 text-sm text-red-700\">\n          <ul role=\"list\" class=\"list-disc space-y-1 pl-5\">\n            <li v-for=\"error in errors\">\n              {{error}}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -1905,10 +1965,60 @@ module.exports = app => app.component('create-document', {
     return {
       documentData: '',
       editor: null,
-      errors: []
+      errors: [],
+      aiPrompt: '',
+      aiSuggestion: '',
+      aiOriginalDocument: '',
+      aiStreaming: false,
+      aiSuggestionReady: false
     };
   },
   methods: {
+    async requestAiSuggestion() {
+      if (this.aiStreaming) {
+        return;
+      }
+      const prompt = this.aiPrompt.trim();
+      if (!prompt) {
+        return;
+      }
+
+      this.aiOriginalDocument = this.editor.getValue();
+      this.aiSuggestion = '';
+      this.aiSuggestionReady = false;
+      this.aiStreaming = true;
+
+      try {
+        for await (const event of api.Model.streamChatMessage({
+          model: this.currentModel,
+          content: prompt,
+          documentData: this.aiOriginalDocument
+        })) {
+          if (event?.textPart) {
+            this.aiSuggestion += event.textPart;
+            this.editor.setValue(this.aiSuggestion);
+          }
+        }
+        this.aiSuggestionReady = true;
+      } catch (err) {
+        this.editor.setValue(this.aiOriginalDocument);
+        this.$toast.error('Failed to generate a document suggestion.');
+        throw err;
+      } finally {
+        this.aiStreaming = false;
+      }
+    },
+    acceptAiSuggestion() {
+      this.aiSuggestionReady = false;
+      this.aiSuggestion = '';
+      this.aiOriginalDocument = '';
+    },
+    rejectAiSuggestion() {
+      this.editor.setValue(this.aiOriginalDocument);
+      this.aiSuggestionReady = false;
+      this.aiSuggestion = '';
+      this.aiOriginalDocument = '';
+    },
     async createDocument() {
       const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
       try {
@@ -6781,7 +6891,7 @@ module.exports = ".models {\n  position: relative;\n  display: flex;\n  flex-dir
 (module) {
 
 "use strict";
-module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <aside class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-48 overflow-x-hidden\">\n      <div class=\"p-1 ml-2 font-bold\">Models</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <nav class=\"flex flex-1 flex-col\">\n      <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7 p-1\">\n        <li>\n          <ul role=\"list\">\n            <li v-for=\"model in models\">\n              <router-link\n                :to=\"'/model/' + model\"\n                class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm text-gray-700\"\n                :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold text-gray-900' : 'hover:bg-ultramarine-50'\">\n                {{model}}\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n      <div v-if=\"models.length === 0 && status === 'loaded'\" class=\"p-2 bg-red-100\">\n        No models found\n      </div>\n    </nav>\n  </aside>\n  <div class=\"documents bg-slate-50\" ref=\"documentsList\">\n    <div class=\"relative h-[42px] z-10\">\n      <div class=\"documents-menu bg-slate-50\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <document-search\n            ref=\"documentSearch\"\n            :value=\"searchText\"\n            :schema-paths=\"schemaPaths\"\n            @search=\"search\"\n          >\n          </document-search>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 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            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 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-500\"\n            >\n            Delete\n          </button>\n          <div class=\"relative\" v-show=\"!selectMultiple\" ref=\"actionsMenuContainer\" @keyup.esc.prevent=\"closeActionsMenu\">\n            <button\n              @click=\"toggleActionsMenu\"\n              type=\"button\"\n              aria-label=\"More actions\"\n              class=\"rounded bg-white px-2 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z\" />\n              </svg>\n            </button>\n            <div\n              v-if=\"showActionsMenu\"\n              class=\"absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20\"\n            >\n              <div class=\"py-1\">\n                <button\n                  @click=\"shouldShowExportModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Export\n                </button>\n                <button\n                  @click=\"shouldShowCreateModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Create\n                </button>\n                <button\n                  @click=\"openFieldSelection(); showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Projection\n                </button>\n                <button\n                  @click=\"openIndexModal\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Indexes\n                </button>\n                <button\n                  @click=\"openCollectionInfo\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Collection Info\n                </button>\n                <button\n                  @click=\"findOldestDocument\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Find oldest document\n                </button>\n              </div>\n            </div>\n          </div>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"setOutputType('table')\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('json')\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <div v-if=\"error\">\n        <div class=\"bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md\" role=\"alert\">\n          <span class=\"block font-bold\">Error</span>\n          <span class=\"block\">{{ error }}</span>\n        </div>\n      </div>\n      <table v-else-if=\"outputType === 'table'\">\n        <thead class=\"bg-slate-50\">\n          <th v-for=\"path in filteredPaths\" @click=\"addPathFilter(path.path)\" class=\"cursor-pointer p-3\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\" class=\"bg-white hover:bg-slate-50\">\n            <td v-for=\"schemaPath in filteredPaths\" class=\"p-3 cursor-pointer\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-else-if=\"outputType === 'json'\" class=\"flex flex-col space-y-2 p-1 mt-1\">\n        <div\n          v-for=\"document in documents\"\n          :key=\"document._id\"\n          @click=\"handleDocumentContainerClick(document, $event)\"\n          :class=\"[\n            'group relative transition-colors rounded-md border border-slate-100',\n            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:shadow-sm hover:border-slate-300 bg-white'\n          ]\"\n        >\n          <button\n            type=\"button\"\n            class=\"absolute top-2 right-2 z-10 inline-flex items-center rounded bg-ultramarine-600 px-2 py-1 text-xs font-semibold text-white shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            @click.stop=\"openDocument(document)\"\n          >\n            Open this Document\n          </button>\n          <list-json :value=\"filterDocument(document)\" :references=\"referenceMap\">\n          </list-json>\n        </div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold flex items-center gap-2\">\n              <div>{{ index.name }}</div>\n              <div v-if=\"isTTLIndex(index)\" class=\"rounded-full bg-ultramarine-100 px-2 py-0.5 text-xs font-semibold text-ultramarine-700\">\n                TTL: {{ formatTTL(index.expireAfterSeconds) }}\n              </div>\n            </div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCollectionInfoModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCollectionInfoModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Collection Info</div>\n      <div v-if=\"!collectionInfo\" class=\"text-gray-600\">Loading collection details...</div>\n      <div v-else class=\"space-y-3\">\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Documents</div>\n          <div class=\"text-gray-900\">{{ formatNumber(collectionInfo.documentCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Indexes</div>\n          <div class=\"text-gray-900\">{{ formatNumber(collectionInfo.indexCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Total Index Size</div>\n          <div class=\"text-gray-900\">{{ formatCollectionSize(collectionInfo.totalIndexSize) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Total Storage Size</div>\n          <div class=\"text-gray-900\">{{ formatCollectionSize(collectionInfo.size) }}</div>\n        </div>\n        <div class=\"flex flex-col gap-1\">\n          <div class=\"flex justify-between gap-4\">\n            <div class=\"font-semibold text-gray-700\">Collation</div>\n            <div class=\"text-gray-900\">{{ collectionInfo.hasCollation ? 'Yes' : 'No' }}</div>\n          </div>\n          <div v-if=\"collectionInfo.hasCollation\" class=\"rounded bg-gray-100 p-3 text-sm text-gray-800 overflow-x-auto\">\n            <pre class=\"whitespace-pre-wrap\">{{ JSON.stringify(collectionInfo.collation, null, 2) }}</pre>\n          </div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Capped</div>\n          <div class=\"text-gray-900\">{{ collectionInfo.capped ? 'Yes' : 'No' }}</div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-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\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <aside class=\"bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-48 fixed lg:relative shrink-0\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-48' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-48 overflow-x-hidden\">\n      <div class=\"p-1 ml-2 font-bold\">Models</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <nav class=\"flex flex-1 flex-col\">\n      <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7 p-1\">\n        <li>\n          <ul role=\"list\">\n            <li v-for=\"model in models\">\n              <router-link\n                :to=\"'/model/' + model\"\n                class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm text-gray-700\"\n                :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold text-gray-900' : 'hover:bg-ultramarine-50'\">\n                {{model}}\n              </router-link>\n            </li>\n          </ul>\n        </li>\n      </ul>\n      <div v-if=\"models.length === 0 && status === 'loaded'\" class=\"p-2 bg-red-100\">\n        No models found\n      </div>\n    </nav>\n  </aside>\n  <div class=\"documents bg-slate-50\" ref=\"documentsList\">\n    <div class=\"relative h-[42px]\" style=\"z-index: 1000\">\n      <div class=\"documents-menu bg-slate-50\">\n        <div class=\"flex flex-row items-center w-full gap-2\">\n          <document-search\n            ref=\"documentSearch\"\n            :value=\"searchText\"\n            :schema-paths=\"schemaPaths\"\n            @search=\"search\"\n          >\n          </document-search>\n          <div>\n            <span v-if=\"numDocuments == null\">Loading ...</span>\n            <span v-else-if=\"typeof numDocuments === 'number'\">{{documents.length}}/{{numDocuments === 1 ? numDocuments + ' document' : numDocuments + ' documents'}}</span>\n          </div>\n          <button\n            @click=\"stagingSelect\"\n            type=\"button\"\n            :class=\"{ 'bg-gray-500 ring-inset ring-2 ring-gray-300 hover:bg-gray-600': selectMultiple, 'bg-ultramarine-600 hover:bg-ultramarine-500' : !selectMultiple }\"\n            class=\"rounded px-2 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n          >\n            {{ selectMultiple ? 'Cancel' : 'Select' }}\n          </button>\n          <button\n            v-show=\"selectMultiple\"\n            @click=\"shouldShowUpdateMultipleModal=true;\"\n            type=\"button\"\n            class=\"rounded bg-green-600 px-2 py-2 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            >\n            Update\n          </button>\n          <button\n            @click=\"shouldShowDeleteMultipleModal=true;\"\n            type=\"button\"\n            v-show=\"selectMultiple\"\n            class=\"rounded bg-red-600 px-2 py-2 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-500\"\n            >\n            Delete\n          </button>\n          <div class=\"relative\" v-show=\"!selectMultiple\" ref=\"actionsMenuContainer\" @keyup.esc.prevent=\"closeActionsMenu\">\n            <button\n              @click=\"toggleActionsMenu\"\n              type=\"button\"\n              aria-label=\"More actions\"\n              class=\"rounded bg-white px-2 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-5 h-5\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Zm0 6a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z\" />\n              </svg>\n            </button>\n            <div\n              v-if=\"showActionsMenu\"\n              class=\"absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20\"\n            >\n              <div class=\"py-1\">\n                <button\n                  @click=\"shouldShowExportModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Export\n                </button>\n                <button\n                  @click=\"shouldShowCreateModal = true; showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Create\n                </button>\n                <button\n                  @click=\"openFieldSelection(); showActionsMenu = false\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Projection\n                </button>\n                <button\n                  @click=\"openIndexModal\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Indexes\n                </button>\n                <button\n                  @click=\"openCollectionInfo\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Collection Info\n                </button>\n                <button\n                  @click=\"findOldestDocument\"\n                  type=\"button\"\n                  class=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100\"\n                >\n                  Find oldest document\n                </button>\n              </div>\n            </div>\n          </div>\n          <span class=\"isolate inline-flex rounded-md shadow-sm\">\n            <button\n              @click=\"setOutputType('table')\"\n              type=\"button\"\n              class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/table.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('json')\"\n              type=\"button\"\n              class=\"relative -ml-px inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n              :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n              <img class=\"h-5 w-5\" src=\"images/json.svg\">\n            </button>\n            <button\n              @click=\"setOutputType('map')\"\n              :disabled=\"geoJsonFields.length === 0\"\n              type=\"button\"\n              :title=\"geoJsonFields.length > 0 ? 'Map view' : 'No GeoJSON fields detected'\"\n              class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-10\"\n              :class=\"[\n                geoJsonFields.length === 0 ? 'text-gray-300 cursor-not-allowed bg-gray-100' : 'text-gray-400 hover:bg-gray-50',\n                outputType === 'map' ? 'bg-gray-200' : (geoJsonFields.length > 0 ? 'bg-white' : '')\n              ]\">\n              <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z\" />\n              </svg>\n            </button>\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"documents-container relative\">\n      <div v-if=\"error\">\n        <div class=\"bg-red-100 border border-red-400 text-red-700 px-4 py-3 relative m-4 rounded-md\" role=\"alert\">\n          <span class=\"block font-bold\">Error</span>\n          <span class=\"block\">{{ error }}</span>\n        </div>\n      </div>\n      <table v-else-if=\"outputType === 'table'\">\n        <thead class=\"bg-slate-50\">\n          <th v-for=\"path in filteredPaths\" @click=\"addPathFilter(path.path)\" class=\"cursor-pointer p-3\">\n            {{path.path}}\n            <span class=\"path-type\">\n              ({{(path.instance || 'unknown')}})\n            </span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n            <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n          </th>\n        </thead>\n        <tbody>\n          <tr v-for=\"document in documents\" @click=\"handleDocumentClick(document, $event)\" :key=\"document._id\" class=\"bg-white hover:bg-slate-50\">\n            <td v-for=\"schemaPath in filteredPaths\" class=\"p-3 cursor-pointer\" :class=\"{ 'bg-blue-200': selectedDocuments.some(x => x._id.toString() === document._id.toString()) }\">\n              <component\n                :is=\"getComponentForPath(schemaPath)\"\n                :value=\"getValueForPath(document, schemaPath.path)\"\n                :allude=\"getReferenceModel(schemaPath)\">\n              </component>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-else-if=\"outputType === 'json'\" class=\"flex flex-col space-y-2 p-1 mt-1\">\n        <div\n          v-for=\"document in documents\"\n          :key=\"document._id\"\n          @click=\"handleDocumentContainerClick(document, $event)\"\n          :class=\"[\n            'group relative transition-colors rounded-md border border-slate-100',\n            selectedDocuments.some(x => x._id.toString() === document._id.toString()) ? 'bg-blue-200' : 'hover:shadow-sm hover:border-slate-300 bg-white'\n          ]\"\n        >\n          <button\n            type=\"button\"\n            class=\"absolute top-2 right-2 z-10 inline-flex items-center rounded bg-ultramarine-600 px-2 py-1 text-xs font-semibold text-white shadow-sm transition-opacity duration-150 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            @click.stop=\"openDocument(document)\"\n          >\n            Open this Document\n          </button>\n          <list-json :value=\"filterDocument(document)\" :references=\"referenceMap\">\n          </list-json>\n        </div>\n      </div>\n      <div v-else-if=\"outputType === 'map'\" class=\"flex flex-col h-full\">\n        <div class=\"p-2 bg-white border-b flex items-center gap-2\">\n          <label class=\"text-sm font-medium text-gray-700\">GeoJSON Field:</label>\n          <select\n            :value=\"selectedGeoField\"\n            @change=\"setSelectedGeoField($event.target.value)\"\n            class=\"rounded-md border border-gray-300 py-1 px-2 text-sm focus:border-ultramarine-500 focus:ring-ultramarine-500\"\n          >\n            <option v-for=\"field in geoJsonFields\" :key=\"field.path\" :value=\"field.path\">\n              {{ field.label }}\n            </option>\n          </select>\n          <async-button\n            @click=\"loadMoreDocuments\"\n            :disabled=\"loadedAllDocs\"\n            type=\"button\"\n            class=\"rounded px-2 py-1 text-xs font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\"\n            :class=\"loadedAllDocs ? 'bg-gray-400 cursor-not-allowed' : 'bg-ultramarine-600 hover:bg-ultramarine-500'\"\n          >\n            Load more\n          </async-button>\n        </div>\n        <div class=\"flex-1 min-h-[400px]\" ref=\"modelsMap\"></div>\n      </div>\n      <div v-if=\"status === 'loading'\" class=\"loader\">\n        <img src=\"images/loader.gif\">\n      </div>\n    </div>\n  </div>\n  <modal v-if=\"shouldShowExportModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">&times;</div>\n      <export-query-results\n        :schemaPaths=\"schemaPaths\"\n        :search-text=\"searchText\"\n        :currentModel=\"currentModel\"\n        @done=\"shouldShowExportModal = false\">\n      </export-query-results>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowIndexModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowIndexModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Indexes</div>\n      <div v-for=\"index in mongoDBIndexes\" class=\"w-full flex items-center\">\n        <div class=\"grow shrink text-left flex justify-between items-center\" v-if=\"index.name != '_id_'\">\n          <div>\n            <div class=\"font-bold flex items-center gap-2\">\n              <div>{{ index.name }}</div>\n              <div v-if=\"isTTLIndex(index)\" class=\"rounded-full bg-ultramarine-100 px-2 py-0.5 text-xs font-semibold text-ultramarine-700\">\n                TTL: {{ formatTTL(index.expireAfterSeconds) }}\n              </div>\n            </div>\n            <div class=\"text-sm font-mono\">{{ JSON.stringify(index.key) }}</div>\n          </div>\n          <div>\n            <async-button\n              type=\"button\"\n              @click=\"dropIndex(index.name)\"\n              class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed\">\n              Drop\n            </async-button>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCollectionInfoModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCollectionInfoModal = false\">&times;</div>\n      <div class=\"text-xl font-bold mb-2\">Collection Info</div>\n      <div v-if=\"!collectionInfo\" class=\"text-gray-600\">Loading collection details...</div>\n      <div v-else class=\"space-y-3\">\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Documents</div>\n          <div class=\"text-gray-900\">{{ formatNumber(collectionInfo.documentCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Indexes</div>\n          <div class=\"text-gray-900\">{{ formatNumber(collectionInfo.indexCount) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Total Index Size</div>\n          <div class=\"text-gray-900\">{{ formatCollectionSize(collectionInfo.totalIndexSize) }}</div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Total Storage Size</div>\n          <div class=\"text-gray-900\">{{ formatCollectionSize(collectionInfo.size) }}</div>\n        </div>\n        <div class=\"flex flex-col gap-1\">\n          <div class=\"flex justify-between gap-4\">\n            <div class=\"font-semibold text-gray-700\">Collation</div>\n            <div class=\"text-gray-900\">{{ collectionInfo.hasCollation ? 'Yes' : 'No' }}</div>\n          </div>\n          <div v-if=\"collectionInfo.hasCollation\" class=\"rounded bg-gray-100 p-3 text-sm text-gray-800 overflow-x-auto\">\n            <pre class=\"whitespace-pre-wrap\">{{ JSON.stringify(collectionInfo.collation, null, 2) }}</pre>\n          </div>\n        </div>\n        <div class=\"flex justify-between gap-4\">\n          <div class=\"font-semibold text-gray-700\">Capped</div>\n          <div class=\"text-gray-900\">{{ collectionInfo.capped ? 'Yes' : 'No' }}</div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowFieldModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">&times;</div>\n      <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" class=\"w-5 flex items-center\">\n        <input  class=\"mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600\" type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n        <div class=\"ml-2 text-gray-700 grow shrink text-left\">\n          <label :for=\"'path.path' + index\">{{path.path}}</label>\n        </div>\n      </div>\n      <div class=\"mt-4 flex gap-2\">\n        <button type=\"button\" @click=\"filterDocuments()\" class=\"rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">Filter Selection</button>\n        <button type=\"button\" @click=\"selectAll()\" class=\"rounded-md bg-forest-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\">Select All</button>\n        <button type=\"button\" @click=\"deselectAll()\" class=\"rounded-md bg-valencia-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-valencia-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">Deselect All</button>\n        <button type=\"button\" @click=\"resetDocuments()\" class=\"rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\" >Cancel</button>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowCreateModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">&times;</div>\n      <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowUpdateMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowUpdateMultipleModal = false;\">&times;</div>\n      <update-document :currentModel=\"currentModel\" :document=\"selectedDocuments\" :multiple=\"true\" @update=\"updateDocuments\" @close=\"shouldShowUpdateMultipleModal=false;\"></update-document>\n    </template>\n  </modal>\n  <modal v-if=\"shouldShowDeleteMultipleModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"shouldShowDeleteMultipleModal = false;\">&times;</div>\n      <h2>Are you sure you want to delete {{selectedDocuments.length}} documents?</h2>\n      <div>\n        <list-json :value=\"selectedDocuments\"></list-json>\n      </div>\n      <div class=\"flex gap-4\">\n        <async-button @click=\"deleteDocuments\" class=\"rounded bg-red-500 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600\">\n          Confirm\n        </async-button>\n        <button @click=\"shouldShowDeleteMultipleModal = false;\" class=\"rounded bg-gray-400 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500\">\n          Cancel\n        </button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ },
 
@@ -6794,15 +6904,19 @@ module.exports = "<div class=\"models flex\" style=\"height: calc(100vh - 55px);
 "use strict";
 
 
+/* global L */
+
 const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 const template = __webpack_require__(/*! ./models.html */ "./frontend/src/models/models.html");
 const mpath = __webpack_require__(/*! mpath */ "./node_modules/mpath/index.js");
+const xss = __webpack_require__(/*! xss */ "./node_modules/xss/lib/index.js");
 
 const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
 appendCSS(__webpack_require__(/*! ./models.css */ "./frontend/src/models/models.css"));
 
 const limit = 20;
 const OUTPUT_TYPE_STORAGE_KEY = 'studio:model-output-type';
+const SELECTED_GEO_FIELD_STORAGE_KEY = 'studio:model-selected-geo-field';
 
 module.exports = app => app.component('models', {
   template: template,
@@ -6836,7 +6950,10 @@ module.exports = app => app.component('models', {
     query: {},
     scrollHeight: 0,
     interval: null,
-    outputType: 'table', // json, table
+    outputType: 'table', // json, table, map
+    selectedGeoField: null,
+    mapInstance: null,
+    mapLayer: null,
     hideSidebar: null,
     lastSelectedIndex: null,
     error: null,
@@ -6846,11 +6963,13 @@ module.exports = app => app.component('models', {
   created() {
     this.currentModel = this.model;
     this.loadOutputPreference();
+    this.loadSelectedGeoField();
   },
   beforeDestroy() {
     document.removeEventListener('scroll', this.onScroll, true);
     window.removeEventListener('popstate', this.onPopState, true);
     document.removeEventListener('click', this.onOutsideActionsMenuClick, true);
+    this.destroyMap();
   },
   async mounted() {
     this.onScroll = () => this.checkIfScrolledToBottom();
@@ -6882,6 +7001,37 @@ module.exports = app => app.component('models', {
 
     await this.initSearchFromUrl();
   },
+  watch: {
+    documents: {
+      handler() {
+        if (this.outputType === 'map' && this.mapInstance) {
+          this.$nextTick(() => {
+            this.updateMapFeatures();
+          });
+        }
+      },
+      deep: true
+    },
+    geoJsonFields: {
+      handler(newFields) {
+        // Switch off map view if map is selected but no GeoJSON fields available
+        if (this.outputType === 'map' && newFields.length === 0) {
+          this.setOutputType('json');
+          return;
+        }
+        // Auto-select first field if current selection is not valid
+        if (this.outputType === 'map' && newFields.length > 0) {
+          const isCurrentValid = newFields.some(f => f.path === this.selectedGeoField);
+          if (!isCurrentValid) {
+            this.selectedGeoField = newFields[0].path;
+            this.$nextTick(() => {
+              this.updateMapFeatures();
+            });
+          }
+        }
+      }
+    }
+  },
   computed: {
     referenceMap() {
       const map = {};
@@ -6891,6 +7041,56 @@ module.exports = app => app.component('models', {
         }
       }
       return map;
+    },
+    geoJsonFields() {
+      // Find schema paths that look like GeoJSON fields
+      // GeoJSON fields have nested 'type' and 'coordinates' properties
+      const geoFields = [];
+      const pathsByPrefix = {};
+
+      // Group paths by their parent prefix
+      for (const schemaPath of this.schemaPaths) {
+        const path = schemaPath.path;
+        const parts = path.split('.');
+        if (parts.length >= 2) {
+          const parent = parts.slice(0, -1).join('.');
+          const child = parts[parts.length - 1];
+          if (!pathsByPrefix[parent]) {
+            pathsByPrefix[parent] = {};
+          }
+          pathsByPrefix[parent][child] = schemaPath;
+        }
+      }
+
+      // Check which parents have both 'type' and 'coordinates' children
+      for (const [parent, children] of Object.entries(pathsByPrefix)) {
+        if (children.type && children.coordinates) {
+          geoFields.push({
+            path: parent,
+            label: parent
+          });
+        }
+      }
+
+      // Also check for Embedded/Mixed fields that might contain GeoJSON
+      // by looking at actual document data
+      for (const schemaPath of this.schemaPaths) {
+        if (schemaPath.instance === 'Embedded' || schemaPath.instance === 'Mixed') {
+          // Check if any document has this field with GeoJSON structure
+          const hasGeoJsonData = this.documents.some(doc => {
+            const value = mpath.get(schemaPath.path, doc);
+            return this.isGeoJsonValue(value);
+          });
+          if (hasGeoJsonData && !geoFields.find(f => f.path === schemaPath.path)) {
+            geoFields.push({
+              path: schemaPath.path,
+              label: schemaPath.path
+            });
+          }
+        }
+      }
+
+      return geoFields;
     }
   },
   methods: {
@@ -6899,18 +7099,170 @@ module.exports = app => app.component('models', {
         return;
       }
       const storedPreference = window.localStorage.getItem(OUTPUT_TYPE_STORAGE_KEY);
-      if (storedPreference === 'json' || storedPreference === 'table') {
+      if (storedPreference === 'json' || storedPreference === 'table' || storedPreference === 'map') {
         this.outputType = storedPreference;
       }
     },
+    loadSelectedGeoField() {
+      if (typeof window === 'undefined' || !window.localStorage) {
+        return;
+      }
+      const storedField = window.localStorage.getItem(SELECTED_GEO_FIELD_STORAGE_KEY);
+      if (storedField) {
+        this.selectedGeoField = storedField;
+      }
+    },
     setOutputType(type) {
-      if (type !== 'json' && type !== 'table') {
+      if (type !== 'json' && type !== 'table' && type !== 'map') {
         return;
       }
       this.outputType = type;
       if (typeof window !== 'undefined' && window.localStorage) {
         window.localStorage.setItem(OUTPUT_TYPE_STORAGE_KEY, type);
       }
+      if (type === 'map') {
+        this.$nextTick(() => {
+          this.initMap();
+        });
+      } else {
+        this.destroyMap();
+      }
+    },
+    setSelectedGeoField(field) {
+      this.selectedGeoField = field;
+      if (typeof window !== 'undefined' && window.localStorage) {
+        window.localStorage.setItem(SELECTED_GEO_FIELD_STORAGE_KEY, field);
+      }
+      if (this.outputType === 'map') {
+        this.$nextTick(() => {
+          this.updateMapFeatures();
+        });
+      }
+    },
+    isGeoJsonValue(value) {
+      return value != null &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        Object.prototype.hasOwnProperty.call(value, 'type') &&
+        typeof value.type === 'string' &&
+        Object.prototype.hasOwnProperty.call(value, 'coordinates') &&
+        Array.isArray(value.coordinates);
+    },
+    initMap() {
+      if (typeof L === 'undefined') {
+        console.error('Leaflet (L) is not defined');
+        return;
+      }
+      if (!this.$refs.modelsMap) {
+        return;
+      }
+      if (this.mapInstance) {
+        this.updateMapFeatures();
+        return;
+      }
+
+      const mapElement = this.$refs.modelsMap;
+      mapElement.style.setProperty('height', '100%', 'important');
+      mapElement.style.setProperty('min-height', '400px', 'important');
+      mapElement.style.setProperty('width', '100%', 'important');
+
+      this.mapInstance = L.map(this.$refs.modelsMap).setView([0, 0], 2);
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; OpenStreetMap contributors'
+      }).addTo(this.mapInstance);
+
+      this.$nextTick(() => {
+        if (this.mapInstance) {
+          this.mapInstance.invalidateSize();
+          this.updateMapFeatures();
+        }
+      });
+    },
+    destroyMap() {
+      if (this.mapLayer) {
+        this.mapLayer.remove();
+        this.mapLayer = null;
+      }
+      if (this.mapInstance) {
+        this.mapInstance.remove();
+        this.mapInstance = null;
+      }
+    },
+    updateMapFeatures() {
+      if (!this.mapInstance) {
+        return;
+      }
+
+      // Remove existing layer
+      if (this.mapLayer) {
+        this.mapLayer.remove();
+        this.mapLayer = null;
+      }
+
+      // Auto-select first geoJSON field if none selected
+      if (!this.selectedGeoField && this.geoJsonFields.length > 0) {
+        this.selectedGeoField = this.geoJsonFields[0].path;
+      }
+
+      if (!this.selectedGeoField) {
+        return;
+      }
+
+      // Build GeoJSON FeatureCollection from documents
+      const features = [];
+      for (const doc of this.documents) {
+        const geoValue = mpath.get(this.selectedGeoField, doc);
+        if (this.isGeoJsonValue(geoValue)) {
+          features.push({
+            type: 'Feature',
+            geometry: geoValue,
+            properties: {
+              _id: doc._id,
+              documentId: doc._id
+            }
+          });
+        }
+      }
+
+      if (features.length === 0) {
+        return;
+      }
+
+      const featureCollection = {
+        type: 'FeatureCollection',
+        features: features
+      };
+
+      // Add layer with click handler for popups
+      this.mapLayer = L.geoJSON(featureCollection, {
+        style: {
+          color: '#3388ff',
+          weight: 2,
+          opacity: 0.8,
+          fillOpacity: 0.3
+        },
+        pointToLayer: (feature, latlng) => {
+          return L.marker(latlng);
+        },
+        onEachFeature: (feature, layer) => {
+          const docId = feature.properties._id;
+          const docUrl = `#/model/${this.currentModel}/document/${xss(docId)}`;
+          const popupContent = `
+            <div style="min-width: 150px;">
+              <div style="font-weight: bold; margin-bottom: 8px;">Document</div>
+              <div style="font-family: monospace; font-size: 12px; word-break: break-all; margin-bottom: 8px;">${docId}</div>
+              <a href="${docUrl}" style="color: #3388ff; text-decoration: underline;">Open Document</a>
+            </div>
+          `;
+          layer.bindPopup(popupContent);
+        }
+      }).addTo(this.mapInstance);
+
+      // Fit bounds to show all features
+      const bounds = this.mapLayer.getBounds();
+      if (bounds.isValid()) {
+        this.mapInstance.fitBounds(bounds, { padding: [20, 20], maxZoom: 16 });
+      }
     },
     buildDocumentFetchParams(options = {}) {
       const params = {
@@ -6964,6 +7316,13 @@ module.exports = app => app.component('models', {
         this.filteredPaths = this.filteredPaths.filter(x => filter.includes(x.path));
       }
       this.status = 'loaded';
+
+      // Initialize map if output type is map
+      if (this.outputType === 'map') {
+        this.$nextTick(() => {
+          this.initMap();
+        });
+      }
     },
     async dropIndex(name) {
       const { mongoDBIndexes } = await api.Model.dropIndex({ model: this.currentModel, name });
@@ -29517,6 +29876,705 @@ var bson = /*#__PURE__*/Object.freeze({
 //# sourceMappingURL=bson.mjs.map
 
 
+/***/ },
+
+/***/ "./node_modules/cssfilter/lib/css.js"
+/*!*******************************************!*\
+  !*** ./node_modules/cssfilter/lib/css.js ***!
+  \*******************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+/**
+ * cssfilter
+ *
+ * @author 老雷<leizongmin@gmail.com>
+ */
+
+var DEFAULT = __webpack_require__(/*! ./default */ "./node_modules/cssfilter/lib/default.js");
+var parseStyle = __webpack_require__(/*! ./parser */ "./node_modules/cssfilter/lib/parser.js");
+var _ = __webpack_require__(/*! ./util */ "./node_modules/cssfilter/lib/util.js");
+
+
+/**
+ * 返回值是否为空
+ *
+ * @param {Object} obj
+ * @return {Boolean}
+ */
+function isNull (obj) {
+  return (obj === undefined || obj === null);
+}
+
+/**
+ * 浅拷贝对象
+ *
+ * @param {Object} obj
+ * @return {Object}
+ */
+function shallowCopyObject (obj) {
+  var ret = {};
+  for (var i in obj) {
+    ret[i] = obj[i];
+  }
+  return ret;
+}
+
+/**
+ * 创建CSS过滤器
+ *
+ * @param {Object} options
+ *   - {Object} whiteList
+ *   - {Function} onAttr
+ *   - {Function} onIgnoreAttr
+ *   - {Function} safeAttrValue
+ */
+function FilterCSS (options) {
+  options = shallowCopyObject(options || {});
+  options.whiteList = options.whiteList || DEFAULT.whiteList;
+  options.onAttr = options.onAttr || DEFAULT.onAttr;
+  options.onIgnoreAttr = options.onIgnoreAttr || DEFAULT.onIgnoreAttr;
+  options.safeAttrValue = options.safeAttrValue || DEFAULT.safeAttrValue;
+  this.options = options;
+}
+
+FilterCSS.prototype.process = function (css) {
+  // 兼容各种奇葩输入
+  css = css || '';
+  css = css.toString();
+  if (!css) return '';
+
+  var me = this;
+  var options = me.options;
+  var whiteList = options.whiteList;
+  var onAttr = options.onAttr;
+  var onIgnoreAttr = options.onIgnoreAttr;
+  var safeAttrValue = options.safeAttrValue;
+
+  var retCSS = parseStyle(css, function (sourcePosition, position, name, value, source) {
+
+    var check = whiteList[name];
+    var isWhite = false;
+    if (check === true) isWhite = check;
+    else if (typeof check === 'function') isWhite = check(value);
+    else if (check instanceof RegExp) isWhite = check.test(value);
+    if (isWhite !== true) isWhite = false;
+
+    // 如果过滤后 value 为空则直接忽略
+    value = safeAttrValue(name, value);
+    if (!value) return;
+
+    var opts = {
+      position: position,
+      sourcePosition: sourcePosition,
+      source: source,
+      isWhite: isWhite
+    };
+
+    if (isWhite) {
+
+      var ret = onAttr(name, value, opts);
+      if (isNull(ret)) {
+        return name + ':' + value;
+      } else {
+        return ret;
+      }
+
+    } else {
+
+      var ret = onIgnoreAttr(name, value, opts);
+      if (!isNull(ret)) {
+        return ret;
+      }
+
+    }
+  });
+
+  return retCSS;
+};
+
+
+module.exports = FilterCSS;
+
+
+/***/ },
+
+/***/ "./node_modules/cssfilter/lib/default.js"
+/*!***********************************************!*\
+  !*** ./node_modules/cssfilter/lib/default.js ***!
+  \***********************************************/
+(__unused_webpack_module, exports) {
+
+/**
+ * cssfilter
+ *
+ * @author 老雷<leizongmin@gmail.com>
+ */
+
+function getDefaultWhiteList () {
+  // 白名单值说明：
+  // true: 允许该属性
+  // Function: function (val) { } 返回true表示允许该属性，其他值均表示不允许
+  // RegExp: regexp.test(val) 返回true表示允许该属性，其他值均表示不允许
+  // 除上面列出的值外均表示不允许
+  var whiteList = {};
+
+  whiteList['align-content'] = false; // default: auto
+  whiteList['align-items'] = false; // default: auto
+  whiteList['align-self'] = false; // default: auto
+  whiteList['alignment-adjust'] = false; // default: auto
+  whiteList['alignment-baseline'] = false; // default: baseline
+  whiteList['all'] = false; // default: depending on individual properties
+  whiteList['anchor-point'] = false; // default: none
+  whiteList['animation'] = false; // default: depending on individual properties
+  whiteList['animation-delay'] = false; // default: 0
+  whiteList['animation-direction'] = false; // default: normal
+  whiteList['animation-duration'] = false; // default: 0
+  whiteList['animation-fill-mode'] = false; // default: none
+  whiteList['animation-iteration-count'] = false; // default: 1
+  whiteList['animation-name'] = false; // default: none
+  whiteList['animation-play-state'] = false; // default: running
+  whiteList['animation-timing-function'] = false; // default: ease
+  whiteList['azimuth'] = false; // default: center
+  whiteList['backface-visibility'] = false; // default: visible
+  whiteList['background'] = true; // default: depending on individual properties
+  whiteList['background-attachment'] = true; // default: scroll
+  whiteList['background-clip'] = true; // default: border-box
+  whiteList['background-color'] = true; // default: transparent
+  whiteList['background-image'] = true; // default: none
+  whiteList['background-origin'] = true; // default: padding-box
+  whiteList['background-position'] = true; // default: 0% 0%
+  whiteList['background-repeat'] = true; // default: repeat
+  whiteList['background-size'] = true; // default: auto
+  whiteList['baseline-shift'] = false; // default: baseline
+  whiteList['binding'] = false; // default: none
+  whiteList['bleed'] = false; // default: 6pt
+  whiteList['bookmark-label'] = false; // default: content()
+  whiteList['bookmark-level'] = false; // default: none
+  whiteList['bookmark-state'] = false; // default: open
+  whiteList['border'] = true; // default: depending on individual properties
+  whiteList['border-bottom'] = true; // default: depending on individual properties
+  whiteList['border-bottom-color'] = true; // default: current color
+  whiteList['border-bottom-left-radius'] = true; // default: 0
+  whiteList['border-bottom-right-radius'] = true; // default: 0
+  whiteList['border-bottom-style'] = true; // default: none
+  whiteList['border-bottom-width'] = true; // default: medium
+  whiteList['border-collapse'] = true; // default: separate
+  whiteList['border-color'] = true; // default: depending on individual properties
+  whiteList['border-image'] = true; // default: none
+  whiteList['border-image-outset'] = true; // default: 0
+  whiteList['border-image-repeat'] = true; // default: stretch
+  whiteList['border-image-slice'] = true; // default: 100%
+  whiteList['border-image-source'] = true; // default: none
+  whiteList['border-image-width'] = true; // default: 1
+  whiteList['border-left'] = true; // default: depending on individual properties
+  whiteList['border-left-color'] = true; // default: current color
+  whiteList['border-left-style'] = true; // default: none
+  whiteList['border-left-width'] = true; // default: medium
+  whiteList['border-radius'] = true; // default: 0
+  whiteList['border-right'] = true; // default: depending on individual properties
+  whiteList['border-right-color'] = true; // default: current color
+  whiteList['border-right-style'] = true; // default: none
+  whiteList['border-right-width'] = true; // default: medium
+  whiteList['border-spacing'] = true; // default: 0
+  whiteList['border-style'] = true; // default: depending on individual properties
+  whiteList['border-top'] = true; // default: depending on individual properties
+  whiteList['border-top-color'] = true; // default: current color
+  whiteList['border-top-left-radius'] = true; // default: 0
+  whiteList['border-top-right-radius'] = true; // default: 0
+  whiteList['border-top-style'] = true; // default: none
+  whiteList['border-top-width'] = true; // default: medium
+  whiteList['border-width'] = true; // default: depending on individual properties
+  whiteList['bottom'] = false; // default: auto
+  whiteList['box-decoration-break'] = true; // default: slice
+  whiteList['box-shadow'] = true; // default: none
+  whiteList['box-sizing'] = true; // default: content-box
+  whiteList['box-snap'] = true; // default: none
+  whiteList['box-suppress'] = true; // default: show
+  whiteList['break-after'] = true; // default: auto
+  whiteList['break-before'] = true; // default: auto
+  whiteList['break-inside'] = true; // default: auto
+  whiteList['caption-side'] = false; // default: top
+  whiteList['chains'] = false; // default: none
+  whiteList['clear'] = true; // default: none
+  whiteList['clip'] = false; // default: auto
+  whiteList['clip-path'] = false; // default: none
+  whiteList['clip-rule'] = false; // default: nonzero
+  whiteList['color'] = true; // default: implementation dependent
+  whiteList['color-interpolation-filters'] = true; // default: auto
+  whiteList['column-count'] = false; // default: auto
+  whiteList['column-fill'] = false; // default: balance
+  whiteList['column-gap'] = false; // default: normal
+  whiteList['column-rule'] = false; // default: depending on individual properties
+  whiteList['column-rule-color'] = false; // default: current color
+  whiteList['column-rule-style'] = false; // default: medium
+  whiteList['column-rule-width'] = false; // default: medium
+  whiteList['column-span'] = false; // default: none
+  whiteList['column-width'] = false; // default: auto
+  whiteList['columns'] = false; // default: depending on individual properties
+  whiteList['contain'] = false; // default: none
+  whiteList['content'] = false; // default: normal
+  whiteList['counter-increment'] = false; // default: none
+  whiteList['counter-reset'] = false; // default: none
+  whiteList['counter-set'] = false; // default: none
+  whiteList['crop'] = false; // default: auto
+  whiteList['cue'] = false; // default: depending on individual properties
+  whiteList['cue-after'] = false; // default: none
+  whiteList['cue-before'] = false; // default: none
+  whiteList['cursor'] = false; // default: auto
+  whiteList['direction'] = false; // default: ltr
+  whiteList['display'] = true; // default: depending on individual properties
+  whiteList['display-inside'] = true; // default: auto
+  whiteList['display-list'] = true; // default: none
+  whiteList['display-outside'] = true; // default: inline-level
+  whiteList['dominant-baseline'] = false; // default: auto
+  whiteList['elevation'] = false; // default: level
+  whiteList['empty-cells'] = false; // default: show
+  whiteList['filter'] = false; // default: none
+  whiteList['flex'] = false; // default: depending on individual properties
+  whiteList['flex-basis'] = false; // default: auto
+  whiteList['flex-direction'] = false; // default: row
+  whiteList['flex-flow'] = false; // default: depending on individual properties
+  whiteList['flex-grow'] = false; // default: 0
+  whiteList['flex-shrink'] = false; // default: 1
+  whiteList['flex-wrap'] = false; // default: nowrap
+  whiteList['float'] = false; // default: none
+  whiteList['float-offset'] = false; // default: 0 0
+  whiteList['flood-color'] = false; // default: black
+  whiteList['flood-opacity'] = false; // default: 1
+  whiteList['flow-from'] = false; // default: none
+  whiteList['flow-into'] = false; // default: none
+  whiteList['font'] = true; // default: depending on individual properties
+  whiteList['font-family'] = true; // default: implementation dependent
+  whiteList['font-feature-settings'] = true; // default: normal
+  whiteList['font-kerning'] = true; // default: auto
+  whiteList['font-language-override'] = true; // default: normal
+  whiteList['font-size'] = true; // default: medium
+  whiteList['font-size-adjust'] = true; // default: none
+  whiteList['font-stretch'] = true; // default: normal
+  whiteList['font-style'] = true; // default: normal
+  whiteList['font-synthesis'] = true; // default: weight style
+  whiteList['font-variant'] = true; // default: normal
+  whiteList['font-variant-alternates'] = true; // default: normal
+  whiteList['font-variant-caps'] = true; // default: normal
+  whiteList['font-variant-east-asian'] = true; // default: normal
+  whiteList['font-variant-ligatures'] = true; // default: normal
+  whiteList['font-variant-numeric'] = true; // default: normal
+  whiteList['font-variant-position'] = true; // default: normal
+  whiteList['font-weight'] = true; // default: normal
+  whiteList['grid'] = false; // default: depending on individual properties
+  whiteList['grid-area'] = false; // default: depending on individual properties
+  whiteList['grid-auto-columns'] = false; // default: auto
+  whiteList['grid-auto-flow'] = false; // default: none
+  whiteList['grid-auto-rows'] = false; // default: auto
+  whiteList['grid-column'] = false; // default: depending on individual properties
+  whiteList['grid-column-end'] = false; // default: auto
+  whiteList['grid-column-start'] = false; // default: auto
+  whiteList['grid-row'] = false; // default: depending on individual properties
+  whiteList['grid-row-end'] = false; // default: auto
+  whiteList['grid-row-start'] = false; // default: auto
+  whiteList['grid-template'] = false; // default: depending on individual properties
+  whiteList['grid-template-areas'] = false; // default: none
+  whiteList['grid-template-columns'] = false; // default: none
+  whiteList['grid-template-rows'] = false; // default: none
+  whiteList['hanging-punctuation'] = false; // default: none
+  whiteList['height'] = true; // default: auto
+  whiteList['hyphens'] = false; // default: manual
+  whiteList['icon'] = false; // default: auto
+  whiteList['image-orientation'] = false; // default: auto
+  whiteList['image-resolution'] = false; // default: normal
+  whiteList['ime-mode'] = false; // default: auto
+  whiteList['initial-letters'] = false; // default: normal
+  whiteList['inline-box-align'] = false; // default: last
+  whiteList['justify-content'] = false; // default: auto
+  whiteList['justify-items'] = false; // default: auto
+  whiteList['justify-self'] = false; // default: auto
+  whiteList['left'] = false; // default: auto
+  whiteList['letter-spacing'] = true; // default: normal
+  whiteList['lighting-color'] = true; // default: white
+  whiteList['line-box-contain'] = false; // default: block inline replaced
+  whiteList['line-break'] = false; // default: auto
+  whiteList['line-grid'] = false; // default: match-parent
+  whiteList['line-height'] = false; // default: normal
+  whiteList['line-snap'] = false; // default: none
+  whiteList['line-stacking'] = false; // default: depending on individual properties
+  whiteList['line-stacking-ruby'] = false; // default: exclude-ruby
+  whiteList['line-stacking-shift'] = false; // default: consider-shifts
+  whiteList['line-stacking-strategy'] = false; // default: inline-line-height
+  whiteList['list-style'] = true; // default: depending on individual properties
+  whiteList['list-style-image'] = true; // default: none
+  whiteList['list-style-position'] = true; // default: outside
+  whiteList['list-style-type'] = true; // default: disc
+  whiteList['margin'] = true; // default: depending on individual properties
+  whiteList['margin-bottom'] = true; // default: 0
+  whiteList['margin-left'] = true; // default: 0
+  whiteList['margin-right'] = true; // default: 0
+  whiteList['margin-top'] = true; // default: 0
+  whiteList['marker-offset'] = false; // default: auto
+  whiteList['marker-side'] = false; // default: list-item
+  whiteList['marks'] = false; // default: none
+  whiteList['mask'] = false; // default: border-box
+  whiteList['mask-box'] = false; // default: see individual properties
+  whiteList['mask-box-outset'] = false; // default: 0
+  whiteList['mask-box-repeat'] = false; // default: stretch
+  whiteList['mask-box-slice'] = false; // default: 0 fill
+  whiteList['mask-box-source'] = false; // default: none
+  whiteList['mask-box-width'] = false; // default: auto
+  whiteList['mask-clip'] = false; // default: border-box
+  whiteList['mask-image'] = false; // default: none
+  whiteList['mask-origin'] = false; // default: border-box
+  whiteList['mask-position'] = false; // default: center
+  whiteList['mask-repeat'] = false; // default: no-repeat
+  whiteList['mask-size'] = false; // default: border-box
+  whiteList['mask-source-type'] = false; // default: auto
+  whiteList['mask-type'] = false; // default: luminance
+  whiteList['max-height'] = true; // default: none
+  whiteList['max-lines'] = false; // default: none
+  whiteList['max-width'] = true; // default: none
+  whiteList['min-height'] = true; // default: 0
+  whiteList['min-width'] = true; // default: 0
+  whiteList['move-to'] = false; // default: normal
+  whiteList['nav-down'] = false; // default: auto
+  whiteList['nav-index'] = false; // default: auto
+  whiteList['nav-left'] = false; // default: auto
+  whiteList['nav-right'] = false; // default: auto
+  whiteList['nav-up'] = false; // default: auto
+  whiteList['object-fit'] = false; // default: fill
+  whiteList['object-position'] = false; // default: 50% 50%
+  whiteList['opacity'] = false; // default: 1
+  whiteList['order'] = false; // default: 0
+  whiteList['orphans'] = false; // default: 2
+  whiteList['outline'] = false; // default: depending on individual properties
+  whiteList['outline-color'] = false; // default: invert
+  whiteList['outline-offset'] = false; // default: 0
+  whiteList['outline-style'] = false; // default: none
+  whiteList['outline-width'] = false; // default: medium
+  whiteList['overflow'] = false; // default: depending on individual properties
+  whiteList['overflow-wrap'] = false; // default: normal
+  whiteList['overflow-x'] = false; // default: visible
+  whiteList['overflow-y'] = false; // default: visible
+  whiteList['padding'] = true; // default: depending on individual properties
+  whiteList['padding-bottom'] = true; // default: 0
+  whiteList['padding-left'] = true; // default: 0
+  whiteList['padding-right'] = true; // default: 0
+  whiteList['padding-top'] = true; // default: 0
+  whiteList['page'] = false; // default: auto
+  whiteList['page-break-after'] = false; // default: auto
+  whiteList['page-break-before'] = false; // default: auto
+  whiteList['page-break-inside'] = false; // default: auto
+  whiteList['page-policy'] = false; // default: start
+  whiteList['pause'] = false; // default: implementation dependent
+  whiteList['pause-after'] = false; // default: implementation dependent
+  whiteList['pause-before'] = false; // default: implementation dependent
+  whiteList['perspective'] = false; // default: none
+  whiteList['perspective-origin'] = false; // default: 50% 50%
+  whiteList['pitch'] = false; // default: medium
+  whiteList['pitch-range'] = false; // default: 50
+  whiteList['play-during'] = false; // default: auto
+  whiteList['position'] = false; // default: static
+  whiteList['presentation-level'] = false; // default: 0
+  whiteList['quotes'] = false; // default: text
+  whiteList['region-fragment'] = false; // default: auto
+  whiteList['resize'] = false; // default: none
+  whiteList['rest'] = false; // default: depending on individual properties
+  whiteList['rest-after'] = false; // default: none
+  whiteList['rest-before'] = false; // default: none
+  whiteList['richness'] = false; // default: 50
+  whiteList['right'] = false; // default: auto
+  whiteList['rotation'] = false; // default: 0
+  whiteList['rotation-point'] = false; // default: 50% 50%
+  whiteList['ruby-align'] = false; // default: auto
+  whiteList['ruby-merge'] = false; // default: separate
+  whiteList['ruby-position'] = false; // default: before
+  whiteList['shape-image-threshold'] = false; // default: 0.0
+  whiteList['shape-outside'] = false; // default: none
+  whiteList['shape-margin'] = false; // default: 0
+  whiteList['size'] = false; // default: auto
+  whiteList['speak'] = false; // default: auto
+  whiteList['speak-as'] = false; // default: normal
+  whiteList['speak-header'] = false; // default: once
+  whiteList['speak-numeral'] = false; // default: continuous
+  whiteList['speak-punctuation'] = false; // default: none
+  whiteList['speech-rate'] = false; // default: medium
+  whiteList['stress'] = false; // default: 50
+  whiteList['string-set'] = false; // default: none
+  whiteList['tab-size'] = false; // default: 8
+  whiteList['table-layout'] = false; // default: auto
+  whiteList['text-align'] = true; // default: start
+  whiteList['text-align-last'] = true; // default: auto
+  whiteList['text-combine-upright'] = true; // default: none
+  whiteList['text-decoration'] = true; // default: none
+  whiteList['text-decoration-color'] = true; // default: currentColor
+  whiteList['text-decoration-line'] = true; // default: none
+  whiteList['text-decoration-skip'] = true; // default: objects
+  whiteList['text-decoration-style'] = true; // default: solid
+  whiteList['text-emphasis'] = true; // default: depending on individual properties
+  whiteList['text-emphasis-color'] = true; // default: currentColor
+  whiteList['text-emphasis-position'] = true; // default: over right
+  whiteList['text-emphasis-style'] = true; // default: none
+  whiteList['text-height'] = true; // default: auto
+  whiteList['text-indent'] = true; // default: 0
+  whiteList['text-justify'] = true; // default: auto
+  whiteList['text-orientation'] = true; // default: mixed
+  whiteList['text-overflow'] = true; // default: clip
+  whiteList['text-shadow'] = true; // default: none
+  whiteList['text-space-collapse'] = true; // default: collapse
+  whiteList['text-transform'] = true; // default: none
+  whiteList['text-underline-position'] = true; // default: auto
+  whiteList['text-wrap'] = true; // default: normal
+  whiteList['top'] = false; // default: auto
+  whiteList['transform'] = false; // default: none
+  whiteList['transform-origin'] = false; // default: 50% 50% 0
+  whiteList['transform-style'] = false; // default: flat
+  whiteList['transition'] = false; // default: depending on individual properties
+  whiteList['transition-delay'] = false; // default: 0s
+  whiteList['transition-duration'] = false; // default: 0s
+  whiteList['transition-property'] = false; // default: all
+  whiteList['transition-timing-function'] = false; // default: ease
+  whiteList['unicode-bidi'] = false; // default: normal
+  whiteList['vertical-align'] = false; // default: baseline
+  whiteList['visibility'] = false; // default: visible
+  whiteList['voice-balance'] = false; // default: center
+  whiteList['voice-duration'] = false; // default: auto
+  whiteList['voice-family'] = false; // default: implementation dependent
+  whiteList['voice-pitch'] = false; // default: medium
+  whiteList['voice-range'] = false; // default: medium
+  whiteList['voice-rate'] = false; // default: normal
+  whiteList['voice-stress'] = false; // default: normal
+  whiteList['voice-volume'] = false; // default: medium
+  whiteList['volume'] = false; // default: medium
+  whiteList['white-space'] = false; // default: normal
+  whiteList['widows'] = false; // default: 2
+  whiteList['width'] = true; // default: auto
+  whiteList['will-change'] = false; // default: auto
+  whiteList['word-break'] = true; // default: normal
+  whiteList['word-spacing'] = true; // default: normal
+  whiteList['word-wrap'] = true; // default: normal
+  whiteList['wrap-flow'] = false; // default: auto
+  whiteList['wrap-through'] = false; // default: wrap
+  whiteList['writing-mode'] = false; // default: horizontal-tb
+  whiteList['z-index'] = false; // default: auto
+
+  return whiteList;
+}
+
+
+/**
+ * 匹配到白名单上的一个属性时
+ *
+ * @param {String} name
+ * @param {String} value
+ * @param {Object} options
+ * @return {String}
+ */
+function onAttr (name, value, options) {
+  // do nothing
+}
+
+/**
+ * 匹配到不在白名单上的一个属性时
+ *
+ * @param {String} name
+ * @param {String} value
+ * @param {Object} options
+ * @return {String}
+ */
+function onIgnoreAttr (name, value, options) {
+  // do nothing
+}
+
+var REGEXP_URL_JAVASCRIPT = /javascript\s*\:/img;
+
+/**
+ * 过滤属性值
+ *
+ * @param {String} name
+ * @param {String} value
+ * @return {String}
+ */
+function safeAttrValue(name, value) {
+  if (REGEXP_URL_JAVASCRIPT.test(value)) return '';
+  return value;
+}
+
+
+exports.whiteList = getDefaultWhiteList();
+exports.getDefaultWhiteList = getDefaultWhiteList;
+exports.onAttr = onAttr;
+exports.onIgnoreAttr = onIgnoreAttr;
+exports.safeAttrValue = safeAttrValue;
+
+
+/***/ },
+
+/***/ "./node_modules/cssfilter/lib/index.js"
+/*!*********************************************!*\
+  !*** ./node_modules/cssfilter/lib/index.js ***!
+  \*********************************************/
+(module, exports, __webpack_require__) {
+
+/**
+ * cssfilter
+ *
+ * @author 老雷<leizongmin@gmail.com>
+ */
+
+var DEFAULT = __webpack_require__(/*! ./default */ "./node_modules/cssfilter/lib/default.js");
+var FilterCSS = __webpack_require__(/*! ./css */ "./node_modules/cssfilter/lib/css.js");
+
+
+/**
+ * XSS过滤
+ *
+ * @param {String} css 要过滤的CSS代码
+ * @param {Object} options 选项：whiteList, onAttr, onIgnoreAttr
+ * @return {String}
+ */
+function filterCSS (html, options) {
+  var xss = new FilterCSS(options);
+  return xss.process(html);
+}
+
+
+// 输出
+exports = module.exports = filterCSS;
+exports.FilterCSS = FilterCSS;
+for (var i in DEFAULT) exports[i] = DEFAULT[i];
+
+// 在浏览器端使用
+if (typeof window !== 'undefined') {
+  window.filterCSS = module.exports;
+}
+
+
+/***/ },
+
+/***/ "./node_modules/cssfilter/lib/parser.js"
+/*!**********************************************!*\
+  !*** ./node_modules/cssfilter/lib/parser.js ***!
+  \**********************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+/**
+ * cssfilter
+ *
+ * @author 老雷<leizongmin@gmail.com>
+ */
+
+var _ = __webpack_require__(/*! ./util */ "./node_modules/cssfilter/lib/util.js");
+
+
+/**
+ * 解析style
+ *
+ * @param {String} css
+ * @param {Function} onAttr 处理属性的函数
+ *   参数格式： function (sourcePosition, position, name, value, source)
+ * @return {String}
+ */
+function parseStyle (css, onAttr) {
+  css = _.trimRight(css);
+  if (css[css.length - 1] !== ';') css += ';';
+  var cssLength = css.length;
+  var isParenthesisOpen = false;
+  var lastPos = 0;
+  var i = 0;
+  var retCSS = '';
+
+  function addNewAttr () {
+    // 如果没有正常的闭合圆括号，则直接忽略当前属性
+    if (!isParenthesisOpen) {
+      var source = _.trim(css.slice(lastPos, i));
+      var j = source.indexOf(':');
+      if (j !== -1) {
+        var name = _.trim(source.slice(0, j));
+        var value = _.trim(source.slice(j + 1));
+        // 必须有属性名称
+        if (name) {
+          var ret = onAttr(lastPos, retCSS.length, name, value, source);
+          if (ret) retCSS += ret + '; ';
+        }
+      }
+    }
+    lastPos = i + 1;
+  }
+
+  for (; i < cssLength; i++) {
+    var c = css[i];
+    if (c === '/' && css[i + 1] === '*') {
+      // 备注开始
+      var j = css.indexOf('*/', i + 2);
+      // 如果没有正常的备注结束，则后面的部分全部跳过
+      if (j === -1) break;
+      // 直接将当前位置调到备注结尾，并且初始化状态
+      i = j + 1;
+      lastPos = i + 1;
+      isParenthesisOpen = false;
+    } else if (c === '(') {
+      isParenthesisOpen = true;
+    } else if (c === ')') {
+      isParenthesisOpen = false;
+    } else if (c === ';') {
+      if (isParenthesisOpen) {
+        // 在圆括号里面，忽略
+      } else {
+        addNewAttr();
+      }
+    } else if (c === '\n') {
+      addNewAttr();
+    }
+  }
+
+  return _.trim(retCSS);
+}
+
+module.exports = parseStyle;
+
+
+/***/ },
+
+/***/ "./node_modules/cssfilter/lib/util.js"
+/*!********************************************!*\
+  !*** ./node_modules/cssfilter/lib/util.js ***!
+  \********************************************/
+(module) {
+
+module.exports = {
+  indexOf: function (arr, item) {
+    var i, j;
+    if (Array.prototype.indexOf) {
+      return arr.indexOf(item);
+    }
+    for (i = 0, j = arr.length; i < j; i++) {
+      if (arr[i] === item) {
+        return i;
+      }
+    }
+    return -1;
+  },
+  forEach: function (arr, fn, scope) {
+    var i, j;
+    if (Array.prototype.forEach) {
+      return arr.forEach(fn, scope);
+    }
+    for (i = 0, j = arr.length; i < j; i++) {
+      fn.call(scope, arr[i], i, arr);
+    }
+  },
+  trim: function (str) {
+    if (String.prototype.trim) {
+      return str.trim();
+    }
+    return str.replace(/(^\s*)|(\s*$)/g, '');
+  },
+  trimRight: function (str) {
+    if (String.prototype.trimRight) {
+      return str.trimRight();
+    }
+    return str.replace(/(\s*$)/g, '');
+  }
+};
+
+
 /***/ },
 
 /***/ "./node_modules/marked/lib/marked.cjs"
@@ -33580,6 +34638,1091 @@ const compile = () => {
 
 
 
+/***/ },
+
+/***/ "./node_modules/xss/lib/default.js"
+/*!*****************************************!*\
+  !*** ./node_modules/xss/lib/default.js ***!
+  \*****************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+/**
+ * default settings
+ *
+ * @author Zongmin Lei<leizongmin@gmail.com>
+ */
+
+var FilterCSS = (__webpack_require__(/*! cssfilter */ "./node_modules/cssfilter/lib/index.js").FilterCSS);
+var getDefaultCSSWhiteList = (__webpack_require__(/*! cssfilter */ "./node_modules/cssfilter/lib/index.js").getDefaultWhiteList);
+var _ = __webpack_require__(/*! ./util */ "./node_modules/xss/lib/util.js");
+
+function getDefaultWhiteList() {
+  return {
+    a: ["target", "href", "title"],
+    abbr: ["title"],
+    address: [],
+    area: ["shape", "coords", "href", "alt"],
+    article: [],
+    aside: [],
+    audio: [
+      "autoplay",
+      "controls",
+      "crossorigin",
+      "loop",
+      "muted",
+      "preload",
+      "src",
+    ],
+    b: [],
+    bdi: ["dir"],
+    bdo: ["dir"],
+    big: [],
+    blockquote: ["cite"],
+    br: [],
+    caption: [],
+    center: [],
+    cite: [],
+    code: [],
+    col: ["align", "valign", "span", "width"],
+    colgroup: ["align", "valign", "span", "width"],
+    dd: [],
+    del: ["datetime"],
+    details: ["open"],
+    div: [],
+    dl: [],
+    dt: [],
+    em: [],
+    figcaption: [],
+    figure: [],
+    font: ["color", "size", "face"],
+    footer: [],
+    h1: [],
+    h2: [],
+    h3: [],
+    h4: [],
+    h5: [],
+    h6: [],
+    header: [],
+    hr: [],
+    i: [],
+    img: ["src", "alt", "title", "width", "height", "loading"],
+    ins: ["datetime"],
+    kbd: [],
+    li: [],
+    mark: [],
+    nav: [],
+    ol: [],
+    p: [],
+    pre: [],
+    s: [],
+    section: [],
+    small: [],
+    span: [],
+    sub: [],
+    summary: [],
+    sup: [],
+    strong: [],
+    strike: [],
+    table: ["width", "border", "align", "valign"],
+    tbody: ["align", "valign"],
+    td: ["width", "rowspan", "colspan", "align", "valign"],
+    tfoot: ["align", "valign"],
+    th: ["width", "rowspan", "colspan", "align", "valign"],
+    thead: ["align", "valign"],
+    tr: ["rowspan", "align", "valign"],
+    tt: [],
+    u: [],
+    ul: [],
+    video: [
+      "autoplay",
+      "controls",
+      "crossorigin",
+      "loop",
+      "muted",
+      "playsinline",
+      "poster",
+      "preload",
+      "src",
+      "height",
+      "width",
+    ],
+  };
+}
+
+var defaultCSSFilter = new FilterCSS();
+
+/**
+ * default onTag function
+ *
+ * @param {String} tag
+ * @param {String} html
+ * @param {Object} options
+ * @return {String}
+ */
+function onTag(tag, html, options) {
+  // do nothing
+}
+
+/**
+ * default onIgnoreTag function
+ *
+ * @param {String} tag
+ * @param {String} html
+ * @param {Object} options
+ * @return {String}
+ */
+function onIgnoreTag(tag, html, options) {
+  // do nothing
+}
+
+/**
+ * default onTagAttr function
+ *
+ * @param {String} tag
+ * @param {String} name
+ * @param {String} value
+ * @return {String}
+ */
+function onTagAttr(tag, name, value) {
+  // do nothing
+}
+
+/**
+ * default onIgnoreTagAttr function
+ *
+ * @param {String} tag
+ * @param {String} name
+ * @param {String} value
+ * @return {String}
+ */
+function onIgnoreTagAttr(tag, name, value) {
+  // do nothing
+}
+
+/**
+ * default escapeHtml function
+ *
+ * @param {String} html
+ */
+function escapeHtml(html) {
+  return html.replace(REGEXP_LT, "&lt;").replace(REGEXP_GT, "&gt;");
+}
+
+/**
+ * default safeAttrValue function
+ *
+ * @param {String} tag
+ * @param {String} name
+ * @param {String} value
+ * @param {Object} cssFilter
+ * @return {String}
+ */
+function safeAttrValue(tag, name, value, cssFilter) {
+  // unescape attribute value firstly
+  value = friendlyAttrValue(value);
+
+  if (name === "href" || name === "src") {
+    // filter `href` and `src` attribute
+    // only allow the value that starts with `http://` | `https://` | `mailto:` | `/` | `#`
+    value = _.trim(value);
+    if (value === "#") return "#";
+    if (
+      !(
+        value.substr(0, 7) === "http://" ||
+        value.substr(0, 8) === "https://" ||
+        value.substr(0, 7) === "mailto:" ||
+        value.substr(0, 4) === "tel:" ||
+        value.substr(0, 11) === "data:image/" ||
+        value.substr(0, 6) === "ftp://" ||
+        value.substr(0, 2) === "./" ||
+        value.substr(0, 3) === "../" ||
+        value[0] === "#" ||
+        value[0] === "/"
+      )
+    ) {
+      return "";
+    }
+  } else if (name === "background") {
+    // filter `background` attribute (maybe no use)
+    // `javascript:`
+    REGEXP_DEFAULT_ON_TAG_ATTR_4.lastIndex = 0;
+    if (REGEXP_DEFAULT_ON_TAG_ATTR_4.test(value)) {
+      return "";
+    }
+  } else if (name === "style") {
+    // `expression()`
+    REGEXP_DEFAULT_ON_TAG_ATTR_7.lastIndex = 0;
+    if (REGEXP_DEFAULT_ON_TAG_ATTR_7.test(value)) {
+      return "";
+    }
+    // `url()`
+    REGEXP_DEFAULT_ON_TAG_ATTR_8.lastIndex = 0;
+    if (REGEXP_DEFAULT_ON_TAG_ATTR_8.test(value)) {
+      REGEXP_DEFAULT_ON_TAG_ATTR_4.lastIndex = 0;
+      if (REGEXP_DEFAULT_ON_TAG_ATTR_4.test(value)) {
+        return "";
+      }
+    }
+    if (cssFilter !== false) {
+      cssFilter = cssFilter || defaultCSSFilter;
+      value = cssFilter.process(value);
+    }
+  }
+
+  // escape `<>"` before returns
+  value = escapeAttrValue(value);
+  return value;
+}
+
+// RegExp list
+var REGEXP_LT = /</g;
+var REGEXP_GT = />/g;
+var REGEXP_QUOTE = /"/g;
+var REGEXP_QUOTE_2 = /&quot;/g;
+var REGEXP_ATTR_VALUE_1 = /&#([a-zA-Z0-9]*);?/gim;
+var REGEXP_ATTR_VALUE_COLON = /&colon;?/gim;
+var REGEXP_ATTR_VALUE_NEWLINE = /&newline;?/gim;
+// var REGEXP_DEFAULT_ON_TAG_ATTR_3 = /\/\*|\*\//gm;
+var REGEXP_DEFAULT_ON_TAG_ATTR_4 =
+  /((j\s*a\s*v\s*a|v\s*b|l\s*i\s*v\s*e)\s*s\s*c\s*r\s*i\s*p\s*t\s*|m\s*o\s*c\s*h\s*a):/gi;
+// var REGEXP_DEFAULT_ON_TAG_ATTR_5 = /^[\s"'`]*(d\s*a\s*t\s*a\s*)\:/gi;
+// var REGEXP_DEFAULT_ON_TAG_ATTR_6 = /^[\s"'`]*(d\s*a\s*t\s*a\s*)\:\s*image\//gi;
+var REGEXP_DEFAULT_ON_TAG_ATTR_7 =
+  /e\s*x\s*p\s*r\s*e\s*s\s*s\s*i\s*o\s*n\s*\(.*/gi;
+var REGEXP_DEFAULT_ON_TAG_ATTR_8 = /u\s*r\s*l\s*\(.*/gi;
+
+/**
+ * escape double quote
+ *
+ * @param {String} str
+ * @return {String} str
+ */
+function escapeQuote(str) {
+  return str.replace(REGEXP_QUOTE, "&quot;");
+}
+
+/**
+ * unescape double quote
+ *
+ * @param {String} str
+ * @return {String} str
+ */
+function unescapeQuote(str) {
+  return str.replace(REGEXP_QUOTE_2, '"');
+}
+
+/**
+ * escape html entities
+ *
+ * @param {String} str
+ * @return {String}
+ */
+function escapeHtmlEntities(str) {
+  return str.replace(REGEXP_ATTR_VALUE_1, function replaceUnicode(str, code) {
+    return code[0] === "x" || code[0] === "X"
+      ? String.fromCharCode(parseInt(code.substr(1), 16))
+      : String.fromCharCode(parseInt(code, 10));
+  });
+}
+
+/**
+ * escape html5 new danger entities
+ *
+ * @param {String} str
+ * @return {String}
+ */
+function escapeDangerHtml5Entities(str) {
+  return str
+    .replace(REGEXP_ATTR_VALUE_COLON, ":")
+    .replace(REGEXP_ATTR_VALUE_NEWLINE, " ");
+}
+
+/**
+ * clear nonprintable characters
+ *
+ * @param {String} str
+ * @return {String}
+ */
+function clearNonPrintableCharacter(str) {
+  var str2 = "";
+  for (var i = 0, len = str.length; i < len; i++) {
+    str2 += str.charCodeAt(i) < 32 ? " " : str.charAt(i);
+  }
+  return _.trim(str2);
+}
+
+/**
+ * get friendly attribute value
+ *
+ * @param {String} str
+ * @return {String}
+ */
+function friendlyAttrValue(str) {
+  str = unescapeQuote(str);
+  str = escapeHtmlEntities(str);
+  str = escapeDangerHtml5Entities(str);
+  str = clearNonPrintableCharacter(str);
+  return str;
+}
+
+/**
+ * unescape attribute value
+ *
+ * @param {String} str
+ * @return {String}
+ */
+function escapeAttrValue(str) {
+  str = escapeQuote(str);
+  str = escapeHtml(str);
+  return str;
+}
+
+/**
+ * `onIgnoreTag` function for removing all the tags that are not in whitelist
+ */
+function onIgnoreTagStripAll() {
+  return "";
+}
+
+/**
+ * remove tag body
+ * specify a `tags` list, if the tag is not in the `tags` list then process by the specify function (optional)
+ *
+ * @param {array} tags
+ * @param {function} next
+ */
+function StripTagBody(tags, next) {
+  if (typeof next !== "function") {
+    next = function () {};
+  }
+
+  var isRemoveAllTag = !Array.isArray(tags);
+  function isRemoveTag(tag) {
+    if (isRemoveAllTag) return true;
+    return _.indexOf(tags, tag) !== -1;
+  }
+
+  var removeList = [];
+  var posStart = false;
+
+  return {
+    onIgnoreTag: function (tag, html, options) {
+      if (isRemoveTag(tag)) {
+        if (options.isClosing) {
+          var ret = "[/removed]";
+          var end = options.position + ret.length;
+          removeList.push([
+            posStart !== false ? posStart : options.position,
+            end,
+          ]);
+          posStart = false;
+          return ret;
+        } else {
+          if (!posStart) {
+            posStart = options.position;
+          }
+          return "[removed]";
+        }
+      } else {
+        return next(tag, html, options);
+      }
+    },
+    remove: function (html) {
+      var rethtml = "";
+      var lastPos = 0;
+      _.forEach(removeList, function (pos) {
+        rethtml += html.slice(lastPos, pos[0]);
+        lastPos = pos[1];
+      });
+      rethtml += html.slice(lastPos);
+      return rethtml;
+    },
+  };
+}
+
+/**
+ * remove html comments
+ *
+ * @param {String} html
+ * @return {String}
+ */
+function stripCommentTag(html) {
+  var retHtml = "";
+  var lastPos = 0;
+  while (lastPos < html.length) {
+    var i = html.indexOf("<!--", lastPos);
+    if (i === -1) {
+      retHtml += html.slice(lastPos);
+      break;
+    }
+    retHtml += html.slice(lastPos, i);
+    var j = html.indexOf("-->", i);
+    if (j === -1) {
+      break;
+    }
+    lastPos = j + 3;
+  }
+  return retHtml;
+}
+
+/**
+ * remove invisible characters
+ *
+ * @param {String} html
+ * @return {String}
+ */
+function stripBlankChar(html) {
+  var chars = html.split("");
+  chars = chars.filter(function (char) {
+    var c = char.charCodeAt(0);
+    if (c === 127) return false;
+    if (c <= 31) {
+      if (c === 10 || c === 13) return true;
+      return false;
+    }
+    return true;
+  });
+  return chars.join("");
+}
+
+exports.whiteList = getDefaultWhiteList();
+exports.getDefaultWhiteList = getDefaultWhiteList;
+exports.onTag = onTag;
+exports.onIgnoreTag = onIgnoreTag;
+exports.onTagAttr = onTagAttr;
+exports.onIgnoreTagAttr = onIgnoreTagAttr;
+exports.safeAttrValue = safeAttrValue;
+exports.escapeHtml = escapeHtml;
+exports.escapeQuote = escapeQuote;
+exports.unescapeQuote = unescapeQuote;
+exports.escapeHtmlEntities = escapeHtmlEntities;
+exports.escapeDangerHtml5Entities = escapeDangerHtml5Entities;
+exports.clearNonPrintableCharacter = clearNonPrintableCharacter;
+exports.friendlyAttrValue = friendlyAttrValue;
+exports.escapeAttrValue = escapeAttrValue;
+exports.onIgnoreTagStripAll = onIgnoreTagStripAll;
+exports.StripTagBody = StripTagBody;
+exports.stripCommentTag = stripCommentTag;
+exports.stripBlankChar = stripBlankChar;
+exports.attributeWrapSign = '"';
+exports.cssFilter = defaultCSSFilter;
+exports.getDefaultCSSWhiteList = getDefaultCSSWhiteList;
+
+
+/***/ },
+
+/***/ "./node_modules/xss/lib/index.js"
+/*!***************************************!*\
+  !*** ./node_modules/xss/lib/index.js ***!
+  \***************************************/
+(module, exports, __webpack_require__) {
+
+/**
+ * xss
+ *
+ * @author Zongmin Lei<leizongmin@gmail.com>
+ */
+
+var DEFAULT = __webpack_require__(/*! ./default */ "./node_modules/xss/lib/default.js");
+var parser = __webpack_require__(/*! ./parser */ "./node_modules/xss/lib/parser.js");
+var FilterXSS = __webpack_require__(/*! ./xss */ "./node_modules/xss/lib/xss.js");
+
+/**
+ * filter xss function
+ *
+ * @param {String} html
+ * @param {Object} options { whiteList, onTag, onTagAttr, onIgnoreTag, onIgnoreTagAttr, safeAttrValue, escapeHtml }
+ * @return {String}
+ */
+function filterXSS(html, options) {
+  var xss = new FilterXSS(options);
+  return xss.process(html);
+}
+
+exports = module.exports = filterXSS;
+exports.filterXSS = filterXSS;
+exports.FilterXSS = FilterXSS;
+
+(function () {
+  for (var i in DEFAULT) {
+    exports[i] = DEFAULT[i];
+  }
+  for (var j in parser) {
+    exports[j] = parser[j];
+  }
+})();
+
+// using `xss` on the browser, output `filterXSS` to the globals
+if (typeof window !== "undefined") {
+  window.filterXSS = module.exports;
+}
+
+// using `xss` on the WebWorker, output `filterXSS` to the globals
+function isWorkerEnv() {
+  return (
+    typeof self !== "undefined" &&
+    typeof DedicatedWorkerGlobalScope !== "undefined" &&
+    self instanceof DedicatedWorkerGlobalScope
+  );
+}
+if (isWorkerEnv()) {
+  self.filterXSS = module.exports;
+}
+
+
+/***/ },
+
+/***/ "./node_modules/xss/lib/parser.js"
+/*!****************************************!*\
+  !*** ./node_modules/xss/lib/parser.js ***!
+  \****************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+/**
+ * Simple HTML Parser
+ *
+ * @author Zongmin Lei<leizongmin@gmail.com>
+ */
+
+var _ = __webpack_require__(/*! ./util */ "./node_modules/xss/lib/util.js");
+
+/**
+ * get tag name
+ *
+ * @param {String} html e.g. '<a hef="#">'
+ * @return {String}
+ */
+function getTagName(html) {
+  var i = _.spaceIndex(html);
+  var tagName;
+  if (i === -1) {
+    tagName = html.slice(1, -1);
+  } else {
+    tagName = html.slice(1, i + 1);
+  }
+  tagName = _.trim(tagName).toLowerCase();
+  if (tagName.slice(0, 1) === "/") tagName = tagName.slice(1);
+  if (tagName.slice(-1) === "/") tagName = tagName.slice(0, -1);
+  return tagName;
+}
+
+/**
+ * is close tag?
+ *
+ * @param {String} html 如：'<a hef="#">'
+ * @return {Boolean}
+ */
+function isClosing(html) {
+  return html.slice(0, 2) === "</";
+}
+
+/**
+ * parse input html and returns processed html
+ *
+ * @param {String} html
+ * @param {Function} onTag e.g. function (sourcePosition, position, tag, html, isClosing)
+ * @param {Function} escapeHtml
+ * @return {String}
+ */
+function parseTag(html, onTag, escapeHtml) {
+  "use strict";
+
+  var rethtml = "";
+  var lastPos = 0;
+  var tagStart = false;
+  var quoteStart = false;
+  var currentPos = 0;
+  var len = html.length;
+  var currentTagName = "";
+  var currentHtml = "";
+
+  chariterator: for (currentPos = 0; currentPos < len; currentPos++) {
+    var c = html.charAt(currentPos);
+    if (tagStart === false) {
+      if (c === "<") {
+        tagStart = currentPos;
+        continue;
+      }
+    } else {
+      if (quoteStart === false) {
+        if (c === "<") {
+          rethtml += escapeHtml(html.slice(lastPos, currentPos));
+          tagStart = currentPos;
+          lastPos = currentPos;
+          continue;
+        }
+        if (c === ">" || currentPos === len - 1) {
+          rethtml += escapeHtml(html.slice(lastPos, tagStart));
+          currentHtml = html.slice(tagStart, currentPos + 1);
+          currentTagName = getTagName(currentHtml);
+          rethtml += onTag(
+            tagStart,
+            rethtml.length,
+            currentTagName,
+            currentHtml,
+            isClosing(currentHtml)
+          );
+          lastPos = currentPos + 1;
+          tagStart = false;
+          continue;
+        }
+        if (c === '"' || c === "'") {
+          var i = 1;
+          var ic = html.charAt(currentPos - i);
+
+          while (ic.trim() === "" || ic === "=") {
+            if (ic === "=") {
+              quoteStart = c;
+              continue chariterator;
+            }
+            ic = html.charAt(currentPos - ++i);
+          }
+        }
+      } else {
+        if (c === quoteStart) {
+          quoteStart = false;
+          continue;
+        }
+      }
+    }
+  }
+  if (lastPos < len) {
+    rethtml += escapeHtml(html.substr(lastPos));
+  }
+
+  return rethtml;
+}
+
+var REGEXP_ILLEGAL_ATTR_NAME = /[^a-zA-Z0-9\\_:.-]/gim;
+
+/**
+ * parse input attributes and returns processed attributes
+ *
+ * @param {String} html e.g. `href="#" target="_blank"`
+ * @param {Function} onAttr e.g. `function (name, value)`
+ * @return {String}
+ */
+function parseAttr(html, onAttr) {
+  "use strict";
+
+  var lastPos = 0;
+  var lastMarkPos = 0;
+  var retAttrs = [];
+  var tmpName = false;
+  var len = html.length;
+
+  function addAttr(name, value) {
+    name = _.trim(name);
+    name = name.replace(REGEXP_ILLEGAL_ATTR_NAME, "").toLowerCase();
+    if (name.length < 1) return;
+    var ret = onAttr(name, value || "");
+    if (ret) retAttrs.push(ret);
+  }
+
+  // 逐个分析字符
+  for (var i = 0; i < len; i++) {
+    var c = html.charAt(i);
+    var v, j;
+    if (tmpName === false && c === "=") {
+      tmpName = html.slice(lastPos, i);
+      lastPos = i + 1;
+      lastMarkPos = html.charAt(lastPos) === '"' || html.charAt(lastPos) === "'" ? lastPos : findNextQuotationMark(html, i + 1);
+      continue;
+    }
+    if (tmpName !== false) {
+      if (
+        i === lastMarkPos
+      ) {
+        j = html.indexOf(c, i + 1);
+        if (j === -1) {
+          break;
+        } else {
+          v = _.trim(html.slice(lastMarkPos + 1, j));
+          addAttr(tmpName, v);
+          tmpName = false;
+          i = j;
+          lastPos = i + 1;
+          continue;
+        }
+      }
+    }
+    if (/\s|\n|\t/.test(c)) {
+      html = html.replace(/\s|\n|\t/g, " ");
+      if (tmpName === false) {
+        j = findNextEqual(html, i);
+        if (j === -1) {
+          v = _.trim(html.slice(lastPos, i));
+          addAttr(v);
+          tmpName = false;
+          lastPos = i + 1;
+          continue;
+        } else {
+          i = j - 1;
+          continue;
+        }
+      } else {
+        j = findBeforeEqual(html, i - 1);
+        if (j === -1) {
+          v = _.trim(html.slice(lastPos, i));
+          v = stripQuoteWrap(v);
+          addAttr(tmpName, v);
+          tmpName = false;
+          lastPos = i + 1;
+          continue;
+        } else {
+          continue;
+        }
+      }
+    }
+  }
+
+  if (lastPos < html.length) {
+    if (tmpName === false) {
+      addAttr(html.slice(lastPos));
+    } else {
+      addAttr(tmpName, stripQuoteWrap(_.trim(html.slice(lastPos))));
+    }
+  }
+
+  return _.trim(retAttrs.join(" "));
+}
+
+function findNextEqual(str, i) {
+  for (; i < str.length; i++) {
+    var c = str[i];
+    if (c === " ") continue;
+    if (c === "=") return i;
+    return -1;
+  }
+}
+
+function findNextQuotationMark(str, i) {
+  for (; i < str.length; i++) {
+    var c = str[i];
+    if (c === " ") continue;
+    if (c === "'" || c === '"') return i;
+    return -1;
+  }
+}
+
+function findBeforeEqual(str, i) {
+  for (; i > 0; i--) {
+    var c = str[i];
+    if (c === " ") continue;
+    if (c === "=") return i;
+    return -1;
+  }
+}
+
+function isQuoteWrapString(text) {
+  if (
+    (text[0] === '"' && text[text.length - 1] === '"') ||
+    (text[0] === "'" && text[text.length - 1] === "'")
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function stripQuoteWrap(text) {
+  if (isQuoteWrapString(text)) {
+    return text.substr(1, text.length - 2);
+  } else {
+    return text;
+  }
+}
+
+exports.parseTag = parseTag;
+exports.parseAttr = parseAttr;
+
+
+/***/ },
+
+/***/ "./node_modules/xss/lib/util.js"
+/*!**************************************!*\
+  !*** ./node_modules/xss/lib/util.js ***!
+  \**************************************/
+(module) {
+
+module.exports = {
+  indexOf: function (arr, item) {
+    var i, j;
+    if (Array.prototype.indexOf) {
+      return arr.indexOf(item);
+    }
+    for (i = 0, j = arr.length; i < j; i++) {
+      if (arr[i] === item) {
+        return i;
+      }
+    }
+    return -1;
+  },
+  forEach: function (arr, fn, scope) {
+    var i, j;
+    if (Array.prototype.forEach) {
+      return arr.forEach(fn, scope);
+    }
+    for (i = 0, j = arr.length; i < j; i++) {
+      fn.call(scope, arr[i], i, arr);
+    }
+  },
+  trim: function (str) {
+    if (String.prototype.trim) {
+      return str.trim();
+    }
+    return str.replace(/(^\s*)|(\s*$)/g, "");
+  },
+  spaceIndex: function (str) {
+    var reg = /\s|\n|\t/;
+    var match = reg.exec(str);
+    return match ? match.index : -1;
+  },
+};
+
+
+/***/ },
+
+/***/ "./node_modules/xss/lib/xss.js"
+/*!*************************************!*\
+  !*** ./node_modules/xss/lib/xss.js ***!
+  \*************************************/
+(module, __unused_webpack_exports, __webpack_require__) {
+
+/**
+ * filter xss
+ *
+ * @author Zongmin Lei<leizongmin@gmail.com>
+ */
+
+var FilterCSS = (__webpack_require__(/*! cssfilter */ "./node_modules/cssfilter/lib/index.js").FilterCSS);
+var DEFAULT = __webpack_require__(/*! ./default */ "./node_modules/xss/lib/default.js");
+var parser = __webpack_require__(/*! ./parser */ "./node_modules/xss/lib/parser.js");
+var parseTag = parser.parseTag;
+var parseAttr = parser.parseAttr;
+var _ = __webpack_require__(/*! ./util */ "./node_modules/xss/lib/util.js");
+
+/**
+ * returns `true` if the input value is `undefined` or `null`
+ *
+ * @param {Object} obj
+ * @return {Boolean}
+ */
+function isNull(obj) {
+  return obj === undefined || obj === null;
+}
+
+/**
+ * get attributes for a tag
+ *
+ * @param {String} html
+ * @return {Object}
+ *   - {String} html
+ *   - {Boolean} closing
+ */
+function getAttrs(html) {
+  var i = _.spaceIndex(html);
+  if (i === -1) {
+    return {
+      html: "",
+      closing: html[html.length - 2] === "/",
+    };
+  }
+  html = _.trim(html.slice(i + 1, -1));
+  var isClosing = html[html.length - 1] === "/";
+  if (isClosing) html = _.trim(html.slice(0, -1));
+  return {
+    html: html,
+    closing: isClosing,
+  };
+}
+
+/**
+ * shallow copy
+ *
+ * @param {Object} obj
+ * @return {Object}
+ */
+function shallowCopyObject(obj) {
+  var ret = {};
+  for (var i in obj) {
+    ret[i] = obj[i];
+  }
+  return ret;
+}
+
+function keysToLowerCase(obj) {
+  var ret = {};
+  for (var i in obj) {
+    if (Array.isArray(obj[i])) {
+      ret[i.toLowerCase()] = obj[i].map(function (item) {
+        return item.toLowerCase();
+      });
+    } else {
+      ret[i.toLowerCase()] = obj[i];
+    }
+  }
+  return ret;
+}
+
+/**
+ * FilterXSS class
+ *
+ * @param {Object} options
+ *        whiteList (or allowList), onTag, onTagAttr, onIgnoreTag,
+ *        onIgnoreTagAttr, safeAttrValue, escapeHtml
+ *        stripIgnoreTagBody, allowCommentTag, stripBlankChar
+ *        css{whiteList, onAttr, onIgnoreAttr} `css=false` means don't use `cssfilter`
+ */
+function FilterXSS(options) {
+  options = shallowCopyObject(options || {});
+
+  if (options.stripIgnoreTag) {
+    if (options.onIgnoreTag) {
+      console.error(
+        'Notes: cannot use these two options "stripIgnoreTag" and "onIgnoreTag" at the same time'
+      );
+    }
+    options.onIgnoreTag = DEFAULT.onIgnoreTagStripAll;
+  }
+  if (options.whiteList || options.allowList) {
+    options.whiteList = keysToLowerCase(options.whiteList || options.allowList);
+  } else {
+    options.whiteList = DEFAULT.whiteList;
+  }
+
+  this.attributeWrapSign = options.singleQuotedAttributeValue === true ? "'" : DEFAULT.attributeWrapSign;
+
+  options.onTag = options.onTag || DEFAULT.onTag;
+  options.onTagAttr = options.onTagAttr || DEFAULT.onTagAttr;
+  options.onIgnoreTag = options.onIgnoreTag || DEFAULT.onIgnoreTag;
+  options.onIgnoreTagAttr = options.onIgnoreTagAttr || DEFAULT.onIgnoreTagAttr;
+  options.safeAttrValue = options.safeAttrValue || DEFAULT.safeAttrValue;
+  options.escapeHtml = options.escapeHtml || DEFAULT.escapeHtml;
+  this.options = options;
+
+  if (options.css === false) {
+    this.cssFilter = false;
+  } else {
+    options.css = options.css || {};
+    this.cssFilter = new FilterCSS(options.css);
+  }
+}
+
+/**
+ * start process and returns result
+ *
+ * @param {String} html
+ * @return {String}
+ */
+FilterXSS.prototype.process = function (html) {
+  // compatible with the input
+  html = html || "";
+  html = html.toString();
+  if (!html) return "";
+
+  var me = this;
+  var options = me.options;
+  var whiteList = options.whiteList;
+  var onTag = options.onTag;
+  var onIgnoreTag = options.onIgnoreTag;
+  var onTagAttr = options.onTagAttr;
+  var onIgnoreTagAttr = options.onIgnoreTagAttr;
+  var safeAttrValue = options.safeAttrValue;
+  var escapeHtml = options.escapeHtml;
+  var attributeWrapSign = me.attributeWrapSign;
+  var cssFilter = me.cssFilter;
+
+  // remove invisible characters
+  if (options.stripBlankChar) {
+    html = DEFAULT.stripBlankChar(html);
+  }
+
+  // remove html comments
+  if (!options.allowCommentTag) {
+    html = DEFAULT.stripCommentTag(html);
+  }
+
+  // if enable stripIgnoreTagBody
+  var stripIgnoreTagBody = false;
+  if (options.stripIgnoreTagBody) {
+    stripIgnoreTagBody = DEFAULT.StripTagBody(
+      options.stripIgnoreTagBody,
+      onIgnoreTag
+    );
+    onIgnoreTag = stripIgnoreTagBody.onIgnoreTag;
+  }
+
+  var retHtml = parseTag(
+    html,
+    function (sourcePosition, position, tag, html, isClosing) {
+      var info = {
+        sourcePosition: sourcePosition,
+        position: position,
+        isClosing: isClosing,
+        isWhite: Object.prototype.hasOwnProperty.call(whiteList, tag),
+      };
+
+      // call `onTag()`
+      var ret = onTag(tag, html, info);
+      if (!isNull(ret)) return ret;
+
+      if (info.isWhite) {
+        if (info.isClosing) {
+          return "</" + tag + ">";
+        }
+
+        var attrs = getAttrs(html);
+        var whiteAttrList = whiteList[tag];
+        var attrsHtml = parseAttr(attrs.html, function (name, value) {
+          // call `onTagAttr()`
+          var isWhiteAttr = _.indexOf(whiteAttrList, name) !== -1;
+          var ret = onTagAttr(tag, name, value, isWhiteAttr);
+          if (!isNull(ret)) return ret;
+
+          if (isWhiteAttr) {
+            // call `safeAttrValue()`
+            value = safeAttrValue(tag, name, value, cssFilter);
+            if (value) {
+              return name + '=' + attributeWrapSign + value + attributeWrapSign;
+            } else {
+              return name;
+            }
+          } else {
+            // call `onIgnoreTagAttr()`
+            ret = onIgnoreTagAttr(tag, name, value, isWhiteAttr);
+            if (!isNull(ret)) return ret;
+            return;
+          }
+        });
+
+        // build new tag html
+        html = "<" + tag;
+        if (attrsHtml) html += " " + attrsHtml;
+        if (attrs.closing) html += " /";
+        html += ">";
+        return html;
+      } else {
+        // call `onIgnoreTag()`
+        ret = onIgnoreTag(tag, html, info);
+        if (!isNull(ret)) return ret;
+        return escapeHtml(html);
+      }
+    },
+    escapeHtml
+  );
+
+  // if enable stripIgnoreTagBody
+  if (stripIgnoreTagBody) {
+    retHtml = stripIgnoreTagBody.remove(retHtml);
+  }
+
+  return retHtml;
+};
+
+module.exports = FilterXSS;
+
+
 /***/ },
 
 /***/ "./package.json"
@@ -33589,7 +35732,7 @@ const compile = () => {
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.2.6","description":"A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.","homepage":"https://mongoosestudio.app/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js","test:frontend":"mocha test/frontend/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.2.7","description":"A Mongoose-native MongoDB UI with schema-aware autocomplete, AI-assisted queries, and dashboards that understand your models - not just your data.","homepage":"https://mongoosestudio.app/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x","xss":"^1.0.15"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js","test:frontend":"mocha test/frontend/*.test.js"}}');
 
 /***/ }