From a853a9276550f59c44225b5034795689bee9427e Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Thu, 20 Mar 2025 10:03:11 +0000
Subject: [PATCH] Merge pull request #24350 from overleaf/dp-settings-modal
Implement new editor settings modal options
GitOrigin-RevId: b16358e29f2ebcac6e7f92f1c0196f5911f2e733
---
services/web/config/settings.defaults.js | 1 +
.../web/frontend/extracted-translations.json | 26 +++++++---
.../features/ide-redesign/components/rail.tsx | 5 ++
.../appearance-settings.tsx | 8 +++
.../editor-theme-setting.tsx | 2 +-
.../font-family-setting.tsx | 32 ++++++++++++
.../appearance-settings/font-size-setting.tsx | 24 +++++++++
.../line-height-setting.tsx | 31 ++++++++++++
.../overall-theme-setting.tsx | 2 +-
.../components/settings/button-setting.tsx | 32 ++++++++++++
.../auto-compile-setting.tsx | 31 ++++++++++++
.../compiler-settings/compiler-setting.tsx | 43 ++++++++++++++++
.../compiler-settings/compiler-settings.tsx | 22 +++++++++
.../compiler-settings/draft-setting.tsx | 43 ++++++++++++++++
.../compiler-settings/image-name-setting.tsx | 43 ++++++++++++++++
.../root-document-setting.tsx | 49 +++++++++++++++++++
.../stop-on-first-error-setting.tsx | 18 +++++++
.../components/settings/dropdown-setting.tsx | 26 ++++++++--
.../auto-close-brackets-setting.tsx | 2 +-
.../editor-settings/dictionary-setting.tsx | 29 +++++++++++
.../dictionary-settings-modal.tsx | 10 ++++
.../editor-settings/editor-settings.tsx | 19 ++++++-
.../editor-settings/keybinding-setting.tsx | 35 +++++++++++++
.../editor-settings/math-preview-setting.tsx | 2 +-
.../editor-settings/pdf-viewer-setting.tsx | 27 ++++++++++
.../editor-settings/spell-check-setting.tsx | 40 +++++++++++++++
.../components/settings/setting.tsx | 8 +--
.../settings/settings-modal-body.tsx | 13 ++---
.../ide-redesign/contexts/rail-context.tsx | 2 +-
.../bootstrap-5/pages/editor/settings.scss | 14 +++---
services/web/locales/en.json | 24 +++++++--
31 files changed, 624 insertions(+), 39 deletions(-)
rename services/web/frontend/js/features/ide-redesign/components/settings/{editor-settings => appearance-settings}/editor-theme-setting.tsx (95%)
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/font-family-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/font-size-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/line-height-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/button-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/auto-compile-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/compiler-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/compiler-settings.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/draft-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/image-name-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/root-document-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/stop-on-first-error-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/dictionary-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/dictionary-settings-modal.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/keybinding-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/pdf-viewer-setting.tsx
create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/spell-check-setting.tsx
diff --git a/services/web/config/settings.defaults.js b/services/web/config/settings.defaults.js
index 54255dffa9..c8bd7a831c 100644
--- a/services/web/config/settings.defaults.js
+++ b/services/web/config/settings.defaults.js
@@ -988,6 +988,7 @@ module.exports = {
editorSidebarComponents: [],
fileTreeToolbarComponents: [],
integrationPanelComponents: [],
+ referenceSearchSetting: [],
},
moduleImportSequence: [
diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 1a96484432..e3d507e088 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -156,11 +156,13 @@
"auto_close_brackets": "",
"auto_compile": "",
"auto_complete": "",
+ "autocompile": "",
"autocompile_disabled": "",
"autocompile_disabled_reason": "",
"autocomplete": "",
"autocomplete_references": "",
- "automatically_inserts_closing_brackets_and_parentheses": "",
+ "automatically_insert_closing_brackets_and_parentheses": "",
+ "automatically_recompile_the_project_as_you_edit": "",
"available_with_group_professional": "",
"back": "",
"back_to_configuration": "",
@@ -232,7 +234,6 @@
"change_the_ownership_of_your_personal_projects": "",
"change_to_group_plan": "",
"change_to_this_plan": "",
- "changes_the_color_scheme_of_the_code_editor": "",
"changing_the_position_of_your_figure": "",
"changing_the_position_of_your_table": "",
"chat": "",
@@ -242,6 +243,7 @@
"checking_project_github_status": "",
"choose_a_custom_color": "",
"choose_from_group_members": "",
+ "choose_how_you_search_your_references": "",
"choose_which_experiments": "",
"clear_cached_files": "",
"clear_search": "",
@@ -316,7 +318,6 @@
"continue_to": "",
"continue_using_free_features": "",
"continue_with_free_plan": "",
- "controls_the_theme_of_the_application_interface": "",
"copied": "",
"copy": "",
"copy_code": "",
@@ -462,13 +463,17 @@
"edit_figure": "",
"edit_sso_configuration": "",
"edit_tag": "",
+ "edit_your_custom_dictionary": "",
"editing": "",
"editing_captions": "",
"editing_tools_to_paraphrase_change_style_and_more": "",
"editor": "",
"editor_and_pdf": "",
"editor_disconected_click_to_reconnect": "",
+ "editor_font_family": "",
+ "editor_font_size": "",
"editor_limit_exceeded_in_this_project": "",
+ "editor_line_height": "",
"editor_only": "",
"editor_only_hide_pdf": "",
"editor_theme": "",
@@ -497,7 +502,6 @@
"enable_stop_on_first_error_under_recompile_dropdown_menu": "",
"enable_stop_on_first_error_under_recompile_dropdown_menu_v2": "",
"enabled": "",
- "enables_a_real_time_equation_preview_in_the_editor": "",
"enables_real_time_syntax_checking_in_the_editor": "",
"enabling": "",
"end_of_document": "",
@@ -533,6 +537,7 @@
"failed_to_send_sso_link_invite_to_email": "",
"fair_usage_policy_applies": "",
"fast": "",
+ "fast_draft": "",
"features_like_track_changes": "",
"file": "",
"file_action_created": "",
@@ -596,7 +601,6 @@
"full_doc_history": "",
"full_width": "",
"future_payments": "",
- "general": "",
"generate_token": "",
"generic_if_problem_continues_contact_us": "",
"generic_linked_file_compile_error": "",
@@ -751,6 +755,7 @@
"i_confirm_am_student": "",
"i_want_to_stay": "",
"id": "",
+ "identify_errors_with_your_compile": "",
"if_you_need_to_customize_your_table_further_you_can": "",
"if_you_want_more_than_x_users_on_your_plan_we_need_to_add_them_for_you": "",
"if_you_want_to_reduce_the_number_of_users_please_contact_support": "",
@@ -1153,7 +1158,6 @@
"pay_now": "",
"payment_provider_unreachable_error": "",
"payment_summary": "",
- "pdf": "",
"pdf_compile_in_progress_error": "",
"pdf_compile_rate_limit_hit": "",
"pdf_compile_try_again": "",
@@ -1508,6 +1512,7 @@
"show_in_code": "",
"show_in_pdf": "",
"show_less": "",
+ "show_live_equation_previews_while_typing": "",
"show_local_file_contents": "",
"show_more": "",
"show_outline": "",
@@ -1541,6 +1546,8 @@
"sort_projects": "",
"source": "",
"spell_check": "",
+ "spellcheck": "",
+ "spellcheck_language": "",
"split_view": "",
"sso": "",
"sso_active": "",
@@ -1633,6 +1640,7 @@
"sure_you_want_to_delete": "",
"sure_you_want_to_leave_group": "",
"switch_back_to_monthly_pay_20_more": "",
+ "switch_compile_mode_for_faster_draft_compilation": "",
"switch_plan": "",
"switch_to_editor": "",
"switch_to_new_editor": "",
@@ -1681,15 +1689,20 @@
"thanks_for_subscribing_you_help_sl": "",
"thanks_settings_updated": "",
"the_add_on_will_remain_active_until": "",
+ "the_code_editor_color_scheme": "",
"the_document_environment_contains_no_content": "",
"the_following_files_already_exist_in_this_project": "",
"the_following_files_and_folders_already_exist_in_this_project": "",
"the_following_folder_already_exists_in_this_project": "",
"the_following_folder_already_exists_in_this_project_plural": "",
+ "the_latex_engine_used_for_compiling": "",
"the_new_overleaf_editor": "",
"the_next_payment_will_be_collected_on": "",
"the_original_text_has_changed": "",
+ "the_overleaf_color_scheme": "",
+ "the_primary_file_for_compiling_your_project": "",
"the_target_folder_could_not_be_found": "",
+ "the_version_of_tex_live_used_for_compiling": "",
"the_width_you_choose_here_is_based_on_the_width_of_the_text_in_your_document": "",
"their_projects_will_be_transferred_to_another_user": "",
"then_x_price_per_month": "",
@@ -2005,6 +2018,7 @@
"will_lose_edit_access_on_date": "",
"with_premium_subscription_you_also_get": "",
"word_count": "",
+ "work_in_vim_or_emacs_emulation_mode": "",
"work_offline": "",
"work_offline_pull_to_overleaf": "",
"work_with_non_overleaf_users": "",
diff --git a/services/web/frontend/js/features/ide-redesign/components/rail.tsx b/services/web/frontend/js/features/ide-redesign/components/rail.tsx
index 66c6c9d4c7..8610f1696e 100644
--- a/services/web/frontend/js/features/ide-redesign/components/rail.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/rail.tsx
@@ -30,6 +30,7 @@ import {
import { RailHelpShowHotkeysModal } from './help/keyboard-shortcuts'
import { RailHelpContactUsModal } from './help/contact-us'
import { HistorySidebar } from '@/features/ide-react/components/history-sidebar'
+import DictionarySettingsModal from './settings/editor-settings/dictionary-settings-modal'
type RailElement = {
icon: AvailableUnfilledIcon
@@ -94,6 +95,10 @@ const RAIL_MODALS: {
key: 'contact-us',
modalComponentFunction: RailHelpContactUsModal,
},
+ {
+ key: 'dictionary',
+ modalComponentFunction: DictionarySettingsModal,
+ },
]
export const RailLayout = () => {
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/appearance-settings.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/appearance-settings.tsx
index 2ab843049e..3bf26221c8 100644
--- a/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/appearance-settings.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/appearance-settings.tsx
@@ -1,10 +1,18 @@
import SettingsSection from '../settings-section'
import OverallThemeSetting from '../appearance-settings/overall-theme-setting'
+import EditorThemeSetting from './editor-theme-setting'
+import FontSizeSetting from './font-size-setting'
+import FontFamilySetting from './font-family-setting'
+import LineHeightSetting from './line-height-setting'
export default function AppearanceSettings() {
return (
+
+
+
+
)
}
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-theme-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/editor-theme-setting.tsx
similarity index 95%
rename from services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-theme-setting.tsx
rename to services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/editor-theme-setting.tsx
index d904257021..eba0fc5b6c 100644
--- a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-theme-setting.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/editor-theme-setting.tsx
@@ -37,7 +37,7 @@ export default function EditorThemeSetting() {
+ )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/font-size-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/font-size-setting.tsx
new file mode 100644
index 0000000000..7893551d34
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/font-size-setting.tsx
@@ -0,0 +1,24 @@
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import { useTranslation } from 'react-i18next'
+import DropdownSetting from '../dropdown-setting'
+
+const sizes = [10, 11, 12, 13, 14, 16, 18, 20, 22, 24]
+const options = sizes.map(size => ({
+ value: size,
+ label: `${size}px`,
+}))
+
+export default function FontSizeSetting() {
+ const { fontSize, setFontSize } = useProjectSettingsContext()
+ const { t } = useTranslation()
+
+ return (
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/line-height-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/line-height-setting.tsx
new file mode 100644
index 0000000000..1102a9ad74
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/line-height-setting.tsx
@@ -0,0 +1,31 @@
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import { useTranslation } from 'react-i18next'
+import DropdownSetting from '../dropdown-setting'
+
+export default function LineHeightSetting() {
+ const { lineHeight, setLineHeight } = useProjectSettingsContext()
+ const { t } = useTranslation()
+
+ return (
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/overall-theme-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/overall-theme-setting.tsx
index 6249da1ceb..670cc1af62 100644
--- a/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/overall-theme-setting.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/overall-theme-setting.tsx
@@ -35,7 +35,7 @@ export default function OverallThemeSetting() {
void
+ description?: string
+ disabled?: boolean
+}) {
+ return (
+
+
+ {buttonText}
+
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/auto-compile-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/auto-compile-setting.tsx
new file mode 100644
index 0000000000..55bfc4eafb
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/auto-compile-setting.tsx
@@ -0,0 +1,31 @@
+import ToggleSetting from '../toggle-setting'
+import { useTranslation } from 'react-i18next'
+import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
+import { useCallback } from 'react'
+import * as eventTracking from '../../../../../infrastructure/event-tracking'
+
+export default function AutoCompileSetting() {
+ const { autoCompile, setAutoCompile } = useCompileContext()
+ const { t } = useTranslation()
+
+ const sendEventAndSet = useCallback(
+ (value: boolean) => {
+ eventTracking.sendMB('recompile-setting-changed', {
+ setting: 'auto-compile',
+ settingVal: value,
+ })
+ setAutoCompile(value)
+ },
+ [setAutoCompile]
+ )
+
+ return (
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/compiler-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/compiler-setting.tsx
new file mode 100644
index 0000000000..bb30add130
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/compiler-setting.tsx
@@ -0,0 +1,43 @@
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import DropdownSetting from '../dropdown-setting'
+import type { Option } from '../dropdown-setting'
+import { useTranslation } from 'react-i18next'
+import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
+import { ProjectCompiler } from '../../../../../../../types/project-settings'
+
+const OPTIONS: Option[] = [
+ {
+ value: 'pdflatex',
+ label: 'pdfLaTeX',
+ },
+ {
+ value: 'latex',
+ label: 'LaTeX',
+ },
+ {
+ value: 'xelatex',
+ label: 'XeLaTeX',
+ },
+ {
+ value: 'lualatex',
+ label: 'LuaLaTeX',
+ },
+]
+
+export default function CompilerSetting() {
+ const { compiler, setCompiler } = useProjectSettingsContext()
+ const { t } = useTranslation()
+ const { write } = usePermissionsContext()
+
+ return (
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/compiler-settings.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/compiler-settings.tsx
new file mode 100644
index 0000000000..80c0835478
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/compiler-settings.tsx
@@ -0,0 +1,22 @@
+import SettingsSection from '../settings-section'
+import AutoCompileSetting from './auto-compile-setting'
+import CompilerSetting from './compiler-setting'
+import DraftSetting from './draft-setting'
+import ImageNameSetting from './image-name-setting'
+import RootDocumentSetting from './root-document-setting'
+import StopOnFirstErrorSetting from './stop-on-first-error-setting'
+
+export default function CompilerSettings() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+ >
+ )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/draft-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/draft-setting.tsx
new file mode 100644
index 0000000000..fcdd546eda
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/draft-setting.tsx
@@ -0,0 +1,43 @@
+import { useTranslation } from 'react-i18next'
+import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
+import { useCallback, useMemo } from 'react'
+import * as eventTracking from '../../../../../infrastructure/event-tracking'
+import DropdownSetting from '../dropdown-setting'
+
+export default function DraftSetting() {
+ const { draft, setDraft } = useCompileContext()
+ const { t } = useTranslation()
+
+ const sendEventAndSet = useCallback(
+ (value: boolean) => {
+ eventTracking.sendMB('recompile-setting-changed', {
+ setting: 'compile-mode',
+ settingVal: value,
+ })
+ setDraft(value)
+ },
+ [setDraft]
+ )
+
+ const options = useMemo(
+ () => [
+ { label: t('normal'), value: false },
+ {
+ label: t('fast_draft'),
+ value: true,
+ },
+ ],
+ [t]
+ )
+
+ return (
+
+ )
+}
diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/image-name-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/image-name-setting.tsx
new file mode 100644
index 0000000000..2c289c153b
--- /dev/null
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/image-name-setting.tsx
@@ -0,0 +1,43 @@
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import DropdownSetting from '../dropdown-setting'
+import type { Option } from '../dropdown-setting'
+import { useTranslation } from 'react-i18next'
+import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
+import { useMemo } from 'react'
+import getMeta from '@/utils/meta'
+
+export default function ImageNameSetting() {
+ const { imageName, setImageName } = useProjectSettingsContext()
+ const { t } = useTranslation()
+ const { write } = usePermissionsContext()
+
+ const allowedImageNames = useMemo(
+ () => getMeta('ol-allowedImageNames') || [],
+ []
+ )
+
+ const options: Array