refactor: merge branch 'main' into refactor/monorepo

packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue

@@ -17,6 +17,14 @@
         {{ $t("response.body") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-if="response.body"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="corner-down-left"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
@@ -44,110 +52,131 @@
         />
       </div>
     </div>
-    <div class="relative">
-      <SmartAceEditor
-        :value="responseBodyText"
-        :lang="'html'"
-        :options="{
-          maxLines: Infinity,
-          minLines: 16,
-          autoScrollEditorIntoView: true,
-          readOnly: true,
-          showPrintMargin: false,
-          useWorker: false,
-        }"
-        styles="border-b border-dividerLight"
-      />
-      <iframe
-        ref="previewFrame"
-        :class="{ hidden: !previewEnabled }"
-        class="covers-response"
-        src="about:blank"
-      ></iframe>
-    </div>
+    <div v-show="!previewEnabled" ref="htmlResponse"></div>
+    <iframe
+      v-show="previewEnabled"
+      ref="previewFrame"
+      class="covers-response"
+      src="about:blank"
+    ></iframe>
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
-import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+<script setup lang="ts">
+import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
+import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
+import "codemirror/mode/xml/xml"
+import "codemirror/mode/javascript/javascript"
+import "codemirror/mode/css/css"
+import "codemirror/mode/htmlmixed/htmlmixed"
+import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 
-export default defineComponent({
-  mixins: [TextContentRendererMixin],
-  props: {
-    response: { type: Object, default: () => {} },
-  },
-  data() {
-    return {
-      downloadIcon: "download",
-      copyIcon: "copy",
-      previewEnabled: false,
-    }
-  },
-  methods: {
-    downloadResponse() {
-      const dataToWrite = this.responseBodyText
-      const file = new Blob([dataToWrite], { type: "text/html" })
-      const a = document.createElement("a")
-      const url = URL.createObjectURL(file)
-      a.href = url
-      // TODO get uri from meta
-      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
-      document.body.appendChild(a)
-      a.click()
-      this.downloadIcon = "check"
-      this.$toast.success(this.$t("state.download_started"), {
-        icon: "downloading",
-      })
-      setTimeout(() => {
-        document.body.removeChild(a)
-        URL.revokeObjectURL(url)
-        this.downloadIcon = "download"
-      }, 1000)
-    },
-    copyResponse() {
-      copyToClipboard(this.responseBodyText)
-      this.copyIcon = "check"
-      this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "content_paste",
-      })
-      setTimeout(() => (this.copyIcon = "copy"), 1000)
-    },
-    togglePreview() {
-      this.previewEnabled = !this.previewEnabled
-      if (this.previewEnabled) {
-        if (
-          this.$refs.previewFrame.getAttribute("data-previewing-url") ===
-          this.url
-        )
-          return
-        // Use DOMParser to parse document HTML.
-        const previewDocument = new DOMParser().parseFromString(
-          this.responseBodyText,
-          "text/html"
-        )
-        // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
-        previewDocument.head.innerHTML =
-          `<base href="${this.url}">` + previewDocument.head.innerHTML
-        // Finally, set the iframe source to the resulting HTML.
-        this.$refs.previewFrame.srcdoc =
-          previewDocument.documentElement.outerHTML
-        this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
-      }
-    },
-  },
+const props = defineProps<{
+  response: HoppRESTResponse
+}>()
+
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
+const responseBodyText = computed(() => {
+  if (
+    props.response.type === "loading" ||
+    props.response.type === "network_fail"
+  )
+    return ""
+  if (typeof props.response.body === "string") return props.response.body
+  else {
+    const res = new TextDecoder("utf-8").decode(props.response.body)
+    // HACK: Temporary trailing null character issue from the extension fix
+    return res.replace(/\0+$/, "")
+  }
 })
+
+const downloadIcon = ref("download")
+const copyIcon = ref("copy")
+const previewEnabled = ref(false)
+const previewFrame = ref<any | null>(null)
+const url = ref("")
+
+const htmlResponse = ref<any | null>(null)
+const linewrapEnabled = ref(true)
+
+useCodemirror(
+  htmlResponse,
+  responseBodyText,
+  reactive({
+    extendedEditorConfig: {
+      mode: "htmlmixed",
+      readOnly: true,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+  })
+)
+
+const downloadResponse = () => {
+  const dataToWrite = responseBodyText.value
+  const file = new Blob([dataToWrite], { type: "text/html" })
+  const a = document.createElement("a")
+  const url = URL.createObjectURL(file)
+  a.href = url
+  // TODO get uri from meta
+  a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+  document.body.appendChild(a)
+  a.click()
+  downloadIcon.value = "check"
+  $toast.success(t("state.download_started").toString(), {
+    icon: "downloading",
+  })
+  setTimeout(() => {
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+    downloadIcon.value = "download"
+  }, 1000)
+}
+
+const copyResponse = () => {
+  copyToClipboard(responseBodyText.value)
+  copyIcon.value = "check"
+  $toast.success(t("state.copied_to_clipboard").toString(), {
+    icon: "content_paste",
+  })
+  setTimeout(() => (copyIcon.value = "copy"), 1000)
+}
+
+const togglePreview = () => {
+  previewEnabled.value = !previewEnabled.value
+  if (previewEnabled.value) {
+    if (previewFrame.value.getAttribute("data-previewing-url") === url.value)
+      return
+    // Use DOMParser to parse document HTML.
+    const previewDocument = new DOMParser().parseFromString(
+      responseBodyText.value,
+      "text/html"
+    )
+    // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+    previewDocument.head.innerHTML =
+      `<base href="${url.value}">` + previewDocument.head.innerHTML
+    // Finally, set the iframe source to the resulting HTML.
+    previewFrame.value.srcdoc = previewDocument.documentElement.outerHTML
+    previewFrame.value.setAttribute("data-previewing-url", url.value)
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .covers-response {
-  @apply absolute;
-  @apply inset-0;
   @apply bg-white;
+  @apply min-h-64;
   @apply h-full;
   @apply w-full;
   @apply border;
   @apply border-dividerLight;
+  @apply z-5;
 }
 </style>