Merge pull request #24350 from overleaf/dp-settings-modal

Implement new editor settings modal options

GitOrigin-RevId: b16358e29f2ebcac6e7f92f1c0196f5911f2e733

services/web/config/settings.defaults.js

@@ -988,6 +988,7 @@ module.exports = {
     editorSidebarComponents: [],
     fileTreeToolbarComponents: [],
     integrationPanelComponents: [],
+    referenceSearchSetting: [],
   },
 
   moduleImportSequence: [

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": "",

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 = () => {

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 (
     <SettingsSection>
       <OverallThemeSetting />
+      <EditorThemeSetting />
+      <FontSizeSetting />
+      <FontFamilySetting />
+      <LineHeightSetting />
     </SettingsSection>
   )
 }

services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-theme-setting.tsx → services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/editor-theme-setting.tsx

@@ -37,7 +37,7 @@ export default function EditorThemeSetting() {
     <DropdownSetting
       id="editorTheme"
       label={t('editor_theme')}
-      description={t('changes_the_color_scheme_of_the_code_editor')}
+      description={t('the_code_editor_color_scheme')}
       options={options}
       onChange={setEditorTheme}
       value={editorTheme}

services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/font-family-setting.tsx

@@ -0,0 +1,32 @@
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import { useTranslation } from 'react-i18next'
+import DropdownSetting from '../dropdown-setting'
+
+export default function FontFamilySetting() {
+  const { fontFamily, setFontFamily } = useProjectSettingsContext()
+  const { t } = useTranslation()
+
+  return (
+    <DropdownSetting
+      id="fontFamily"
+      label={t('editor_font_family')}
+      options={[
+        {
+          value: 'monaco',
+          label: 'Monaco / Menlo / Consolas',
+        },
+        {
+          value: 'lucida',
+          label: 'Lucida / Source Code Pro',
+        },
+        {
+          value: 'opendyslexicmono',
+          label: 'OpenDyslexic Mono',
+        },
+      ]}
+      onChange={setFontFamily}
+      value={fontFamily}
+      width="wide"
+    />
+  )
+}

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 (
+    <DropdownSetting
+      id="fontSize"
+      label={t('editor_font_size')}
+      options={options}
+      onChange={setFontSize}
+      value={fontSize}
+    />
+  )
+}

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 (
+    <DropdownSetting
+      id="lineHeight"
+      label={t('editor_line_height')}
+      options={[
+        {
+          value: 'compact',
+          label: t('compact'),
+        },
+        {
+          value: 'normal',
+          label: t('normal'),
+        },
+        {
+          value: 'wide',
+          label: t('wide'),
+        },
+      ]}
+      onChange={setLineHeight}
+      value={lineHeight}
+    />
+  )
+}

services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/overall-theme-setting.tsx

@@ -35,7 +35,7 @@ export default function OverallThemeSetting() {
     <DropdownSetting
       id="overallTheme"
       label={t('overall_theme')}
-      description={t('controls_the_theme_of_the_application_interface')}
+      description={t('the_overleaf_color_scheme')}
       options={options}
       onChange={setOverallTheme}
       value={overallTheme}

services/web/frontend/js/features/ide-redesign/components/settings/button-setting.tsx

@@ -0,0 +1,32 @@
+import OLButton from '@/features/ui/components/ol/ol-button'
+import Setting from './setting'
+
+export default function ButtonSetting({
+  id,
+  label,
+  buttonText,
+  onClick,
+  description,
+  disabled,
+}: {
+  id: string
+  label: string
+  buttonText: string
+  onClick: () => void
+  description?: string
+  disabled?: boolean
+}) {
+  return (
+    <Setting controlId={id} label={label} description={description}>
+      <OLButton
+        id={id}
+        variant="secondary"
+        size="sm"
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {buttonText}
+      </OLButton>
+    </Setting>
+  )
+}

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 (
+    <ToggleSetting
+      id="autoCompile"
+      label={t('autocompile')}
+      description={t('automatically_recompile_the_project_as_you_edit')}
+      checked={autoCompile}
+      onChange={sendEventAndSet}
+    />
+  )
+}

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<ProjectCompiler>[] = [
+  {
+    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 (
+    <DropdownSetting
+      id="imageName"
+      label={t('tex_live_version')}
+      description={t('the_latex_engine_used_for_compiling')}
+      disabled={!write}
+      options={OPTIONS}
+      onChange={setCompiler}
+      value={compiler}
+    />
+  )
+}

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 (
+    <>
+      <SettingsSection>
+        <RootDocumentSetting />
+        <CompilerSetting />
+        <ImageNameSetting />
+        <DraftSetting />
+        <StopOnFirstErrorSetting />
+        <AutoCompileSetting />
+      </SettingsSection>
+    </>
+  )
+}

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 (
+    <DropdownSetting
+      id="draft"
+      label={t('compile_mode')}
+      options={options}
+      description={t('switch_compile_mode_for_faster_draft_compilation')}
+      value={draft}
+      onChange={sendEventAndSet}
+    />
+  )
+}

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<Option> = useMemo(
+    () =>
+      allowedImageNames.map(({ imageName, imageDesc }) => ({
+        value: imageName,
+        label: imageDesc,
+      })),
+    [allowedImageNames]
+  )
+
+  if (allowedImageNames.length === 0) {
+    return null
+  }
+
+  return (
+    <DropdownSetting
+      id="compiler"
+      label={t('compiler')}
+      description={t('the_version_of_tex_live_used_for_compiling')}
+      disabled={!write}
+      options={options}
+      onChange={setImageName}
+      value={imageName}
+    />
+  )
+}

