feat: multi cursor support - resolved #2215

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

@@ -460,6 +460,17 @@ pre.ace_editor {
   }
 }
 
+.cm-editor {
+  .cm-line::selection {
+    background-color: var(--accent-dark-color) !important;
+    color: var(--accent-contrast-color) !important;
+  }
+  .cm-line ::selection {
+    background-color: var(--accent-dark-color) !important;
+    color: var(--accent-contrast-color) !important;
+  }
+}
+
 .shortcut-key {
   @apply inline-flex;
   @apply font-sans;

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

@@ -3,6 +3,8 @@ import {
   keymap,
   highlightSpecialChars,
   highlightActiveLine,
+  drawSelection,
+  dropCursor,
 } from "@codemirror/view"
 import {
   HighlightStyle,
@@ -25,7 +27,10 @@ import {
 } from "@codemirror/search"
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete"
 import { commentKeymap } from "@codemirror/comment"
-import { rectangularSelection } from "@codemirror/rectangular-selection"
+import {
+  rectangularSelection,
+  // crosshairCursor,
+} from "@codemirror/rectangular-selection"
 import { lintKeymap } from "@codemirror/lint"
 
 export const baseTheme = EditorView.theme({
@@ -46,8 +51,8 @@ export const baseTheme = EditorView.theme({
   ".cm-widgetBuffer": {
     position: "absolute",
   },
-  ".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": {
+  ".cm-selectionBackground": {
-    backgroundColor: "var(--accent-color)",
+    backgroundColor: "var(--accent-dark-color)",
     color: "var(--accent-contrast-color)",
   },
   ".cm-panels": {
@@ -167,8 +172,8 @@ export const inputTheme = EditorView.theme({
   ".cm-widgetBuffer": {
     position: "absolute",
   },
-  ".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": {
+  ".cm-selectionBackground": {
-    backgroundColor: "var(--accent-color)",
+    backgroundColor: "var(--accent-dark-color)",
     color: "var(--accent-contrast-color)",
   },
   ".cm-panels": {
@@ -355,6 +360,8 @@ export const basicSetup: Extension = [
     openText: "▾",
     closedText: "▸",
   }),
+  drawSelection(),
+  dropCursor(),
   EditorState.allowMultipleSelections.of(true),
   indentOnInput(),
   defaultHighlightStyle.fallback,
@@ -362,9 +369,9 @@ export const basicSetup: Extension = [
   closeBrackets(),
   autocompletion(),
   rectangularSelection(),
+  // crosshairCursor(),
   highlightActiveLine(),
   highlightSelectionMatches(),
-  search(),
   keymap.of([
     ...closeBracketsKeymap,
     ...defaultKeymap,
@@ -375,4 +382,5 @@ export const basicSetup: Extension = [
     ...completionKeymap,
     ...lintKeymap,
   ]),
+  search(),
 ]