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

pnpm-lock.yaml

@@ -44,13 +44,20 @@ importers:
       '@babel/core': ^7.16.0
       '@babel/preset-env': ^7.16.0
       '@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
@@ -159,13 +166,20 @@ importers:
     dependencies:
       '@apollo/client': 3.4.16_f3f7eb5e21785ef7d5faca94c1a68824
       '@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.6
+      '@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
@@ -1746,26 +1760,6 @@ packages:
       '@lezer/common': 0.15.7
     dev: false
 
-  /@codemirror/basic-setup/0.19.0:
-    resolution: {integrity: sha512-Yhrf7fIz8+INHWOhpWeRwbs8fpc0KsydX9baD7TyYqniLVWyTi0Hwm52mr0f5O+k4YaJPeHAgT3x9gzDXZIvOw==}
-    dependencies:
-      '@codemirror/autocomplete': 0.19.4
-      '@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.6
-      '@codemirror/history': 0.19.0
-      '@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/view': 0.19.12
-    dev: false
-
   /@codemirror/closebrackets/0.19.0:
     resolution: {integrity: sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==}
     dependencies:
@@ -3946,8 +3940,8 @@ packages:
       ufo: 0.7.9
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-27274229.29599f0:
-    resolution: {integrity: sha512-8GyQaBXQh6RelLe5ahXBTZWugaBYKd3cESc+GqxoHlFVy0i2HqZkUggFShDEoT7FCckzfGHTZF5uV04k87D73w==}
+  /@nuxt/kit-edge/3.0.0-27277498.850ef69:
+    resolution: {integrity: sha512-nlRbNf0wZwIuDzUs20AE9O4bE1rcIv3yaA/oYFhqUlXumiEDqHPmiuDAL5Trbe+E3Ut7EmZxgrcwUgQ0zQ8fuQ==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0}
     dependencies:
       consola: 2.15.3
@@ -3959,7 +3953,7 @@ packages:
       hookable: 5.0.0
       jiti: 1.12.9
       lodash.template: 4.5.0
-      mlly: 0.3.12
+      mlly: 0.3.13
       pathe: 0.2.0
       pkg-types: 0.3.1
       rc9: 1.2.0
@@ -13792,8 +13786,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  /mlly/0.3.12:
-    resolution: {integrity: sha512-+5DdpxP48PpfV/FcP4j/8TREPycnROCg0hX1nmD6aoZ2lD4FpZI4sxWG6l6YpUktXi/vckj8NaAl3DVQSkIn3w==}
+  /mlly/0.3.13:
+    resolution: {integrity: sha512-EXpbSPqSQLR9NEdB25uoyIYLSUvAqDEI7wUeM1HwXHsPF5Gx7cP7kuby5Mz2LfCPxBrgMnbcyPhcTCJRTQ+uvA==}
     dev: true
 
   /mocha/9.1.3:
@@ -14209,7 +14203,7 @@ packages:
   /nuxt-windicss/2.0.11:
     resolution: {integrity: sha512-/vAEmKLq1Iomuj4lz751dsoXdlGVAoiEGSh3JVxuZJMkqc/yrHTQrNhtMaOQzx5heuVsQ+E2bIF+Q/tfxicOFQ==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27274229.29599f0
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27277498.850ef69
       defu: 5.0.0
       h3: 0.3.3
       listhen: 0.2.5
@@ -14794,7 +14788,7 @@ packages:
     resolution: {integrity: sha512-BjECNgz/tsyqg0/T4Z/U7WbFQXUT24nfkxPbALcrk/uHVeZf9MrGG4tfvYtu+jsrHCFMseLQ6woQddDEBATw3A==}
     dependencies:
       jsonc-parser: 3.0.0
-      mlly: 0.3.12
+      mlly: 0.3.13
       pathe: 0.2.0
     dev: true