From 2c6aa3d4a7f71c5b9559d16c558ef8383f92d2c7 Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Wed, 2 Oct 2024 10:34:00 +0100 Subject: [PATCH] Merge pull request #20381 from overleaf/ae-api-settings Add "settings" object to global scope store GitOrigin-RevId: 1d5c7c3a1b417be0726c4a5e95e611ded47c13c4 --- .../settings/settings-keybindings.tsx | 2 +- .../settings/settings-pdf-viewer.tsx | 2 +- .../ide-react/context/ide-react-context.tsx | 1 + .../js/shared/context/ide-context.tsx | 2 ++ .../shared/context/user-settings-context.tsx | 30 ++++++++++++------- .../components/editor-left-menu/scope.tsx | 3 +- services/web/types/project-settings.ts | 4 --- services/web/types/user-settings.ts | 4 ++- 8 files changed, 29 insertions(+), 19 deletions(-) diff --git a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-keybindings.tsx b/services/web/frontend/js/features/editor-left-menu/components/settings/settings-keybindings.tsx index b89f176503..45abadff03 100644 --- a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-keybindings.tsx +++ b/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' diff --git a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-pdf-viewer.tsx b/services/web/frontend/js/features/editor-left-menu/components/settings/settings-pdf-viewer.tsx index a79545a426..7adea8c57c 100644 --- a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-pdf-viewer.tsx +++ b/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' diff --git a/services/web/frontend/js/features/ide-react/context/ide-react-context.tsx b/services/web/frontend/js/features/ide-react/context/ide-react-context.tsx index a164931cbc..807d4552e1 100644 --- a/services/web/frontend/js/features/ide-react/context/ide-react-context.tsx +++ b/services/web/frontend/js/features/ide-react/context/ide-react-context.tsx @@ -44,6 +44,7 @@ export const IdeReactContext = createContext( ) function populateIdeReactScope(store: ReactScopeValueStore) { + store.set('settings', {}) store.set('sync_tex_error', false) } diff --git a/services/web/frontend/js/shared/context/ide-context.tsx b/services/web/frontend/js/shared/context/ide-context.tsx index ea7da8e358..f3d73984a3 100644 --- a/services/web/frontend/js/shared/context/ide-context.tsx +++ b/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 = { diff --git a/services/web/frontend/js/shared/context/user-settings-context.tsx b/services/web/frontend/js/shared/context/user-settings-context.tsx index 755fc06bbe..49f5d446d1 100644 --- a/services/web/frontend/js/shared/context/user-settings-context.tsx +++ b/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< - UserSettingsContextValue['userSettings'] - >(() => getMeta('ol-userSettings') || defaultSettings) + const [userSettings, setUserSettings] = useState( + () => getMeta('ol-userSettings') || defaultSettings + ) + + // update the global scope 'settings' value, for extensions + const [, setScopeSettings] = useScopeValue('settings') + useEffect(() => { + setScopeSettings({ + overallTheme: userSettings.overallTheme === 'light-' ? 'light' : 'dark', + keybindings: userSettings.mode === 'none' ? 'default' : userSettings.mode, + }) + }, [setScopeSettings, userSettings]) const value = useMemo( () => ({ @@ -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 ( {children} diff --git a/services/web/test/frontend/components/editor-left-menu/scope.tsx b/services/web/test/frontend/components/editor-left-menu/scope.tsx index 0de8ad9fe5..ba1764c359 100644 --- a/services/web/test/frontend/components/editor-left-menu/scope.tsx +++ b/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?: { diff --git a/services/web/types/project-settings.ts b/services/web/types/project-settings.ts index f256a038c2..dd649033b8 100644 --- a/services/web/types/project-settings.ts +++ b/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 diff --git a/services/web/types/user-settings.ts b/services/web/types/user-settings.ts index 6dbb05851e..a574454ddd 100644 --- a/services/web/types/user-settings.ts +++ b/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