Merge pull request #20381 from overleaf/ae-api-settings

Add "settings" object to global scope store

GitOrigin-RevId: 1d5c7c3a1b417be0726c4a5e95e611ded47c13c4

services/web/frontend/js/features/editor-left-menu/components/settings/settings-keybindings.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import type { Keybindings } from '../../../../../../types/project-settings'
+import type { Keybindings } from '../../../../../../types/user-settings'
 import { useProjectSettingsContext } from '../../context/project-settings-context'
 import SettingsMenuSelect from './settings-menu-select'
 

services/web/frontend/js/features/editor-left-menu/components/settings/settings-pdf-viewer.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import type { PdfViewer } from '../../../../../../types/project-settings'
+import type { PdfViewer } from '../../../../../../types/user-settings'
 import { useProjectSettingsContext } from '../../context/project-settings-context'
 import SettingsMenuSelect from './settings-menu-select'
 

services/web/frontend/js/features/ide-react/context/ide-react-context.tsx

@@ -44,6 +44,7 @@ export const IdeReactContext = createContext<IdeReactContextValue | undefined>(
 )
 
 function populateIdeReactScope(store: ReactScopeValueStore) {
+  store.set('settings', {})
   store.set('sync_tex_error', false)
 }
 

services/web/frontend/js/shared/context/ide-context.tsx

@@ -27,6 +27,8 @@ export const IdeProvider: FC<{
    *   - `project.spellcheckLanguage`
    *   - `editor.open_doc_name`,
    *   - `editor.open_doc_id`,
+   *   - `settings.theme`
+   *   - `settings.keybindings`
    */
   useEffect(() => {
     window.overleaf = {

services/web/frontend/js/shared/context/user-settings-context.tsx

@@ -9,8 +9,9 @@ import {
   useEffect,
 } from 'react'
 
-import { UserSettings } from '../../../../types/user-settings'
+import { UserSettings, Keybindings } from '../../../../types/user-settings'
 import getMeta from '@/utils/meta'
+import useScopeValue from '@/shared/hooks/use-scope-value'
 
 const defaultSettings: UserSettings = {
   pdfViewer: 'pdfjs',
@@ -33,14 +34,28 @@ type UserSettingsContextValue = {
   >
 }
 
+type ScopeSettings = {
+  overallTheme: 'light' | 'dark'
+  keybindings: Keybindings
+}
+
 export const UserSettingsContext = createContext<
   UserSettingsContextValue | undefined
 >(undefined)
 
 export const UserSettingsProvider: FC = ({ children }) => {
-  const [userSettings, setUserSettings] = useState<
+  const [userSettings, setUserSettings] = useState<UserSettings>(
-    UserSettingsContextValue['userSettings']
+    () => getMeta('ol-userSettings') || defaultSettings
-  >(() => getMeta('ol-userSettings') || defaultSettings)
+  )
+
+  // update the global scope 'settings' value, for extensions
+  const [, setScopeSettings] = useScopeValue<ScopeSettings>('settings')
+  useEffect(() => {
+    setScopeSettings({
+      overallTheme: userSettings.overallTheme === 'light-' ? 'light' : 'dark',
+      keybindings: userSettings.mode === 'none' ? 'default' : userSettings.mode,
+    })
+  }, [setScopeSettings, userSettings])
 
   const value = useMemo<UserSettingsContextValue>(
     () => ({
@@ -50,13 +65,6 @@ export const UserSettingsProvider: FC = ({ children }) => {
     [userSettings, setUserSettings]
   )
 
-  // Fire an event to inform non-React code of settings changes
-  useEffect(() => {
-    window.dispatchEvent(
-      new CustomEvent('settings:change', { detail: userSettings })
-    )
-  }, [userSettings])
-
   return (
     <UserSettingsContext.Provider value={value}>
       {children}

services/web/test/frontend/components/editor-left-menu/scope.tsx

@@ -1,4 +1,5 @@
-import { MainDocument, PdfViewer } from '../../../../types/project-settings'
+import { MainDocument } from '../../../../types/project-settings'
+import { PdfViewer } from '../../../../types/user-settings'
 
 type Scope = {
   settings?: {

services/web/types/project-settings.ts

@@ -17,16 +17,12 @@ export type MainDocument = {
 
 export type ProjectCompiler = 'pdflatex' | 'latex' | 'xelatex' | 'lualatex'
 
-export type Keybindings = 'default' | 'vim' | 'emacs'
-
 export type OverallThemeMeta = {
   name: string
   path: string
   val: OverallTheme
 }
 
-export type PdfViewer = 'pdfjs' | 'native'
-
 export type SpellCheckLanguage = {
   name: string
   code: string

services/web/types/user-settings.ts

@@ -1,10 +1,12 @@
-import { Keybindings, PdfViewer } from './project-settings'
 import {
   FontFamily,
   LineHeight,
   OverallTheme,
 } from '@/features/source-editor/extensions/theme'
 
+export type Keybindings = 'none' | 'default' | 'vim' | 'emacs'
+export type PdfViewer = 'pdfjs' | 'native'
+
 export type UserSettings = {
   pdfViewer: PdfViewer
   autoComplete: boolean