fix: remove basic-setup and drawSelection on codemirror instance to resolve ::selection property

packages/hoppscotch-app/assets/scss/styles.scss

@@ -31,8 +31,11 @@
 }
 
 ::selection {
-  @apply bg-accent;
-  @apply text-accentContrast;
+  @apply bg-divider;
+}
+
+.cm-focused {
+  @apply !outline-none;
 }
 
 input::placeholder,

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

@@ -8,7 +8,6 @@ import {
 } from "@codemirror/state"
 import { Language, LanguageSupport } from "@codemirror/language"
 import { defaultKeymap } from "@codemirror/commands"
-import { basicSetup } from "@codemirror/basic-setup"
 import { Completion, autocompletion } from "@codemirror/autocomplete"
 import { linter } from "@codemirror/lint"
 
@@ -23,7 +22,7 @@ import * as O from "fp-ts/Option"
 import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
-import { baseTheme, baseHighlightStyle } from "./themes/baseTheme"
+import { basicSetup, baseTheme, baseHighlightStyle } from "./themes/baseTheme"
 
 type ExtendedEditorConfig = {
   mode: string

packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts

@@ -1,6 +1,28 @@
-import { EditorView } from "@codemirror/view"
-import { HighlightStyle, tags as t } from "@codemirror/highlight"
-import { foldGutter } from "@codemirror/fold"
+import {
+  EditorView,
+  keymap,
+  highlightSpecialChars,
+  highlightActiveLine,
+} from "@codemirror/view"
+import {
+  HighlightStyle,
+  tags as t,
+  defaultHighlightStyle,
+} from "@codemirror/highlight"
+import { foldKeymap, foldGutter } from "@codemirror/fold"
+
+import { Extension, EditorState } from "@codemirror/state"
+import { history, historyKeymap } from "@codemirror/history"
+import { indentOnInput } from "@codemirror/language"
+import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter"
+import { defaultKeymap } from "@codemirror/commands"
+import { bracketMatching } from "@codemirror/matchbrackets"
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets"
+import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete"
+import { commentKeymap } from "@codemirror/comment"
+import { rectangularSelection } from "@codemirror/rectangular-selection"
+import { lintKeymap } from "@codemirror/lint"
 
 export const baseTheme = EditorView.theme({
   "&": {
@@ -15,8 +37,7 @@ export const baseTheme = EditorView.theme({
     borderColor: "var(--secondary-color)",
   },
   ".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": {
-    backgroundColor: "var(--accent-dark-color)",
-    color: "var(--accent-contrast-color)",
+    backgroundColor: "var(--divider-color)",
   },
   ".cm-panels": {
     backgroundColor: "var(--primary-light-color)",
@@ -46,8 +67,8 @@ export const baseTheme = EditorView.theme({
     outline: "1px solid var(--accent-dark-color)",
   },
   ".cm-matchingBracket, .cm-nonmatchingBracket": {
-    backgroundColor: "var(--accent-dark-color)",
-    color: "var(--accent-contrast-color)",
+    backgroundColor: "var(--divider-color)",
+    outline: "1px solid var(--accent-dark-color)",
   },
   ".cm-gutters": {
     fontFamily: "var(--font-mono)",
@@ -147,7 +168,34 @@ export const baseHighlightStyle = HighlightStyle.define([
   { tag: t.invalid, color: editorInvalidColor },
 ])
 
-export const baseFoldStyle = foldGutter({
+const baseFoldStyle = foldGutter({
   openText: "▾",
   closedText: "▸",
 })
+
+export const basicSetup: Extension = [
+  lineNumbers(),
+  highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  history(),
+  baseFoldStyle,
+  EditorState.allowMultipleSelections.of(true),
+  indentOnInput(),
+  defaultHighlightStyle.fallback,
+  bracketMatching(),
+  closeBrackets(),
+  autocompletion(),
+  rectangularSelection(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+  keymap.of([
+    ...closeBracketsKeymap,
+    ...defaultKeymap,
+    ...searchKeymap,
+    ...historyKeymap,
+    ...foldKeymap,
+    ...commentKeymap,
+    ...completionKeymap,
+    ...lintKeymap,
+  ]),
+]

packages/hoppscotch-app/package.json

@@ -35,13 +35,20 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@codemirror/autocomplete": "^0.19.4",
-    "@codemirror/basic-setup": "^0.19.0",
+    "@codemirror/closebrackets": "^0.19.0",
     "@codemirror/commands": "^0.19.5",
+    "@codemirror/comment": "^0.19.0",
+    "@codemirror/fold": "^0.19.1",
     "@codemirror/gutter": "^0.19.4",
+    "@codemirror/highlight": "^0.19.0",
+    "@codemirror/history": "^0.19.0",
     "@codemirror/lang-javascript": "^0.19.2",
     "@codemirror/lang-json": "^0.19.1",
     "@codemirror/language": "^0.19.3",
     "@codemirror/lint": "^0.19.2",
+    "@codemirror/matchbrackets": "^0.19.3",
+    "@codemirror/rectangular-selection": "^0.19.1",
+    "@codemirror/search": "^0.19.2",
     "@codemirror/state": "^0.19.3",
     "@codemirror/text": "^0.19.5",
     "@codemirror/view": "^0.19.12",