overleaf/services/web/frontend/js/features/editor-left-menu/context/project-settings-context.tsx
M Fahru 6c41a65200 migrate user-wide settings post request from angular controller to react
GitOrigin-RevId: b5440178a11b82c5a5840eb310416f1519f85bae
2023-01-11 09:05:57 +00:00

168 lines
3.9 KiB
TypeScript

import { createContext, useContext, useMemo } from 'react'
import type { PropsWithChildren } from 'react'
import type {
FontFamily,
LineHeight,
OverallTheme,
} from '../../../../../modules/source-editor/frontend/js/extensions/theme'
import type {
Keybindings,
PdfViewer,
ProjectCompiler,
} from '../../../../../types/project-settings'
import useSetProjectWideSettings from '../hooks/use-set-project-wide-settings'
import useSetUserWideSettings from '../hooks/use-set-user-wide-settings'
type ProjectSettingsContextValue = {
compiler?: ProjectCompiler
setCompiler: (compiler: ProjectCompiler) => void
imageName?: string
setImageName: (imageName: string) => void
rootDocId?: string
setRootDocId: (rootDocId: string) => void
spellCheckLanguage?: string
setSpellCheckLanguage: (spellCheckLanguage: string) => void
autoComplete: boolean
setAutoComplete: (autoComplete: boolean) => void
autoPairDelimiters: boolean
setAutoPairDelimiters: (autoPairDelimiters: boolean) => void
syntaxValidation: boolean
setSyntaxValidation: (syntaxValidation: boolean) => void
mode: Keybindings
setMode: (mode: Keybindings) => void
editorTheme: string
setEditorTheme: (editorTheme: string) => void
overallTheme: OverallTheme
setOverallTheme: (overallTheme: OverallTheme) => void
fontSize: string
setFontSize: (fontSize: string) => void
fontFamily: FontFamily
setFontFamily: (fontFamily: FontFamily) => void
lineHeight: LineHeight
setLineHeight: (lineHeight: LineHeight) => void
pdfViewer: PdfViewer
setPdfViewer: (pdfViewer: PdfViewer) => void
}
export const ProjectSettingsContext = createContext<
ProjectSettingsContextValue | undefined
>(undefined)
export function ProjectSettingsProvider({
children,
}: PropsWithChildren<Record<string, never>>) {
const {
compiler,
setCompiler,
imageName,
setImageName,
rootDocId,
setRootDocId,
spellCheckLanguage,
setSpellCheckLanguage,
} = useSetProjectWideSettings()
const {
autoComplete,
setAutoComplete,
autoPairDelimiters,
setAutoPairDelimiters,
syntaxValidation,
setSyntaxValidation,
editorTheme,
setEditorTheme,
overallTheme,
setOverallTheme,
mode,
setMode,
fontSize,
setFontSize,
fontFamily,
setFontFamily,
lineHeight,
setLineHeight,
pdfViewer,
setPdfViewer,
} = useSetUserWideSettings()
const value: ProjectSettingsContextValue = useMemo(
() => ({
compiler,
setCompiler,
imageName,
setImageName,
rootDocId,
setRootDocId,
spellCheckLanguage,
setSpellCheckLanguage,
autoComplete,
setAutoComplete,
autoPairDelimiters,
setAutoPairDelimiters,
syntaxValidation,
setSyntaxValidation,
editorTheme,
setEditorTheme,
overallTheme,
setOverallTheme,
mode,
setMode,
fontSize,
setFontSize,
fontFamily,
setFontFamily,
lineHeight,
setLineHeight,
pdfViewer,
setPdfViewer,
}),
[
compiler,
setCompiler,
imageName,
setImageName,
rootDocId,
setRootDocId,
spellCheckLanguage,
setSpellCheckLanguage,
autoComplete,
setAutoComplete,
autoPairDelimiters,
setAutoPairDelimiters,
syntaxValidation,
setSyntaxValidation,
editorTheme,
setEditorTheme,
overallTheme,
setOverallTheme,
mode,
setMode,
fontSize,
setFontSize,
fontFamily,
setFontFamily,
lineHeight,
setLineHeight,
pdfViewer,
setPdfViewer,
]
)
return (
<ProjectSettingsContext.Provider value={value}>
{children}
</ProjectSettingsContext.Provider>
)
}
export function useProjectSettingsContext() {
const context = useContext(ProjectSettingsContext)
if (!context) {
throw new Error(
'useProjectSettingsContext is only available inside ProjectSettingsProvider'
)
}
return context
}