diff --git a/services/web/frontend/js/features/history/components/diff-view/document-diff-viewer.tsx b/services/web/frontend/js/features/history/components/diff-view/document-diff-viewer.tsx index 14d369699a..274a7bfd52 100644 --- a/services/web/frontend/js/features/history/components/diff-view/document-diff-viewer.tsx +++ b/services/web/frontend/js/features/history/components/diff-view/document-diff-viewer.tsx @@ -10,8 +10,7 @@ import { import { EditorView, lineNumbers } from '@codemirror/view' import { indentationMarkers } from '@replit/codemirror-indentation-markers' import { highlights, setHighlightsEffect } from '../../extensions/highlights' -import useScopeValue from '../../../../shared/hooks/use-scope-value' -import { theme, Options } from '../../extensions/theme' +import { theme } from '../../extensions/theme' import { indentUnit } from '@codemirror/language' import { Highlight } from '../../services/types/doc' import useIsMounted from '../../../../shared/hooks/use-is-mounted' @@ -24,11 +23,7 @@ import Icon from '../../../../shared/components/icon' import { useTranslation } from 'react-i18next' import { inlineBackground } from '../../../source-editor/extensions/inline-background' -type FontFamily = 'monaco' | 'lucida' -type LineHeight = 'compact' | 'normal' | 'wide' -type OverallTheme = '' | 'light-' - -function extensions(themeOptions: Options): Extension[] { +function extensions(): Extension[] { return [ EditorView.editable.of(false), lineNumbers(), @@ -37,7 +32,7 @@ function extensions(themeOptions: Options): Extension[] { indentationMarkers({ hideFirstIndent: true, highlightActiveBlock: false }), highlights(), highlightLocations(), - theme(themeOptions), + theme(), inlineBackground(false), ] } @@ -49,22 +44,13 @@ function DocumentDiffViewer({ doc: string highlights: Highlight[] }) { - const [fontFamily] = useScopeValue('settings.fontFamily') - const [fontSize] = useScopeValue('settings.fontSize') - const [lineHeight] = useScopeValue('settings.lineHeight') - const [overallTheme] = useScopeValue('settings.overallTheme') const isMounted = useIsMounted() const { t } = useTranslation() const [state, setState] = useState(() => { return EditorState.create({ doc, - extensions: extensions({ - fontFamily, - fontSize, - lineHeight, - overallTheme, - }), + extensions: extensions(), }) }) diff --git a/services/web/frontend/js/features/history/extensions/theme.ts b/services/web/frontend/js/features/history/extensions/theme.ts index 92e7f17829..1677f43f00 100644 --- a/services/web/frontend/js/features/history/extensions/theme.ts +++ b/services/web/frontend/js/features/history/extensions/theme.ts @@ -1,71 +1,32 @@ import { EditorView } from '@codemirror/view' -import { Compartment } from '@codemirror/state' -export type FontFamily = 'monaco' | 'lucida' -export type LineHeight = 'compact' | 'normal' | 'wide' -export type OverallTheme = '' | 'light-' +const fontFamily = 'Monaco, Menlo, Ubuntu Mono, Consolas, monospace' -export type Options = { - fontSize: number - fontFamily: FontFamily - lineHeight: LineHeight - overallTheme: OverallTheme -} - -const optionsThemeConf = new Compartment() - -export const theme = (options: Options) => [ - optionsThemeConf.of(createThemeFromOptions(options)), -] - -export const lineHeights: Record = { - compact: 1.33, - normal: 1.6, - wide: 2, -} - -const fontFamilies: Record = { - monaco: ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'monospace'], - lucida: ['Lucida Console', 'Source Code Pro', 'monospace'], -} - -const createThemeFromOptions = ({ - fontSize = 12, - fontFamily = 'monaco', - lineHeight = 'normal', - overallTheme = '', -}: Options) => { - // Theme styles that depend on settings - return [ - EditorView.editorAttributes.of({ - class: overallTheme === '' ? 'overall-theme-dark' : 'overall-theme-light', - }), - EditorView.theme({ - '&.cm-editor': { - '--font-size': `${fontSize}px`, - '--source-font-family': fontFamilies[fontFamily]?.join(', '), - '--line-height': lineHeights[lineHeight], - }, - '.cm-content': { - fontSize: 'var(--font-size)', - fontFamily: 'var(--source-font-family)', - lineHeight: 'var(--line-height)', - color: '#000', - }, - '.cm-gutters': { - fontSize: 'var(--font-size)', - lineHeight: 'var(--line-height)', - }, - '.cm-tooltip': { - // Set variables for tooltips, which are outside the editor - '--font-size': `${fontSize}px`, - '--source-font-family': fontFamilies[fontFamily]?.join(', '), - // NOTE: fontFamily is not set here, as most tooltips use the UI font - fontSize: 'var(--font-size)', - }, - '.cm-lineNumbers': { - fontFamily: 'var(--source-font-family)', - }, - }), - ] -} +export const theme = () => + EditorView.theme({ + '&.cm-editor': { + '--font-size': '12px', + '--source-font-family': fontFamily, + '--line-height': 1.6, + }, + '.cm-content': { + fontSize: 'var(--font-size)', + fontFamily: 'var(--source-font-family)', + lineHeight: 'var(--line-height)', + color: '#000', + }, + '.cm-gutters': { + fontSize: 'var(--font-size)', + lineHeight: 'var(--line-height)', + }, + '.cm-tooltip': { + // Set variables for tooltips, which are outside the editor + '--font-size': '12px', + '--source-font-family': fontFamily, + // NOTE: fontFamily is not set here, as most tooltips use the UI font + fontSize: 'var(--font-size)', + }, + '.cm-lineNumbers': { + fontFamily: 'var(--source-font-family)', + }, + })