feat(CodeEditor): enable dropcursor

package.json

@@ -29,11 +29,6 @@
     "email": "betterseqta@betterseqta.com",
     "url": "https://github.com/BetterSEQTA/BetterSEQTA-plus"
   },
-  "overrides": {
-    "svelte-hash-router": {
-      "svelte": "$svelte"
-    }
-  },
   "license": "MIT",
   "devDependencies": {
     "@crxjs/vite-plugin": "2.0.0-beta.25",
@@ -69,6 +64,8 @@
     "@types/sortablejs": "^1.15.8",
     "@types/uuid": "^9.0.8",
     "@types/webextension-polyfill": "^0.10.7",
+    "@uiw/codemirror-extensions-color": "^4.23.3",
+    "@uiw/codemirror-theme-github": "^4.23.3",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "classnames": "^2.5.1",

src/svelte-interface/components/CodeEditor.svelte

@@ -5,19 +5,23 @@
   import { indentOnInput, indentUnit, bracketMatching, foldKeymap, syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
   import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
   import { highlightSpecialChars, drawSelection, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, EditorView } from '@codemirror/view'; // dropCursor
+  import { color } from '@uiw/codemirror-extensions-color'
+  import { Compartment } from '@codemirror/state';
 
   // Theme
-  import { oneDark } from "@codemirror/theme-one-dark";
+  import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
 
   // Language
   import { css } from "@codemirror/lang-css";
   import { onDestroy, onMount } from 'svelte'
+  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
 
   let editor = $state<HTMLDivElement | null>(null)
   let view: EditorView | null = null;
+  let editorTheme = new Compartment();
   let { value, onChange } = $props<{value: string, onChange: (value: string) => void}>()
 
-  function createEditorState(initialContents: string, options = {oneDark: false}) {
+  function createEditorState(initialContents: string) {
       let extensions = [
           highlightSpecialChars(),
           history(),
@@ -32,6 +36,7 @@
           crosshairCursor(),
           highlightActiveLine(),
           highlightSelectionMatches(),
+          editorTheme.of(githubLight),
           keymap.of([
               indentWithTab,
               ...closeBracketsKeymap,
@@ -46,12 +51,10 @@
             }
           }),
           css(),
+          color,
           syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
       ];
 
-      if (options.oneDark)
-          extensions.push(oneDark);
-
       return EditorState.create({
           doc: initialContents,
           extensions
@@ -67,6 +70,16 @@
       const state = createEditorState(value);
       view = createEditorView(state, editor as HTMLElement);
     }
+
+    settingsState.subscribe((settings) => {
+      if (view) {
+        view.dispatch({
+          effects: editorTheme.reconfigure(
+            settings.DarkMode ? githubDark : githubLight
+          )
+        })
+      }
+    });
   });
 
   onDestroy(() => {

src/svelte-interface/index.css

@@ -44,4 +44,10 @@ input {
 .cm-editor {
   width: 100%;
   min-height: 100px;
-}
+}
+
+/* .dark .cm-editor .cm-tooltip-autocomplete {
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+}
+ */