feat: codemirror editot for raw body

components/http/RawBody.vue

@@ -56,81 +56,82 @@
       </div>
     </div>
     <div class="relative">
-      <SmartAceEditor
+      <div ref="rawBodyParameters" class="w-full block"></div>
-        v-model="rawParamsBody"
-        :lang="rawInputEditorLang"
-        :options="{
-          maxLines: Infinity,
-          minLines: 16,
-          autoScrollEditorIntoView: true,
-          showPrintMargin: false,
-          useWorker: false,
-        }"
-        styles="border-b border-dividerLight"
-      />
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+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({
+const props = defineProps<{
-  props: {
+  contentType: string
-    contentType: {
+}>()
-      type: String,
+
-      required: true,
+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,
-  setup() {
+  completer: null,
-    return {
+})
-      rawParamsBody: pluckRef(useRESTRequestBody(), "body"),
+
-      prettifyIcon: "align-left",
+const clearContent = () => {
+  rawParamsBody.value = ""
 }
-  },
+
-  computed: {
+const uploadPayload = (e: InputEvent) => {
-    rawInputEditorLang() {
+  const file = e.target.files[0]
-      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
+      rawParamsBody.value = target?.result
     }
     reader.readAsText(file)
-        this.$toast.success(this.$t("state.file_imported"), {
+    $toast.success(t("state.file_imported").toString(), {
       icon: "attach_file",
     })
   } else {
-        this.$toast.error(this.$t("action.choose_file"), {
+    $toast.error(t("action.choose_file").toString(), {
       icon: "attach_file",
     })
   }
-      this.$refs.payload.value = ""
+}
-    },
+const prettifyRequestBody = () => {
-    prettifyRequestBody() {
   try {
-        const jsonObj = JSON.parse(this.rawParamsBody)
+    const jsonObj = JSON.parse(rawParamsBody.value)
-        this.rawParamsBody = JSON.stringify(jsonObj, null, 2)
+    rawParamsBody.value = JSON.stringify(jsonObj, null, 2)
-        this.prettifyIcon = "check"
+    prettifyIcon.value = "check"
-        setTimeout(() => (this.prettifyIcon = "align-left"), 1000)
+    setTimeout(() => (prettifyIcon.value = "align-left"), 1000)
   } catch (e) {
     console.error(e)
-        this.$toast.error(`${this.$t("error.json_prettify_invalid_body")}`, {
+    $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/plain": "text/x-yaml",
-  "text/html": "html",
+  "text/html": "htmlmixed",
-  "application/xml": "xml",
+  "application/xml": "application/xml",
-  "application/hal+json": "json",
+  "application/hal+json": "application/ld+json",
-  "application/vnd.api+json": "json",
+  "application/vnd.api+json": "application/ld+json",
-  "application/json": "json",
+  "application/json": "application/ld+json",
 }
 
 export function getEditorLangForMimeType(mimeType) {
-  return mimeToMode[mimeType] || "plain_text"
+  return mimeToMode[mimeType] || "text/x-yaml"
 }