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",