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/lang/KclManager'
 import { 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) => {
             kclManager.setEditorView(_editorView)
 

src/lang/KclManager.ts

@@ -93,6 +93,12 @@ import { bracket } from '@src/lib/exampleKcl'
 import { isDesktop } from '@src/lib/isDesktop'
 import toast from 'react-hot-toast'
 import { signal } from '@preact/signals-core'
+import {
+  editorTheme,
+  themeCompartment,
+  appSettingsThemeEffect,
+  settingsUpdateAnnotation,
+} from '@src/lib/codeEditor'
 
 interface ExecuteArgs {
   ast?: Node<Program>
@@ -1096,6 +1102,21 @@ export class KclManager extends EventTarget {
       })
     }
   }
+  setEditorTheme(theme: 'light' | 'dark') {
+    if (this._editorView) {
+      console.trace(`kclManager.setEditorTheme: ${theme}`)
+      this._editorView.dispatch({
+        effects: [
+          appSettingsThemeEffect.of(theme),
+          themeCompartment.reconfigure(editorTheme[theme]),
+        ],
+        annotations: [
+          settingsUpdateAnnotation.of(null),
+          Transaction.addToHistory.of(false),
+        ],
+      })
+    }
+  }
   /**
    * Given an array of Diagnostics remove any duplicates by hashing a key
    * in the format of from + ' ' + to + ' ' + message.

src/lib/codeEditor.ts

@@ -1,6 +1,13 @@
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import {
+  Annotation,
+  Compartment,
+  type Extension,
+  StateEffect,
+} from '@codemirror/state'
 import { tags } from '@lezer/highlight'
 import { EditorView } from 'codemirror'
+import { Themes } from '@src/lib/theme'
 
 export const normalizeLineEndings = (str: string, normalized = '\n') => {
   return str.replace(/\r?\n/g, normalized)
@@ -90,6 +97,7 @@ const baseKclHighlights = HighlightStyle.define([
 
 const darkKclHighlights = HighlightStyle.define(
   [
+    ...baseKclHighlights.specs,
     {
       tag: [tags.keyword, tags.annotation],
       color: colors.orange.dark,
@@ -149,23 +157,21 @@ const darkTheme = EditorView.theme(
   }
 )
 
-/**
- * CodeMirror theme extensions for KCL syntax highlighting.
- *
- * Not included in package because it uses CSS variables local to ZDS.
- * TODO: Make application-agnostic maybe, if other clients want this theme.
- */
-export const kclSyntaxHighlightingExtension = [
-  // Overrides are provided by `darkKclHighlights` and must be first
-  syntaxHighlighting(darkKclHighlights),
-  syntaxHighlighting(baseKclHighlights),
-]
-
 /**
  * Nearly-empty themes that just mark themselves as light or dark
  * so our {@link syntaxHighlightingExtension} can apply its styling.
  */
 export const editorTheme = {
-  light: lightTheme,
-  dark: darkTheme,
-}
+  [Themes.Light]: [lightTheme, syntaxHighlighting(baseKclHighlights)],
+  [Themes.Dark]: [darkTheme, syntaxHighlighting(darkKclHighlights)],
+} satisfies Record<Exclude<Themes, 'system'>, Extension>
+/** Compartment to allow us to reconfigure CodeMirror's theme dynamically outside of React */
+export const themeCompartment = new Compartment()
+
+/** Annotation to flag CodeMirror transactions as coming from an app settings update */
+export const settingsUpdateAnnotation = Annotation.define<null>()
+
+/** StateEffect to dispatch to CodeMirror when the app theme setting changes */
+export const appSettingsThemeEffect = StateEffect.define<'light' | 'dark'>()
+/** StateEffect to dispatch to CodeMirror when the app blinkingCursor setting changes */
+export const appSettingsBlinkingCursorEffect = StateEffect.define<boolean>()

src/machines/settingsMachine.ts

@@ -39,6 +39,7 @@ import {
   Themes,
   darkModeMatcher,
   getOppositeTheme,
+  getResolvedTheme,
   getSystemTheme,
   setThemeClass,
 } from '@src/lib/theme'
@@ -208,13 +209,16 @@ export const settingsMachine = setup({
       const rootContext = self.system.get('root')?.getSnapshot().context
       const sceneInfra = rootContext?.sceneInfra
       const sceneEntitiesManager = rootContext?.sceneEntitiesManager
+      const kclManager = rootContext?.kclManager
 
-      if (!sceneInfra || !sceneEntitiesManager) {
+      if (!sceneInfra || !sceneEntitiesManager || !kclManager) {
         return
       }
+      const resolvedTheme = getResolvedTheme(context.app.theme.current)
       const opposingTheme = getOppositeTheme(context.app.theme.current)
       sceneInfra.theme = opposingTheme
       sceneEntitiesManager.updateSegmentBaseColor(opposingTheme)
+      kclManager.setEditorTheme(resolvedTheme)
     },
     setAllowOrbitInSketchMode: ({ context, self }) => {
       const rootContext = self.system.get('root')?.getSnapshot().context