mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-11-14 22:23:42 +01:00
Tearing down of old Editor (File tree) (#31784)
* merging ide-redesign/components/file-tree into features/file-tree * moving ide-redesign/contexts/settings-modal-context to features/settings/contexts * use-collapsible-file-tree.tsx → features/file-tree/hooks * use-focus-on-setting.tsx → features/settings/hooks * use-project-notification-preferences.ts → features/settings/hooks * use-rail-overflow.tsx→ features/ide-react/hooks * deleting use-switch-enable-new-editor-state.ts * use-toolbar-menu-editor-commands.tsx → features/source-editor/hooks * npm run extract-translations * modifying the test to target correct buttons and removing a test for old component * adding a test back and modifying it * changing the test GitOrigin-RevId: baa1e9a992c88b84313eea82161354d4958cf1ef
This commit is contained in:
Davinder Singh
@@ -0,0 +1,332 @@
|
||||
import { createContext, FC, 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 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 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 { AvailableUnfilledIcon } from '@/shared/components/material-icon'
|
||||
import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
|
||||
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'
|
||||
|
||||
const [referenceSearchSettingModule] = importOverleafModules(
|
||||
'referenceSearchSetting'
|
||||
)
|
||||
const ReferenceSearchSetting = referenceSearchSettingModule?.import.default
|
||||
|
||||
type Setting = {
|
||||
key: string
|
||||
component: React.ReactNode
|
||||
hidden?: boolean
|
||||
}
|
||||
|
||||
type SettingsSection = {
|
||||
title?: string
|
||||
key: string
|
||||
settings: Setting[]
|
||||
}
|
||||
|
||||
export type SettingsTab = {
|
||||
key: string
|
||||
icon: AvailableUnfilledIcon
|
||||
sections: SettingsSection[]
|
||||
title: string
|
||||
hidden?: boolean
|
||||
}
|
||||
|
||||
type SettingsLink = {
|
||||
key: string
|
||||
icon: AvailableUnfilledIcon
|
||||
href: string
|
||||
title: string
|
||||
hidden?: boolean
|
||||
}
|
||||
|
||||
export type SettingsEntry = SettingsLink | SettingsTab
|
||||
|
||||
type SettingsModalState = {
|
||||
show: boolean
|
||||
setShow: (shown: boolean) => void
|
||||
activeTab: string | null | undefined
|
||||
setActiveTab: (tab: string | null | undefined) => void
|
||||
settingsTabs: SettingsEntry[]
|
||||
settingToTabMap: Map<string, 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 } = useProjectSettingsContext()
|
||||
|
||||
// TODO ide-redesign-cleanup: Rename this field and move it directly into this context
|
||||
const { leftMenuShown, setLeftMenuShown } = useLayoutContext()
|
||||
|
||||
const hasEmailNotifications = useFeatureFlag('email-notifications')
|
||||
|
||||
const allSettingsTabs: SettingsEntry[] = useMemo(
|
||||
() => [
|
||||
{
|
||||
key: 'editor',
|
||||
title: t('editor'),
|
||||
icon: 'code',
|
||||
sections: [
|
||||
{
|
||||
key: 'general',
|
||||
settings: [
|
||||
{
|
||||
key: 'autoComplete',
|
||||
component: <AutoCompleteSetting />,
|
||||
},
|
||||
{
|
||||
key: 'autoPairDelimiters',
|
||||
component: <AutoCloseBracketsSetting />,
|
||||
},
|
||||
{
|
||||
key: 'syntaxValidation',
|
||||
component: <CodeCheckSetting />,
|
||||
},
|
||||
{
|
||||
key: 'mode',
|
||||
component: <KeybindingSetting />,
|
||||
},
|
||||
{
|
||||
key: 'pdfViewer',
|
||||
component: <PDFViewerSetting />,
|
||||
},
|
||||
{
|
||||
key: 'write-and-cite-settings',
|
||||
component: <ReferenceSearchSetting />,
|
||||
hidden: !ReferenceSearchSetting,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'spellcheck',
|
||||
title: t('spellcheck'),
|
||||
settings: [
|
||||
{
|
||||
key: 'spellCheckLanguage',
|
||||
component: <SpellCheckSetting />,
|
||||
},
|
||||
{
|
||||
key: 'dictionary-settings',
|
||||
component: <DictionarySetting />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'tools',
|
||||
title: t('tools'),
|
||||
settings: [
|
||||
{
|
||||
key: 'breadcrumbs-setting',
|
||||
component: <BreadcrumbsSetting />,
|
||||
},
|
||||
{
|
||||
key: 'mathPreview',
|
||||
component: <MathPreviewSetting />,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
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, overallTheme, hasEmailNotifications, isOverleaf]
|
||||
)
|
||||
|
||||
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: leftMenuShown,
|
||||
setShow: setLeftMenuShown,
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
settingsTabs,
|
||||
settingToTabMap,
|
||||
}),
|
||||
[
|
||||
leftMenuShown,
|
||||
setLeftMenuShown,
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
settingsTabs,
|
||||
settingToTabMap,
|
||||
]
|
||||
)
|
||||
|
||||
return (
|
||||
// TODO ide-redesign-cleanup: Merge <EditorLeftMenuProvider> into <SettingsModalProvider>
|
||||
<EditorLeftMenuProvider>
|
||||
<SettingsModalContext.Provider value={value}>
|
||||
{children}
|
||||
</SettingsModalContext.Provider>
|
||||
</EditorLeftMenuProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export const useSettingsModalContext = () => {
|
||||
const value = useContext(SettingsModalContext)
|
||||
|
||||
if (!value) {
|
||||
throw new Error(
|
||||
`useSettingsModalContext is only available inside SettingsModalProvider`
|
||||
)
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
Reference in New Issue
Block a user