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