mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-11-15 14:43:46 +01:00
Merge pull request #34980 from overleaf/mj-ide-settings-feature
[web] Consolidate ide settings in `features/ide-settings` GitOrigin-RevId: cbf0ff069399f418d8cb0d8165628df190046ea9
This commit is contained in:
Mathias Jakobsen
committed by
Copybot
Copybot
parent
8e2edc4d8d
commit
3a3adf5e5a
@@ -1,383 +0,0 @@
|
||||
import {
|
||||
createContext,
|
||||
FC,
|
||||
useCallback,
|
||||
useContext,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useLayoutContext } from '@/shared/context/layout-context'
|
||||
import AutoCloseBracketsSetting from '@/features/settings/components/editor-settings/auto-close-brackets-setting'
|
||||
import AutoCompleteSetting from '@/features/settings/components/editor-settings/auto-complete-setting'
|
||||
import CodeCheckSetting from '@/features/settings/components/editor-settings/code-check-setting'
|
||||
import PreviewTabsSetting from '@/features/settings/components/editor-settings/preview-tabs-setting'
|
||||
import KeybindingSetting from '@/features/settings/components/editor-settings/keybinding-setting'
|
||||
import PDFViewerSetting from '@/features/settings/components/editor-settings/pdf-viewer-setting'
|
||||
import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
|
||||
import SpellCheckSetting from '@/features/settings/components/editor-settings/spell-check-setting'
|
||||
import DictionarySetting from '@/features/settings/components/editor-settings/dictionary-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import BreadcrumbsSetting from '@/features/settings/components/editor-settings/breadcrumbs-setting'
|
||||
import NonBlinkingCursorSetting from '@/features/settings/components/editor-settings/non-blinking-cursor-setting'
|
||||
import MathPreviewSetting from '@/features/settings/components/editor-settings/math-preview-setting'
|
||||
import RootDocumentSetting from '@/features/settings/components/compiler-settings/root-document-setting'
|
||||
import CompilerSetting from '@/features/settings/components/compiler-settings/compiler-setting'
|
||||
import ImageNameSetting from '@/features/settings/components/compiler-settings/image-name-setting'
|
||||
import DraftSetting from '@/features/settings/components/compiler-settings/draft-setting'
|
||||
import StopOnFirstErrorSetting from '@/features/settings/components/compiler-settings/stop-on-first-error-setting'
|
||||
import AutoCompileSetting from '@/features/settings/components/compiler-settings/auto-compile-setting'
|
||||
import OverallThemeSetting from '@/features/settings/components/appearance-settings/overall-theme-setting'
|
||||
import EditorThemeSetting from '@/features/settings/components/appearance-settings/editor-theme-setting'
|
||||
import FontSizeSetting from '@/features/settings/components/appearance-settings/font-size-setting'
|
||||
import LineHeightSetting from '@/features/settings/components/appearance-settings/line-height-setting'
|
||||
import FontFamilySetting from '@/features/settings/components/appearance-settings/font-family-setting'
|
||||
import DarkModePdfSetting from '@/features/settings/components/appearance-settings/dark-mode-pdf-setting'
|
||||
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import { useFeatureFlag } from '@/shared/context/split-test-context'
|
||||
import ProjectNotificationsSetting from '@/features/settings/components/editor-settings/project-notifications-setting'
|
||||
import getMeta from '@/utils/meta'
|
||||
import type {
|
||||
SettingsEntry,
|
||||
SettingsSection,
|
||||
SettingsSectionHook,
|
||||
} from '@/features/settings/context/types'
|
||||
import EditorTabsSetting from '../components/editor-settings/editor-tabs-setting'
|
||||
import FloatingMenuSetting from '../components/editor-settings/floating-menu-setting'
|
||||
import useEventListener from '@/shared/hooks/use-event-listener'
|
||||
|
||||
const [referenceSearchSettingModule] = importOverleafModules(
|
||||
'referenceSearchSetting'
|
||||
)
|
||||
const ReferenceSearchSetting = referenceSearchSettingModule?.import.default
|
||||
|
||||
const editorTabExtraSectionHooks: SettingsSectionHook[] = importOverleafModules(
|
||||
'settingsModalEditorTabSections'
|
||||
)
|
||||
.map((m: any) => m?.import?.default)
|
||||
.filter((h: unknown): h is SettingsSectionHook => typeof h === 'function')
|
||||
|
||||
const spellcheckExtraSectionHooks: SettingsSectionHook[] =
|
||||
importOverleafModules('settingsModalSpellcheckSections')
|
||||
.map((m: any) => m?.import?.default)
|
||||
.filter((h: unknown): h is SettingsSectionHook => typeof h === 'function')
|
||||
|
||||
const useSlotSections = (hooks: SettingsSectionHook[]): SettingsSection[] =>
|
||||
hooks.map(hook => hook()).filter((s): s is SettingsSection => s != null)
|
||||
|
||||
type SettingsModalState = {
|
||||
show: boolean
|
||||
setShow: (shown: boolean) => void
|
||||
activeTab: string | null | undefined
|
||||
setActiveTab: (tab: string | null | undefined) => void
|
||||
settingsTabs: SettingsEntry[]
|
||||
settingToTabMap: Map<string, string>
|
||||
settingToFocus?: string
|
||||
}
|
||||
|
||||
export const SettingsModalContext = createContext<
|
||||
SettingsModalState | undefined
|
||||
>(undefined)
|
||||
|
||||
export const SettingsModalProvider: FC<React.PropsWithChildren> = ({
|
||||
children,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { isOverleaf } = getMeta('ol-ExposedSettings')
|
||||
const { overallTheme, floatingMenu } = useProjectSettingsContext()
|
||||
const [settingToFocus, setSettingToFocus] = useState<string | undefined>(
|
||||
undefined
|
||||
)
|
||||
|
||||
useEventListener(
|
||||
'ui.focus-setting',
|
||||
useCallback((event: CustomEvent<string | undefined>) => {
|
||||
setSettingToFocus(event.detail)
|
||||
}, [])
|
||||
)
|
||||
|
||||
const { settingsShown, setSettingsShown } = useLayoutContext()
|
||||
|
||||
const hasEmailNotifications = useFeatureFlag('email-notifications')
|
||||
const hasEditorTabs = useFeatureFlag('editor-tabs')
|
||||
const hasToolbarMigration = useFeatureFlag('writefull-toolbar-migration')
|
||||
|
||||
const editorTabExtraSections = useSlotSections(editorTabExtraSectionHooks)
|
||||
const spellcheckExtraSections = useSlotSections(spellcheckExtraSectionHooks)
|
||||
|
||||
const allSettingsTabs: SettingsEntry[] = useMemo(
|
||||
() => [
|
||||
{
|
||||
key: 'editor',
|
||||
title: t('editor'),
|
||||
icon: 'code',
|
||||
sections: [
|
||||
{
|
||||
key: 'general',
|
||||
settings: [
|
||||
{
|
||||
key: 'autoComplete',
|
||||
component: <AutoCompleteSetting />,
|
||||
},
|
||||
{
|
||||
key: 'autoPairDelimiters',
|
||||
component: <AutoCloseBracketsSetting />,
|
||||
},
|
||||
{
|
||||
key: 'nonBlinkingCursor',
|
||||
component: <NonBlinkingCursorSetting />,
|
||||
},
|
||||
{
|
||||
key: 'syntaxValidation',
|
||||
component: <CodeCheckSetting />,
|
||||
},
|
||||
{
|
||||
key: 'editorTabs',
|
||||
component: <EditorTabsSetting />,
|
||||
hidden: !hasEditorTabs,
|
||||
},
|
||||
{
|
||||
key: 'previewTabs',
|
||||
component: <PreviewTabsSetting />,
|
||||
hidden: !hasEditorTabs,
|
||||
},
|
||||
{
|
||||
key: 'mode',
|
||||
component: <KeybindingSetting />,
|
||||
},
|
||||
{
|
||||
key: 'pdfViewer',
|
||||
component: <PDFViewerSetting />,
|
||||
},
|
||||
{
|
||||
key: 'write-and-cite-settings',
|
||||
component: <ReferenceSearchSetting />,
|
||||
hidden: !ReferenceSearchSetting,
|
||||
},
|
||||
{
|
||||
key: 'floating-menu',
|
||||
component: <FloatingMenuSetting />,
|
||||
hidden: !hasToolbarMigration && floatingMenu,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'tools',
|
||||
title: t('tools'),
|
||||
settings: [
|
||||
{
|
||||
key: 'breadcrumbs-setting',
|
||||
component: <BreadcrumbsSetting />,
|
||||
},
|
||||
{
|
||||
key: 'mathPreview',
|
||||
component: <MathPreviewSetting />,
|
||||
},
|
||||
],
|
||||
},
|
||||
...editorTabExtraSections,
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'spelling_and_language',
|
||||
title: t('spelling_and_language'),
|
||||
icon: 'spellcheck',
|
||||
sections: [
|
||||
{
|
||||
key: 'spellcheck',
|
||||
title: t('spellcheck'),
|
||||
settings: [
|
||||
{
|
||||
key: 'spellCheckLanguage',
|
||||
component: <SpellCheckSetting />,
|
||||
},
|
||||
{
|
||||
key: 'dictionary-settings',
|
||||
component: <DictionarySetting />,
|
||||
},
|
||||
],
|
||||
},
|
||||
...spellcheckExtraSections,
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'compiler',
|
||||
title: t('compiler'),
|
||||
icon: 'picture_as_pdf',
|
||||
sections: [
|
||||
{
|
||||
key: 'general',
|
||||
settings: [
|
||||
{
|
||||
key: 'rootDocId',
|
||||
component: <RootDocumentSetting />,
|
||||
},
|
||||
{
|
||||
key: 'compiler',
|
||||
component: <CompilerSetting />,
|
||||
},
|
||||
{
|
||||
key: 'imageName',
|
||||
component: <ImageNameSetting />,
|
||||
},
|
||||
{
|
||||
key: 'draft',
|
||||
component: <DraftSetting />,
|
||||
},
|
||||
{
|
||||
key: 'stopOnFirstError',
|
||||
component: <StopOnFirstErrorSetting />,
|
||||
},
|
||||
{
|
||||
key: 'autoCompile',
|
||||
component: <AutoCompileSetting />,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'appearance',
|
||||
title: t('appearance'),
|
||||
icon: 'brush',
|
||||
sections: [
|
||||
{
|
||||
key: 'general',
|
||||
settings: [
|
||||
{
|
||||
key: 'overallTheme',
|
||||
component: <OverallThemeSetting />,
|
||||
},
|
||||
{
|
||||
key: 'editorTheme',
|
||||
component: <EditorThemeSetting />,
|
||||
},
|
||||
{
|
||||
key: 'pdfDarkMode',
|
||||
component: <DarkModePdfSetting />,
|
||||
hidden: overallTheme === 'light-',
|
||||
},
|
||||
{
|
||||
key: 'fontSize',
|
||||
component: <FontSizeSetting />,
|
||||
},
|
||||
{
|
||||
key: 'fontFamily',
|
||||
component: <FontFamilySetting />,
|
||||
},
|
||||
{
|
||||
key: 'lineHeight',
|
||||
component: <LineHeightSetting />,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
key: 'project_notifications',
|
||||
title: t('project_notifications'),
|
||||
icon: 'notifications' as const,
|
||||
sections: [
|
||||
{
|
||||
key: 'general',
|
||||
settings: [
|
||||
{
|
||||
key: 'projectNotifications',
|
||||
component: <ProjectNotificationsSetting />,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
hidden: !hasEmailNotifications,
|
||||
},
|
||||
|
||||
{
|
||||
key: 'account_settings',
|
||||
title: t('account_settings'),
|
||||
icon: 'settings',
|
||||
href: '/user/settings',
|
||||
},
|
||||
{
|
||||
key: 'subscription',
|
||||
title: t('subscription'),
|
||||
icon: 'account_balance',
|
||||
href: '/user/subscription',
|
||||
hidden: !isOverleaf,
|
||||
},
|
||||
],
|
||||
[
|
||||
t,
|
||||
hasEditorTabs,
|
||||
overallTheme,
|
||||
hasEmailNotifications,
|
||||
isOverleaf,
|
||||
editorTabExtraSections,
|
||||
spellcheckExtraSections,
|
||||
hasToolbarMigration,
|
||||
floatingMenu,
|
||||
]
|
||||
)
|
||||
|
||||
const settingsTabs = useMemo(
|
||||
() => allSettingsTabs.filter(tab => !tab.hidden),
|
||||
[allSettingsTabs]
|
||||
)
|
||||
|
||||
const settingToTabMap = useMemo(() => {
|
||||
const map = new Map<string, string>()
|
||||
settingsTabs
|
||||
.filter(t => 'sections' in t)
|
||||
.forEach(tab => {
|
||||
tab.sections.forEach(section => {
|
||||
section.settings.forEach(setting => {
|
||||
map.set(setting.key, tab.key)
|
||||
})
|
||||
})
|
||||
})
|
||||
return map
|
||||
}, [settingsTabs])
|
||||
|
||||
const [activeTab, setActiveTab] = useState<string | null | undefined>(
|
||||
settingsTabs[0]?.key
|
||||
)
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
show: settingsShown,
|
||||
setShow: setSettingsShown,
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
settingsTabs,
|
||||
settingToTabMap,
|
||||
settingToFocus,
|
||||
}),
|
||||
[
|
||||
settingsShown,
|
||||
setSettingsShown,
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
settingsTabs,
|
||||
settingToTabMap,
|
||||
settingToFocus,
|
||||
]
|
||||
)
|
||||
|
||||
return (
|
||||
<SettingsModalContext.Provider value={value}>
|
||||
{children}
|
||||
</SettingsModalContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export const useSettingsModalContext = () => {
|
||||
const value = useContext(SettingsModalContext)
|
||||
|
||||
if (!value) {
|
||||
throw new Error(
|
||||
`useSettingsModalContext is only available inside SettingsModalProvider`
|
||||
)
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import type { AvailableUnfilledIcon } from '@/shared/components/material-icon'
|
||||
|
||||
export type Setting = {
|
||||
key: string
|
||||
component: ReactNode
|
||||
hidden?: boolean
|
||||
}
|
||||
|
||||
export type SettingsSection = {
|
||||
title?: string
|
||||
key: string
|
||||
settings: Setting[]
|
||||
}
|
||||
|
||||
export type SettingsSectionHook = () => SettingsSection | null
|
||||
|
||||
export type SettingsTab = {
|
||||
key: string
|
||||
icon: AvailableUnfilledIcon
|
||||
sections: SettingsSection[]
|
||||
title: string
|
||||
hidden?: boolean
|
||||
}
|
||||
|
||||
export type SettingsLink = {
|
||||
key: string
|
||||
icon: AvailableUnfilledIcon
|
||||
href: string
|
||||
title: string
|
||||
hidden?: boolean
|
||||
}
|
||||
|
||||
export type SettingsEntry = SettingsLink | SettingsTab
|
||||
Reference in New Issue
Block a user