Merge pull request #12936 from overleaf/td-history-diff-viewer-fixed-font

History migration: Use fixed font, text size, line height and theme in document diff viewer

GitOrigin-RevId: 9f86be609e0fe72ca41429bae9db03e047952c08

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<FontFamily>('settings.fontFamily')
-  const [fontSize] = useScopeValue<number>('settings.fontSize')
-  const [lineHeight] = useScopeValue<LineHeight>('settings.lineHeight')
-  const [overallTheme] = useScopeValue<OverallTheme>('settings.overallTheme')
   const isMounted = useIsMounted()
   const { t } = useTranslation()
 
   const [state, setState] = useState(() => {
     return EditorState.create({
       doc,
-      extensions: extensions({
-        fontFamily,
-        fontSize,
-        lineHeight,
-        overallTheme,
-      }),
+      extensions: extensions(),
     })
   })
 

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<LineHeight, number> = {
-  compact: 1.33,
-  normal: 1.6,
-  wide: 2,
-}
-
-const fontFamilies: Record<FontFamily, string[]> = {
-  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)',
+    },
+  })