Merge branch 'main' into i18n

2021-12-30 16:14:54 +05:30
parent 1dca0fd9ad dbb0582613
commit 3baebb4ec8
61 changed files with 743 additions and 487 deletions
--- a/package.json
+++ b/package.json
@@ -21,10 +21,10 @@
  ],
  "dependencies": {
    "husky": "^7.0.4",
-    "lint-staged": "^12.1.3"
+    "lint-staged": "^12.1.4"
  },
  "devDependencies": {
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^15.0.0"
+    "@commitlint/cli": "^16.0.0",
+    "@commitlint/config-conventional": "^16.0.0"
  }
 }
--- a/packages/codemirror-lang-graphql/package.json
+++ b/packages/codemirror-lang-graphql/package.json
@@ -23,8 +23,8 @@
  "devDependencies": {
    "@lezer/generator": "^0.15.0",
    "mocha": "^9.0.1",
-    "rollup": "^2.61.1",
-    "rollup-plugin-dts": "^4.0.1",
+    "rollup": "^2.62.0",
+    "rollup-plugin-dts": "^4.1.0",
    "rollup-plugin-ts": "^2.0.4",
    "typescript": "^4.5.4"
  },
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -246,7 +246,7 @@ button {
  @apply transform;
  @apply origin-top-left;
  @apply scale-75;
-  @apply -translate-y-5;
+  @apply -translate-y-4;
  @apply translate-x-1;
 }

--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -85,7 +85,7 @@
                  svg="user"
                />
              </template>
-              <div class="flex px-2 flex-col">
+              <div class="flex text-tiny px-2 flex-col">
                <span class="inline-flex truncate font-semibold">
                  {{ currentUser.displayName }}
                </span>
--- a/packages/hoppscotch-app/components/app/Interceptor.vue
+++ b/packages/hoppscotch-app/components/app/Interceptor.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col space-y-4 p-4 items-start">
+  <div class="flex flex-col space-y-4 p-4">
    <div class="flex flex-col">
-      <h2 class="inline-flex font-semibold text-secondaryDark pb-2">
+      <h2 class="inline-flex font-semibold text-secondaryDark pb-1">
        {{ t("settings.interceptor") }}
      </h2>
-      <p class="inline-flex">
+      <p class="inline-flex text-tiny">
        {{ t("settings.interceptor_description") }}
      </p>
    </div>
@@ -13,6 +13,27 @@
      :selected="interceptorSelection"
      @change="toggleSettingKey"
    />
+    <div
+      v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
+      class="flex space-x-2"
+    >
+      <ButtonSecondary
+        to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
+        blank
+        svg="brands/chrome"
+        label="Chrome"
+        outline
+        class="!flex-1"
+      />
+      <ButtonSecondary
+        to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+        blank
+        svg="brands/firefox"
+        label="Firefox"
+        outline
+        class="!flex-1"
+      />
+    </div>
  </div>
 </template>

