From 3f743b4f61fb6a128721c6640ebb64f5e06f1477 Mon Sep 17 00:00:00 2001
From: Tabrez Khan <tabrez@toddleapp.com>
Date: Mon, 3 May 2021 14:46:41 +0530
Subject: [PATCH] FEAT: add syntax highlighting in Code Generator Modal

USE: SmartAceEditor componenent
---
 components/http/CodegenModal.vue              | 24 ++++++++++++-------
 helpers/codegen/codegen.js                    |  2 ++
 helpers/codegen/generators/c-libcurl.js       |  1 +
 helpers/codegen/generators/cs-restsharp.js    |  1 +
 helpers/codegen/generators/curl.js            |  1 +
 helpers/codegen/generators/go-native.js       |  1 +
 helpers/codegen/generators/java-okhttp.js     |  1 +
 helpers/codegen/generators/java-unirest.js    |  1 +
 .../codegen/generators/javascript-fetch.js    |  1 +
 .../codegen/generators/javascript-jquery.js   |  1 +
 helpers/codegen/generators/javascript-xhr.js  |  1 +
 helpers/codegen/generators/nodejs-axios.js    |  1 +
 helpers/codegen/generators/nodejs-native.js   |  1 +
 helpers/codegen/generators/nodejs-request.js  |  1 +
 helpers/codegen/generators/nodejs-unirest.js  |  1 +
 helpers/codegen/generators/php-curl.js        |  1 +
 .../generators/powershell-restmethod.js       |  1 +
 .../codegen/generators/python-http-client.js  |  1 +
 helpers/codegen/generators/python-requests.js |  1 +
 helpers/codegen/generators/ruby-net-http.js   |  1 +
 helpers/codegen/generators/salesforce-apex.js |  1 +
 helpers/codegen/generators/shell-httpie.js    |  1 +
 helpers/codegen/generators/shell-wget.js      |  1 +
 23 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 105528d5a..fd7bff871 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -46,15 +46,20 @@
           </button>
         </div>
       </div>
-      <textarea
-        id="generatedCode"
+      <SmartAceEditor
+        :value="requestCode"
+        :lang="codegens.find((x) => x.id === requestType).language"
+        :options="{
+          maxLines: '16',
+          minLines: '10',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
         ref="generatedCode"
-        name="generatedCode"
-        rows="8"
-        v-model="requestCode"
-        readonly
-        class="rounded-b-lg"
-      ></textarea>
+      />
     </div>
   </SmartModal>
 </template>
@@ -97,7 +102,8 @@ export default {
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
       })
-      this.$refs.generatedCode.select()
+      this.$refs.generatedCode.editor.selectAll()
+      this.$refs.generatedCode.editor.focus()
       document.execCommand("copy")
       setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
     },
diff --git a/helpers/codegen/codegen.js b/helpers/codegen/codegen.js
index 34701f294..7adc0ba51 100644
--- a/helpers/codegen/codegen.js
+++ b/helpers/codegen/codegen.js
@@ -25,6 +25,8 @@ import { ShellWgetCodegen } from "./generators/shell-wget"
  *
  * id: string
  * name: string
+ * language: string // a string identifier used in ace editor for syntax highlighting
+ *                  // see node_modules/ace-builds/src-noconflict/mode-** files for valid value
  * generator: (ctx) => string
  *
  */
