feat(editor): Use editor light theme if light mode

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/editor-page/editor-pane/editor-pane.tsx

@@ -38,10 +38,9 @@ import { useIsConnectionSynced } from './hooks/yjs/use-is-connection-synced'
 import { useMarkdownContentYText } from './hooks/yjs/use-markdown-content-y-text'
 import { lintGutter } from '@codemirror/lint'
 import { useLinter } from './linter/linter'
-import { FrontmatterLinter } from './linter/frontmatter-linter'
 import { useOnNoteDeleted } from './hooks/yjs/use-on-note-deleted'
 import { findLanguageByCodeBlockName } from '../../markdown-renderer/extensions/base/code-block-markdown-extension/find-language-by-code-block-name'
-import { optionalAppExtensions } from '../../../extensions/extra-integrations/optional-app-extensions'
+import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-activated'
 
 /**
  * Renders the text editor pane of the editor.
@@ -86,13 +85,7 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
   const [firstEditorUpdateExtension, firstUpdateHappened] = useOnFirstEditorUpdateExtension()
   useInsertNoteContentIntoYTextInMockModeEffect(firstUpdateHappened, websocketConnection)
   const spellCheck = useApplicationState((state) => state.editorConfig.spellCheck)
-
-  const markdownExtensionsLinters = useMemo(() => {
-    return optionalAppExtensions
-      .flatMap((extension) => extension.buildCodeMirrorLinter())
-      .concat(new FrontmatterLinter())
-  }, [])
-  const linter = useLinter(markdownExtensionsLinters)
+  const linter = useLinter()
 
   const extensions = useMemo(
     () => [
@@ -135,6 +128,8 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
 
   const { t } = useTranslation()
 
+  const darkModeActivated = useIsDarkModeActivated()
+
   return (
     <div
       className={`d-flex flex-column h-100 position-relative`}
@@ -154,7 +149,7 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
         maxWidth={'100%'}
         basicSetup={true}
         className={codeMirrorClassName}
-        theme={oneDark}
+        theme={darkModeActivated ? oneDark : undefined}
       />
       <StatusBar />
     </div>

src/components/editor-page/editor-pane/linter/linter.ts

@@ -9,6 +9,9 @@ import { linter } from '@codemirror/lint'
 import { useMemo } from 'react'
 import type { Extension } from '@codemirror/state'
 import type { EditorView } from '@codemirror/view'
+import { optionalAppExtensions } from '../../../../extensions/extra-integrations/optional-app-extensions'
+import { FrontmatterLinter } from './frontmatter-linter'
+import { useIsDarkModeActivated } from '../../../../hooks/common/use-is-dark-mode-activated'
 
 /**
  * The Linter interface.
@@ -19,12 +22,22 @@ export interface Linter {
   lint(view: EditorView): Diagnostic[]
 }
 
+const createLinterExtension = () =>
+  linter((view) =>
+    optionalAppExtensions
+      .flatMap((extension) => extension.buildCodeMirrorLinter())
+      .concat(new FrontmatterLinter())
+      .flatMap((aLinter) => aLinter.lint(view))
+  )
+
 /**
- * The hook to create a single codemirror linter from all our linters.
+ * Creates a codemirror linter that runs all markdown extension linters.
+ * Due to a bug in codemirror that breaks the "fix" buttons when switching themes, the extension is recreated if the app switches between dark and light mode.
  *
- * @param linters The {@link Linter linters} to use for the codemirror linter.
- * @return The build codemirror linter
+ * @return The build codemirror linter extension
  */
-export const useLinter = (linters: Linter[]): Extension => {
-  return useMemo(() => linter((view) => linters.flatMap((aLinter) => aLinter.lint(view))), [linters])
+export const useLinter = (): Extension => {
+  const darkModeActivated = useIsDarkModeActivated()
+
+  return useMemo(() => (darkModeActivated ? createLinterExtension() : createLinterExtension()), [darkModeActivated])
 }

src/components/editor-page/editor-pane/status-bar/status-bar.module.scss

@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-.status-bar {
-  background: #1c1c1e;
-  border-top: 1px solid #343434;
-  color: #ccc;
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  font-size: 13px;
-  line-height: 25px;
-  height: 26px;
-}

src/components/editor-page/editor-pane/status-bar/status-bar.tsx

@@ -5,7 +5,6 @@
  */
 
 import React from 'react'
-import styles from './status-bar.module.scss'
 import { RemainingCharactersInfo } from './remaining-characters-info'
 import { NumberOfLinesInDocumentInfo } from './number-of-lines-in-document-info'
 import { CursorPositionInfo } from './cursor-position-info'
@@ -18,7 +17,7 @@ import { SelectedLines } from './selected-lines'
  */
 export const StatusBar: React.FC = () => {
   return (
-    <div className={`d-flex flex-row ${styles['status-bar']} px-2`}>
+    <div className={`d-flex flex-row border-secondary border-top small bg-light px-2`}>
       <div>
         <CursorPositionInfo />
         <SelectedCharacters />