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 } from '../../extensions/theme'
-import { theme, Options } 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'
+function extensions(): Extension[] {
-type LineHeight = 'compact' | 'normal' | 'wide'
-type OverallTheme = '' | 'light-'
-
-function extensions(themeOptions: Options): 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({
+      extensions: extensions(),
-        fontFamily,
-        fontSize,
-        lineHeight,
-        overallTheme,
-      }),
     })
   })
 

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'
+const fontFamily = 'Monaco, Menlo, Ubuntu Mono, Consolas, monospace'
-export type LineHeight = 'compact' | 'normal' | 'wide'
-export type OverallTheme = '' | 'light-'
 
-export type Options = {
+export const theme = () =>
-  fontSize: number
+  EditorView.theme({
-  fontFamily: FontFamily
+    '&.cm-editor': {
-  lineHeight: LineHeight
+      '--font-size': '12px',
-  overallTheme: OverallTheme
+      '--source-font-family': fontFamily,
-}
+      '--line-height': 1.6,
-
+    },
-const optionsThemeConf = new Compartment()
+    '.cm-content': {
-
+      fontSize: 'var(--font-size)',
-export const theme = (options: Options) => [
+      fontFamily: 'var(--source-font-family)',
-  optionsThemeConf.of(createThemeFromOptions(options)),
+      lineHeight: 'var(--line-height)',
-]
+      color: '#000',
-
+    },
-export const lineHeights: Record<LineHeight, number> = {
+    '.cm-gutters': {
-  compact: 1.33,
+      fontSize: 'var(--font-size)',
-  normal: 1.6,
+      lineHeight: 'var(--line-height)',
-  wide: 2,
+    },
-}
+    '.cm-tooltip': {
-
+      // Set variables for tooltips, which are outside the editor
-const fontFamilies: Record<FontFamily, string[]> = {
+      '--font-size': '12px',
-  monaco: ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'monospace'],
+      '--source-font-family': fontFamily,
-  lucida: ['Lucida Console', 'Source Code Pro', 'monospace'],
+      // NOTE: fontFamily is not set here, as most tooltips use the UI font
-}
+      fontSize: 'var(--font-size)',
-
+    },
-const createThemeFromOptions = ({
+    '.cm-lineNumbers': {
-  fontSize = 12,
+      fontFamily: 'var(--source-font-family)',
-  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)',
-      },
-    }),
-  ]
-}