Merge branch 'codemirror' into codemirror-autocomplete

1whatleytay · Jan 13, 2025 · 7f56fbe · 7f56fbe
2 parents ebb9937 + c4631fc
commit 7f56fbe
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 76 deletions.
diff --git a/src/components/EditorBody.vue b/src/components/EditorBody.vue
@@ -25,7 +25,7 @@ import { isSyncing } from '../utils/tabs'
 import GotoOverlay from './GotoOverlay.vue'
 
 import { EditorView } from 'codemirror'
-import { darkTheme, editorTheme, lightTheme } from '../utils/lezer-mips'
+import { setTheme } from '../utils/lezer-mips'
 import { consoleData } from '../state/console-data'
 import { setHighlightedLine } from '../utils/lezer-mips'
 import { setMinimap, setVim } from '../utils/lezer-mips/modes'
@@ -39,29 +39,20 @@ onMounted(() => {
     state: tab()?.state,
     parent: code.value!,
   })
-  forceParsing(view, view.state.doc.length, 100)
 
   watch(
     () => tab()?.state,
     (state) => {
       if (!isSyncing()) {
         view.setState(state!)
-        forceParsing(view, view.state.doc.length, 100)
       }
     },
     { flush: 'sync' },
   )
 
   watch(
     () => settings.editor.darkMode,
-    (theme: boolean) => {
-      // A strange bug in codemirror made launching in the opposite theme fail without a timeout.
-      setTimeout(() => {
-        view.dispatch({
-          effects: [editorTheme.reconfigure(theme ? darkTheme : lightTheme)],
-        })
-      }, 0)
-    },
+    (theme: boolean) => view.dispatch({ effects: [setTheme(theme)] }),
     { immediate: true },
   )
 
@@ -74,6 +65,7 @@ onMounted(() => {
   watch(
     () => settings.editor.showMinimap,
     (minimap: boolean) => view.dispatch({ effects: [setMinimap(minimap)] }),
+    { immediate: true },
   )
 
   // https://gist.github.com/shimondoodkin/1081133

diff --git a/src/utils/lezer-mips/codemirror.css b/src/utils/lezer-mips/codemirror.css
@@ -0,0 +1,39 @@
+.cm-editor {
+  .cm-content {
+    @apply caret-orange-400;
+  }
+  .cm-cursor,
+  .cm-dropCursor {
+    @apply border-orange-400;
+    border-left-width: 2px;
+  }
+  .cm-gutters {
+    background-color: inherit;
+  }
+  .cm-completionDetail {
+    margin-left: auto;
+    @apply text-neutral-400;
+  }
+  .cm-completionLabel {
+    margin-right: 1.5rem;
+  }
+  .cm-tooltip-autocomplete {
+    border-radius: 0.5rem;
+    border: 1px solid #333;
+    @apply bg-neutral-900;
+  }
+  .cm-tooltip.cm-tooltip-autocomplete > ul {
+    padding: 0.5rem;
+  }
+  .cm-tooltip-autocomplete > ul > li[aria-selected] {
+    @apply bg-neutral-700;
+  }
+  .cm-tooltip-autocomplete > ul > li {
+    padding: 0.5rem 0px;
+    border-radius: 0.25rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+}
diff --git a/src/utils/lezer-mips/index.ts b/src/utils/lezer-mips/index.ts
@@ -4,6 +4,7 @@ import { syntaxHighlighting, HighlightStyle } from '@codemirror/language'
 import { Compartment, StateEffect, StateField } from '@codemirror/state'
 import { Decoration, DecorationSet, EditorView } from '@codemirror/view'
 import { lang } from './stream-lang'
+import './codemirror.css'
 
 export const clearHighlightedLine = StateEffect.define<null>()
 export const setHighlightedLine = StateEffect.define<number>()
@@ -32,8 +33,6 @@ const highlightedLineState = StateField.define<DecorationSet>({
   provide: (field) => EditorView.decorations.from(field),
 })
 
-const cursor = '#fb923c'
-
 const twHighlightStyle = HighlightStyle.define([
   { tag: [t.variableName], class: 'dark:text-white text-black' },
   { tag: [t.attributeName], class: 'dark:text-amber-400 text-amber-700' },
@@ -45,71 +44,14 @@ const twHighlightStyle = HighlightStyle.define([
   { tag: [t.lineComment], class: 'dark:text-neutral-400 text-neutral-500' },
 ])
 
-export const darkTheme = EditorView.theme(
-  {
-    '.cm-content': {
-      caretColor: cursor,
-    },
-
-    '.cm-cursor, .cm-dropCursor': {
-      borderLeftColor: cursor,
-      borderLeftWidth: '2px',
-    },
-    '.cm-gutters': {
-      backgroundColor: 'inherit',
-    },
-    '.cm-completionDetail': {
-      marginLeft: 'auto',
-      color: 'rgb(115 115 115)', // text-neutral-400
-    },
-    '.cm-completionLabel': {
-      marginRight: '1.5rem',
-    },
-    '.cm-tooltip-autocomplete': {
-      borderRadius: '.5rem',
-      border: '1px solid #333',
-      backgroundColor: 'rgb(23 23 23)', // bg-neutral-900
-    },
-    '.cm-tooltip.cm-tooltip-autocomplete > ul': {
-      padding: '.5rem',
-    },
-    '.cm-tooltip-autocomplete > ul > li[aria-selected]': {
-      backgroundColor: 'rgb(64 64 64)', // bg-neutral-700
-    },
-    '.cm-tooltip-autocomplete > ul > li': {
-      padding: '.5rem 0px',
-      borderRadius: '.25rem',
-      height: '1.5rem',
-      display: 'flex',
-      alignItems: 'center',
-      width: '100%',
-    },
-  },
-  { dark: true },
-)
-
-export const lightTheme = EditorView.theme(
-  {
-    '&': {
-      fontSize: '18px',
-    },
-
-    '.cm-content': {
-      caretColor: cursor,
-    },
+// defined in codemirror.css
+const darkTheme = EditorView.theme({}, { dark: true })
+const lightTheme = EditorView.theme({}, { dark: false })
 
-    '.cm-cursor, .cm-dropCursor': {
-      borderLeftColor: cursor,
-      borderLeftWidth: '2px',
-    },
-    '.cm-gutters': {
-      backgroundColor: 'inherit',
-    },
-  },
-  { dark: false },
-)
+const editorTheme = new Compartment()
 
-export const editorTheme = new Compartment()
+export const setTheme = (theme: boolean) =>
+  editorTheme.reconfigure(theme ? darkTheme : lightTheme)
 
 export function Mips() {
   return [