services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/root-document-setting.tsx

@@ -0,0 +1,49 @@
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import DropdownSetting from '../dropdown-setting'
+import { useMemo } from 'react'
+import type { Option } from '../dropdown-setting'
+import { useTranslation } from 'react-i18next'
+import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
+import { useFileTreeData } from '@/shared/context/file-tree-data-context'
+import { isValidTeXFile } from '@/main/is-valid-tex-file'
+
+export default function RootDocumentSetting() {
+  const { rootDocId, setRootDocId } = useProjectSettingsContext()
+  const { t } = useTranslation()
+  const { write } = usePermissionsContext()
+  const { docs } = useFileTreeData()
+
+  const validDocsOptions = useMemo(() => {
+    const filteredDocs =
+      docs?.filter(
+        doc => isValidTeXFile(doc.doc.name) || rootDocId === doc.doc.id
+      ) ?? []
+
+    const mappedDocs: Array<Option> = filteredDocs.map(doc => ({
+      value: doc.doc.id,
+      label: doc.path,
+    }))
+
+    if (!rootDocId) {
+      mappedDocs.unshift({
+        value: '',
+        label: 'None',
+        disabled: true,
+      })
+    }
+
+    return mappedDocs
+  }, [docs, rootDocId])
+
+  return (
+    <DropdownSetting
+      id="rootDocId"
+      label={t('main_document')}
+      description={t('the_primary_file_for_compiling_your_project')}
+      disabled={!write}
+      options={validDocsOptions}
+      onChange={setRootDocId}
+      value={rootDocId}
+    />
+  )
+}

services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/stop-on-first-error-setting.tsx

@@ -0,0 +1,18 @@
+import ToggleSetting from '../toggle-setting'
+import { useTranslation } from 'react-i18next'
+import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
+
+export default function StopOnFirstErrorSetting() {
+  const { stopOnFirstError, setStopOnFirstError } = useCompileContext()
+  const { t } = useTranslation()
+
+  return (
+    <ToggleSetting
+      id="stopOnFirstError"
+      label={t('stop_on_first_error')}
+      description={t('identify_errors_with_your_compile')}
+      checked={stopOnFirstError}
+      onChange={setStopOnFirstError}
+    />
+  )
+}

services/web/frontend/js/features/ide-redesign/components/settings/dropdown-setting.tsx

@@ -4,7 +4,7 @@ import Setting from './setting'
 import classNames from 'classnames'
 import { Spinner } from 'react-bootstrap-5'
 
