first commit

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="compiler"
+      label={t('compiler')}
+      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="imageName"
+      label={t('tex_live_version')}
+      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}
+    />
+  )
+}