refactor: merge branch 'main' into refactor/monorepo

packages/hoppscotch-app/components/http/CodegenModal.vue

@@ -38,31 +38,25 @@
             {{ t("request.generated_code") }}
           </label>
         </div>
-        <SmartAceEditor
+        <div
           v-if="codegenType"
           ref="generatedCode"
-          :value="requestCode"
-          :lang="codegens.find((x) => x.id === codegenType).language"
-          :options="{
-            maxLines: 16,
-            minLines: 8,
-            autoScrollEditorIntoView: true,
-            readOnly: true,
-            showPrintMargin: false,
-            useWorker: false,
-          }"
-          styles="border rounded border-dividerLight"
-        />
+          class="border border-dividerLight rounded"
+        ></div>
       </div>
     </template>
     <template #footer>
-      <ButtonPrimary
-        ref="copyRequestCode"
-        :label="t('action.copy')"
-        :svg="copyIcon"
-        @click.native="copyRequestCode"
-      />
-      <ButtonSecondary :label="t('action.dismiss')" @click.native="hideModal" />
+      <span class="flex">
+        <ButtonPrimary
+          :label="t('action.copy').toString()"
+          :svg="copyIcon"
+          @click.native="copyRequestCode"
+        />
+        <ButtonSecondary
+          :label="t('action.dismiss').toString()"
+          @click.native="hideModal"
+        />
+      </span>
     </template>
   </SmartModal>
 </template>
@@ -70,6 +64,7 @@
 <script setup lang="ts">
 import { computed, ref, useContext, watch } from "@nuxtjs/composition-api"
 import { codegens, generateCodegenContext } from "~/helpers/codegen/codegen"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
 import { getCurrentEnvironment } from "~/newstore/environments"
@@ -106,6 +101,17 @@ const requestCode = computed(() => {
     .generator(generateCodegenContext(effectiveRequest))
 })
 
+const generatedCode = ref<any | null>(null)
+
+useCodemirror(generatedCode, requestCode, {
+  extendedEditorConfig: {
+    mode: "text/plain",
+    readOnly: true,
+  },
+  linter: null,
+  completer: null,
+})
+
 watch(
   () => props.show,
   (goingToShow) => {

packages/hoppscotch-app/components/http/Headers.vue

@@ -47,27 +47,7 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" class="flex">
-      <textarea-autosize
-        v-model="bulkHeaders"
-        v-focus
-        name="bulk-headers"
-        class="
-          bg-transparent
-          border-b border-dividerLight
-          flex
-          font-mono
-          flex-1
-          py-2
-          px-4
-          whitespace-pre
-          resize-y
-          overflow-auto
-        "
-        rows="10"
-        :placeholder="$t('state.bulk_mode_placeholder')"
-      />
-    </div>
+    <div v-if="bulkMode" ref="bulkEditor"></div>
     <div v-else>
       <div
         v-for="(header, index) in headers$"
@@ -193,96 +173,86 @@
   </AppSection>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref, useContext, watch } from "@nuxtjs/composition-api"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
-  defineComponent,
-  ref,
-  useContext,
-  watch,
-} from "@nuxtjs/composition-api"
-import {
-  restHeaders$,
   addRESTHeader,
-  updateRESTHeader,
-  deleteRESTHeader,
   deleteAllRESTHeaders,
+  deleteRESTHeader,
+  restHeaders$,
   setRESTHeaders,
+  updateRESTHeader,
 } from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
 import { useSetting } from "~/newstore/settings"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 
