Convert theme toggling to CodeMirror Extension

Author: franknoirot

src/components/CommandBar/CommandBarKclInput.tsx

@@ -26,14 +26,15 @@ import type { CommandArgument, KclCommandValue } from '@src/lib/commandTypes'
 import { kclManager } from '@src/lib/singletons'
 import { useSettings } from '@src/lib/singletons'
 import { commandBarActor, useCommandBarState } from '@src/lib/singletons'
-import { getSystemTheme } from '@src/lib/theme'
+import { getResolvedTheme } from '@src/lib/theme'
 import { err } from '@src/lib/trap'
 import { useCalculateKclExpression } from '@src/lib/useCalculateKclExpression'
 import { roundOff, roundOffWithUnits } from '@src/lib/utils'
 import { varMentions } from '@src/lib/varCompletionExtension'
 
 import { useModelingContext } from '@src/hooks/useModelingContext'
 import styles from './CommandBarKclInput.module.css'
+import { editorTheme } from '@src/lib/codeEditor'
 
 // TODO: remove the need for this selector once we decouple all actors from React
 const machineContextSelector = (snapshot?: SnapshotFrom<AnyStateMachine>) =>
@@ -173,11 +174,9 @@ function CommandBarKclInput({
           ? previouslySetValue.valueText.length
           : defaultValue.length,
     },
-    theme:
-      settings.app.theme.current === 'system'
-        ? getSystemTheme()
-        : settings.app.theme.current,
     extensions: [
+      // Typically we prefer to update CodeMirror outside of React, but this "micro-editor" doesn't exist outside of React.
+      editorTheme[getResolvedTheme(settings.app.theme.current)],
       varMentionsExtension,
       EditorView.updateListener.of((vu: ViewUpdate) => {
         if (vu.docChanged) {

src/components/layout/areas/CodeEditor.tsx

@@ -11,7 +11,6 @@ import {
 } from 'react'
 
 import { isArray } from '@src/lib/utils'
-import { editorTheme } from '@src/lib/codeEditor'
 
 //reference: https://github.com/sachinraja/rodemirror/blob/main/src/use-first-render.ts
 const useFirstRender = () => {
@@ -34,7 +33,6 @@ interface CodeEditorProps {
   onCreateEditor?: (view: EditorView | null) => void
   initialDocValue?: EditorStateConfig['doc']
   extensions?: Extension
-  theme: 'light' | 'dark'
   autoFocus?: boolean
   selection?: EditorStateConfig['selection']
 }
@@ -48,7 +46,6 @@ const CodeEditor = forwardRef<CodeEditorRef, CodeEditorProps>((props, ref) => {
     onCreateEditor,
     extensions = [],
     initialDocValue,
-    theme,
     autoFocus = false,
     selection,
   } = props
@@ -59,7 +56,6 @@ const CodeEditor = forwardRef<CodeEditorRef, CodeEditorProps>((props, ref) => {
     onCreateEditor,
     extensions,
     initialDocValue,
-    theme,
     autoFocus,
     selection,
   })
@@ -91,7 +87,6 @@ export function useCodeMirror(props: UseCodeMirror) {
     onCreateEditor,
     extensions = [],
     initialDocValue,
-    theme,
     autoFocus = false,
     selection,
   } = props
@@ -104,14 +99,8 @@ export function useCodeMirror(props: UseCodeMirror) {
 
   const targetExtensions = useMemo(() => {
     let exts = isExtensionArray(extensions) ? extensions : []
-    if (theme === 'dark') {
-      exts = [...exts, editorTheme.dark]
-    } else if (theme === 'light') {
-      exts = [...exts, editorTheme.light]
-    }
-
     return exts
-  }, [extensions, theme])
+  }, [extensions])
 
   useEffect(() => {
     if (container && !state) {

src/components/layout/areas/KclEditorPane.tsx

@@ -3,7 +3,11 @@ import type { PropsWithChildren } from 'react'
 import { ActionIcon } from '@src/components/ActionIcon'
 import { useConvertToVariable } from '@src/hooks/useToolbarGuards'
 import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
-import { commandBarActor, settingsActor } from '@src/lib/singletons'
+import {
+  commandBarActor,
+  getSettings,
+  settingsActor,
+} from '@src/lib/singletons'
 import { withSiteBaseURL } from '@src/lib/withBaseURL'
 import toast from 'react-hot-toast'
 import styles from './KclEditorMenu.module.css'
@@ -51,7 +55,6 @@ import { lineHighlightField } from '@src/editor/highlightextension'
 import { modelingMachineEvent } from '@src/editor/manager'
 import { codeManager, editorManager, kclManager } from '@src/lib/singletons'
 import { useSettings } from '@src/lib/singletons'
-import { Themes, getSystemTheme } from '@src/lib/theme'
 import { reportRejection, trap } from '@src/lib/trap'
 import { onMouseDragMakeANewNumber, onMouseDragRegex } from '@src/lib/utils'
 import {
@@ -61,8 +64,9 @@ import {
 } from '@src/machines/kclEditorMachine'
 import type { AreaTypeComponentProps } from '@src/lib/layout'
 import { LayoutPanel, LayoutPanelHeader } from '@src/components/layout/Panel'
-import { kclSyntaxHighlightingExtension } from '@src/lib/codeEditor'
+import { editorTheme, themeCompartment } from '@src/lib/codeEditor'
 import { CustomIcon } from '@src/components/CustomIcon'
+import { getResolvedTheme } from '@src/lib/theme'
 
 export const editorShortcutMeta = {
   formatCode: {
@@ -97,10 +101,6 @@ export const KclEditorPaneContents = () => {
   const context = useSettings()
   const lastSelectionEvent = useSelector(kclEditorActor, selectionEventSelector)
   const editorIsMounted = useSelector(kclEditorActor, editorIsMountedSelector)
-  const theme =
-    context.app.theme.current === Themes.System
-      ? getSystemTheme()
-      : context.app.theme.current
   const { copilotLSP, kclLSP } = useLspContext()
 
   // When this component unmounts, we need to tell the machine that the editor
@@ -147,6 +147,9 @@ export const KclEditorPaneContents = () => {
 
   const editorExtensions = useMemo(() => {
     const extensions = [
+      themeCompartment.of(
+        editorTheme[getResolvedTheme(getSettings().app.theme.current)]
+      ),
       drawSelection({
         cursorBlinkRate: cursorBlinking.current ? 1200 : 0,
       }),
@@ -188,7 +191,6 @@ export const KclEditorPaneContents = () => {
       closeBrackets(),
       highlightActiveLine(),
       highlightSelectionMatches(),
-      kclSyntaxHighlightingExtension,
       rectangularSelection(),
       dropCursor(),
       interact({
@@ -226,7 +228,6 @@ export const KclEditorPaneContents = () => {
         <CodeEditor
           initialDocValue={initialCode.current}
           extensions={editorExtensions}
-          theme={theme}
           onCreateEditor={(_editorView) => {
             editorManager.setEditorView(_editorView)