Replace highlight.js with ace editor.

assets/css/styles.scss

@@ -505,9 +505,9 @@ pre {
   resize: vertical;
   text-overflow: ellipsis;
 
-  &:not([readonly]):hover,
+  &:not([readonly]):not(.ace_editor):hover,
-  &:not([readonly]):active,
+  &:not([readonly]):not(.ace_editor):active,
-  &:not([readonly]):focus {
+  &:not([readonly]):not(.ace_editor):focus {
     box-shadow: inset 0 0 0 2px var(--fg-light-color);
     transition: all 0.2s ease-in-out;
   }
@@ -517,6 +517,10 @@ pre {
   display: grid;
 }
 
+pre.ace_editor {
+  z-index: 0;
+}
+
 code {
   height: 336px;
   border-radius: 8px;

components/ace-editor.vue

@@ -0,0 +1,84 @@
+<template>
+  <pre ref="editor"></pre>
+</template>
+
+<script>
+import ace from 'ace-builds';
+import "ace-builds/webpack-resolver";
+
+export default {
+
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    theme: {
+      type: String,
+      default: 'dracula'
+    },
+    lang: {
+      type: String,
+      default: 'json'
+    },
+    rows: {
+      type: Number,
+      default: 16
+    },
+    fontSize: {
+      type: String,
+      default: '12px'
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    checkSyntax: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      editor: null,
+      cacheValue: ''
+    }
+  },
+
+  watch: {
+    value(val) {
+      if(val !== this.cacheValue) {
+        this.editor.session.setValue(val,1);
+        this.cacheValue = val;
+      }
+
+    }
+  },
+
+  mounted() {
+    const editor = ace.edit(this.$refs.editor, {
+      theme: 'ace/theme/'+ this.theme,
+      mode: "ace/mode/" + this.lang,
+      maxLines: this.rows,
+      minLines: this.rows,
+      fontSize: this.fontSize,
+      autoScrollEditorIntoView: true,
+      readOnly: true,
+      showPrintMargin: false,
+    })
+
+    editor.setValue(this.value);
+    this.cacheValue = this.value;
+
+    editor.session.setUseWorker(this.checkSyntax)
+
+    this.editor = editor;
+  },
+
+  beforeDestroy() {
+    this.editor.destroy();
+    this.editor.container.remove();
+  }
+}
+</script>

package-lock.json

@@ -1756,6 +1756,11 @@
                 "negotiator": "0.6.2"
             }
         },
+        "ace-builds": {
+            "version": "1.4.7",
+            "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.7.tgz",
+            "integrity": "sha512-gwQGVFewBopRLho08BfahyvRa9FlB43JUig5ItAKTYc9kJJsbA9QNz75p28QtQomoPQ9rJx82ymL21x4ZSZmdg=="
+        },
         "acorn": {
             "version": "6.3.0",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
@@ -5237,11 +5242,6 @@
             "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
             "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
         },
-        "highlight.js": {
-            "version": "9.16.2",
-            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.16.2.tgz",
-            "integrity": "sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw=="
-        },
         "hmac-drbg": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

package.json

@@ -25,7 +25,7 @@
         "@nuxtjs/robots": "^2.4.2",
         "@nuxtjs/sitemap": "^2.0.0",
         "@nuxtjs/toast": "^3.3.0",
-        "highlight.js": "^9.16.2",
+        "ace-builds": "^1.4.7",
         "nuxt": "^2.10.2",
         "v-tooltip": "^2.0.2",
         "vue-virtual-scroll-list": "^1.4.2",

pages/index.vue

@@ -568,14 +568,13 @@
             </div>
           </div>
           <div id="response-details-wrapper">
-            <pre>
+            <ResponseBody
-              <code
+              :value="responseBodyText"
-  ref="responseBody"
+              theme="dracula"
-  id="body"
+              lang="json"
-  rows="16"
+              :rows="16"
-  placeholder="(waiting to send request)"
+              fontSize="18px"
->{{response.body}}</code>
+              placeholder="(waiting to send request)" />
-            </pre>
             <iframe
               :class="{hidden: !previewEnabled}"
               class="covers-response"
@@ -617,8 +616,7 @@ import modal from "../components/modal";
 import collections from "../components/collections";
 import saveRequestAs from "../components/collections/saveRequestAs";
 import parseCurlCommand from "../assets/js/curlparser.js";
-import hljs from "highlight.js";
+import AceEditor from '../components/ace-editor';
-import "highlight.js/styles/androidstudio.css";
 import getEnvironmentVariablesFromScript from "../functions/preRequest";
 import parseTemplateString from "../functions/templating";
 
@@ -684,7 +682,8 @@ export default {
     history,
     autocomplete,
     collections,
-    saveRequestAs
+    saveRequestAs,
+    ResponseBody: AceEditor
   },
   data() {
     return {
@@ -726,7 +725,8 @@ export default {
       showRequestModal: false,
       editRequest: {},
 
-      urlExcludes: {}
+      urlExcludes: {},
+      responseBodyText: '',
     };
   },
   watch: {
@@ -747,35 +747,18 @@ export default {
       else this.setRouteQueryState();
     },
     "response.body": function(val) {
-      var responseText =
-        document.querySelector("div#response-details-wrapper pre code") != null
-          ? document.querySelector("div#response-details-wrapper pre code")
-          : null;
-      if (responseText) {
         if (
-          document.querySelector(".hljs") !== null &&
-          responseText.innerHTML.indexOf('<span class="hljs') !== -1
-        ) {
-          responseText.removeAttribute("class");
-          responseText.innerHTML = null;
-          responseText.innerText = this.response.body;
-        } else if (
-          responseText &&
           this.response.body !== "(waiting to send request)" &&
           this.response.body !== "Loading..."
         ) {
-          responseText.innerText =
+          this.responseBodyText =
             this.responseType === "application/json" ||
             this.responseType === "application/hal+json"
               ? JSON.stringify(this.response.body, null, 2)
               : this.response.body;
-          hljs.highlightBlock(
-            document.querySelector("div#response-details-wrapper pre code")
-          );
         } else {
-          responseText.innerText = this.response.body;
+          this.responseBodyText = this.response.body;
         }
-      }
     },
     params: {
       handler: function(newValue) {