-export default defineComponent({
-  setup() {
-    const {
-      $toast,
-      app: { i18n },
-    } = useContext()
-    const t = i18n.t.bind(i18n)
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
-    const bulkMode = ref(false)
-    const bulkHeaders = ref("")
+const bulkMode = ref(false)
+const bulkHeaders = ref("")
+const bulkEditor = ref<any | null>(null)
 
-    watch(bulkHeaders, () => {
-      try {
-        const transformation = bulkHeaders.value.split("\n").map((item) => ({
-          key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
-          value: item.substring(item.indexOf(":") + 1).trim(),
-          active: !item.trim().startsWith("//"),
-        }))
-        setRESTHeaders(transformation)
-      } catch (e) {
-        $toast.error(t("error.something_went_wrong").toString(), {
-          icon: "error_outline",
-        })
-        console.error(e)
-      }
-    })
-
-    return {
-      headers$: useReadonlyStream(restHeaders$, []),
-      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
-      bulkMode,
-      bulkHeaders,
-    }
-  },
-  data() {
-    return {
-      commonHeaders,
-    }
-  },
-  watch: {
-    headers$: {
-      handler(newValue) {
-        if (
-          (newValue[newValue.length - 1]?.key !== "" ||
-            newValue[newValue.length - 1]?.value !== "") &&
-          newValue.length
-        )
-          this.addHeader()
-      },
-      deep: true,
-    },
-  },
-  // mounted() {
-  //   if (!this.headers$?.length) {
-  //     this.addHeader()
-  //   }
-  // },
-  methods: {
-    addHeader() {
-      addRESTHeader({ key: "", value: "", active: true })
-    },
-    updateHeader(index: number, item: HoppRESTHeader) {
-      updateRESTHeader(index, item)
-    },
-    deleteHeader(index: number) {
-      deleteRESTHeader(index)
-    },
-    clearContent() {
-      deleteAllRESTHeaders()
-    },
+useCodemirror(bulkEditor, bulkHeaders, {
+  extendedEditorConfig: {
+    mode: "text/x-yaml",
+    placeholder: t("state.bulk_mode_placeholder").toString(),
   },
+  linter: null,
+  completer: null,
 })
+
+watch(bulkHeaders, () => {
+  try {
+    const transformation = bulkHeaders.value.split("\n").map((item) => ({
+      key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
+      value: item.substring(item.indexOf(":") + 1).trim(),
+      active: !item.trim().startsWith("//"),
+    }))
+    setRESTHeaders(transformation)
+  } catch (e) {
+    $toast.error(t("error.something_went_wrong").toString(), {
+      icon: "error_outline",
+    })
+    console.error(e)
+  }
+})
+
+const headers$ = useReadonlyStream(restHeaders$, [])
+
+watch(
+  headers$,
+  (newValue) => {
+    if (
+      (newValue[newValue.length - 1]?.key !== "" ||
+        newValue[newValue.length - 1]?.value !== "") &&
+      newValue.length
+    )
+      addHeader()
+  },
+  { deep: true }
+)
+
+const addHeader = () => {
+  addRESTHeader({ key: "", value: "", active: true })
+}
+
+const updateHeader = (index: number, item: HoppRESTHeader) => {
+  updateRESTHeader(index, item)
+}
+
+const deleteHeader = (index: number) => {
+  deleteRESTHeader(index)
+}
+
+const clearContent = () => {
+  deleteAllRESTHeaders()
+}
+const EXPERIMENTAL_URL_BAR_ENABLED = useSetting("EXPERIMENTAL_URL_BAR_ENABLED")
 </script>

packages/hoppscotch-app/components/http/ImportCurl.vue

@@ -1,28 +1,22 @@
 <template>
-  <SmartModal v-if="show" :title="$t('import.curl')" @close="hideModal">
+  <SmartModal
+    v-if="show"
+    :title="$t('import.curl').toString()"
+    @close="hideModal"
+  >
     <template #body>
       <div class="flex flex-col px-2">
-        <textarea-autosize
-          id="import-curl"
-          v-model="curl"
-          class="font-mono textarea floating-input"
-          autofocus
-          rows="8"
-          placeholder=" "
-        />
-        <label for="import-curl">
-          {{ $t("request.enter_curl") }}
-        </label>
+        <div ref="curlEditor" class="border border-dividerLight rounded"></div>
       </div>
     </template>
     <template #footer>
-      <span>
+      <span class="flex">
         <ButtonPrimary
-          :label="$t('import.title')"
+          :label="$t('import.title').toString()"
           @click.native="handleImport"
         />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="$t('action.cancel').toString()"
           @click.native="hideModal"
         />
       </span>
@@ -30,108 +24,114 @@
   </SmartModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { ref, useContext } from "@nuxtjs/composition-api"
 import parseCurlCommand from "~/helpers/curlparser"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
   HoppRESTHeader,
   HoppRESTParam,
   makeRESTRequest,
 } from "~/helpers/types/HoppRESTRequest"
 import { setRESTRequest } from "~/newstore/RESTSession"
+import "codemirror/mode/shell/shell"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  emits: ["hide-modal"],
-  data() {
-    return {
-      curl: "",
-    }
-  },
-  methods: {
-    hideModal() {
-      this.$emit("hide-modal")
-    },
-    handleImport() {
-      const text = this.curl
-      try {
-        const parsedCurl = parseCurlCommand(text)
-        const { origin, pathname } = new URL(
-          parsedCurl.url.replace(/"/g, "").replace(/'/g, "")
-        )
-        const endpoint = origin + pathname
-        const headers: HoppRESTHeader[] = []
-        const params: HoppRESTParam[] = []
-        if (parsedCurl.query) {
-          for (const key of Object.keys(parsedCurl.query)) {
-            const val = parsedCurl.query[key]!
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
-            if (Array.isArray(val)) {
-              val.forEach((value) => {
-                params.push({
-                  key,
-                  value,
-                  active: true,
-                })
-              })
-            } else {
-              params.push({
-                key,
-                value: val!,
-                active: true,
-              })
-            }
-          }
-        }
-        if (parsedCurl.headers) {
-          for (const key of Object.keys(parsedCurl.headers)) {
-            headers.push({
+const curl = ref("")
+
+const curlEditor = ref<any | null>(null)
+
+useCodemirror(curlEditor, curl, {
+  extendedEditorConfig: {
+    mode: "application/x-sh",
+    placeholder: t("request.enter_curl").toString(),
+  },
+  linter: null,
+  completer: null,
+})
+
+defineProps<{ show: boolean }>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+
+const handleImport = () => {
+  const text = curl.value
+  try {
+    const parsedCurl = parseCurlCommand(text)
+    const { origin, pathname } = new URL(
+      parsedCurl.url.replace(/"/g, "").replace(/'/g, "")
+    )
+    const endpoint = origin + pathname
+    const headers: HoppRESTHeader[] = []
+    const params: HoppRESTParam[] = []
+    if (parsedCurl.query) {
+      for (const key of Object.keys(parsedCurl.query)) {
+        const val = parsedCurl.query[key]!
+
+        if (Array.isArray(val)) {
+          val.forEach((value) => {
+            params.push({
               key,
-              value: parsedCurl.headers[key],
+              value,
               active: true,
             })
-          }
-        }
-        const method = parsedCurl.method.toUpperCase()
-        // let rawInput = false
-        // let rawParams: any | null = null
-
-        // if (parsedCurl.data) {
-        //   rawInput = true
-        //   rawParams = parsedCurl.data
-        // }
-
-        this.showCurlImportModal = false
-
-        setRESTRequest(
-          makeRESTRequest({
-            name: "Untitled request",
-            endpoint,
-            method,
-            params,
-            headers,
-            preRequestScript: "",
-            testScript: "",
-            auth: {
-              authType: "none",
-              authActive: true,
-            },
-            body: {
-              contentType: "application/json",
-              body: "",
-            },
           })
-        )
-      } catch (e) {
-        console.error(e)
-        this.$toast.error(this.$t("error.curl_invalid_format").toString(), {
-          icon: "error_outline",
+        } else {
+          params.push({
+            key,
+            value: val!,
+            active: true,
+          })
+        }
+      }
+    }
+    if (parsedCurl.headers) {
+      for (const key of Object.keys(parsedCurl.headers)) {
+        headers.push({
+          key,
+          value: parsedCurl.headers[key],
+          active: true,
         })
       }
-      this.hideModal()
-    },
-  },
-})
+    }
+    const method = parsedCurl.method.toUpperCase()
+
+    setRESTRequest(
+      makeRESTRequest({
+        name: "Untitled request",
+        endpoint,
+        method,
+        params,
+        headers,
+        preRequestScript: "",
+        testScript: "",
+        auth: {
+          authType: "none",
+          authActive: true,
+        },
+        body: {
+          contentType: "application/json",
+          body: "",
+        },
+      })
+    )
+  } catch (e) {
+    console.error(e)
+    $toast.error(t("error.curl_invalid_format").toString(), {
+      icon: "error_outline",
+    })
+  }
+  hideModal()
+}
 </script>

packages/hoppscotch-app/components/http/Parameters.vue

@@ -47,27 +47,7 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" class="flex">
-      <textarea-autosize
-        v-model="bulkParams"
-        v-focus
-        name="bulk-parameters"
-        class="
-          bg-transparent
-          border-b border-dividerLight
-          flex
-          font-mono font-medium
-          flex-1
-          py-2
-          px-4
-          whitespace-pre
-          resize-y
-          overflow-auto
-        "
-        rows="10"
-        :placeholder="$t('state.bulk_mode_placeholder')"
-      />
-    </div>
+    <div v-if="bulkMode" ref="bulkEditor"></div>
     <div v-else>
       <div
         v-for="(param, index) in params$"
@@ -96,7 +76,7 @@
         <input
           v-else
           class="bg-transparent flex flex-1 py-2 px-4"
-          :placeholder="$t('count.parameter', { count: index + 1 })"
+          :placeholder="$t('count.parameter', { count: index + 1 }).toString()"
           :name="'param' + index"
           :value="param.key"
           autofocus
@@ -130,7 +110,7 @@
         <input
           v-else
           class="bg-transparent flex flex-1 py-2 px-4"
-          :placeholder="$t('count.value', { count: index + 1 })"
+          :placeholder="$t('count.value', { count: index + 1 }).toString()"
           :name="'value' + index"
           :value="param.value"
           @change="
@@ -202,13 +182,9 @@
   </AppSection>
 </template>
 
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  useContext,
-  watch,
-} from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { ref, useContext, watch } from "@nuxtjs/composition-api"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
@@ -220,72 +196,74 @@ import {
   setRESTParams,
 } from "~/newstore/RESTSession"
 import { useSetting } from "~/newstore/settings"
+import "codemirror/mode/yaml/yaml"
 
-export default defineComponent({
-  setup() {
-    const {
-      $toast,
-      app: { i18n },
-    } = useContext()
-    const t = i18n.t.bind(i18n)
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
-    const bulkMode = ref(false)
-    const bulkParams = ref("")
+const bulkMode = ref(false)
+const bulkParams = ref("")
 
-    watch(bulkParams, () => {
-      try {
-        const transformation = bulkParams.value.split("\n").map((item) => ({
-          key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
-          value: item.substring(item.indexOf(":") + 1).trim(),
-          active: !item.trim().startsWith("//"),
-        }))
-        setRESTParams(transformation)
-      } catch (e) {
-        $toast.error(t("error.something_went_wrong").toString(), {
-          icon: "error_outline",
-        })
-        console.error(e)
-      }
+watch(bulkParams, () => {
+  try {
+    const transformation = bulkParams.value.split("\n").map((item) => ({
+      key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
+      value: item.substring(item.indexOf(":") + 1).trim(),
+      active: !item.trim().startsWith("//"),
+    }))
+    setRESTParams(transformation)
+  } catch (e) {
+    $toast.error(t("error.something_went_wrong").toString(), {
+      icon: "error_outline",
     })
-
-    return {
-      params$: useReadonlyStream(restParams$, []),
-      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
-      bulkMode,
-      bulkParams,
-    }
-  },
-  watch: {
-    params$: {
-      handler(newValue) {
-        if (
-          (newValue[newValue.length - 1]?.key !== "" ||
-            newValue[newValue.length - 1]?.value !== "") &&
-          newValue.length
-        )
-          this.addParam()
-      },
-      deep: true,
-    },
-  },
-  // mounted() {
-  //   if (!this.params$?.length) {
-  //     this.addParam()
-  //   }
-  // },
-  methods: {
-    addParam() {
-      addRESTParam({ key: "", value: "", active: true })
-    },
-    updateParam(index: number, item: HoppRESTParam) {
-      updateRESTParam(index, item)
-    },
-    deleteParam(index: number) {
-      deleteRESTParam(index)
-    },
-    clearContent() {
-      deleteAllRESTParams()
-    },
-  },
+    console.error(e)
+  }
 })
+
+const bulkEditor = ref<any | null>(null)
+
+useCodemirror(bulkEditor, bulkParams, {
+  extendedEditorConfig: {
+    mode: "text/x-yaml",
+    placeholder: t("state.bulk_mode_placeholder").toString(),
+  },
+  linter: null,
+  completer: null,
+})
+
+const params$ = useReadonlyStream(restParams$, [])
+
+watch(
+  params$,
+  (newValue) => {
+    if (
+      (newValue[newValue.length - 1]?.key !== "" ||
+        newValue[newValue.length - 1]?.value !== "") &&
+      newValue.length
+    )
+      addParam()
+  },
+  { deep: true }
+)
+
+const addParam = () => {
+  addRESTParam({ key: "", value: "", active: true })
+}
+
+const updateParam = (index: number, item: HoppRESTParam) => {
+  updateRESTParam(index, item)
+}
+
+const deleteParam = (index: number) => {
+  deleteRESTParam(index)
+}
+
+const clearContent = () => {
+  deleteAllRESTParams()
+}
+
+const EXPERIMENTAL_URL_BAR_ENABLED = useSetting("EXPERIMENTAL_URL_BAR_ENABLED")
 </script>

packages/hoppscotch-app/components/http/PreRequestScript.vue

@@ -24,6 +24,13 @@
           :title="$t('app.wiki')"
           svg="help-circle"
         />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="corner-down-left"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear')"
@@ -34,17 +41,7 @@
     </div>
     <div class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
-        <SmartJsEditor
-          v-model="preRequestScript"
-          :options="{
-            maxLines: Infinity,
-            minLines: 16,
-            autoScrollEditorIntoView: true,
-            showPrintMargin: false,
-            useWorker: false,
-          }"
-          complete-mode="pre"
-        />
+        <div ref="preRrequestEditor"></div>
       </div>
       <div
         class="
@@ -84,29 +81,44 @@
   </AppSection>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { usePreRequestScript } from "~/newstore/RESTSession"
-import preRequestScriptSnippets from "~/helpers/preRequestScriptSnippets"
+import snippets from "~/helpers/preRequestScriptSnippets"
+import "codemirror/mode/javascript/javascript"
+import { useCodemirror } from "~/helpers/editor/codemirror"
+import linter from "~/helpers/editor/linting/preRequest"
+import completer from "~/helpers/editor/completion/preRequest"
 
-export default defineComponent({
-  setup() {
-    const preRequestScript = usePreRequestScript()
+const {
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
-    const useSnippet = (script: string) => {
-      preRequestScript.value += script
-    }
+const preRequestScript = usePreRequestScript()
 
-    const clearContent = () => {
-      preRequestScript.value = ""
-    }
+const preRrequestEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)
 
-    return {
-      preRequestScript,
-      snippets: preRequestScriptSnippets,
-      useSnippet,
-      clearContent,
-    }
-  },
-})
+useCodemirror(
+  preRrequestEditor,
+  preRequestScript,
+  reactive({
+    extendedEditorConfig: {
+      mode: "application/javascript",
+      lineWrapping: linewrapEnabled,
+      placeholder: t("preRequest.javascript_code").toString(),
+    },
+    linter,
+    completer,
+  })
+)
+
+const useSnippet = (script: string) => {
+  preRequestScript.value += script
+}
+
+const clearContent = () => {
+  preRequestScript.value = ""
+}
 </script>

packages/hoppscotch-app/components/http/RawBody.vue

@@ -24,6 +24,13 @@
           :title="$t('app.wiki')"
           svg="help-circle"
         />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="corner-down-left"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear')"
@@ -55,82 +62,87 @@
         />
       </div>
     </div>
-    <div class="relative">
-      <SmartAceEditor
-        v-model="rawParamsBody"
-        :lang="rawInputEditorLang"
-        :options="{
-          maxLines: Infinity,
-          minLines: 16,
-          autoScrollEditorIntoView: true,
-          showPrintMargin: false,
-          useWorker: false,
-        }"
-        styles="border-b border-dividerLight"
-      />
-    </div>
+    <div ref="rawBodyParameters"></div>
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { computed, reactive, ref, useContext } from "@nuxtjs/composition-api"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import { getEditorLangForMimeType } from "~/helpers/editorutils"
 import { pluckRef } from "~/helpers/utils/composables"
 import { useRESTRequestBody } from "~/newstore/RESTSession"
+import "codemirror/mode/yaml/yaml"
+import "codemirror/mode/xml/xml"
+import "codemirror/mode/css/css"
+import "codemirror/mode/htmlmixed/htmlmixed"
+import "codemirror/mode/javascript/javascript"
 
-export default defineComponent({
-  props: {
-    contentType: {
-      type: String,
-      required: true,
+const props = defineProps<{
+  contentType: string
+}>()
+
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
+const rawParamsBody = pluckRef(useRESTRequestBody(), "body")
+const prettifyIcon = ref("align-left")
+
+const rawInputEditorLang = computed(() =>
+  getEditorLangForMimeType(props.contentType)
+)
+const linewrapEnabled = ref(true)
+const rawBodyParameters = ref<any | null>(null)
+
+useCodemirror(
+  rawBodyParameters,
+  rawParamsBody,
+  reactive({
+    extendedEditorConfig: {
+      lineWrapping: linewrapEnabled,
+      mode: rawInputEditorLang,
+      placeholder: t("request.raw_body").toString(),
     },
-  },
-  setup() {
-    return {
-      rawParamsBody: pluckRef(useRESTRequestBody(), "body"),
-      prettifyIcon: "align-left",
+    linter: null,
+    completer: null,
+  })
+)
+
+const clearContent = () => {
+  rawParamsBody.value = ""
+}
+
+const uploadPayload = (e: InputEvent) => {
+  const file = e.target.files[0]
+  if (file !== undefined && file !== null) {
+    const reader = new FileReader()
+    reader.onload = ({ target }) => {
+      rawParamsBody.value = target?.result
     }
-  },
-  computed: {
-    rawInputEditorLang() {
-      return getEditorLangForMimeType(this.contentType)
-    },
-  },
-  methods: {
-    clearContent() {
-      this.rawParamsBody = ""
-    },
-    uploadPayload() {
-      const file = this.$refs.payload.files[0]
-      if (file !== undefined && file !== null) {
-        const reader = new FileReader()
-        reader.onload = ({ target }) => {
-          this.rawParamsBody = target.result
-        }
-        reader.readAsText(file)
-        this.$toast.success(this.$t("state.file_imported"), {
-          icon: "attach_file",
-        })
-      } else {
-        this.$toast.error(this.$t("action.choose_file"), {
-          icon: "attach_file",
-        })
-      }
-      this.$refs.payload.value = ""
-    },
-    prettifyRequestBody() {
-      try {
-        const jsonObj = JSON.parse(this.rawParamsBody)
-        this.rawParamsBody = JSON.stringify(jsonObj, null, 2)
-        this.prettifyIcon = "check"
-        setTimeout(() => (this.prettifyIcon = "align-left"), 1000)
-      } catch (e) {
-        console.error(e)
-        this.$toast.error(`${this.$t("error.json_prettify_invalid_body")}`, {
-          icon: "error_outline",
-        })
-      }
-    },
-  },
-})
+    reader.readAsText(file)
+    $toast.success(t("state.file_imported").toString(), {
+      icon: "attach_file",
+    })
+  } else {
+    $toast.error(t("action.choose_file").toString(), {
+      icon: "attach_file",
+    })
+  }
+}
+const prettifyRequestBody = () => {
+  try {
+    const jsonObj = JSON.parse(rawParamsBody.value)
+    rawParamsBody.value = JSON.stringify(jsonObj, null, 2)
+    prettifyIcon.value = "check"
+    setTimeout(() => (prettifyIcon.value = "align-left"), 1000)
+  } catch (e) {
+    console.error(e)
+    $toast.error(`${t("error.json_prettify_invalid_body")}`, {
+      icon: "error_outline",
+    })
+  }
+}
 </script>

packages/hoppscotch-app/components/http/ResponseMeta.vue

@@ -10,19 +10,19 @@
       "
     >
       <div class="flex space-x-2 pb-4">
-        <div class="flex flex-col space-y-4 items-end">
+        <div class="flex flex-col space-y-4 text-right items-end">
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.request.send_request") }}
           </span>
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.show_all") }}
           </span>
-          <!-- <span class="flex flex-1 items-center">
+          <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.command_menu") }}
           </span>
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.help_menu") }}
-          </span> -->
+          </span>
         </div>
         <div class="flex flex-col space-y-4">
           <div class="flex">
@@ -33,12 +33,12 @@
             <span class="shortcut-key">{{ getSpecialKey() }}</span>
             <span class="shortcut-key">K</span>
           </div>
-          <!-- <div class="flex">
+          <div class="flex">
             <span class="shortcut-key">/</span>
           </div>
           <div class="flex">
             <span class="shortcut-key">?</span>
-          </div> -->
+          </div>
         </div>
       </div>
       <ButtonSecondary
@@ -102,26 +102,23 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { computed } from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 
-export default defineComponent({
-  props: {
-    response: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  computed: {
-    statusCategory() {
-      return findStatusGroup(this.response.statusCode)
-    },
-  },
-  methods: {
-    getSpecialKey: getPlatformSpecialKey,
-  },
+const props = defineProps<{
+  response: HoppRESTResponse
+}>()
+
+const statusCategory = computed(() => {
+  if (
+    props.response.type === "loading" ||
+    props.response.type === "network_fail"
+  )
+    return ""
+  return findStatusGroup(props.response.statusCode)
 })
 </script>
 

packages/hoppscotch-app/components/http/Tests.vue

@@ -24,6 +24,13 @@
           :title="$t('app.wiki')"
           svg="help-circle"
         />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="corner-down-left"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear')"
@@ -34,17 +41,7 @@
     </div>
     <div class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
-        <SmartJsEditor
-          v-model="testScript"
-          :options="{
-            maxLines: Infinity,
-            minLines: 16,
-            autoScrollEditorIntoView: true,
-            showPrintMargin: false,
-            useWorker: false,
-          }"
-          complete-mode="test"
-        />
+        <div ref="testScriptEditor"></div>
       </div>
       <div
         class="
@@ -85,11 +82,38 @@
 </template>
 
 <script setup lang="ts">
+import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { useTestScript } from "~/newstore/RESTSession"
 import testSnippets from "~/helpers/testSnippets"
+import "codemirror/mode/javascript/javascript"
+import { useCodemirror } from "~/helpers/editor/codemirror"
+import linter from "~/helpers/editor/linting/testScript"
+import completer from "~/helpers/editor/completion/testScript"
+
+const {
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
 const testScript = useTestScript()
 
+const testScriptEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)
+
+useCodemirror(
+  testScriptEditor,
+  testScript,
+  reactive({
+    extendedEditorConfig: {
+      mode: "application/javascript",
+      lineWrapping: linewrapEnabled,
+      placeholder: t("test.javascript_code").toString(),
+    },
+    linter,
+    completer,
+  })
+)
+
 const useSnippet = (script: string) => {
   testScript.value += script
 }