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

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-10-18 22:59:48 +02:00
parent fa3aacc8c4
commit cba541a354
4 changed files with 24 additions and 34 deletions

View file

@ -38,10 +38,9 @@ import { useIsConnectionSynced } from './hooks/yjs/use-is-connection-synced'
import { useMarkdownContentYText } from './hooks/yjs/use-markdown-content-y-text' import { useMarkdownContentYText } from './hooks/yjs/use-markdown-content-y-text'
import { lintGutter } from '@codemirror/lint' import { lintGutter } from '@codemirror/lint'
import { useLinter } from './linter/linter' import { useLinter } from './linter/linter'
import { FrontmatterLinter } from './linter/frontmatter-linter'
import { useOnNoteDeleted } from './hooks/yjs/use-on-note-deleted' 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 { 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. * 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() const [firstEditorUpdateExtension, firstUpdateHappened] = useOnFirstEditorUpdateExtension()
useInsertNoteContentIntoYTextInMockModeEffect(firstUpdateHappened, websocketConnection) useInsertNoteContentIntoYTextInMockModeEffect(firstUpdateHappened, websocketConnection)
const spellCheck = useApplicationState((state) => state.editorConfig.spellCheck) const spellCheck = useApplicationState((state) => state.editorConfig.spellCheck)
const linter = useLinter()
const markdownExtensionsLinters = useMemo(() => {
return optionalAppExtensions
.flatMap((extension) => extension.buildCodeMirrorLinter())
.concat(new FrontmatterLinter())
}, [])
const linter = useLinter(markdownExtensionsLinters)
const extensions = useMemo( const extensions = useMemo(
() => [ () => [
@ -135,6 +128,8 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
const { t } = useTranslation() const { t } = useTranslation()
const darkModeActivated = useIsDarkModeActivated()
return ( return (
<div <div
className={`d-flex flex-column h-100 position-relative`} className={`d-flex flex-column h-100 position-relative`}
@ -154,7 +149,7 @@ export const EditorPane: React.FC<ScrollProps> = ({ scrollState, onScroll, onMak
maxWidth={'100%'} maxWidth={'100%'}
basicSetup={true} basicSetup={true}
className={codeMirrorClassName} className={codeMirrorClassName}
theme={oneDark} theme={darkModeActivated ? oneDark : undefined}
/> />
<StatusBar /> <StatusBar />
</div> </div>

View file

@ -9,6 +9,9 @@ import { linter } from '@codemirror/lint'
import { useMemo } from 'react' import { useMemo } from 'react'
import type { Extension } from '@codemirror/state' import type { Extension } from '@codemirror/state'
import type { EditorView } from '@codemirror/view' 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. * The Linter interface.
@ -19,12 +22,22 @@ export interface Linter {
lint(view: EditorView): Diagnostic[] 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 extension
* @return The build codemirror linter
*/ */
export const useLinter = (linters: Linter[]): Extension => { export const useLinter = (): Extension => {
return useMemo(() => linter((view) => linters.flatMap((aLinter) => aLinter.lint(view))), [linters]) const darkModeActivated = useIsDarkModeActivated()
return useMemo(() => (darkModeActivated ? createLinterExtension() : createLinterExtension()), [darkModeActivated])
} }

View file

@ -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;
}

View file

@ -5,7 +5,6 @@
*/ */
import React from 'react' import React from 'react'
import styles from './status-bar.module.scss'
import { RemainingCharactersInfo } from './remaining-characters-info' import { RemainingCharactersInfo } from './remaining-characters-info'
import { NumberOfLinesInDocumentInfo } from './number-of-lines-in-document-info' import { NumberOfLinesInDocumentInfo } from './number-of-lines-in-document-info'
import { CursorPositionInfo } from './cursor-position-info' import { CursorPositionInfo } from './cursor-position-info'
@ -18,7 +17,7 @@ import { SelectedLines } from './selected-lines'
*/ */
export const StatusBar: React.FC = () => { export const StatusBar: React.FC = () => {
return ( 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> <div>
<CursorPositionInfo /> <CursorPositionInfo />
<SelectedCharacters /> <SelectedCharacters />