feat: port ace editor to codemirror

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

components/graphql/Request.vue

@@ -33,45 +33,32 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "@nuxtjs/composition-api"
+<script setup lang="ts">
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { getCurrentStrategyID } from "~/helpers/network"
 import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
 import { gqlHeaders$, gqlURL$, setGQLURL } from "~/newstore/GQLSession"
 
-export default defineComponent({
-  props: {
-    conn: {
-      type: Object as PropType<GQLConnection>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const connected = useReadonlyStream(props.conn.connected$, false)
-    const headers = useReadonlyStream(gqlHeaders$, [])
+const props = defineProps<{
+  conn: GQLConnection
+}>()
 
-    const url = useStream(gqlURL$, "", setGQLURL)
+const connected = useReadonlyStream(props.conn.connected$, false)
+const headers = useReadonlyStream(gqlHeaders$, [])
 
-    const onConnectClick = () => {
-      if (!connected.value) {
-        props.conn.connect(url.value, headers.value as any)
+const url = useStream(gqlURL$, "", setGQLURL)
 
-        logHoppRequestRunToAnalytics({
-          platform: "graphql-schema",
-          strategy: getCurrentStrategyID(),
-        })
-      } else {
-        props.conn.disconnect()
-      }
-    }
+const onConnectClick = () => {
+  if (!connected.value) {
+    props.conn.connect(url.value, headers.value as any)
 
-    return {
-      url,
-      connected,
-      onConnectClick,
-    }
-  },
-})
+    logHoppRequestRunToAnalytics({
+      platform: "graphql-schema",
+      strategy: getCurrentStrategyID(),
+    })
+  } else {
+    props.conn.disconnect()
+  }
+}
 </script>

components/graphql/RequestOptions.vue

@@ -106,19 +106,7 @@
               />
             </div>
           </div>
-          <SmartAceEditor
-            ref="variableEditor"
-            v-model="variableString"
-            :lang="'json'"
-            :options="{
-              maxLines: Infinity,
-              minLines: 16,
-              autoScrollEditorIntoView: true,
-              showPrintMargin: false,
-              useWorker: false,
-            }"
-            styles="border-b border-dividerLight"
-          />
+          <div ref="variableEditor" class="w-full block"></div>
         </AppSection>
       </SmartTab>
 
@@ -323,6 +311,7 @@ import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { getCurrentStrategyID } from "~/helpers/network"
 import { makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { useCodemirror } from "~/helpers/editor/codemirror"
+import "codemirror/mode/javascript/javascript"
 
 const props = defineProps<{
   conn: GQLConnection
@@ -370,6 +359,16 @@ useCodemirror(bulkEditor, bulkHeaders, {
   completer: null,
 })
 
+const variableEditor = ref<any | null>(null)
+
+useCodemirror(variableEditor, variableString, {
+  extendedEditorConfig: {
+    mode: "javascript",
+  },
+  linter: null,
+  completer: null,
+})
+
 const queryEditor = ref<any | null>(null)
 
 const copyQueryIcon = ref("copy")

components/graphql/Response.vue

@@ -59,38 +59,6 @@
         justify-center
       "
     >
-      <div class="flex space-x-2 pb-4">
-        <div class="flex flex-col space-y-4 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> -->
-        </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>
       <ButtonSecondary
         :label="$t('app.documentation')"
         to="https://docs.hoppscotch.io"
@@ -103,77 +71,56 @@
   </AppSection>
 </template>
 
-<script lang="ts">
-import {
-  defineComponent,
-  PropType,
-  ref,
-  useContext,
-} from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { PropType, ref, useContext } from "@nuxtjs/composition-api"
 import { GQLConnection } from "~/helpers/GQLConnection"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
 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,
-    },
-  },
-  setup() {
-    const {
-      $toast,
-      app: { i18n },
-    } = useContext()
-    const t = i18n.t.bind(i18n)
-
-    const responseString = useReadonlyStream(gqlResponse$, "")
-
-    const downloadResponseIcon = ref("download")
-    const copyResponseIcon = ref("copy")
-
-    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,
-    }
+defineProps({
+  conn: {
+    type: Object as PropType<GQLConnection>,
+    required: true,
   },
 })
+
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
+const responseString = useReadonlyStream(gqlResponse$, "")
+
+const downloadResponseIcon = ref("download")
+const copyResponseIcon = ref("copy")
+
+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)
+}
 </script>
 
 <style lang="scss" scoped>