feat: reintroduce html highlighting to the editor

packages/hoppscotch-app/helpers/editor/codemirror.ts

@@ -29,12 +29,15 @@ import { jsonLanguage } from "@codemirror/lang-json"
 import { GQLLanguage } from "@hoppscotch/codemirror-lang-graphql"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
+import { StreamLanguage } from "@codemirror/stream-parser"
+import { html } from "@codemirror/legacy-modes/mode/xml"
 import { isJSONContentType } from "../utils/contenttypes"
 import { useStreamSubscriber } from "../utils/composables"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
 import { basicSetup, baseTheme, baseHighlightStyle } from "./themes/baseTheme"
 import { HoppEnvironmentPlugin } from "./extensions/HoppEnvironment"
+// TODO: Migrate from legacy mode
 
 type ExtendedEditorConfig = {
   mode: string
@@ -131,6 +134,8 @@ const getLanguage = (langMime: string): Language | null => {
     return javascriptLanguage
   } else if (langMime === "graphql") {
     return GQLLanguage
+  } else if (langMime === "htmlmixed") {
+    return StreamLanguage.define(html)
   }
 
   // None matched, so return null

packages/hoppscotch-app/package.json

@@ -45,11 +45,13 @@
     "@codemirror/lang-javascript": "^0.19.3",
     "@codemirror/lang-json": "^0.19.1",
     "@codemirror/language": "^0.19.7",
+    "@codemirror/legacy-modes": "^0.19.0",
     "@codemirror/lint": "^0.19.3",
     "@codemirror/matchbrackets": "^0.19.3",
     "@codemirror/rectangular-selection": "^0.19.1",
     "@codemirror/search": "^0.19.5",
     "@codemirror/state": "^0.19.6",
+    "@codemirror/stream-parser": "^0.19.3",
     "@codemirror/text": "^0.19.5",
     "@codemirror/tooltip": "^0.19.10",
     "@codemirror/view": "^0.19.37",

pnpm-lock.yaml

@@ -54,11 +54,13 @@ importers:
       '@codemirror/lang-javascript': ^0.19.3
       '@codemirror/lang-json': ^0.19.1
       '@codemirror/language': ^0.19.7
+      '@codemirror/legacy-modes': ^0.19.0
       '@codemirror/lint': ^0.19.3
       '@codemirror/matchbrackets': ^0.19.3
       '@codemirror/rectangular-selection': ^0.19.1
       '@codemirror/search': ^0.19.5
       '@codemirror/state': ^0.19.6
+      '@codemirror/stream-parser': ^0.19.3
       '@codemirror/text': ^0.19.5
       '@codemirror/tooltip': ^0.19.10
       '@codemirror/view': ^0.19.37
@@ -180,11 +182,13 @@ importers:
       '@codemirror/lang-javascript': 0.19.3
       '@codemirror/lang-json': 0.19.1
       '@codemirror/language': 0.19.7
+      '@codemirror/legacy-modes': 0.19.0
       '@codemirror/lint': 0.19.3
       '@codemirror/matchbrackets': 0.19.3
       '@codemirror/rectangular-selection': 0.19.1
       '@codemirror/search': 0.19.5
       '@codemirror/state': 0.19.6
+      '@codemirror/stream-parser': 0.19.3
       '@codemirror/text': 0.19.5
       '@codemirror/tooltip': 0.19.10
       '@codemirror/view': 0.19.37
@@ -1835,6 +1839,12 @@ packages:
       '@lezer/lr': 0.15.5
     dev: false
 
+  /@codemirror/legacy-modes/0.19.0:
+    resolution: {integrity: sha512-GSPdBNUeyF3nxJ2lztXGp2UoQjn+ggK5z+Kd4tflziecCG1+8mcdudDgFvxDuaTGWyM34S7Ldb4Xv7/XodZtBA==}
+    dependencies:
+      '@codemirror/stream-parser': 0.19.3
+    dev: false
+
   /@codemirror/lint/0.19.3:
     resolution: {integrity: sha512-+c39s05ybD2NjghxkPFsUbH/qBL0cdzKmtHbzUm0RVspeL2OiP7uHYJ6J5+Qr9RjMIPWzcqSauRqxfmCrctUfg==}
     dependencies:
@@ -1919,6 +1929,17 @@ packages:
       '@codemirror/text': 0.19.5
     dev: false
 
+  /@codemirror/stream-parser/0.19.3:
+    resolution: {integrity: sha512-9fV6GgcZSLVvvPCd/SUt00G/Sqt91r0ojEQsgH7koWn4McTFvSujhOs0LHJlQGQRazuuWW1j3eqrv19+E9t40g==}
+    dependencies:
+      '@codemirror/highlight': 0.19.6
+      '@codemirror/language': 0.19.7
+      '@codemirror/state': 0.19.6
+      '@codemirror/text': 0.19.5
+      '@lezer/common': 0.15.10
+      '@lezer/lr': 0.15.5
+    dev: false
+
   /@codemirror/text/0.19.5:
     resolution: {integrity: sha512-Syu5Xc7tZzeUAM/y4fETkT0zgGr48rDG+w4U38bPwSIUr+L9S/7w2wDE1WGNzjaZPz12F6gb1gxWiSTg9ocLow==}
     dev: false