Code highlighting (#142)

* Code highlight js

* Updated copyResponse
This commit is contained in:
Jacob Anavisca
2019-09-11 06:59:33 -04:00
committed by GitHub
parent d1b4d135c8
commit 0ad76be012
4 changed files with 60 additions and 20 deletions

View File

@@ -180,7 +180,7 @@
</div>
</div>
<div id="response-details-wrapper">
<textarea ref="responseBody" name="body" readonly rows="16" placeholder="(waiting to send request)">{{response.body}}</textarea>
<pre><code v-model="response.body" ref="responseBody" name="body" readonly rows="16" placeholder="(waiting to send request)">{{response.body}}</code></pre>
<iframe :class="{hidden: !previewEnabled}" class="covers-response" ref="previewFrame" src="about:blank"></iframe>
</div>
<div class="align-right" v-if="response.body && responseType === 'text/html'">
@@ -290,6 +290,8 @@
import toggle from "../components/toggle";
import import_modal from "../components/modal";
import parseCurlCommand from '../assets/js/curlparser.js';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
const statusCategories = [{
name: 'informational',
@@ -405,6 +407,13 @@
rawInput (status) {
if (status && this.rawParams === '') this.rawParams = '{}'
else this.setRouteQueryState()
},
'response.body': async function (val, oldVal) {
var responseText = document.querySelector("div#response-details-wrapper pre code");
if (responseText && this.response.body != "(waiting to send request)" && this.response.body != "Loading..." && this.response.body != "See JavaScript console (F12) for details.") {
await setTimeout('', 1000)
hljs.highlightBlock(document.querySelector("div#response-details-wrapper pre code"));
}
}
},
computed: {
@@ -755,8 +764,18 @@
},
copyResponse() {
this.$refs.copyResponse.innerHTML = this.copiedButton + '<span>Copied</span>';
this.$refs.responseBody.select();
document.execCommand("copy");
// Creates a textarea element
var aux = document.createElement("textarea");
var copy = this.responseType == 'application/json' ? JSON.stringify(this.response.body) : this.response.body;
// Adds response body to the new textarea
aux.innerText = copy;
// Append the textarea to the body
document.body.appendChild(aux);
// Highlight the content
aux.select();
document.execCommand('copy');
// Remove the input from the body
document.body.removeChild(aux);
setTimeout(() => this.$refs.copyResponse.innerHTML = this.copyButton + '<span>Copy</span>', 1500)
},
togglePreview() {