{settingsTabs
- .filter(t => 'component' in t)
- .map(({ key, component }) => (
-
- {component}
-
+ .filter(t => 'sections' in t)
+ .map(tab => (
+
))}
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/settings-modal.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/settings-modal.tsx
index a46ec1c710..1ba1315002 100644
--- a/services/web/frontend/js/features/ide-redesign/components/settings/settings-modal.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/settings-modal.tsx
@@ -3,62 +3,33 @@ import OLModal, {
OLModalHeader,
OLModalTitle,
} from '@/shared/components/ol/ol-modal'
-import { useLayoutContext } from '@/shared/context/layout-context'
import { useTranslation } from 'react-i18next'
-import { SettingsEntry, SettingsModalBody } from './settings-modal-body'
+import { SettingsModalBody } from './settings-modal-body'
+import {
+ SettingsModalProvider,
+ useSettingsModalContext,
+} from '../../contexts/settings-modal-context'
+import useFocusOnSetting from '../../hooks/use-focus-on-setting'
-import AppearanceSettings from './appearance-settings/appearance-settings'
-import CompilerSettings from './compiler-settings/compiler-settings'
-import EditorSettings from './editor-settings/editor-settings'
-import { useMemo, useState } from 'react'
+const SettingsModalWrapper = () => {
+ return (
+
+
+
+ )
+}
const SettingsModal = () => {
- // TODO ide-redesign-cleanup: Either rename the field, or introduce a separate
- // one
- const { leftMenuShown, setLeftMenuShown } = useLayoutContext()
const { t } = useTranslation()
- const settingsTabs: SettingsEntry[] = useMemo(
- () => [
- {
- key: 'editor',
- title: t('editor'),
- icon: 'code',
- component: ,
- },
- {
- key: 'compiler',
- title: t('compiler'),
- icon: 'picture_as_pdf',
- component: ,
- },
- {
- key: 'appearance',
- title: t('appearance'),
- icon: 'brush',
- component: ,
- },
- {
- key: 'account_settings',
- title: t('account_settings'),
- icon: 'settings',
- href: '/user/settings',
- },
- {
- key: 'subscription',
- title: t('subscription'),
- icon: 'account_balance',
- href: '/user/subscription',
- },
- ],
- [t]
- )
- const [activeTab, setActiveTab] = useState(
- settingsTabs[0]?.key
- )
+ const { show, setShow, settingsTabs, activeTab, setActiveTab } =
+ useSettingsModalContext()
+
+ useFocusOnSetting()
+
return (
setLeftMenuShown(false)}
+ show={show}
+ onHide={() => setShow(false)}
size="lg"
backdropClassName={
activeTab === 'appearance'
@@ -80,4 +51,4 @@ const SettingsModal = () => {
)
}
-export default SettingsModal
+export default SettingsModalWrapper
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/settings-tab-pane.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/settings-tab-pane.tsx
new file mode 100644
index 0000000000..0a0ad4cdff
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/settings-tab-pane.tsx
@@ -0,0 +1,19 @@
+import { TabPane } from 'react-bootstrap'
+import { SettingsTab } from '../../contexts/settings-modal-context'
+import SettingsSection from './settings-section'
+import { Fragment } from 'react'
+
+export default function SettingsTabPane({ tab }: { tab: SettingsTab }) {
+ const { key, sections } = tab
+ return (
+
+ {sections.map(section => (
+
+ {section.settings.map(({ key, component }) => (
+ {component}
+ ))}
+
+ ))}
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/contexts/settings-modal-context.tsx b/services/web/frontend/js/features/ide-redesign/contexts/settings-modal-context.tsx
new file mode 100644
index 0000000000..998e3314ac
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/contexts/settings-modal-context.tsx
@@ -0,0 +1,289 @@
+import { createContext, FC, useContext, useMemo, useState } from 'react'
+import { useLayoutContext } from '@/shared/context/layout-context'
+import AutoCloseBracketsSetting from '../components/settings/editor-settings/auto-close-brackets-setting'
+import AutoCompleteSetting from '../components/settings/editor-settings/auto-complete-setting'
+import CodeCheckSetting from '../components/settings/editor-settings/code-check-setting'
+import KeybindingSetting from '../components/settings/editor-settings/keybinding-setting'
+import PDFViewerSetting from '../components/settings/editor-settings/pdf-viewer-setting'
+import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
+import SpellCheckSetting from '../components/settings/editor-settings/spell-check-setting'
+import DictionarySetting from '../components/settings/editor-settings/dictionary-setting'
+import { useTranslation } from 'react-i18next'
+import BreadcrumbsSetting from '../components/settings/editor-settings/breadcrumbs-setting'
+import MathPreviewSetting from '../components/settings/editor-settings/math-preview-setting'
+import RootDocumentSetting from '../components/settings/compiler-settings/root-document-setting'
+import CompilerSetting from '../components/settings/compiler-settings/compiler-setting'
+import ImageNameSetting from '../components/settings/compiler-settings/image-name-setting'
+import DraftSetting from '../components/settings/compiler-settings/draft-setting'
+import StopOnFirstErrorSetting from '../components/settings/compiler-settings/stop-on-first-error-setting'
+import AutoCompileSetting from '../components/settings/compiler-settings/auto-compile-setting'
+import OverallThemeSetting from '../components/settings/appearance-settings/overall-theme-setting'
+import EditorThemeSetting from '../components/settings/appearance-settings/editor-theme-setting'
+import FontSizeSetting from '../components/settings/appearance-settings/font-size-setting'
+import LineHeightSetting from '../components/settings/appearance-settings/line-height-setting'
+import FontFamilySetting from '../components/settings/appearance-settings/font-family-setting'
+import { AvailableUnfilledIcon } from '@/shared/components/material-icon'
+import { EditorLeftMenuProvider } from '@/features/editor-left-menu/components/editor-left-menu-context'
+
+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
+}
+
+type SettingsLink = {
+ key: string
+ icon: AvailableUnfilledIcon
+ href: string
+ title: string
+}
+
+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
+}
+
+export const SettingsModalContext = createContext<
+ SettingsModalState | undefined
+>(undefined)
+
+export const SettingsModalProvider: FC = ({
+ children,
+}) => {
+ const { t } = useTranslation()
+
+ // TODO ide-redesign-cleanup: Rename this field and move it directly into this context
+ const { leftMenuShown, setLeftMenuShown } = useLayoutContext()
+ const settingsTabs: SettingsEntry[] = useMemo(
+ () => [
+ {
+ key: 'editor',
+ title: t('editor'),
+ icon: 'code',
+ sections: [
+ {
+ key: 'general',
+ settings: [
+ {
+ key: 'autoComplete',
+ component: ,
+ },
+ {
+ key: 'autoPairDelimiters',
+ component: ,
+ },
+ {
+ key: 'syntaxValidation',
+ component: ,
+ },
+ {
+ key: 'mode',
+ component: ,
+ },
+ {
+ key: 'pdfViewer',
+ component: ,
+ },
+ {
+ key: 'write-and-cite-settings',
+ component: ,
+ hidden: !ReferenceSearchSetting,
+ },
+ ],
+ },
+ {
+ key: 'spellcheck',
+ title: t('spellcheck'),
+ settings: [
+ {
+ key: 'spellCheckLanguage',
+ component: ,
+ },
+ {
+ key: 'dictionary-settings',
+ component: ,
+ },
+ ],
+ },
+ {
+ key: 'tools',
+ title: t('tools'),
+ settings: [
+ {
+ key: 'breadcrumbs-setting',
+ component: ,
+ },
+ {
+ key: 'mathPreview',
+ component: ,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ key: 'compiler',
+ title: t('compiler'),
+ icon: 'picture_as_pdf',
+ sections: [
+ {
+ key: 'general',
+ settings: [
+ {
+ key: 'rootDocId',
+ component: ,
+ },
+ {
+ key: 'compiler',
+ component: ,
+ },
+ {
+ key: 'imageName',
+ component: ,
+ },
+ {
+ key: 'draft',
+ component: ,
+ },
+ {
+ key: 'stopOnFirstError',
+ component: ,
+ },
+ {
+ key: 'autoCompile',
+ component: ,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ key: 'appearance',
+ title: t('appearance'),
+ icon: 'brush',
+ sections: [
+ {
+ key: 'general',
+ settings: [
+ {
+ key: 'overallTheme',
+ component: ,
+ },
+ {
+ key: 'editorTheme',
+ component: ,
+ },
+ {
+ key: 'fontSize',
+ component: ,
+ },
+ {
+ key: 'fontFamily',
+ component: ,
+ },
+ {
+ key: 'lineHeight',
+ component: ,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ key: 'account_settings',
+ title: t('account_settings'),
+ icon: 'settings',
+ href: '/user/settings',
+ },
+ {
+ key: 'subscription',
+ title: t('subscription'),
+ icon: 'account_balance',
+ href: '/user/subscription',
+ },
+ ],
+ [t]
+ )
+
+ const settingToTabMap = useMemo(() => {
+ const map = new Map()
+ 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(
+ 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 into
+
+
+ {children}
+
+
+ )
+}
+
+export const useSettingsModalContext = () => {
+ const value = useContext(SettingsModalContext)
+
+ if (!value) {
+ throw new Error(
+ `useSettingsModalContext is only available inside SettingsModalProvider`
+ )
+ }
+
+ return value
+}
diff --git a/services/web/frontend/js/features/ide-redesign/hooks/use-focus-on-setting.tsx b/services/web/frontend/js/features/ide-redesign/hooks/use-focus-on-setting.tsx
new file mode 100644
index 0000000000..49fc596497
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/hooks/use-focus-on-setting.tsx
@@ -0,0 +1,56 @@
+import { useEditorLeftMenuContext } from '@/features/editor-left-menu/components/editor-left-menu-context'
+import { useEffect, useState } from 'react'
+import { useSettingsModalContext } from '../contexts/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])
+}