diff --git a/helpers/codegen/generators/c-libcurl.js b/helpers/codegen/generators/c-libcurl.js
index ac26d310b..7c6dbb6f6 100644
--- a/helpers/codegen/generators/c-libcurl.js
+++ b/helpers/codegen/generators/c-libcurl.js
@@ -1,6 +1,7 @@
 export const CLibcurlCodegen = {
   id: "c-libcurl",
   name: "C libcurl",
+  language: "c_cpp",
   generator: ({
     auth,
     httpUser,
diff --git a/helpers/codegen/generators/cs-restsharp.js b/helpers/codegen/generators/cs-restsharp.js
index d66fe7abc..11052b612 100644
--- a/helpers/codegen/generators/cs-restsharp.js
+++ b/helpers/codegen/generators/cs-restsharp.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const CsRestsharpCodegen = {
   id: "cs-restsharp",
   name: "C# RestSharp",
+  language: "csharp",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/curl.js b/helpers/codegen/generators/curl.js
index cdcfa9107..c83069bad 100644
--- a/helpers/codegen/generators/curl.js
+++ b/helpers/codegen/generators/curl.js
@@ -1,6 +1,7 @@
 export const CurlCodegen = {
   id: "curl",
   name: "cURL",
+  language: "sh",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/go-native.js b/helpers/codegen/generators/go-native.js
index 704f10d40..df2bde681 100644
--- a/helpers/codegen/generators/go-native.js
+++ b/helpers/codegen/generators/go-native.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const GoNativeCodegen = {
   id: "go-native",
   name: "Go Native",
+  language: "golang",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/java-okhttp.js b/helpers/codegen/generators/java-okhttp.js
index 508b892ae..3252d6936 100644
--- a/helpers/codegen/generators/java-okhttp.js
+++ b/helpers/codegen/generators/java-okhttp.js
@@ -1,6 +1,7 @@
 export const JavaOkhttpCodegen = {
   id: "java-okhttp",
   name: "Java OkHttp",
+  language: "java",
   generator: ({
     auth,
     httpUser,
diff --git a/helpers/codegen/generators/java-unirest.js b/helpers/codegen/generators/java-unirest.js
index 0c578bc4c..19ee32003 100644
--- a/helpers/codegen/generators/java-unirest.js
+++ b/helpers/codegen/generators/java-unirest.js
@@ -1,6 +1,7 @@
 export const JavaUnirestCodegen = {
   id: "java-unirest",
   name: "Java Unirest",
+  language: "java",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/javascript-fetch.js b/helpers/codegen/generators/javascript-fetch.js
index e684d86a9..81271ef30 100644
--- a/helpers/codegen/generators/javascript-fetch.js
+++ b/helpers/codegen/generators/javascript-fetch.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const JavascriptFetchCodegen = {
   id: "js-fetch",
   name: "JavaScript Fetch",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/javascript-jquery.js b/helpers/codegen/generators/javascript-jquery.js
index fdf7b5c0a..040aecac3 100644
--- a/helpers/codegen/generators/javascript-jquery.js
+++ b/helpers/codegen/generators/javascript-jquery.js
@@ -1,6 +1,7 @@
 export const JavascriptJqueryCodegen = {
   id: "js-jquery",
   name: "JavaScript jQuery",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/javascript-xhr.js b/helpers/codegen/generators/javascript-xhr.js
index 3855cfbe0..8064a92c0 100644
--- a/helpers/codegen/generators/javascript-xhr.js
+++ b/helpers/codegen/generators/javascript-xhr.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const JavascriptXhrCodegen = {
   id: "js-xhr",
   name: "JavaScript XHR",
+  language: "javascript",
   generator: ({
     auth,
     httpUser,
diff --git a/helpers/codegen/generators/nodejs-axios.js b/helpers/codegen/generators/nodejs-axios.js
index 20fe6f62d..a880c04c6 100644
--- a/helpers/codegen/generators/nodejs-axios.js
+++ b/helpers/codegen/generators/nodejs-axios.js
@@ -1,6 +1,7 @@
 export const NodejsAxiosCodegen = {
   id: "nodejs-axios",
   name: "NodeJs Axios",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/nodejs-native.js b/helpers/codegen/generators/nodejs-native.js
index 49d7abffe..73bf7e143 100644
--- a/helpers/codegen/generators/nodejs-native.js
+++ b/helpers/codegen/generators/nodejs-native.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const NodejsNativeCodegen = {
   id: "nodejs-native",
   name: "NodeJs Native",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/nodejs-request.js b/helpers/codegen/generators/nodejs-request.js
index 0a8535051..884dd2929 100644
--- a/helpers/codegen/generators/nodejs-request.js
+++ b/helpers/codegen/generators/nodejs-request.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const NodejsRequestCodegen = {
   id: "nodejs-request",
   name: "NodeJs Request",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/nodejs-unirest.js b/helpers/codegen/generators/nodejs-unirest.js
index f92eb9f19..b9c7c3cdc 100644
--- a/helpers/codegen/generators/nodejs-unirest.js
+++ b/helpers/codegen/generators/nodejs-unirest.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const NodejsUnirestCodegen = {
   id: "nodejs-unirest",
   name: "NodeJs Unirest",
+  language: "javascript",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/php-curl.js b/helpers/codegen/generators/php-curl.js
index c5e12b65e..f9c5960c5 100644
--- a/helpers/codegen/generators/php-curl.js
+++ b/helpers/codegen/generators/php-curl.js
@@ -3,6 +3,7 @@ import { isJSONContentType } from "~/helpers/utils/contenttypes"
 export const PhpCurlCodegen = {
   id: "php-curl",
   name: "PHP cURL",
+  language: "php",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/powershell-restmethod.js b/helpers/codegen/generators/powershell-restmethod.js
index 891da07f3..79cfa8e97 100644
--- a/helpers/codegen/generators/powershell-restmethod.js
+++ b/helpers/codegen/generators/powershell-restmethod.js
@@ -1,6 +1,7 @@
 export const PowershellRestmethodCodegen = {
   id: "powershell-restmethod",
   name: "PowerShell RestMethod",
+  language: "powershell",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/python-http-client.js b/helpers/codegen/generators/python-http-client.js
index 66a571524..cbe728451 100644
--- a/helpers/codegen/generators/python-http-client.js
+++ b/helpers/codegen/generators/python-http-client.js
@@ -11,6 +11,7 @@ const printHeaders = (headers) => {
 export const PythonHttpClientCodegen = {
   id: "python-http-client",
   name: "Python http.client",
+  language: "python",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/python-requests.js b/helpers/codegen/generators/python-requests.js
index 771acf4c7..3b5c31734 100644
--- a/helpers/codegen/generators/python-requests.js
+++ b/helpers/codegen/generators/python-requests.js
@@ -11,6 +11,7 @@ const printHeaders = (headers) => {
 export const PythonRequestsCodegen = {
   id: "python-requests",
   name: "Python Requests",
+  language: "python",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/ruby-net-http.js b/helpers/codegen/generators/ruby-net-http.js
index c4c0d2836..24ed87977 100644
--- a/helpers/codegen/generators/ruby-net-http.js
+++ b/helpers/codegen/generators/ruby-net-http.js
@@ -1,6 +1,7 @@
 export const RubyNetHttpCodeGen = {
   id: "ruby-net-http",
   name: "Ruby Net::HTTP",
+  language: "ruby",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/salesforce-apex.js b/helpers/codegen/generators/salesforce-apex.js
index d05b95762..24ad1d1c5 100644
--- a/helpers/codegen/generators/salesforce-apex.js
+++ b/helpers/codegen/generators/salesforce-apex.js
@@ -1,6 +1,7 @@
 export const SalesforceApexCodegen = {
   id: "salesforce-apex",
   name: "Salesforce Apex",
+  language: "apex",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/shell-httpie.js b/helpers/codegen/generators/shell-httpie.js
index 542e7695e..a7b6eca1b 100644
--- a/helpers/codegen/generators/shell-httpie.js
+++ b/helpers/codegen/generators/shell-httpie.js
@@ -1,6 +1,7 @@
 export const ShellHttpieCodegen = {
   id: "shell-httpie",
   name: "Shell HTTPie",
+  language: "sh",
   generator: ({
     url,
     pathName,
diff --git a/helpers/codegen/generators/shell-wget.js b/helpers/codegen/generators/shell-wget.js
index cc4affc2a..756ed1752 100644
--- a/helpers/codegen/generators/shell-wget.js
+++ b/helpers/codegen/generators/shell-wget.js
@@ -1,6 +1,7 @@
 export const ShellWgetCodegen = {
   id: "shell-wget",
   name: "Shell wget",
+  language: "sh",
   generator: ({
     url,
     pathName,