Merge pull request #1625 from iamtabrezkhan/issue-1507

FEAT: add syntax highlighting in Code Generator Modal

components/http/CodegenModal.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div slot="body" class="flex flex-col">
-      <label for="requestType">{{ $t("request_type") }}</label>
+      <label for="requestType">{{ $t("choose_language") }}</label>
       <span class="select-wrapper">
         <v-popover>
           <pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
@@ -46,15 +46,22 @@
           </button>
         </div>
       </div>
-      <textarea
-        id="generatedCode"
+      <SmartAceEditor
+        v-if="requestType"
+        :value="requestCode"
+        :lang="codegens.find((x) => x.id === requestType).language"
+        :options="{
+          maxLines: '10',
+          minLines: '10',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+        styles="rounded-b-lg"
         ref="generatedCode"
-        name="generatedCode"
-        rows="8"
-        v-model="requestCode"
-        readonly
-        class="rounded-b-lg"
-      ></textarea>
+      />
     </div>
   </SmartModal>
 </template>
@@ -66,7 +73,7 @@ export default {
   props: {
     show: Boolean,
     requestCode: String,
-    requestTypeProp: { type: String, default: "" },
+    requestTypeProp: { type: String, default: "curl" },
   },
   data() {
     return {
@@ -97,7 +104,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)
     },

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
  *
  */

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,

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,

helpers/codegen/generators/curl.js

@@ -1,6 +1,7 @@
 export const CurlCodegen = {
   id: "curl",
   name: "cURL",
+  language: "sh",
   generator: ({
     url,
     pathName,

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,

helpers/codegen/generators/java-okhttp.js

@@ -1,6 +1,7 @@
 export const JavaOkhttpCodegen = {
   id: "java-okhttp",
   name: "Java OkHttp",
+  language: "java",
   generator: ({
     auth,
     httpUser,

helpers/codegen/generators/java-unirest.js

@@ -1,6 +1,7 @@
 export const JavaUnirestCodegen = {
   id: "java-unirest",
   name: "Java Unirest",
+  language: "java",
   generator: ({
     url,
     pathName,

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,

helpers/codegen/generators/javascript-jquery.js

@@ -1,6 +1,7 @@
 export const JavascriptJqueryCodegen = {
   id: "js-jquery",
   name: "JavaScript jQuery",
+  language: "javascript",
   generator: ({
     url,
     pathName,

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,

helpers/codegen/generators/nodejs-axios.js

@@ -1,6 +1,7 @@
 export const NodejsAxiosCodegen = {
   id: "nodejs-axios",
   name: "NodeJs Axios",
+  language: "javascript",
   generator: ({
     url,
     pathName,

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,

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,

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,

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,

helpers/codegen/generators/powershell-restmethod.js

@@ -1,6 +1,7 @@
 export const PowershellRestmethodCodegen = {
   id: "powershell-restmethod",
   name: "PowerShell RestMethod",
+  language: "powershell",
   generator: ({
     url,
     pathName,

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,

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,

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,

helpers/codegen/generators/salesforce-apex.js

@@ -1,6 +1,7 @@
 export const SalesforceApexCodegen = {
   id: "salesforce-apex",
   name: "Salesforce Apex",
+  language: "apex",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/shell-httpie.js

@@ -1,6 +1,7 @@
 export const ShellHttpieCodegen = {
   id: "shell-httpie",
   name: "Shell HTTPie",
+  language: "sh",
   generator: ({
     url,
     pathName,

helpers/codegen/generators/shell-wget.js

@@ -1,6 +1,7 @@
 export const ShellWgetCodegen = {
   id: "shell-wget",
   name: "Shell wget",
+  language: "sh",
   generator: ({
     url,
     pathName,

store/state.js

@@ -15,7 +15,7 @@ export default () => ({
     bodyParams: [],
     rawParams: "",
     rawInput: false,
-    requestType: "",
+    requestType: "curl",
     contentType: "",
   },
   gql: {