feat: codemirror editot for raw body

components/http/RawBody.vue

@@ -56,81 +56,82 @@
       </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 ref="rawBodyParameters" class="w-full block"></div>
     </div>
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { computed, 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,
-    },
-  },
-  setup() {
-    return {
-      rawParamsBody: pluckRef(useRESTRequestBody(), "body"),
-      prettifyIcon: "align-left",
-    }
-  },
-  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",
-        })
-      }
-    },
+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 rawBodyParameters = ref<any | null>(null)
+
+useCodemirror(rawBodyParameters, rawParamsBody, {
+  extendedEditorConfig: {
+    mode: rawInputEditorLang.value,
   },
+  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
+    }
+    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>

helpers/editorutils.js

@@ -1,12 +1,12 @@
 const mimeToMode = {
-  "text/plain": "plain_text",
-  "text/html": "html",
-  "application/xml": "xml",
-  "application/hal+json": "json",
-  "application/vnd.api+json": "json",
-  "application/json": "json",
+  "text/plain": "text/x-yaml",
+  "text/html": "htmlmixed",
+  "application/xml": "application/xml",
+  "application/hal+json": "application/ld+json",
+  "application/vnd.api+json": "application/ld+json",
+  "application/json": "application/ld+json",
 }
 
 export function getEditorLangForMimeType(mimeType) {
-  return mimeToMode[mimeType] || "plain_text"
+  return mimeToMode[mimeType] || "text/x-yaml"
 }