--- a/packages/hoppscotch-app/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/ImportExport.vue
@@ -277,6 +277,7 @@ const createCollectionGist = async () => {

 const fileImported = () => {
  toast.success(t("state.file_imported").toString())
+  hideModal()
 }

 const failedImport = () => {
@@ -403,6 +404,10 @@ const parsePostmanRequest = ({
    headers: [] as { name?: string; type?: string }[],
    params: [] as { disabled?: boolean }[],
    bodyParams: [] as { type?: string }[],
+    body: {
+      body: "",
+      contentType: "application/json",
+    },
    rawParams: "",
    rawInput: false,
    contentType: "",
@@ -418,31 +423,40 @@ const parsePostmanRequest = ({
    if (requestObjectUrl) {
      pwRequest.url = requestObjectUrl[1]
      pwRequest.path = requestObjectUrl[2] ? requestObjectUrl[2] : ""
+    } else {
+      pwRequest.url = request.url.raw
    }
  }
+
  pwRequest.method = request.method
  const itemAuth = request.auth ? request.auth : ""
  const authType = itemAuth ? itemAuth.type : ""
-  if (authType === "basic") {
-    pwRequest.auth = "Basic Auth"
-    pwRequest.httpUser =
-      itemAuth.basic[0].key === "username"
-        ? itemAuth.basic[0].value
-        : itemAuth.basic[1].value
-    pwRequest.httpPassword =
-      itemAuth.basic[0].key === "password"
-        ? itemAuth.basic[0].value
-        : itemAuth.basic[1].value
-  } else if (authType === "oauth2") {
-    pwRequest.auth = "OAuth 2.0"
-    pwRequest.bearerToken =
-      itemAuth.oauth2[0].key === "accessToken"
-        ? itemAuth.oauth2[0].value
-        : itemAuth.oauth2[1].value
-  } else if (authType === "bearer") {
-    pwRequest.auth = "Bearer Token"
-    pwRequest.bearerToken = itemAuth.bearer[0].value
+
+  try {
+    if (authType === "basic") {
+      pwRequest.auth = "Basic Auth"
+      pwRequest.httpUser =
+        itemAuth.basic[0].key === "username"
+          ? itemAuth.basic[0].value
+          : itemAuth.basic[1].value
+      pwRequest.httpPassword =
+        itemAuth.basic[0].key === "password"
+          ? itemAuth.basic[0].value
+          : itemAuth.basic[1].value
+    } else if (authType === "oauth2") {
+      pwRequest.auth = "OAuth 2.0"
+      pwRequest.bearerToken =
+        itemAuth.oauth2[0].key === "accessToken"
+          ? itemAuth.oauth2[0].value
+          : itemAuth.oauth2[1].value
+    } else if (authType === "bearer") {
+      pwRequest.auth = "Bearer Token"
+      pwRequest.bearerToken = itemAuth.bearer[0].value
+    }
+  } catch (error) {
+    console.error(error)
  }
+
  const requestObjectHeaders = request.header
  if (requestObjectHeaders) {
    pwRequest.headers = requestObjectHeaders
@@ -470,6 +484,12 @@ const parsePostmanRequest = ({
    } else if (request.body.mode === "raw") {
      pwRequest.rawInput = true
      pwRequest.rawParams = request.body.raw
+      try {
+        const body = JSON.parse(request.body.raw)
+        pwRequest.body.body = JSON.stringify(body, null, 2)
+      } catch (error) {
+        console.error(error)
+      }
    }
  }
  return translateToNewRequest(pwRequest)
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -323,9 +323,9 @@ const bulkHeaders = ref("")
 watch(bulkHeaders, () => {
  try {
    const transformation = bulkHeaders.value.split("\n").map((item) => ({
-      key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
+      key: item.substring(0, item.indexOf(":")).trim().replace(/^#/, ""),
      value: item.substring(item.indexOf(":") + 1).trim(),
-      active: !item.trim().startsWith("//"),
+      active: !item.trim().startsWith("#"),
    }))
    setGQLHeaders(transformation as GQLHeader[])
  } catch (e) {
@@ -414,8 +414,8 @@ const editBulkHeadersLine = (index: number, item?: GQLHeader | null) => {
    .reduce((all, header, pIndex) => {
      const current =
        index === pIndex && item != null
-          ? `${item.active ? "" : "//"}${item.key}: ${item.value}`
-          : `${header.active ? "" : "//"}${header.key}: ${header.value}`
+          ? `${item.active ? "" : "#"}${item.key}: ${item.value}`
+          : `${header.active ? "" : "#"}${header.key}: ${header.value}`
      return [...all, current]
    }, [] as string[])
    .join("\n")
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -29,6 +29,7 @@
                ? 'radio_button_checked'
                : 'radio_button_unchecked'
            "
+            :active="authName === 'None'"
            @click.native="
              () => {
                authType = 'none'
@@ -43,6 +44,7 @@
                ? 'radio_button_checked'
                : 'radio_button_unchecked'
            "
+            :active="authName === 'Basic Auth'"
            @click.native="
              () => {
                authType = 'basic'
@@ -57,6 +59,7 @@
                ? 'radio_button_checked'
                : 'radio_button_unchecked'
            "
+            :active="authName === 'Bearer'"
            @click.native="
              () => {
                authType = 'bearer'
@@ -71,6 +74,7 @@
                ? 'radio_button_checked'
                : 'radio_button_unchecked'
            "
+            :active="authName === 'OAuth 2.0'"
            @click.native="
              () => {
                authType = 'oauth-2'
@@ -85,6 +89,7 @@
                ? 'radio_button_checked'
                : 'radio_button_unchecked'
            "
+            :active="authName === 'API key'"
            @click.native="
              () => {
                authType = 'api-key'
@@ -223,6 +228,7 @@
                    ? 'radio_button_checked'
                    : 'radio_button_unchecked'
                "
+                :active="addTo === 'Headers'"
                :label="'Headers'"
                @click.native="
                  () => {
@@ -237,6 +243,7 @@
                    ? 'radio_button_checked'
                    : 'radio_button_unchecked'
                "
+                :active="addTo === 'Query params'"
                :label="'Query params'"
                @click.native="
                  () => {
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -188,9 +188,9 @@ useCodemirror(bulkEditor, bulkHeaders, {
 watch(bulkHeaders, () => {
  try {
    const transformation = bulkHeaders.value.split("\n").map((item) => ({
-      key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
+      key: item.substring(0, item.indexOf(":")).trim().replace(/^#/, ""),
      value: item.substring(item.indexOf(":") + 1).trim(),
-      active: !item.trim().startsWith("//"),
+      active: !item.trim().startsWith("#"),
    }))
    setRESTHeaders(transformation as HoppRESTHeader[])
  } catch (e) {
@@ -218,14 +218,12 @@ watch(
 onBeforeUpdate(() => editBulkHeadersLine(-1, null))

 const editBulkHeadersLine = (index: number, item?: HoppRESTHeader | null) => {
-  const headers = headers$.value
-
-  bulkHeaders.value = headers
+  bulkHeaders.value = headers$.value
    .reduce((all, header, pIndex) => {
      const current =
        index === pIndex && item != null
-          ? `${item.active ? "" : "//"}${item.key}: ${item.value}`
-          : `${header.active ? "" : "//"}${header.key}: ${header.value}`
+          ? `${item.active ? "" : "#"}${item.key}: ${item.value}`
+          : `${header.active ? "" : "#"}${header.key}: ${header.value}`
      return [...all, current]
    }, [])
    .join("\n")
--- a/packages/hoppscotch-app/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-app/components/http/ImportCurl.vue
@@ -84,6 +84,7 @@ const handleImport = () => {
    const endpoint = origin + pathname
    const headers: HoppRESTHeader[] = []
    const params: HoppRESTParam[] = []
+    const body = parsedCurl.body
    if (parsedCurl.query) {
      for (const key of Object.keys(parsedCurl.query)) {
        const val = parsedCurl.query[key]!
@@ -114,6 +115,7 @@ const handleImport = () => {
        })
      }
    }
+
    const method = parsedCurl.method.toUpperCase()

    setRESTRequest(
@@ -131,7 +133,7 @@ const handleImport = () => {
        },
        body: {
          contentType: "application/json",
-          body: "",
+          body,
        },
      })
    )
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -169,9 +169,9 @@ const bulkParams = ref("")
 watch(bulkParams, () => {
  try {
    const transformation = bulkParams.value.split("\n").map((item) => ({
-      key: item.substring(0, item.indexOf(":")).trim().replace(/^\/\//, ""),
+      key: item.substring(0, item.indexOf(":")).trim().replace(/^#/, ""),
      value: item.substring(item.indexOf(":") + 1).trim(),
-      active: !item.trim().startsWith("//"),
+      active: !item.trim().startsWith("#"),
    }))
    setRESTParams(transformation as HoppRESTParam[])
  } catch (e) {
@@ -211,14 +211,12 @@ watch(
 onBeforeUpdate(() => editBulkParamsLine(-1, null))

 const editBulkParamsLine = (index: number, item?: HoppRESTParam | null) => {
-  const params = params$.value
-
-  bulkParams.value = params
+  bulkParams.value = params$.value
    .reduce((all, param, pIndex) => {
      const current =
        index === pIndex && item != null
-          ? `${item.active ? "" : "//"}${item.key}: ${item.value}`
-          : `${param.active ? "" : "//"}${param.key}: ${param.value}`
+          ? `${item.active ? "" : "#"}${item.key}: ${item.value}`
+          : `${param.active ? "" : "#"}${param.key}: ${param.value}`
      return [...all, current]
    }, [])
    .join("\n")
--- a/packages/hoppscotch-app/components/http/Response.vue
+++ b/packages/hoppscotch-app/components/http/Response.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-1 flex-col">
    <HttpResponseMeta :response="response" />
    <LensesResponseBodyRenderer
      v-if="!loading && hasResponse"
--- a/packages/hoppscotch-app/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/components/http/ResponseMeta.vue
@@ -69,11 +69,11 @@
          {{ t("error.network_fail") }}
        </span>
        <span
-          class="max-w-sm text-secondaryLight text-center mb-4 whitespace-normal"
+          class="max-w-sm text-secondaryLight text-center mb-6 whitespace-normal"
        >
          {{ t("helpers.network_fail") }}
        </span>
-        <AppInterceptor />
+        <AppInterceptor class="border border-dividerLight rounded" />
      </div>
      <div
        v-if="response.type === 'script_fail'"
@@ -89,7 +89,7 @@
          {{ t("error.script_fail") }}
        </span>
        <span
-          class="max-w-sm text-secondaryLight text-center mb-4 whitespace-normal"
+          class="max-w-sm text-secondaryLight text-center mb-6 whitespace-normal"
        >
          {{ t("helpers.script_fail") }}
        </span>
--- a/packages/hoppscotch-app/components/smart/ChangeLanguage.vue
+++ b/packages/hoppscotch-app/components/smart/ChangeLanguage.vue
@@ -16,15 +16,23 @@
        </span>
      </template>
      <NuxtLink
-        v-for="(locale, index) in $i18n.locales.filter(
-          ({ code }) => code !== $i18n.locale
-        )"
-        :key="`locale-${String(index)}`"
+        v-for="(locale, index) in $i18n.locales"
+        :key="`locale-${index}`"
        :to="switchLocalePath(locale.code)"
-        @click="$refs.language.tippy().hide()"
+        @click="language.tippy().hide()"
      >
-        <SmartItem :label="locale.name" />
+        <SmartItem
+          :label="locale.name"
+          :active-info-icon="$i18n.locale === locale.code"
+          :info-icon="$i18n.locale === locale.code ? 'done' : null"
+        />
      </NuxtLink>
    </tippy>
  </span>
 </template>
+
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+
+const language = ref<any | null>(null)
+</script>
--- a/packages/hoppscotch-app/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-app/components/smart/EnvInput.vue
@@ -115,6 +115,7 @@ export default defineComponent({

  methods: {
    handlePaste(ev) {
+      this.handleChange()
      this.$emit("paste", { event: ev, previousValue: this.internalValue })
    },
    handleChange() {
--- a/packages/hoppscotch-app/components/smart/FontSizePicker.vue
+++ b/packages/hoppscotch-app/components/smart/FontSizePicker.vue
@@ -22,10 +22,11 @@
        :icon="
          size === active ? 'radio_button_checked' : 'radio_button_unchecked'
        "
+        :active="size === active"
        @click.native="
          () => {
            setActiveFont(size)
-            $refs.fontSize.tippy().hide()
+            fontSize.tippy().hide()
          }
        "
      />
@@ -34,6 +35,7 @@
 </template>

 <script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
 import {
  HoppFontSizes,
  HoppFontSize,
@@ -46,6 +48,7 @@ const t = useI18n()

 const fontSizes = HoppFontSizes
 const active = useSetting("FONT_SIZE")
+const fontSize = ref<any | null>(null)

 const getFontSizeName = (size: HoppFontSize) => {
  return t(`settings.font_size_${size}`)
--- a/packages/hoppscotch-app/components/smart/Item.vue
+++ b/packages/hoppscotch-app/components/smart/Item.vue
@@ -24,22 +24,22 @@
    >
      <i
        v-if="icon"
+        class="opacity-75 material-icons"
        :class="[
-          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          label ? (reverse ? 'ml-4' : 'mr-4') : '',
          { 'text-accent': active },
        ]"
-        class="material-icons"
      >
        {{ icon }}
      </i>
      <SmartIcon
        v-if="svg"
        :name="svg"
+        class="opacity-75 svg-icons"
        :class="[
-          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          label ? (reverse ? 'ml-4' : 'mr-4') : '',
          { 'text-accent': active },
        ]"
-        class="svg-icons"
      />
    </span>
    <SmartSpinner v-else class="mr-4 text-secondaryDark" />
--- a/packages/hoppscotch-app/components/smart/Radio.vue
+++ b/packages/hoppscotch-app/components/smart/Radio.vue
@@ -1,16 +1,16 @@
 <template>
-  <label
-    class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
+  <div
+    class="cursor-pointer flex flex-nowrap transition flex-1 items-center group hover:text-secondaryDark"
+    @click="$emit('change', value)"
  >
-    <input
-      type="radio"
-      :value="value"
-      :checked="value === selected"
-      class="appearance-none cursor-pointer mr-4 transition rounded-full h-4 w-4 border-2 border-divider group-hover:border-accentDark checked:border-4 checked:border-accent focus:outline-none"
-      @change="$emit('change', value)"
-    />
-    <span class="font-semibold transition">{{ label }}</span>
-  </label>
+    <span class="inline-flex mr-4">
+      <i v-if="value === selected" class="text-accent material-icons">
+        radio_button_checked
+      </i>
+      <i v-else class="material-icons">radio_button_unchecked</i>
+    </span>
+    <span class="font-semibold inline-flex">{{ label }}</span>
+  </div>
 </template>

 <script>
--- a/packages/hoppscotch-app/components/smart/RadioGroup.vue
+++ b/packages/hoppscotch-app/components/smart/RadioGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col space-y-4 items-start">
+  <div class="flex flex-col space-y-4">
    <SmartRadio
      v-for="(radio, index) in radios"
      :key="`radio-${index}`"
--- a/packages/hoppscotch-app/components/smart/Toggle.vue
+++ b/packages/hoppscotch-app/components/smart/Toggle.vue
@@ -3,12 +3,12 @@
    class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
    @click="$emit('change')"
  >
-    <label ref="toggle" class="toggle" :class="{ on: on }">
+    <span ref="toggle" class="toggle" :class="{ on: on }">
      <span class="handle"></span>
-    </label>
-    <label class="cursor-pointer font-semibold pl-0 align-middle">
+    </span>
+    <span class="cursor-pointer font-semibold pl-0 align-middle">
      <slot></slot>
-    </label>
+    </span>
  </div>
 </template>

--- a/packages/hoppscotch-app/components/tab/Primary.vue
+++ b/packages/hoppscotch-app/components/tab/Primary.vue
@@ -15,16 +15,16 @@
  >
    <i
      v-if="icon"
-      :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
-      class="material-icons"
+      class="opacity-75 material-icons"
+      :class="label ? (reverse ? 'ml-4' : 'mr-4') : ''"
    >
      {{ icon }}
    </i>
    <SmartIcon
      v-if="svg"
      :name="svg"
-      :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
-      class="svg-icons"
+      class="opacity-75 svg-icons"
+      :class="label ? (reverse ? 'ml-4' : 'mr-4') : ''"
    />
    {{ label }}
  </SmartLink>
--- a/packages/hoppscotch-app/components/teams/Edit.vue
+++ b/packages/hoppscotch-app/components/teams/Edit.vue
@@ -111,6 +111,7 @@
                        ? 'radio_button_checked'
                        : 'radio_button_unchecked'
                    "
+                    :active="member.role === 'OWNER'"
                    @click.native="
                      () => {
                        updateMemberRole(member.userID, 'OWNER')
@@ -125,6 +126,7 @@
                        ? 'radio_button_checked'
                        : 'radio_button_unchecked'
                    "
+                    :active="member.role === 'EDITOR'"
                    @click.native="
                      () => {
                        updateMemberRole(member.userID, 'EDITOR')
@@ -139,6 +141,7 @@
                        ? 'radio_button_checked'
                        : 'radio_button_unchecked'
                    "
+                    :active="member.role === 'VIEWER'"
                    @click.native="
                      () => {
                        updateMemberRole(member.userID, 'VIEWER')
--- a/packages/hoppscotch-app/components/teams/Invite.vue
+++ b/packages/hoppscotch-app/components/teams/Invite.vue
@@ -166,6 +166,7 @@
                      ? 'radio_button_checked'
                      : 'radio_button_unchecked'
                  "
+                  :active="invitee.value === 'OWNER'"
                  @click.native="
                    () => {
                      updateNewInviteeRole(index, 'OWNER')
@@ -180,6 +181,7 @@
                      ? 'radio_button_checked'
                      : 'radio_button_unchecked'
                  "
+                  :active="invitee.value === 'EDITOR'"
                  @click.native="
                    () => {
                      updateNewInviteeRole(index, 'EDITOR')
@@ -194,6 +196,7 @@
                      ? 'radio_button_checked'
                      : 'radio_button_unchecked'
                  "
+                  :active="invitee.value === 'VIEWER'"
                  @click.native="
                    () => {
                      updateNewInviteeRole(index, 'VIEWER')
--- a/packages/hoppscotch-app/helpers/curlparser.ts
+++ b/packages/hoppscotch-app/helpers/curlparser.ts
@@ -73,6 +73,7 @@ const parseCurlCommand = (curlCommand: string) => {
  curlCommand = curlCommand.replace(/--request /, "-X ")
  curlCommand = curlCommand.replace(/--header /, "-H ")
  curlCommand = curlCommand.replace(/--url /, " ")
+  curlCommand = curlCommand.replace(/-d /, "--data ")

  // yargs parses -XPOST as separate arguments. just prescreen for it.
  curlCommand = curlCommand.replace(/ -XPOST/, " -X POST")
@@ -82,6 +83,12 @@ const parseCurlCommand = (curlCommand: string) => {
  curlCommand = curlCommand.replace(/ -XDELETE/, " -X DELETE")
  curlCommand = curlCommand.trim()
  const parsedArguments = parser(curlCommand)
+
+  const rawData =
+    parsedArguments.data ||
+    parsedArguments.dataRaw ||
+    parsedArguments["data-raw"]
+
  let cookieString
  let cookies
  let url = parsedArguments._[1]
@@ -187,6 +194,21 @@ const parseCurlCommand = (curlCommand: string) => {
    method = "get"
  }

+  let body = ""
+
+  if (rawData) {
+    try {
+      const tempBody = JSON.parse(rawData)
+      if (tempBody) {
+        body = JSON.stringify(tempBody, null, 2)
+      }
+    } catch (e) {
+      console.error(
+        "Error parsing JSON data. Please ensure that the data is valid JSON."
+      )
+    }
+  }
+
  const compressed = !!parsedArguments.compressed
  let urlObject = URL.parse(url) // eslint-disable-line

@@ -227,6 +249,7 @@ const parseCurlCommand = (curlCommand: string) => {
    query,
    headers,
    method,
+    body,
    cookies,
    cookieString: cookieString?.replace("Cookie: ", ""),
    multipartUploads,
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -29,12 +29,17 @@ import { jsonLanguage } from "@codemirror/lang-json"
 import { GQLLanguage } from "@hoppscotch/codemirror-lang-graphql"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
+import { StreamLanguage } from "@codemirror/stream-parser"
+import { html } from "@codemirror/legacy-modes/mode/xml"
+import { shell } from "@codemirror/legacy-modes/mode/shell"
+import { yaml } from "@codemirror/legacy-modes/mode/yaml"
 import { isJSONContentType } from "../utils/contenttypes"
 import { useStreamSubscriber } from "../utils/composables"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
 import { basicSetup, baseTheme, baseHighlightStyle } from "./themes/baseTheme"
 import { HoppEnvironmentPlugin } from "./extensions/HoppEnvironment"
+// TODO: Migrate from legacy mode

 type ExtendedEditorConfig = {
  mode: string
@@ -131,6 +136,12 @@ const getLanguage = (langMime: string): Language | null => {
    return javascriptLanguage
  } else if (langMime === "graphql") {
    return GQLLanguage
+  } else if (langMime === "htmlmixed") {
+    return StreamLanguage.define(html)
+  } else if (langMime === "application/x-sh") {
+    return StreamLanguage.define(shell)
+  } else if (langMime === "text/x-yaml") {
+    return StreamLanguage.define(yaml)
  }

  // None matched, so return null
--- a/packages/hoppscotch-app/helpers/network.ts
+++ b/packages/hoppscotch-app/helpers/network.ts
@@ -147,7 +147,7 @@ export function createRESTNetworkRequestStream(
    TE.bind("res", ({ req, headers, params }) =>
      runAppropriateStrategy({
        method: req.method as any,
-        url: req.effectiveFinalURL,
+        url: req.effectiveFinalURL.trim(),
        headers,
        params,
        data: req.effectiveFinalBody,
--- a/packages/hoppscotch-app/locales/af.json
+++ b/packages/hoppscotch-app/locales/af.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Grootmaatbewerking",
-    "bulk_mode_placeholder": "Inskrywings word geskei deur nuwe lyn\nSleutels en waardes word geskei deur:\nStel // voor op enige ry wat u wil byvoeg, maar hou dit uitgeskakel",
+    "bulk_mode_placeholder": "Inskrywings word geskei deur nuwe lyn\nSleutels en waardes word geskei deur:\nStel # voor op enige ry wat u wil byvoeg, maar hou dit uitgeskakel",
    "cleared": "Uitgevee",
    "connected": "Koppel",
    "connected_to": "Gekoppel aan {naam}",
--- a/packages/hoppscotch-app/locales/ar.json
+++ b/packages/hoppscotch-app/locales/ar.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "التحرير بالجملة",
-    "bulk_mode_placeholder": "يتم فصل الإدخالات بواسطة سطر جديد\nالمفاتيح والقيم مفصولة بـ:\nقم بإلحاق // بأي صف تريد إضافته ولكن يظل معطلاً",
+    "bulk_mode_placeholder": "يتم فصل الإدخالات بواسطة سطر جديد\nالمفاتيح والقيم مفصولة بـ:\nقم بإلحاق # بأي صف تريد إضافته ولكن يظل معطلاً",
    "cleared": "مسح",
    "connected": "متصل",
    "connected_to": "متصل بـ {name}",
--- a/packages/hoppscotch-app/locales/ca.json
+++ b/packages/hoppscotch-app/locales/ca.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Edició massiva",
-    "bulk_mode_placeholder": "Les entrades estan separades per una nova línia\nLes claus i els valors estan separats per:\nPrepara // a qualsevol fila que vulguis afegir, però continua desactivat",
+    "bulk_mode_placeholder": "Les entrades estan separades per una nova línia\nLes claus i els valors estan separats per:\nPrepara # a qualsevol fila que vulguis afegir, però continua desactivat",
    "cleared": "Esborrat",
    "connected": "Connectat",
    "connected_to": "Connectat a {name}",
--- a/packages/hoppscotch-app/locales/cn.json
+++ b/packages/hoppscotch-app/locales/cn.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "批量编辑",
-    "bulk_mode_placeholder": "条目之间使用换行符分隔\n键和值之间使用冒号分隔\n将 // 置于行首以添加该行条目并保持禁用",
+    "bulk_mode_placeholder": "条目之间使用换行符分隔\n键和值之间使用冒号分隔\n将 # 置于行首以添加该行条目并保持禁用",
    "cleared": "已清除",
    "connected": "已连接",
    "connected_to": "已连接到 {name}",
--- a/packages/hoppscotch-app/locales/cs.json
+++ b/packages/hoppscotch-app/locales/cs.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Hromadná úprava",
-    "bulk_mode_placeholder": "Záznamy jsou odděleny novým řádkem\nKlíče a hodnoty jsou odděleny:\nPředřadte // do libovolného řádku, který chcete přidat, ale ponechte jej deaktivovaný",
+    "bulk_mode_placeholder": "Záznamy jsou odděleny novým řádkem\nKlíče a hodnoty jsou odděleny:\nPředřadte # do libovolného řádku, který chcete přidat, ale ponechte jej deaktivovaný",
    "cleared": "Vymazáno",
    "connected": "Připojeno",
    "connected_to": "Připojeno k {name}",
--- a/packages/hoppscotch-app/locales/da.json
+++ b/packages/hoppscotch-app/locales/da.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Masseredigering",
-    "bulk_mode_placeholder": "Indlæg adskilles med ny linje\nNøgler og værdier adskilles af:\nForbered // til enhver række, du vil tilføje, men behold den deaktiveret",
+    "bulk_mode_placeholder": "Indlæg adskilles med ny linje\nNøgler og værdier adskilles af:\nForbered # til enhver række, du vil tilføje, men behold den deaktiveret",
    "cleared": "Ryddet",
    "connected": "Tilsluttet",
    "connected_to": "Forbundet til {name}",
--- a/packages/hoppscotch-app/locales/de.json
+++ b/packages/hoppscotch-app/locales/de.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Bulk-Bearbeitung",
-    "bulk_mode_placeholder": "Einträge werden durch Zeilenumbruch getrennt\nSchlüssel und Werte werden getrennt durch:\nStellen Sie // jeder Zeile voran, die Sie hinzufügen möchten, aber lassen Sie sie deaktiviert",
+    "bulk_mode_placeholder": "Einträge werden durch Zeilenumbruch getrennt\nSchlüssel und Werte werden getrennt durch:\nStellen Sie # jeder Zeile voran, die Sie hinzufügen möchten, aber lassen Sie sie deaktiviert",
    "cleared": "Gelöscht",
    "connected": "In Verbindung gebracht",
    "connected_to": "Verbunden mit {name}",
--- a/packages/hoppscotch-app/locales/el.json
+++ b/packages/hoppscotch-app/locales/el.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Μαζική επεξεργασία",
-    "bulk_mode_placeholder": "Οι εγγραφές χωρίζονται με νέα γραμμή\nΤα κλειδιά και οι τιμές διαχωρίζονται με:\nΠροσθήκη // σε οποιαδήποτε γραμμή που θέλετε να προσθέσετε αλλά διατηρήστε απενεργοποιημένη",
+    "bulk_mode_placeholder": "Οι εγγραφές χωρίζονται με νέα γραμμή\nΤα κλειδιά και οι τιμές διαχωρίζονται με:\nΠροσθήκη # σε οποιαδήποτε γραμμή που θέλετε να προσθέσετε αλλά διατηρήστε απενεργοποιημένη",
    "cleared": "Εκκαθαρίστηκε",
    "connected": "Συνδεδεμένος",
    "connected_to": "Συνδέθηκε με το {name}",
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -214,7 +214,7 @@
  "helpers": {
    "authorization": "The authorization header will be automatically generated when you send the request.",
    "generate_documentation_first": "Generate documentation first",
-    "network_fail": "Unable to reach the API endpoint. Check your network connection or turn on Proxy Interceptor and try again.",
+    "network_fail": "Unable to reach the API endpoint. Check your network connection or select a different Interceptor and try again.",
    "offline": "You seem to be offline. Data in this workspace might not be up to date.",
    "offline_short": "You seem to be offline.",
    "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Bulk edit",
-    "bulk_mode_placeholder": "Entries are separated by newline\nKeys and values are separated by :\nPrepend // to any row you want to add but keep disabled",
+    "bulk_mode_placeholder": "Entries are separated by newline\nKeys and values are separated by :\nPrepend # to any row you want to add but keep disabled",
    "cleared": "Cleared",
    "connected": "Connected",
    "connected_to": "Connected to {name}",
--- a/packages/hoppscotch-app/locales/es.json
+++ b/packages/hoppscotch-app/locales/es.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Edición masiva",
-    "bulk_mode_placeholder": "Las entradas están separadas por una nueva línea\nLas claves y los valores están separados por:\nAnteponer // a cualquier fila que desee agregar pero mantener deshabilitada",
+    "bulk_mode_placeholder": "Las entradas están separadas por una nueva línea\nLas claves y los valores están separados por:\nAnteponer # a cualquier fila que desee agregar pero mantener deshabilitada",
    "cleared": "Despejado",
    "connected": "Conectado",
    "connected_to": "Conectado a {name}",
--- a/packages/hoppscotch-app/locales/fi.json
+++ b/packages/hoppscotch-app/locales/fi.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Joukkomuokkaus",
-    "bulk_mode_placeholder": "Merkinnät erotetaan rivillä\nAvaimet ja arvot erotetaan toisistaan:\nEsitä // mihin tahansa riviin, jonka haluat lisätä, mutta pidä poissa käytöstä",
+    "bulk_mode_placeholder": "Merkinnät erotetaan rivillä\nAvaimet ja arvot erotetaan toisistaan:\nEsitä # mihin tahansa riviin, jonka haluat lisätä, mutta pidä poissa käytöstä",
    "cleared": "Selvitetty",
    "connected": "Yhdistetty",
    "connected_to": "Yhdistetty kohteeseen {name}",
--- a/packages/hoppscotch-app/locales/fr.json
+++ b/packages/hoppscotch-app/locales/fr.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Modification groupée",
-    "bulk_mode_placeholder": "Les entrées sont séparées par une nouvelle ligne\nLes clés et les valeurs sont séparées par :\nAjoutez // à n'importe quelle ligne que vous souhaitez ajouter mais garder désactivée",
+    "bulk_mode_placeholder": "Les entrées sont séparées par une nouvelle ligne\nLes clés et les valeurs sont séparées par :\nAjoutez # à n'importe quelle ligne que vous souhaitez ajouter mais garder désactivée",
    "cleared": "Effacé",
    "connected": "Connecté",
    "connected_to": "Connecté à {nom}",
--- a/packages/hoppscotch-app/locales/he.json
+++ b/packages/hoppscotch-app/locales/he.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "עריכה בכמות גדולה",
-    "bulk_mode_placeholder": "הערכים מופרדים באמצעות שורה חדשה\nמפתחות וערכים מופרדים על ידי:\nהזינו // לכל שורה שתרצו להוסיף אך תשמרו",
+    "bulk_mode_placeholder": "הערכים מופרדים באמצעות שורה חדשה\nמפתחות וערכים מופרדים על ידי:\nהזינו # לכל שורה שתרצו להוסיף אך תשמרו",
    "cleared": "מְבוּעָר",
    "connected": "מְחוּבָּר",
    "connected_to": "מחובר אל {name}",
--- a/packages/hoppscotch-app/locales/hu.json
+++ b/packages/hoppscotch-app/locales/hu.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Tömeges szerkesztés",
-    "bulk_mode_placeholder": "A bejegyzéseket új sor választja el\nA kulcsokat és az értékeket a következők választják el egymástól:\nElőtag // bármelyik sorhoz, amelyet hozzá szeretne adni, de továbbra is letiltva",
+    "bulk_mode_placeholder": "A bejegyzéseket új sor választja el\nA kulcsokat és az értékeket a következők választják el egymástól:\nElőtag # bármelyik sorhoz, amelyet hozzá szeretne adni, de továbbra is letiltva",
    "cleared": "Törölt",
    "connected": "csatlakoztatva",
    "connected_to": "Összekapcsolva a következővel: {name}",
--- a/packages/hoppscotch-app/locales/it.json
+++ b/packages/hoppscotch-app/locales/it.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Modifica in blocco",
-    "bulk_mode_placeholder": "Le voci sono separate tramite Invio\nChiavi e valori sono separati da:\nAnteponi // a qualsiasi riga che desideri aggiungere ma lasciare disabilitata",
+    "bulk_mode_placeholder": "Le voci sono separate tramite Invio\nChiavi e valori sono separati da:\nAnteponi # a qualsiasi riga che desideri aggiungere ma lasciare disabilitata",
    "cleared": "Cancellato",
    "connected": "Connesso",
    "connected_to": "Connesso a {nome}",
--- a/packages/hoppscotch-app/locales/ja.json
+++ b/packages/hoppscotch-app/locales/ja.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "一括編集",
-    "bulk_mode_placeholder": "エントリは改行で区切られます\nキーと値は次のように区切られます。\n追加する行の前に//を追加しますが、無効のままにします",
+    "bulk_mode_placeholder": "エントリは改行で区切られます\nキーと値は次のように区切られます。\n追加する行の前に#を追加しますが、無効のままにします",
    "cleared": "クリア",
    "connected": "接続済み",
    "connected_to": "{名前}に接続しました",
--- a/packages/hoppscotch-app/locales/ko.json
+++ b/packages/hoppscotch-app/locales/ko.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "일괄 수정",
-    "bulk_mode_placeholder": "항목은 줄 바꿈으로 구분됩니다.\n키와 값은 다음으로 구분됩니다.\n// 추가하고 싶지만 비활성화된 상태로 유지되는 행에 추가",
+    "bulk_mode_placeholder": "항목은 줄 바꿈으로 구분됩니다.\n키와 값은 다음으로 구분됩니다.\n# 추가하고 싶지만 비활성화된 상태로 유지되는 행에 추가",
    "cleared": "클리어",
    "connected": "연결됨",
    "connected_to": "{name}에 연결됨",
--- a/packages/hoppscotch-app/locales/nl.json
+++ b/packages/hoppscotch-app/locales/nl.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Bulkbewerking",
-    "bulk_mode_placeholder": "Invoer wordt gescheiden door een nieuwe regel\nSleutels en waarden worden gescheiden door:\nVoeg // toe aan elke rij die u wilt toevoegen, maar blijf uitgeschakeld",
+    "bulk_mode_placeholder": "Invoer wordt gescheiden door een nieuwe regel\nSleutels en waarden worden gescheiden door:\nVoeg # toe aan elke rij die u wilt toevoegen, maar blijf uitgeschakeld",
    "cleared": "gewist",
    "connected": "Verbonden",
    "connected_to": "Verbonden met {naam}",
--- a/packages/hoppscotch-app/locales/no.json
+++ b/packages/hoppscotch-app/locales/no.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Masse redigering",
-    "bulk_mode_placeholder": "Oppføringer skilles med ny linje\nNøkler og verdier er atskilt med:\nForbered // til hvilken som helst rad du vil legge til, men behold den deaktivert",
+    "bulk_mode_placeholder": "Oppføringer skilles med ny linje\nNøkler og verdier er atskilt med:\nForbered # til hvilken som helst rad du vil legge til, men behold den deaktivert",
    "cleared": "Ryddet",
    "connected": "Tilkoblet",
    "connected_to": "Koblet til {name}",
--- a/packages/hoppscotch-app/locales/pl.json
+++ b/packages/hoppscotch-app/locales/pl.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Edycja zbiorcza",
-    "bulk_mode_placeholder": "Wpisy są oddzielone znakiem nowej linii\nKlucze i wartości są oddzielone:\nDołącz // do dowolnego wiersza, który chcesz dodać, ale pozostaw wyłączony",
+    "bulk_mode_placeholder": "Wpisy są oddzielone znakiem nowej linii\nKlucze i wartości są oddzielone:\nDołącz # do dowolnego wiersza, który chcesz dodać, ale pozostaw wyłączony",
    "cleared": "Wyczyszczono",
    "connected": "Połączony",
    "connected_to": "Połączony z {name}",
--- a/packages/hoppscotch-app/locales/pt-br.json
+++ b/packages/hoppscotch-app/locales/pt-br.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Edição em massa",
-    "bulk_mode_placeholder": "As entradas são separadas por nova linha\nChaves e valores são separados por:\nAnexar // a qualquer linha que você deseja adicionar, mas manter desativado",
+    "bulk_mode_placeholder": "As entradas são separadas por nova linha\nChaves e valores são separados por:\nAnexar # a qualquer linha que você deseja adicionar, mas manter desativado",
    "cleared": "Liberado",
    "connected": "Conectado",
    "connected_to": "Conectado a {name}",
--- a/packages/hoppscotch-app/locales/pt.json
+++ b/packages/hoppscotch-app/locales/pt.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Edição em massa",
-    "bulk_mode_placeholder": "As entradas são separadas por nova linha\nChaves e valores são separados por:\nAnexar // a qualquer linha que você deseja adicionar, mas manter desativado",
+    "bulk_mode_placeholder": "As entradas são separadas por nova linha\nChaves e valores são separados por:\nAnexar # a qualquer linha que você deseja adicionar, mas manter desativado",
    "cleared": "Liberado",
    "connected": "Conectado",
    "connected_to": "Conectado a {name}",
--- a/packages/hoppscotch-app/locales/ro.json
+++ b/packages/hoppscotch-app/locales/ro.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Editare în bloc",
-    "bulk_mode_placeholder": "Intrările sunt separate prin linie nouă\nCheile și valorile sunt separate prin:\nPrepend // la orice rând pe care doriți să îl adăugați, dar păstrați-l dezactivat",
+    "bulk_mode_placeholder": "Intrările sunt separate prin linie nouă\nCheile și valorile sunt separate prin:\nPrepend # la orice rând pe care doriți să îl adăugați, dar păstrați-l dezactivat",
    "cleared": "Eliminat",
    "connected": "Conectat",
    "connected_to": "Conectat la {name}",
--- a/packages/hoppscotch-app/locales/ru.json
+++ b/packages/hoppscotch-app/locales/ru.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Bulk edit",
-    "bulk_mode_placeholder": "Entries are separated by newline\nKeys and values are separated by :\nPrepend // to any row you want to add but keep disabled",
+    "bulk_mode_placeholder": "Entries are separated by newline\nKeys and values are separated by :\nPrepend # to any row you want to add but keep disabled",
    "cleared": "Очищено",
    "connected": "Связаны",
    "connected_to": "Подключено к {name}",
--- a/packages/hoppscotch-app/locales/sr.json
+++ b/packages/hoppscotch-app/locales/sr.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Скупно уређивање",
-    "bulk_mode_placeholder": "Уноси су одвојени новим редом\nКључеви и вредности су одвојени:\nДодати // било ком реду који желите да додате, али га онемогућите",
+    "bulk_mode_placeholder": "Уноси су одвојени новим редом\nКључеви и вредности су одвојени:\nДодати # било ком реду који желите да додате, али га онемогућите",
    "cleared": "Очишћено",
    "connected": "Повезан",
    "connected_to": "Повезано са {наме}",
--- a/packages/hoppscotch-app/locales/sv.json
+++ b/packages/hoppscotch-app/locales/sv.json
@@ -444,7 +444,7 @@
  },
  "state": {
    "bulk_mode": "Massredigering",
-    "bulk_mode_placeholder": "Posterna separeras med ny rad\nNycklar och värden separeras med:\nFörbered // till vilken rad du vill lägga till men behåll inaktiverad",
+    "bulk_mode_placeholder": "Posterna separeras med ny rad\nNycklar och värden separeras med:\nFörbered # till vilken rad du vill lägga till men behåll inaktiverad",
    "cleared": "Rensat",
    "connected": "Ansluten",
    "connected_to": "Ansluten till {name}",
--- a/packages/hoppscotch-app/locales/tr.json
+++ b/packages/hoppscotch-app/locales/tr.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Toplu düzenleme",
-    "bulk_mode_placeholder": "Girişler yeni satırla ayrılır\nAnahtarlar ve değerler şu şekilde ayrılır:\nEklemek istediğiniz ancak devre dışı bırakmak istediğiniz herhangi bir satırın başına // ekleyin",
+    "bulk_mode_placeholder": "Girişler yeni satırla ayrılır\nAnahtarlar ve değerler şu şekilde ayrılır:\nEklemek istediğiniz ancak devre dışı bırakmak istediğiniz herhangi bir satırın başına # ekleyin",
    "cleared": "Temizlendi",
    "connected": "bağlı",
    "connected_to": "{name} ile bağlantılı",
--- a/packages/hoppscotch-app/locales/tw.json
+++ b/packages/hoppscotch-app/locales/tw.json
@@ -444,7 +444,7 @@
  },
  "state": {
    "bulk_mode": "大量編輯",
-    "bulk_mode_placeholder": "條目之間使用換行符分隔\n鍵和值之間使用冒號分隔\n將 // 置於行首以新增該行條目並保持停用",
+    "bulk_mode_placeholder": "條目之間使用換行符分隔\n鍵和值之間使用冒號分隔\n將 # 置於行首以新增該行條目並保持停用",
    "cleared": "已清除",
    "connected": "已連線",
    "connected_to": "已連線到 {name}",
--- a/packages/hoppscotch-app/locales/uk.json
+++ b/packages/hoppscotch-app/locales/uk.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Масове редагування",
-    "bulk_mode_placeholder": "Записи розділені новим рядком\nКлючі та значення розділені:\nДодати // до будь -якого рядка, який потрібно додати, але залишити вимкненим",
+    "bulk_mode_placeholder": "Записи розділені новим рядком\nКлючі та значення розділені:\nДодати # до будь -якого рядка, який потрібно додати, але залишити вимкненим",
    "cleared": "Очищено",
    "connected": "Підключено",
    "connected_to": "Підключено до {name}",
--- a/packages/hoppscotch-app/locales/vi.json
+++ b/packages/hoppscotch-app/locales/vi.json
@@ -447,7 +447,7 @@
  },
  "state": {
    "bulk_mode": "Chỉnh sửa hàng loạt",
-    "bulk_mode_placeholder": "Các mục nhập được phân tách bằng dòng mới\nCác khóa và giá trị được phân tách bằng:\nThêm // vào bất kỳ hàng nào bạn muốn thêm nhưng vẫn bị vô hiệu hóa",
+    "bulk_mode_placeholder": "Các mục nhập được phân tách bằng dòng mới\nCác khóa và giá trị được phân tách bằng:\nThêm # vào bất kỳ hàng nào bạn muốn thêm nhưng vẫn bị vô hiệu hóa",
    "cleared": "Đã xóa",
    "connected": "Đã kết nối",
    "connected_to": "Đã kết nối với {name}",
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -45,14 +45,16 @@
    "@codemirror/lang-javascript": "^0.19.3",
    "@codemirror/lang-json": "^0.19.1",
    "@codemirror/language": "^0.19.7",
+    "@codemirror/legacy-modes": "^0.19.0",
    "@codemirror/lint": "^0.19.3",
    "@codemirror/matchbrackets": "^0.19.3",
    "@codemirror/rectangular-selection": "^0.19.1",
    "@codemirror/search": "^0.19.5",
    "@codemirror/state": "^0.19.6",
+    "@codemirror/stream-parser": "^0.19.3",
    "@codemirror/text": "^0.19.5",
    "@codemirror/tooltip": "^0.19.10",
-    "@codemirror/view": "^0.19.34",
+    "@codemirror/view": "^0.19.37",
    "@hoppscotch/codemirror-lang-graphql": "workspace:^0.1.0",
    "@hoppscotch/data": "workspace:^0.1.0",
    "@hoppscotch/js-sandbox": "workspace:^1.0.0",
@@ -70,11 +72,11 @@
    "acorn": "^8.6.0",
    "acorn-walk": "^8.2.0",
    "axios": "^0.24.0",
-    "core-js": "^3.20.0",
+    "core-js": "^3.20.1",
    "esprima": "^4.0.1",
    "firebase": "^9.6.1",
    "fp-ts": "^2.11.5",
-    "fuse.js": "^6.4.6",
+    "fuse.js": "^6.5.3",
    "graphql": "^15.5.0",
    "graphql-language-service-interface": "^2.9.1",
    "graphql-language-service-parser": "^1.10.0",
@@ -149,12 +151,12 @@
    "jest": "^27.4.5",
    "jest-serializer-vue": "^2.0.2",
    "npm-run-all": "^4.1.5",
-    "nuxt-windicss": "^2.0.12",
+    "nuxt-windicss": "^2.2.1",
    "prettier": "^2.5.1",
    "raw-loader": "^4.0.2",
-    "sass": "^1.45.0",
+    "sass": "^1.45.1",
    "sass-loader": "^10.2.0",
-    "stylelint": "^14.1.0",
+    "stylelint": "^14.2.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-config-standard-scss": "^3.0.0",
--- a/packages/hoppscotch-app/pages/settings.vue
+++ b/packages/hoppscotch-app/pages/settings.vue
@@ -128,17 +128,6 @@
              </span>
            </div>
            <div class="flex flex-col space-y-2 py-4">
-              <span>
-                <SmartItem
-                  to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
-                  blank
-                  svg="brands/firefox"
-                  label="Firefox"
-                  :info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
-                  :active-info-icon="hasFirefoxExtInstalled"
-                  outline
-                />
-              </span>
              <span>
                <SmartItem
                  to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
@@ -150,6 +139,17 @@
                  outline
                />
              </span>
+              <span>
+                <SmartItem
+                  to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+                  blank
+                  svg="brands/firefox"
+                  label="Firefox"
+                  :info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
+                  :active-info-icon="hasFirefoxExtInstalled"
+                  outline
+                />
+              </span>
            </div>
            <div class="space-y-4 py-4">
              <div class="flex items-center">
--- a/packages/hoppscotch-data/package.json
+++ b/packages/hoppscotch-data/package.json
@@ -27,6 +27,6 @@
  },
  "homepage": "https://github.com/hoppscotch/hoppscotch#readme",
  "devDependencies": {
-    "tsup": "^5.11.6"
+    "tsup": "^5.11.9"
  }
 }
--- a/packages/hoppscotch-js-sandbox/package.json
+++ b/packages/hoppscotch-js-sandbox/package.json
@@ -35,16 +35,16 @@
  "dependencies": {
    "fp-ts": "^2.11.5",
    "lodash": "^4.17.21",
-    "quickjs-emscripten": "^0.13.0"
+    "quickjs-emscripten": "^0.15.0"
  },
  "devDependencies": {
    "@digitak/esrun": "^3.1.1",
    "@relmify/jest-fp-ts": "^1.1.1",
    "@types/jest": "^27.0.3",
    "@types/lodash": "^4.14.178",
-    "@types/node": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
+    "@types/node": "^17.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/parser": "^5.8.0",
    "eslint": "^8.5.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml