refactor: merge branch 'main' into refactor/monorepo

packages/hoppscotch-app/components/graphql/Response.vue

@@ -18,6 +18,13 @@
         {{ $t("response.title") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="corner-down-left"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
@@ -34,21 +41,7 @@
         />
       </div>
     </div>
-    <SmartAceEditor
-      v-if="responseString"
-      :value="responseString"
-      :lang="'json'"
-      :lint="false"
-      :options="{
-        maxLines: Infinity,
-        minLines: 16,
-        autoScrollEditorIntoView: true,
-        readOnly: true,
-        showPrintMargin: false,
-        useWorker: false,
-      }"
-      styles="border-b border-dividerLight"
-    />
+    <div v-if="responseString" ref="schemaEditor"></div>
     <div
       v-else
       class="
@@ -60,35 +53,21 @@
       "
     >
       <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">
             {{ $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">
-            <span class="shortcut-key">{{ getSpecialKey() }}</span>
-            <span class="shortcut-key">G</span>
-          </div>
-          <div class="flex">
-            <span class="shortcut-key">{{ getSpecialKey() }}</span>
-            <span class="shortcut-key">K</span>
-          </div>
-          <!-- <div class="flex">
             <span class="shortcut-key">/</span>
           </div>
           <div class="flex">
             <span class="shortcut-key">?</span>
-          </div> -->
+          </div>
         </div>
       </div>
       <ButtonSecondary
@@ -103,77 +82,66 @@
   </AppSection>
 </template>
 
-<script lang="ts">
-import {
-  defineComponent,
-  PropType,
-  ref,
-  useContext,
-} from "@nuxtjs/composition-api"
-import { GQLConnection } from "~/helpers/GQLConnection"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
+<script setup lang="ts">
+import { reactive, ref, useContext } from "@nuxtjs/composition-api"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import { gqlResponse$ } from "~/newstore/GQLSession"
 
-export default defineComponent({
-  props: {
-    conn: {
-      type: Object as PropType<GQLConnection>,
-      required: true,
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
+const responseString = useReadonlyStream(gqlResponse$, "")
+
+const schemaEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)
+
+useCodemirror(
+  schemaEditor,
+  responseString,
+  reactive({
+    extendedEditorConfig: {
+      mode: "application/ld+json",
+      readOnly: true,
+      lineWrapping: linewrapEnabled,
     },
-  },
-  setup() {
-    const {
-      $toast,
-      app: { i18n },
-    } = useContext()
-    const t = i18n.t.bind(i18n)
+    linter: null,
+    completer: null,
+  })
+)
 
-    const responseString = useReadonlyStream(gqlResponse$, "")
+const downloadResponseIcon = ref("download")
+const copyResponseIcon = ref("copy")
 
-    const downloadResponseIcon = ref("download")
-    const copyResponseIcon = ref("copy")
+const copyResponse = () => {
+  copyToClipboard(responseString.value!)
+  copyResponseIcon.value = "check"
+  setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
+}
 
-    const copyResponse = () => {
-      copyToClipboard(responseString.value!)
-      copyResponseIcon.value = "check"
-      setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
-    }
-
-    const downloadResponse = () => {
-      const dataToWrite = responseString.value
-      const file = new Blob([dataToWrite!], { type: "application/json" })
-      const a = document.createElement("a")
-      const url = URL.createObjectURL(file)
-      a.href = url
-      a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}`
-      document.body.appendChild(a)
-      a.click()
-      downloadResponseIcon.value = "check"
-      $toast.success(t("state.download_started").toString(), {
-        icon: "downloading",
-      })
-      setTimeout(() => {
-        document.body.removeChild(a)
-        URL.revokeObjectURL(url)
-        downloadResponseIcon.value = "download"
-      }, 1000)
-    }
-
-    return {
-      responseString,
-
-      downloadResponseIcon,
-      copyResponseIcon,
-
-      downloadResponse,
-      copyResponse,
-
-      getSpecialKey: getPlatformSpecialKey,
-    }
-  },
-})
+const downloadResponse = () => {
+  const dataToWrite = responseString.value
+  const file = new Blob([dataToWrite!], { type: "application/json" })
+  const a = document.createElement("a")
+  const url = URL.createObjectURL(file)
+  a.href = url
+  a.download = `${url.split("/").pop()!.split("#")[0].split("?")[0]}`
+  document.body.appendChild(a)
+  a.click()
+  downloadResponseIcon.value = "check"
+  $toast.success(t("state.download_started").toString(), {
+    icon: "downloading",
+  })
+  setTimeout(() => {
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+    downloadResponseIcon.value = "download"
+  }, 1000)
+}
 </script>
 
 <style lang="scss" scoped>