mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-11-15 06:33:55 +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
+1
-1
@@ -3,7 +3,7 @@ import RadioButtonSetting, { RadioOption } from '../radio-button-setting'
|
||||
import {
|
||||
NotificationLevel,
|
||||
useProjectNotificationPreferences,
|
||||
} from '../../../ide-redesign/hooks/use-project-notification-preferences'
|
||||
} from '../../hooks/use-project-notification-preferences'
|
||||
|
||||
export default function ProjectNotificationsSetting() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import MaterialIcon from '@/shared/components/material-icon'
|
||||
|
||||
import { Nav, NavLink, TabContainer, TabContent } from 'react-bootstrap'
|
||||
import { SettingsEntry } from '../../ide-redesign/contexts/settings-modal-context'
|
||||
import { SettingsEntry } from '../context/settings-modal-context'
|
||||
import SettingsTabPane from './settings-tab-pane'
|
||||
import BetaBadgeIcon from '@/shared/components/beta-badge-icon'
|
||||
import OLTooltip from '@/shared/components/ol/ol-tooltip'
|
||||
|
||||
@@ -9,8 +9,8 @@ import { SettingsModalBody } from './settings-modal-body'
|
||||
import {
|
||||
SettingsModalProvider,
|
||||
useSettingsModalContext,
|
||||
} from '../../ide-redesign/contexts/settings-modal-context'
|
||||
import useFocusOnSetting from '../../ide-redesign/hooks/use-focus-on-setting'
|
||||
} from '../context/settings-modal-context'
|
||||
import useFocusOnSetting from '../hooks/use-focus-on-setting'
|
||||
|
||||
const SettingsModalWrapper = () => {
|
||||
return (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { TabPane } from 'react-bootstrap'
|
||||
import { SettingsTab } from '../../ide-redesign/contexts/settings-modal-context'
|
||||
import { SettingsTab } from '../context/settings-modal-context'
|
||||
import SettingsSection from './settings-section'
|
||||
import { Fragment } from 'react'
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { useEditorLeftMenuContext } from '@/features/editor-left-menu/components/editor-left-menu-context'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useSettingsModalContext } from '../context/settings-modal-context'
|
||||
|
||||
/**
|
||||
* A hook to scroll to and focus on a specific setting in the settings modal
|
||||
*/
|
||||
export default function useFocusOnSetting() {
|
||||
const { activeTab, setActiveTab, settingToTabMap } = useSettingsModalContext()
|
||||
const { settingToFocus } = useEditorLeftMenuContext()
|
||||
|
||||
const [eltToScrollTo, setEltToScrollTo] = useState<{
|
||||
tab: string | undefined
|
||||
element: HTMLElement | null
|
||||
} | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (settingToFocus) {
|
||||
const newActiveTab = settingToTabMap.get(settingToFocus)
|
||||
|
||||
const settingElt: HTMLDivElement | null = document.querySelector(
|
||||
`#setting-${settingToFocus}`
|
||||
)
|
||||
|
||||
const settingToFocusElt: HTMLElement | null =
|
||||
settingElt?.querySelector('input, select, button') ?? settingElt
|
||||
|
||||
setActiveTab(newActiveTab)
|
||||
setEltToScrollTo({ tab: newActiveTab, element: settingToFocusElt })
|
||||
}
|
||||
|
||||
// clear the focus setting
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('ui.focus-setting', { detail: undefined })
|
||||
)
|
||||
}, [settingToFocus, activeTab, setActiveTab, settingToTabMap])
|
||||
|
||||
// Scroll to the focused setting, once the correct tab is open
|
||||
useEffect(() => {
|
||||
if (!eltToScrollTo) {
|
||||
return
|
||||
}
|
||||
|
||||
const { tab, element } = eltToScrollTo
|
||||
|
||||
if (tab === activeTab) {
|
||||
element?.scrollIntoView({
|
||||
block: 'center',
|
||||
behavior: 'smooth',
|
||||
})
|
||||
element?.focus()
|
||||
|
||||
setEltToScrollTo(null)
|
||||
}
|
||||
}, [eltToScrollTo, activeTab])
|
||||
}
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useProjectContext } from '@/shared/context/project-context'
|
||||
import { getJSON, postJSON } from '@/infrastructure/fetch-json'
|
||||
import { debugConsole } from '@/utils/debugging'
|
||||
import type { NotificationPreferencesSchema } from '../../../../../modules/notifications/app/src/types.js'
|
||||
|
||||
export type NotificationLevel = 'all' | 'replies' | 'off'
|
||||
|
||||
/**
|
||||
* Map UI notification level to backend preferences
|
||||
*/
|
||||
function levelToPreferences(
|
||||
level: NotificationLevel
|
||||
): NotificationPreferencesSchema {
|
||||
switch (level) {
|
||||
case 'all':
|
||||
return {
|
||||
trackedChangesOnOwnProject: true,
|
||||
trackedChangesOnInvitedProject: true,
|
||||
commentOnOwnProject: true,
|
||||
commentOnInvitedProject: true,
|
||||
repliesOnOwnProject: true,
|
||||
repliesOnInvitedProject: true,
|
||||
repliesOnAuthoredThread: true,
|
||||
repliesOnParticipatingThread: true,
|
||||
}
|
||||
case 'replies':
|
||||
return {
|
||||
trackedChangesOnOwnProject: false,
|
||||
trackedChangesOnInvitedProject: false,
|
||||
commentOnOwnProject: false,
|
||||
commentOnInvitedProject: false,
|
||||
repliesOnOwnProject: false,
|
||||
repliesOnInvitedProject: false,
|
||||
repliesOnAuthoredThread: true,
|
||||
repliesOnParticipatingThread: true,
|
||||
}
|
||||
case 'off':
|
||||
return {
|
||||
trackedChangesOnOwnProject: false,
|
||||
trackedChangesOnInvitedProject: false,
|
||||
commentOnOwnProject: false,
|
||||
commentOnInvitedProject: false,
|
||||
repliesOnOwnProject: false,
|
||||
repliesOnInvitedProject: false,
|
||||
repliesOnAuthoredThread: false,
|
||||
repliesOnParticipatingThread: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Map backend preferences to UI notification level
|
||||
*/
|
||||
function preferencesToLevel(
|
||||
preferences: NotificationPreferencesSchema
|
||||
): NotificationLevel {
|
||||
// If all notifications are off
|
||||
if (
|
||||
!preferences.commentOnOwnProject &&
|
||||
!preferences.commentOnInvitedProject &&
|
||||
!preferences.repliesOnOwnProject &&
|
||||
!preferences.repliesOnInvitedProject &&
|
||||
!preferences.repliesOnAuthoredThread &&
|
||||
!preferences.repliesOnParticipatingThread
|
||||
) {
|
||||
return 'off'
|
||||
}
|
||||
|
||||
// If only reply-related notifications are on
|
||||
if (
|
||||
!preferences.commentOnOwnProject &&
|
||||
!preferences.commentOnInvitedProject &&
|
||||
(preferences.repliesOnAuthoredThread ||
|
||||
preferences.repliesOnParticipatingThread)
|
||||
) {
|
||||
return 'replies'
|
||||
}
|
||||
|
||||
// Default to 'all' for any other combination
|
||||
return 'all'
|
||||
}
|
||||
|
||||
export function useProjectNotificationPreferences() {
|
||||
const { projectId } = useProjectContext()
|
||||
const [notificationLevel, setNotificationLevel] =
|
||||
useState<NotificationLevel>('all')
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
|
||||
// Load preferences on mount
|
||||
useEffect(() => {
|
||||
getJSON<NotificationPreferencesSchema>(
|
||||
`/notifications/preferences/project/${projectId}`
|
||||
)
|
||||
.then(prefs => {
|
||||
setNotificationLevel(preferencesToLevel(prefs))
|
||||
})
|
||||
.catch(debugConsole.error)
|
||||
.finally(() => setIsLoading(false))
|
||||
}, [projectId])
|
||||
|
||||
const setLevel = useCallback(
|
||||
(level: NotificationLevel) => {
|
||||
setNotificationLevel(level)
|
||||
const preferences = levelToPreferences(level)
|
||||
postJSON(`/notifications/preferences/project/${projectId}`, {
|
||||
body: preferences,
|
||||
}).catch(debugConsole.error)
|
||||
},
|
||||
[projectId]
|
||||
)
|
||||
|
||||
return {
|
||||
notificationLevel,
|
||||
setNotificationLevel: setLevel,
|
||||
isLoading,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user