From 1a9b4cdbf5bee94e6282ed1547fc890ff0c383b4 Mon Sep 17 00:00:00 2001
From: Hossein Nedaee <hosseinnedaee.d@gmail.com>
Date: Sat, 9 Nov 2019 22:58:05 +0330
Subject: [PATCH 1/5] Replace highlight.js with ace editor.

---
 assets/css/styles.scss    | 10 +++--
 components/ace-editor.vue | 84 +++++++++++++++++++++++++++++++++++++++
 package-lock.json         | 10 ++---
 package.json              |  2 +-
 pages/index.vue           | 45 +++++++--------------
 5 files changed, 111 insertions(+), 40 deletions(-)
 create mode 100644 components/ace-editor.vue

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 0ea7527cc..f8d4f1bc8 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -505,9 +505,9 @@ pre {
   resize: vertical;
   text-overflow: ellipsis;
 
-  &:not([readonly]):hover,
-  &:not([readonly]):active,
-  &:not([readonly]):focus {
+  &:not([readonly]):not(.ace_editor):hover,
+  &:not([readonly]):not(.ace_editor):active,
+  &: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;
diff --git a/components/ace-editor.vue b/components/ace-editor.vue
new file mode 100644
index 000000000..b5d5ca37c
--- /dev/null
+++ b/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>
diff --git a/package-lock.json b/package-lock.json
index 880e7e048..e4909079d 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index b954683f9..ad76a6ec2 100644
--- a/package.json
+++ b/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",
diff --git a/pages/index.vue b/pages/index.vue
index 1411528b3..798397aff 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -568,14 +568,13 @@
             </div>
           </div>
           <div id="response-details-wrapper">
-            <pre>
-              <code
-  ref="responseBody"
-  id="body"
-  rows="16"
-  placeholder="(waiting to send request)"
->{{response.body}}</code>
-            </pre>
+            <ResponseBody
+              :value="responseBodyText"
+              theme="dracula"
+              lang="json"
+              :rows="16"
+              fontSize="18px"
+              placeholder="(waiting to send request)" />
             <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 "highlight.js/styles/androidstudio.css";
+import AceEditor from '../components/ace-editor';
 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) {

From 4accbda49785622f943ba3888915b13f02191c37 Mon Sep 17 00:00:00 2001
From: Hossein Nedaee <hosseinnedaee.d@gmail.com>
Date: Sun, 10 Nov 2019 21:03:20 +0330
Subject: [PATCH 2/5] Change ace editor font-family

---
 assets/css/styles.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index f8d4f1bc8..851eb997f 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -518,6 +518,7 @@ pre {
 }
 
 pre.ace_editor {
+  font-family: Roboto Mono, monospace;
   z-index: 0;
 }
 

From 716434d59ed4387b2549eba20f5d9f91e89b0ffe Mon Sep 17 00:00:00 2001
From: Hossein Nedaee <hosseinnedaee.d@gmail.com>
Date: Sun, 10 Nov 2019 21:08:57 +0330
Subject: [PATCH 3/5] Reduce response body font size

---
 components/ace-editor.vue | 2 +-
 pages/index.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/ace-editor.vue b/components/ace-editor.vue
index b5d5ca37c..b9cfa5887 100644
--- a/components/ace-editor.vue
+++ b/components/ace-editor.vue
@@ -27,7 +27,7 @@ export default {
     },
     fontSize: {
       type: String,
-      default: '12px'
+      default: '16px'
     },
     placeholder: {
       type: String,
diff --git a/pages/index.vue b/pages/index.vue
index 798397aff..190dc0dd9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -573,7 +573,7 @@
               theme="dracula"
               lang="json"
               :rows="16"
-              fontSize="18px"
+              fontSize="16px"
               placeholder="(waiting to send request)" />
             <iframe
               :class="{hidden: !previewEnabled}"

From 179010ddbff1ec7ab13b67e369805d545cf187bf Mon Sep 17 00:00:00 2001
From: Hossein Nedaee <hosseinnedaee.d@gmail.com>
Date: Mon, 11 Nov 2019 20:44:24 +0330
Subject: [PATCH 4/5] Change ace-editor theme by PW theme changing.

---
 components/ace-editor.vue | 66 ++++++++++++++++++++-------------------
 pages/index.vue           | 14 ++++++---
 pages/settings.vue        | 17 ++++++----
 store/postwoman.js        |  5 +++
 4 files changed, 60 insertions(+), 42 deletions(-)

diff --git a/components/ace-editor.vue b/components/ace-editor.vue
index b9cfa5887..d09c77108 100644
--- a/components/ace-editor.vue
+++ b/components/ace-editor.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script>
+const DEFAULT_THEME = 'dracula';
+
 import ace from 'ace-builds';
 import "ace-builds/webpack-resolver";
 
@@ -15,27 +17,15 @@ export default {
     },
     theme: {
       type: String,
-      default: 'dracula'
+      required: false
     },
     lang: {
       type: String,
-      default: 'json'
+      default: 'json',
     },
-    rows: {
-      type: Number,
-      default: 16
-    },
-    fontSize: {
-      type: String,
-      default: '16px'
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    checkSyntax: {
-      type: Boolean,
-      default: false
+    options: {
+      type: Object,
+      default: {}
     }
   },
 
@@ -47,33 +37,45 @@ export default {
   },
 
   watch: {
-    value(val) {
-      if(val !== this.cacheValue) {
-        this.editor.session.setValue(val,1);
-        this.cacheValue = val;
+    value(value) {
+      if(value !== this.cacheValue) {
+        this.editor.session.setValue(value,1);
+        this.cacheValue = value;
       }
 
+    },
+    theme() {
+      this.editor.setTheme('ace/theme/' + this.defineTheme())
+    },
+    lang(value) {
+      this.editor.getSession().setMode('ace/mode/' + value);
+    },
+    options(value) {
+      this.editor.setOptions(value);
     }
   },
 
   mounted() {
     const editor = ace.edit(this.$refs.editor, {
-      theme: 'ace/theme/'+ this.theme,
+      theme: 'ace/theme/'+ this.defineTheme(),
       mode: "ace/mode/" + this.lang,
-      maxLines: this.rows,
-      minLines: this.rows,
-      fontSize: this.fontSize,
-      autoScrollEditorIntoView: true,
-      readOnly: true,
-      showPrintMargin: false,
-    })
+      ...this.options
+      })
 
     editor.setValue(this.value);
-    this.cacheValue = this.value;
-
-    editor.session.setUseWorker(this.checkSyntax)
 
     this.editor = editor;
+    this.cacheValue = this.value;
+  },
+
+  methods: {
+    defineTheme() {
+      if(this.theme) {
+        return this.theme;
+      } else {
+        return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
+      }
+    }
   },
 
   beforeDestroy() {
diff --git a/pages/index.vue b/pages/index.vue
index 190dc0dd9..76ef31d7d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -570,11 +570,17 @@
           <div id="response-details-wrapper">
             <ResponseBody
               :value="responseBodyText"
-              theme="dracula"
               lang="json"
-              :rows="16"
-              fontSize="16px"
-              placeholder="(waiting to send request)" />
+              :options="{
+                maxLines: '16',
+                minLines: '16',
+                fontSize: '16px',
+                autoScrollEditorIntoView: true,
+                readOnly: true,
+                showPrintMargin: false,
+                useWorker: false
+                }"
+            />
             <iframe
               :class="{hidden: !previewEnabled}"
               class="covers-response"
diff --git a/pages/settings.vue b/pages/settings.vue
index 6f98a73e3..49d2f87fc 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -7,7 +7,7 @@
           <div class="backgrounds">
             <span
               :key="theme.class"
-              @click="applyTheme(theme.class, theme.color)"
+              @click="applyTheme(theme)"
               v-for="theme in themes"
             >
               <swatch
@@ -128,24 +128,28 @@ export default {
         {
           color: "#252628",
           name: "Kinda Dark",
-          class: ""
+          class: "",
+          aceEditor: "dracula"
         },
         {
           color: "#ffffff",
           name: "Clearly White",
           vibrant: true,
-          class: "light"
+          class: "light",
+          aceEditor: "xcode"
         },
         {
           color: "#000000",
           name: "Just Black",
-          class: "black"
+          class: "black",
+          aceEditor: "tomorrow_night_blue"
         },
         {
           color: "var(--bg-color)",
           name: "Auto (system)",
           vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
-          class: "auto"
+          class: "auto",
+          aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches ? 'xcode' : 'dracula'
         }
       ],
       // You can define a new color here! It will simply store the color value.
@@ -220,8 +224,9 @@ export default {
   },
 
   methods: {
-    applyTheme(name, color) {
+    applyTheme({class:name, color, aceEditor}) {
       this.applySetting("THEME_CLASS", name);
+      this.applySetting("THEME_ACE_EDITOR", aceEditor);
       document
         .querySelector("meta[name=theme-color]")
         .setAttribute("content", color);
diff --git a/store/postwoman.js b/store/postwoman.js
index bdc36e32b..5eaeb85be 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -26,6 +26,11 @@ export const SETTINGS_KEYS = [
    */
   "THEME_COLOR_VIBRANT",
 
+  /**
+   * The Ace editor theme
+   */
+  "THEME_ACE_EDITOR",
+
   /**
    * Normally, section frames are multicolored in the UI
    * to emphasise the different sections.

From 4ca78a2fe55d145125d703d05d6fed2202b5f7ae Mon Sep 17 00:00:00 2001
From: Hossein Nedaee <hosseinnedaee.d@gmail.com>
Date: Mon, 11 Nov 2019 21:44:29 +0330
Subject: [PATCH 5/5] Make `lang` prop dynamic.

---
 components/ace-editor.vue |  1 -
 pages/index.vue           | 27 ++++++++++++++++++---------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/components/ace-editor.vue b/components/ace-editor.vue
index d09c77108..ac8556f83 100644
--- a/components/ace-editor.vue
+++ b/components/ace-editor.vue
@@ -42,7 +42,6 @@ export default {
         this.editor.session.setValue(value,1);
         this.cacheValue = value;
       }
-
     },
     theme() {
       this.editor.setTheme('ace/theme/' + this.defineTheme())
diff --git a/pages/index.vue b/pages/index.vue
index 76ef31d7d..7705d9fbe 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -570,7 +570,7 @@
           <div id="response-details-wrapper">
             <ResponseBody
               :value="responseBodyText"
-              lang="json"
+              :lang="responseBodyType"
               :options="{
                 maxLines: '16',
                 minLines: '16',
@@ -733,6 +733,7 @@ export default {
 
       urlExcludes: {},
       responseBodyText: '',
+      responseBodyType: 'text'
     };
   },
   watch: {
@@ -753,18 +754,26 @@ export default {
       else this.setRouteQueryState();
     },
     "response.body": function(val) {
-        if (
-          this.response.body !== "(waiting to send request)" &&
-          this.response.body !== "Loading..."
+      if (
+        this.response.body === "(waiting to send request)" ||
+        this.response.body === "Loading..."
+      ) {
+        this.responseBodyText = this.response.body;
+        this.responseBodyType = 'text';
+      } else {
+        if(this.responseType === "application/json" ||
+         this.responseType === "application/hal+json"
         ) {
-          this.responseBodyText =
-            this.responseType === "application/json" ||
-            this.responseType === "application/hal+json"
-              ? JSON.stringify(this.response.body, null, 2)
-              : this.response.body;
+          this.responseBodyText = JSON.stringify(this.response.body, null, 2)
+          this.responseBodyType = 'json'
+        } else if (this.responseType === "text/html") {
+          this.responseBodyText = this.response.body;
+          this.responseBodyType = 'html'
         } else {
           this.responseBodyText = this.response.body;
+          this.responseBodyType = 'text';
         }
+      }
     },
     params: {
       handler: function(newValue) {