refactor: init codemirror theming support

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

@@ -25,30 +25,54 @@ import "codemirror/addon/search/jump-to-line"
 import "codemirror/addon/dialog/dialog"
 import "codemirror/addon/selection/active-line"
 
-import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
-
 import {
+  keymap,
+  highlightSpecialChars,
+  drawSelection,
+  highlightActiveLine,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+} from "@codemirror/view"
+import {
+  Extension,
   EditorState,
   Compartment,
   EditorSelection,
   TransactionSpec,
-  Extension,
 } from "@codemirror/state"
-import { EditorView, keymap, ViewPlugin, ViewUpdate } from "@codemirror/view"
+import { history, historyKeymap } from "@codemirror/history"
+import { foldKeymap } from "@codemirror/fold"
+import { indentOnInput, Language, LanguageSupport } from "@codemirror/language"
+import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter"
 import { defaultKeymap } from "@codemirror/commands"
-import { basicSetup } from "@codemirror/basic-setup"
+import { bracketMatching } from "@codemirror/matchbrackets"
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets"
+import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
+import {
+  completionKeymap,
+  Completion,
+  autocompletion,
+} from "@codemirror/autocomplete"
+import { commentKeymap } from "@codemirror/comment"
+import { rectangularSelection } from "@codemirror/rectangular-selection"
+import { defaultHighlightStyle } from "@codemirror/highlight"
+import { lintKeymap, linter } from "@codemirror/lint"
+
+import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
+
 import { javascriptLanguage } from "@codemirror/lang-javascript"
-import { Language, LanguageSupport } from "@codemirror/language"
-import { linter } from "@codemirror/lint"
 import { jsonLanguage } from "@codemirror/lang-json"
-import { Completion, autocompletion } from "@codemirror/autocomplete"
 import { onBeforeUnmount } from "@vue/runtime-dom"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
-import baseTheme from "./themes/baseTheme"
+import { baseThemeFoldStyle } from "./themes/baseTheme"
+import { darkTheme, darkHighlightStyle } from "./themes/darkTheme"
+import { lightTheme, lightHighlightStyle } from "./themes/lightTheme"
+import { blackTheme, blackHighlightStyle } from "./themes/blackTheme"
 import { HoppBgColor } from "~/newstore/settings"
 
 type CodeMirrorOptions = {
@@ -236,6 +260,34 @@ export function useCodemirror(
   }
 }
 
+export const basicSetup: Extension = [
+  lineNumbers(),
+  highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  history(),
+  baseThemeFoldStyle,
+  drawSelection(),
+  EditorState.allowMultipleSelections.of(true),
+  indentOnInput(),
+  defaultHighlightStyle.fallback,
+  bracketMatching(),
+  closeBrackets(),
+  autocompletion(),
+  rectangularSelection(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+  keymap.of([
+    ...closeBracketsKeymap,
+    ...defaultKeymap,
+    ...searchKeymap,
+    ...historyKeymap,
+    ...foldKeymap,
+    ...commentKeymap,
+    ...completionKeymap,
+    ...lintKeymap,
+  ]),
+]
+
 const hoppCompleterExt = (completer: Completer): Extension => {
   return autocompletion({
     override: [
@@ -321,11 +373,29 @@ const getEditorLanguage = (
     O.getOrElseW(() => [])
   )
 
-const getThemeExt = (mode: HoppBgColor) => {
-  // TODO: Implement more themes here
+const getHightlightMode = (mode: HoppBgColor): Extension => {
   switch (mode) {
+    case "light":
+      return lightHighlightStyle
+    case "dark":
+      return darkHighlightStyle
+    case "black":
+      return blackHighlightStyle
     default:
-      return baseTheme
+      return darkHighlightStyle
+  }
+}
+
+const getThemeExt = (mode: HoppBgColor): Extension => {
+  switch (mode) {
+    case "dark":
+      return darkTheme
+    case "black":
+      return blackTheme
+    case "light":
+      return lightTheme
+    case "system":
+      return darkTheme
   }
 }
 
@@ -339,6 +409,7 @@ export function useNewCodemirror(
   const language = new Compartment()
   const lineWrapping = new Compartment()
   const theming = new Compartment()
+  const highlightStyle = new Compartment()
 
   const cachedCursor = ref({
     line: 0,
@@ -355,6 +426,7 @@ export function useNewCodemirror(
     extensions: [
       basicSetup,
       theming.of(getThemeExt($colorMode.value)),
+      highlightStyle.of(getHightlightMode($colorMode.value)),
       ViewPlugin.fromClass(
         class {
           update(update: ViewUpdate) {
@@ -469,7 +541,10 @@ export function useNewCodemirror(
     () => $colorMode.value,
     (newVal) => {
       dispatch({
-        effects: theming.reconfigure(getThemeExt(newVal)),
+        effects: [
+          theming.reconfigure(getThemeExt(newVal)),
+          highlightStyle.reconfigure(getHightlightMode(newVal)),
+        ],
       })
     }
   )