-type PossibleValue = string | number
+type PossibleValue = string | number | boolean
 
 export type Option<T extends PossibleValue = string> = {
   value: T
@@ -21,9 +21,12 @@ export type Optgroup<T extends PossibleValue = string> = {
 type SettingsMenuSelectProps<T extends PossibleValue = string> = {
   id: string
   label: string
-  description: string
   options: Array<Option<T>>
   onChange: (val: T) => void
+  description?: string
+  // TODO: We can remove optgroup when the spellcheck setting is
+  // split into 2 and no longer uses it.
+  optgroup?: Optgroup<T>
   value?: T
   disabled?: boolean
   width?: 'default' | 'wide'
@@ -33,10 +36,11 @@ type SettingsMenuSelectProps<T extends PossibleValue = string> = {
 export default function DropdownSetting<T extends PossibleValue = string>({
   id,
   label,
-  description,
   options,
   onChange,
   value,
+  optgroup,
+  description = undefined,
   disabled = false,
   width = 'default',
   loading = false,
@@ -45,7 +49,9 @@ export default function DropdownSetting<T extends PossibleValue = string>({
     event => {
       const selectedValue = event.target.value
       let onChangeValue: PossibleValue = selectedValue
-      if (typeof value === 'number') {
+      if (typeof value === 'boolean') {
+        onChangeValue = selectedValue === 'true'
+      } else if (typeof value === 'number') {
         onChangeValue = parseInt(selectedValue, 10)
       }
       onChange(onChangeValue as T)
@@ -83,6 +89,18 @@ export default function DropdownSetting<T extends PossibleValue = string>({
               {option.label}
             </option>
           ))}
+          {optgroup ? (
+            <optgroup label={optgroup.label}>
+              {optgroup.options.map(option => (
+                <option
+                  value={option.value.toString()}
+                  key={option.value.toString()}
+                >
+                  {option.label}
+                </option>
+              ))}
+            </optgroup>
+          ) : null}
         </OLFormSelect>
       )}
     </Setting>

services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/auto-close-brackets-setting.tsx

@@ -11,7 +11,7 @@ export default function AutoCloseBracketsSetting() {
     <ToggleSetting
       id="autoPairDelimiters"
       label={t('auto_close_brackets')}
-      description={t('automatically_inserts_closing_brackets_and_parentheses')}
+      description={t('automatically_insert_closing_brackets_and_parentheses')}
       checked={autoPairDelimiters}
       onChange={setAutoPairDelimiters}
     />

services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/dictionary-setting.tsx

@@ -0,0 +1,29 @@
+import { useTranslation } from 'react-i18next'
+import { useCallback } from 'react'
+import ButtonSetting from '../button-setting'
+import { useLayoutContext } from '@/shared/context/layout-context'
+import { useRailContext } from '@/features/ide-redesign/contexts/rail-context'
+
+export default function DictionarySetting() {
+  const { t } = useTranslation()
+  const { setActiveModal } = useRailContext()
+
+  // TODO ide-redesign-cleanup: leftMenu is a misnomer, in the
+  // redesign it refers to the settings modal
+  const { setLeftMenuShown } = useLayoutContext()
+
+  const onClick = useCallback(() => {
+    setActiveModal('dictionary')
+    setLeftMenuShown(false)
+  }, [setLeftMenuShown, setActiveModal])
+
+  return (
+    <ButtonSetting
+      id="dictionary-settings"
+      label={t('dictionary')}
+      description={t('edit_your_custom_dictionary')}
+      buttonText={t('edit')}
+      onClick={onClick}
+    />
+  )
+}

services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/dictionary-settings-modal.tsx

@@ -0,0 +1,10 @@
+import DictionaryModal from '@/features/dictionary/components/dictionary-modal'
+import { useRailContext } from '@/features/ide-redesign/contexts/rail-context'
+import { useCallback } from 'react'
+
+export default function DictionarySettingsModal({ show }: { show: boolean }) {
+  const { setActiveModal } = useRailContext()
+  const handleHide = useCallback(() => setActiveModal(null), [setActiveModal])
+
+  return <DictionaryModal show={show} handleHide={handleHide} />
+}

services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-settings.tsx

@@ -1,10 +1,19 @@
-import EditorThemeSetting from './editor-theme-setting'
 import AutoCompleteSetting from './auto-complete-setting'
 import CodeCheckSetting from './code-check-setting'
 import AutoCloseBracketsSetting from './auto-close-brackets-setting'
 import SettingsSection from '../settings-section'
 import MathPreviewSetting from './math-preview-setting'
 import { useTranslation } from 'react-i18next'
+import KeybindingSetting from './keybinding-setting'
+import PDFViewerSetting from './pdf-viewer-setting'
+import SpellCheckSetting from './spell-check-setting'
+import DictionarySetting from './dictionary-setting'
+import importOverleafModules from '../../../../../../macros/import-overleaf-module.macro'
+
+const [referenceSearchSettingModule] = importOverleafModules(
+  'referenceSearchSetting'
+)
+const ReferenceSearchSetting = referenceSearchSettingModule?.import.default
 
 export default function EditorSettings() {
   const { t } = useTranslation()
@@ -12,10 +21,16 @@ export default function EditorSettings() {
   return (
     <>
       <SettingsSection>
-        <EditorThemeSetting />
         <AutoCompleteSetting />
         <AutoCloseBracketsSetting />
         <CodeCheckSetting />
+        <KeybindingSetting />
+        <PDFViewerSetting />
+        {ReferenceSearchSetting && <ReferenceSearchSetting />}
+      </SettingsSection>
+      <SettingsSection title={t('spellcheck')}>
+        <SpellCheckSetting />
+        <DictionarySetting />
       </SettingsSection>
       <SettingsSection title={t('tools')}>
         <MathPreviewSetting />

services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/keybinding-setting.tsx

@@ -0,0 +1,35 @@
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import { useTranslation } from 'react-i18next'
+import DropdownSetting from '../dropdown-setting'
+import { Keybindings } from '../../../../../../../types/user-settings'
+
+const OPTIONS: { value: Keybindings; label: string }[] = [
+  {
+    value: 'default',
+    label: 'None',
+  },
+  {
+    value: 'vim',
+    label: 'Vim',
+  },
+  {
+    value: 'emacs',
+    label: 'Emacs',
+  },
+]
+
+export default function KeybindingSetting() {
+  const { mode, setMode } = useProjectSettingsContext()
+  const { t } = useTranslation()
+
+  return (
+    <DropdownSetting
+      id="mode"
+      label={t('keybindings')}
+      description={t('work_in_vim_or_emacs_emulation_mode')}
+      options={OPTIONS}
+      onChange={setMode}
+      value={mode}
+    />
+  )
+}

services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/math-preview-setting.tsx

@@ -10,7 +10,7 @@ export default function MathPreviewSetting() {
     <ToggleSetting
       id="mathPreview"
       label={t('equation_preview')}
-      description={t('enables_a_real_time_equation_preview_in_the_editor')}
+      description={t('show_live_equation_previews_while_typing')}
       checked={mathPreview}
       onChange={setMathPreview}
     />

services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/pdf-viewer-setting.tsx

@@ -0,0 +1,27 @@
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import { useTranslation } from 'react-i18next'
+import DropdownSetting from '../dropdown-setting'
+
+export default function PDFViewerSetting() {
+  const { pdfViewer, setPdfViewer } = useProjectSettingsContext()
+  const { t } = useTranslation()
+
+  return (
+    <DropdownSetting
+      id="pdfViewer"
+      label={t('pdf_viewer')}
+      options={[
+        {
+          value: 'pdfjs',
+          label: t('overleaf'),
+        },
+        {
+          value: 'native',
+          label: t('browser'),
+        },
+      ]}
+      onChange={setPdfViewer}
+      value={pdfViewer}
+    />
+  )
+}

services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/spell-check-setting.tsx

@@ -0,0 +1,40 @@
+import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
+import { useTranslation } from 'react-i18next'
+import DropdownSetting, { Optgroup } from '../dropdown-setting'
+import { useMemo } from 'react'
+import getMeta from '@/utils/meta'
+import { supportsWebAssembly } from '@/utils/wasm'
+
+// TODO: Split this into separate setttings for spell check
+// language and spell check on/off
+export default function SpellCheckSetting() {
+  const { spellCheckLanguage, setSpellCheckLanguage } =
+    useProjectSettingsContext()
+  const { t } = useTranslation()
+
+  const optgroup: Optgroup = useMemo(() => {
+    const options = (getMeta('ol-languages') ?? [])
+      // only include spell-check languages that are available in the client
+      .filter(language => language.dic !== undefined)
+
+    return {
+      label: 'Language',
+      options: options.map(language => ({
+        value: language.code,
+        label: language.name,
+      })),
+    }
+  }, [])
+
+  return (
+    <DropdownSetting
+      id="spellCheckLanguage"
+      label={t('spellcheck_language')}
+      options={[{ value: '', label: t('off') }]}
+      optgroup={optgroup}
+      onChange={setSpellCheckLanguage}
+      value={supportsWebAssembly() ? spellCheckLanguage : ''}
+      width="wide"
+    />
+  )
+}

services/web/frontend/js/features/ide-redesign/components/settings/setting.tsx

@@ -1,11 +1,11 @@
 export default function Setting({
   label,
-  description,
   controlId,
   children,
+  description = undefined,
 }: {
   label: string
-  description: string
+  description: string | undefined
   controlId: string
   children: React.ReactNode
 }) {
@@ -15,7 +15,9 @@ export default function Setting({
         <label htmlFor={controlId} className="ide-setting-title">
           {label}
         </label>
-        <div className="ide-setting-description">{description}</div>
+        {description && (
+          <div className="ide-setting-description">{description}</div>
+        )}
       </div>
       {children}
     </div>

services/web/frontend/js/features/ide-redesign/components/settings/settings-modal-body.tsx

@@ -12,6 +12,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import EditorSettings from './editor-settings/editor-settings'
 import AppearanceSettings from './appearance-settings/appearance-settings'
+import CompilerSettings from './compiler-settings/compiler-settings'
 
 export type SettingsEntry = SettingsLink | SettingsTab
 
@@ -33,12 +34,6 @@ export const SettingsModalBody = () => {
   const { t } = useTranslation()
   const settingsTabs: SettingsEntry[] = useMemo(
     () => [
-      {
-        key: 'general',
-        title: t('general'),
-        icon: 'settings',
-        component: <div>General</div>,
-      },
       {
         key: 'editor',
         title: t('editor'),
@@ -46,10 +41,10 @@ export const SettingsModalBody = () => {
         component: <EditorSettings />,
       },
       {
-        key: 'pdf',
-        title: t('pdf'),
+        key: 'compiler',
+        title: t('compiler'),
         icon: 'picture_as_pdf',
-        component: <div>PDF</div>,
+        component: <CompilerSettings />,
       },
       {
         key: 'appearance',

services/web/frontend/js/features/ide-redesign/contexts/rail-context.tsx

@@ -19,7 +19,7 @@ export type RailTabKey =
   | 'chat'
   | 'errors'
 
-export type RailModalKey = 'keyboard-shortcuts' | 'contact-us'
+export type RailModalKey = 'keyboard-shortcuts' | 'contact-us' | 'dictionary'
 
 const RailContext = createContext<
   | {

services/web/frontend/stylesheets/bootstrap-5/pages/editor/settings.scss

@@ -48,24 +48,26 @@
 }
 
 .ide-settings-section {
-  .ide-setting:not(:last-child) {
-    border-bottom: 1px solid var(--border-divider);
-  }
+  padding-top: var(--spacing-06);
+  padding-bottom: var(--spacing-05);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-05);
 }
 
 .ide-settings-section-title {
   color: var(--content-secondary);
   font-size: var(--font-size-01);
   line-height: var(--line-height-01);
-  margin-top: var(--spacing-06);
-  margin-bottom: var(--spacing-03);
+  padding-bottom: var(--spacing-06);
+  border-bottom: 1px solid var(--border-divider);
 }
 
 .ide-setting {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--spacing-06) 0;
+  min-height: 48px;
 }
 
 .ide-dropdown-setting {

services/web/locales/en.json

@@ -197,12 +197,14 @@
   "auto_close_brackets": "Auto-close brackets",
   "auto_compile": "Auto Compile",
   "auto_complete": "Auto-complete",
+  "autocompile": "Autocompile",
   "autocompile_disabled": "Autocompile disabled",
   "autocompile_disabled_reason": "Due to high server load, background recompilation has been temporarily disabled. Please recompile by clicking the button above.",
   "autocomplete": "Autocomplete",
   "autocomplete_references": "Reference Autocomplete (inside a <code>\\cite{}</code> block)",
   "automatic_user_registration_uppercase": "Automatic user registration",
-  "automatically_inserts_closing_brackets_and_parentheses": "Automatically inserts closing brackets and parentheses",
+  "automatically_insert_closing_brackets_and_parentheses": "Automatically insert closing brackets and parentheses",
+  "automatically_recompile_the_project_as_you_edit": "Automatically recompile the project as you edit",
   "available_with_group_professional": "Available with Group Professional",
   "back": "Back",
   "back_to_account_settings": "Back to account settings",
@@ -299,7 +301,6 @@
   "change_the_ownership_of_your_personal_projects": "Change the ownership of your personal projects to the new account. <0>Find out how to change project owner.</0>",
   "change_to_group_plan": "Change to a group plan",
   "change_to_this_plan": "Change to this plan",
-  "changes_the_color_scheme_of_the_code_editor": "Changes the color scheme of the code editor",
   "changing_the_position_of_your_figure": "Changing the position of your figure",
   "changing_the_position_of_your_table": "Changing the position of your table",
   "chat": "Chat",
@@ -311,6 +312,7 @@
   "checking_project_github_status": "Checking project status in GitHub",
   "choose_a_custom_color": "Choose a custom color",
   "choose_from_group_members": "Choose from group members",
+  "choose_how_you_search_your_references": "Choose how you search your references",
   "choose_which_experiments": "Choose which experiments you’d like to try.",
   "choose_your_plan": "Choose your plan",
   "city": "City",
@@ -415,7 +417,6 @@
   "continue_using_free_features": "Continue using our free features",
   "continue_with_free_plan": "Continue with free plan",
   "continue_with_service": "Continue with __service__",
-  "controls_the_theme_of_the_application_interface": "Controls the theme of the application interface",
   "copied": "Copied",
   "copy": "Copy",
   "copy_code": "Copy code",
@@ -600,6 +601,7 @@
   "edit_figure": "Edit figure",
   "edit_sso_configuration": "Edit SSO Configuration",
   "edit_tag": "Edit Tag",
+  "edit_your_custom_dictionary": "Edit your custom dictionary",
   "editing": "Editing",
   "editing_and_collaboration": "Editing and collaboration",
   "editing_captions": "Editing captions",
@@ -607,7 +609,10 @@
   "editor": "Editor",
   "editor_and_pdf": "Editor & PDF",
   "editor_disconected_click_to_reconnect": "Editor disconnected, click anywhere to reconnect.",
+  "editor_font_family": "Editor font family",
+  "editor_font_size": "Editor font size",
   "editor_limit_exceeded_in_this_project": "Too many editors in this project",
+  "editor_line_height": "Editor line height",
   "editor_only": "Editor only",
   "editor_only_hide_pdf": "Editor only <0>(hide PDF)</0>",
   "editor_theme": "Editor theme",
@@ -646,7 +651,6 @@
   "enable_stop_on_first_error_under_recompile_dropdown_menu": "Enable <0>“Stop on first error”</0> under the <1>Recompile</1> drop-down menu to help you find and fix errors right away.",
   "enable_stop_on_first_error_under_recompile_dropdown_menu_v2": "Enable <0>Stop on first error</0> under the <1>Recompile</1> drop-down menu to help you find and fix errors right away.",
   "enabled": "Enabled",
-  "enables_a_real_time_equation_preview_in_the_editor": "Enables a real-time equation preview in the editor",
   "enables_real_time_syntax_checking_in_the_editor": "Enables real-time syntax checking in the editor",
   "enabling": "Enabling",
   "end_of_document": "End of document",
@@ -700,6 +704,7 @@
   "fair_usage_policy_applies": "Fair usage policy applies.",
   "faq_how_does_free_trial_works_answer": "You get full access to your chosen __appName__ plan during your __len__-day free trial. There is no obligation to continue beyond the trial. Your card will be charged at the end of your __len__ day trial unless you cancel before then. You can cancel via your subscription settings.",
   "fast": "Fast",
+  "fast_draft": "Fast [draft]",
   "fastest": "Fastest",
   "feature_included": "Feature included",
   "feature_not_included": "Feature not included",
@@ -976,6 +981,7 @@
   "i_confirm_am_student": "I confirm that I am currently a student.",
   "i_want_to_stay": "I want to stay",
   "id": "ID",
+  "identify_errors_with_your_compile": "Identify errors with your compile",
   "if_have_existing_can_link": "If you have an existing <b>__appName__</b> account on another email, you can link it to your <b>__institutionName__</b> account by clicking <b>__clickText__</b>.",
   "if_owner_can_link": "If you own the <b>__appName__</b> account with <b>__email__</b>, you will be allowed to link it to your <b>__institutionName__</b> institutional account.",
   "if_you_need_to_customize_your_table_further_you_can": "If you need to customize your table further, you can. Using LaTeX code, you can change anything from table styles and border styles to colors and column widths. <0>Read our guide</0> to using tables in LaTeX to help you get started.",
@@ -1980,6 +1986,7 @@
   "show_in_code": "Show in code",
   "show_in_pdf": "Show in PDF",
   "show_less": "show less",
+  "show_live_equation_previews_while_typing": "Show live equation previews while typing",
   "show_local_file_contents": "Show Local File Contents",
   "show_more": "show more",
   "show_outline": "Show File outline",
@@ -2024,6 +2031,8 @@
   "sort_projects": "Sort projects",
   "source": "Source",
   "spell_check": "Spell check",
+  "spellcheck": "Spellcheck",
+  "spellcheck_language": "Spellcheck language",
   "split_view": "Split view",
   "sso": "SSO",
   "sso_account_already_linked": "Account already linked to another __appName__ user",
@@ -2131,6 +2140,7 @@
   "sure_you_want_to_leave_group": "Are you sure you want to leave this group?",
   "sv": "Swedish",
   "switch_back_to_monthly_pay_20_more": "Switch back to monthly (20% more)",
+  "switch_compile_mode_for_faster_draft_compilation": "Switch compile mode for faster draft compilation",
   "switch_plan": "Switch plan",
   "switch_to_editor": "Switch to editor",
   "switch_to_new_editor": "Switch to new editor",
@@ -2196,15 +2206,19 @@
   "thanks_for_subscribing_you_help_sl": "Thank you for subscribing to the __planName__ plan. It’s support from people like yourself that allows __appName__ to continue to grow and improve.",
   "thanks_settings_updated": "Thanks, your settings have been updated.",
   "the_add_on_will_remain_active_until": "The add-on will remain active until the end of the current billing period.",
+  "the_code_editor_color_scheme": "The code editor color scheme",
   "the_document_environment_contains_no_content": "The document environment contains no content. If it’s empty, please add some content and compile again.",
   "the_file_supplied_is_of_an_unsupported_type ": "The link to open this content on Overleaf pointed to the wrong kind of file. Valid file types are .tex documents and .zip files. If this keeps happening for links on a particular site, please report this to them.",
   "the_following_files_already_exist_in_this_project": "The following files already exist in this project:",
   "the_following_files_and_folders_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:",
   "the_following_folder_already_exists_in_this_project_plural": "The following folders already exist in this project:",
+  "the_latex_engine_used_for_compiling": "The LaTeX engine used for compiling",
   "the_new_overleaf_editor": "The new Overleaf editor",
   "the_next_payment_will_be_collected_on": "The next payment will be collected on <strong>__date__</strong>.",
   "the_original_text_has_changed": "The original text has changed, so this suggestion can’t be applied",
+  "the_overleaf_color_scheme": "The __appName__ color scheme",
+  "the_primary_file_for_compiling_your_project": "The primary file for compiling your project",
   "the_project_that_contains_this_file_is_not_shared_with_you": "The project that contains this file is not shared with you",
   "the_requested_conversion_job_was_not_found": "The link to open this content on Overleaf specified a conversion job that could not be found. It’s possible that the job has expired and needs to be run again. If this keeps happening for links on a particular site, please report this to them.",
   "the_requested_publisher_was_not_found": "The link to open this content on Overleaf specified a publisher that could not be found. If this keeps happening for links on a particular site, please report this to them.",
@@ -2212,6 +2226,7 @@
   "the_supplied_parameters_were_invalid": "The link to open this content on Overleaf included some invalid parameters. If this keeps happening for links on a particular site, please report this to them.",
   "the_supplied_uri_is_invalid": "The link to open this content on Overleaf included an invalid URI. If this keeps happening for links on a particular site, please report this to them.",
   "the_target_folder_could_not_be_found": "The target folder could not be found.",
+  "the_version_of_tex_live_used_for_compiling": "The version of TeX Live used for compiling",
   "the_width_you_choose_here_is_based_on_the_width_of_the_text_in_your_document": "The width you choose here is based on the width of the text in your document. Alternatively, you can customize the image size directly in the LaTeX code.",
   "their_projects_will_be_transferred_to_another_user": "Their projects will all be transferred to another user of your choice",
   "theme": "Theme",
@@ -2557,6 +2572,7 @@
   "will_need_to_log_out_from_and_in_with": "You will need to <b>log out</b> from your <b>__email1__</b> account and then log in with <b>__email2__</b>.",
   "with_premium_subscription_you_also_get": "With an Overleaf Premium subscription you also get",
   "word_count": "Word Count",
+  "work_in_vim_or_emacs_emulation_mode": "Work in Vim or Emacs emulation mode",
   "work_offline": "Work offline",
   "work_offline_pull_to_overleaf": "Work offline, then pull to __appName__",
   "work_or_university_sso": "Work/university single sign-on",