🐛 Fixed the issue of highlightActiveLine and selected background color conflicts

frontend/src/editor/index.vue

@@ -5,6 +5,7 @@ import {
   drawSelection,
   dropCursor,
   EditorView,
+  highlightActiveLine,
   highlightActiveLineGutter,
   highlightSpecialChars,
   keymap,
@@ -12,22 +13,17 @@ import {
   rectangularSelection,
 } from '@codemirror/view';
 import {Compartment, EditorState, Extension} from '@codemirror/state';
-import {baseDark} from "@/editor/theme/base-dark";
+import {baseDark, customHighlightActiveLine} from "@/editor/theme/base-dark";
 import {
   bracketMatching,
   defaultHighlightStyle,
   foldGutter,
   foldKeymap,
   indentOnInput,
-  syntaxHighlighting,
-  indentUnit
+  indentUnit,
+  syntaxHighlighting
 } from '@codemirror/language';
-import {
-  defaultKeymap, 
-  history, 
-  historyKeymap, 
-  indentSelection,
-} from '@codemirror/commands';
+import {defaultKeymap, history, historyKeymap, indentSelection,} from '@codemirror/commands';
 import {highlightSelectionMatches, searchKeymap} from '@codemirror/search';
 import {autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap} from '@codemirror/autocomplete';
 import {lintKeymap} from '@codemirror/lint';
@@ -130,6 +126,8 @@ const createEditor = () => {
     rectangularSelection(),
     crosshairCursor(),
     highlightSelectionMatches(),
+    customHighlightActiveLine,
+    highlightActiveLine(),
     keymap.of([
       ...closeBracketsKeymap,
       ...defaultKeymap,

frontend/src/editor/theme/base-dark.ts

@@ -9,10 +9,11 @@ export const config = {
     background: '#252B37',
     foreground: '#9BB586',
     selection: '#1A5888',
+    selectionMatch: 'rgba(26, 88, 136, 0.5)',
     cursor: '#F8F8F2',
     dropdownBackground: '#282A36',
     dropdownBorder: '#191A21',
-    activeLine: '#2E333F',
+    activeLine: 'rgba(46, 51, 63, 0.6)',
     lineNumber: '#676d7c',
     lineNumberActive: '#F8F8F2',
     lineNumberBackground: '#212731',
@@ -42,7 +43,10 @@ export const draculaTheme = EditorView.theme({
     '.cm-content': {caretColor: config.cursor},
 
     '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor},
-    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection},
+    
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+        backgroundColor: `${config.selection} !important`
+    },
 
     '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
     '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
@@ -57,7 +61,11 @@ export const draculaTheme = EditorView.theme({
     },
 
     '.cm-activeLine': {backgroundColor: config.activeLine},
-    '.cm-selectionMatch': {backgroundColor: config.selection},
+    
+    '.cm-selectionMatch': {
+        backgroundColor: `${config.selectionMatch} !important`,
+        borderRadius: '2px'
+    },
 
     '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
         backgroundColor: config.matchingBracket,
@@ -123,6 +131,12 @@ export const draculaHighlightStyle = HighlightStyle.define([
     {tag: t.strikethrough, textDecoration: 'line-through'},
 ])
 
+export const customHighlightActiveLine = EditorView.theme({
+  '.cm-activeLine': {
+    backgroundColor: config.activeLine,
+  }
+})
+
 export const baseDark: Extension = [
     draculaTheme,
     syntaxHighlighting(draculaHighlightStyle),