feat: mixed html syntax, light theme for codemiror

components/lenses/renderers/HTMLLensRenderer.vue

@@ -53,10 +53,14 @@
       </div>
     </div>
     <div class="relative">
-      <div ref="htmlResponse" class="w-full block"></div>
+      <div
+        v-show="!previewEnabled"
+        ref="htmlResponse"
+        class="w-full block"
+      ></div>
       <iframe
+        v-show="previewEnabled"
         ref="previewFrame"
-        :class="{ hidden: !previewEnabled }"
         class="covers-response"
         src="about:blank"
       ></iframe>
@@ -68,6 +72,9 @@
 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"
 
@@ -109,7 +116,7 @@ useCodemirror(
   responseBodyText,
   reactive({
     extendedEditorConfig: {
-      mode: "javascript",
+      mode: "htmlmixed",
       readOnly: true,
       lineWrapping: linewrapEnabled,
     },
@@ -170,9 +177,8 @@ const togglePreview = () => {
 
 <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;

components/lenses/renderers/JSONLensRenderer.vue

@@ -100,7 +100,7 @@ useCodemirror(
   jsonBodyText,
   reactive({
     extendedEditorConfig: {
-      mode: "javascript",
+      mode: "application/ld+json",
       readOnly: true,
       lineWrapping: linewrapEnabled,
     },

helpers/editor/codemirror.ts

@@ -1,6 +1,6 @@
 import CodeMirror from "codemirror"
 
-import "codemirror-github-light/lib/codemirror-github-light-theme.css"
+import "codemirror-theme-github/theme/github.css"
 import "codemirror/theme/base16-dark.css"
 import "codemirror/theme/3024-night.css"
 
@@ -162,7 +162,7 @@ export function useCodemirror(
       case "system":
         return "default"
       case "light":
-        return "github-light"
+        return "github"
       case "dark":
         return "base16-dark"
       case "black":

modules/emit-volar-types.ts

@@ -28,12 +28,7 @@ async function getAllVueComponentPaths(): Promise<string[]> {
     if (f.endsWith(".vue")) {
       const componentsIndex = f.split("/").indexOf("components")
 
-      vueFilePaths.push(
-        `./${f
-          .split("/")
-          .slice(componentsIndex)
-          .join("/")}`
-      )
+      vueFilePaths.push(`./${f.split("/").slice(componentsIndex).join("/")}`)
     }
   }
 

package-lock.json

@@ -19,7 +19,7 @@
         "acorn": "^8.5.0",
         "acorn-walk": "^8.2.0",
         "codemirror": "^5.62.3",
-        "codemirror-github-light": "^0.4.2",
+        "codemirror-theme-github": "^1.0.0",
         "core-js": "^3.17.2",
         "esprima": "^4.0.1",
         "firebase": "^9.0.1",
@@ -13116,10 +13116,10 @@
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.3.tgz",
       "integrity": "sha512-zZAyOfN8TU67ngqrxhOgtkSAGV9jSpN1snbl8elPtnh9Z5A11daR405+dhLzLnuXrwX0WCShWlybxPN3QC/9Pg=="
     },
-    "node_modules/codemirror-github-light": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/codemirror-github-light/-/codemirror-github-light-0.4.2.tgz",
-      "integrity": "sha1-iUl8JJWEipRaLNIaqj5Wa4d7FDU="
+    "node_modules/codemirror-theme-github": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/codemirror-theme-github/-/codemirror-theme-github-1.0.0.tgz",
+      "integrity": "sha512-suheFec2wlI4klyqn61MOFXjjrKPZiNY7d2py0OvTd5Z+7AsNxoGKDaS/HI59y7EAG1SkkXW/JQ1Rt2gDMxHfA=="
     },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.1",
@@ -46167,10 +46167,10 @@
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.3.tgz",
       "integrity": "sha512-zZAyOfN8TU67ngqrxhOgtkSAGV9jSpN1snbl8elPtnh9Z5A11daR405+dhLzLnuXrwX0WCShWlybxPN3QC/9Pg=="
     },
-    "codemirror-github-light": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/codemirror-github-light/-/codemirror-github-light-0.4.2.tgz",
-      "integrity": "sha1-iUl8JJWEipRaLNIaqj5Wa4d7FDU="
+    "codemirror-theme-github": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/codemirror-theme-github/-/codemirror-theme-github-1.0.0.tgz",
+      "integrity": "sha512-suheFec2wlI4klyqn61MOFXjjrKPZiNY7d2py0OvTd5Z+7AsNxoGKDaS/HI59y7EAG1SkkXW/JQ1Rt2gDMxHfA=="
     },
     "collect-v8-coverage": {
       "version": "1.0.1",

package.json

@@ -35,7 +35,7 @@
     "acorn": "^8.5.0",
     "acorn-walk": "^8.2.0",
     "codemirror": "^5.62.3",
-    "codemirror-github-light": "^0.4.2",
+    "codemirror-theme-github": "^1.0.0",
     "core-js": "^3.17.2",
     "esprima": "^4.0.1",
     "firebase": "^9.0.1",