Traduction en-fr des composants de l'éditeur

front/src/components/Write/ArticleEditorMenu.jsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react'
 import { shallowEqual, useDispatch, useSelector } from 'react-redux'
+import { useTranslation } from 'react-i18next'
 
 import styles from './articleEditorMenu.module.scss'
 import Stats from './Stats'
@@ -13,11 +14,12 @@ export default function ArticleEditorMenu ({ articleInfos, readOnly, compareTo,
   const articleStats = useSelector(state => state.articleStats, shallowEqual)
   const dispatch = useDispatch()
   const toggleExpand = useCallback(() => dispatch({ type: 'ARTICLE_PREFERENCES_TOGGLE', key: 'expandSidebarLeft' }), [])
+  const { t } = useTranslation()
 
   return (
     <nav className={`${expanded ? styles.expandleft : styles.retractleft}`}>
       <button onClick={toggleExpand} className={expanded ? styles.close : styles.open}>
-        <Sidebar /> {expanded ? 'close' : 'Bibliography & co'}
+        <Sidebar /> {expanded ? t('write.sidebar.closeButton') : t('write.sidebar.biblioAndCoButton')}
       </button>
       {expanded && (<div>
         <Versions

front/src/components/Write/ArticleEditorMetadata.jsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
 
 import styles from './articleEditorMetadata.module.scss'
 import YamlEditor from './yamleditor/YamlEditor'
@@ -10,6 +11,7 @@ import MonacoYamlEditor from './providers/monaco/YamlEditor'
 import { Sidebar } from 'react-feather'
 
 export default function ArticleEditorMetadata({ handleYaml, readOnly, yaml }) {
+  const { t } = useTranslation()
   const dispatch = useDispatch()
   const expanded = useSelector(
     (state) => state.articlePreferences.expandSidebarRight
@@ -57,7 +59,7 @@ export default function ArticleEditorMetadata({ handleYaml, readOnly, yaml }) {
         onClick={toggleExpand}
         className={expanded ? styles.close : styles.open}
       >
-        <Sidebar /> {expanded ? 'close' : 'Metadata'}
+        <Sidebar /> {expanded ? t('write.sidebar.closeButton') : t('write.sidebar.metadataButton')}
       </button>
       {expanded && (
         <div className={styles.yamlEditor}>
@@ -67,15 +69,15 @@ export default function ArticleEditorMetadata({ handleYaml, readOnly, yaml }) {
             items={[
               {
                 value: 'basic',
-                name: 'Basic Mode',
+                name: t('write.basicMode.metadataButton'),
               },
               {
                 value: 'editor',
-                name: 'Editor Mode',
+                name: t('write.editorMode.metadataButton'),
               },
               {
                 value: 'raw',
-                name: 'Raw Mode',
+                name: t('write.rawMode.metadataButton'),
               },
             ]}
           />

front/src/components/Write/Biblio.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { useTranslation } from 'react-i18next'
 
 import { ChevronDown, ChevronRight } from 'react-feather'
 
@@ -23,17 +24,18 @@ function Biblio ({ article, readOnly }) {
     setModal(true)
   }, [])
   const closeModal = useCallback(() => setModal(false), [])
+  const { t } = useTranslation()
 
   return (
     <section className={[menuStyles.section, styles.section].join(' ')}>
       <h1 onClick={toggleExpand}>
-        {expand ? <ChevronDown/> : <ChevronRight/>} Bibliography
+        {expand ? <ChevronDown/> : <ChevronRight/>} {t('write.sidebar.biblioTitle')}
 
-        <Button className={styles.headingAction} small={true} disabled={readOnly} onClick={openModal}>Manage</Button>
+        <Button className={styles.headingAction} small={true} disabled={readOnly} onClick={openModal}>{t('write.sidebar.manageButton')}</Button>
       </h1>
       {expand && <ReferenceList />}
       {modal && (
-        <Modal title="Bibliography Manager" cancel={closeModal}>
+        <Modal title={t('write.title.biblioModal')} cancel={closeModal}>
           <Bibliographe cancel={closeModal} article={article} />
         </Modal>
       )}

front/src/components/Write/CreateVersion.jsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import { ArrowLeft } from 'react-feather'
 import { createVersion } from '../../services/ArticleService.graphql'
+import { useTranslation } from 'react-i18next'
 
 import { useMutation } from '../../hooks/graphql.js'
 
@@ -14,6 +15,7 @@ import Button from '../Button'
 import Field from '../Field'
 
 const CreateVersion = ({ articleId, readOnly, onClose }) => {
+  const { t } = useTranslation()
   const { setToast } = useToasts()
   const mutation = useMutation()
   const activeUser = useSelector(state => state.activeUser)
@@ -33,7 +35,7 @@ const CreateVersion = ({ articleId, readOnly, onClose }) => {
       })
       dispatch({ type: 'SET_ARTICLE_VERSIONS', versions: response.article.createVersion.versions })
       setToast({
-        text: `Nouvelle version créée.`,
+        text: t('write.createVersion.defaultNotification'),
         type: 'default',
       })
     } catch (err) {
@@ -56,25 +58,25 @@ const CreateVersion = ({ articleId, readOnly, onClose }) => {
         >
           <Field
             className={styles.createVersionInput}
-            placeholder="Label of the version (optional)"
+            placeholder={t('write.createVersion.placeholder')}
             value={message}
             autoFocus={true}
             onChange={(e) => setMessage(e.target.value)}
           />
           <ul className={styles.actions}>
             <li className={styles.closeButton}>
               <Button icon={true} onClick={onClose}>
-                Close
+                {t('write.sidebar.closeButton')}
               </Button>
             </li>
             <li>
               <Button primary={true}>
-                Create Minor
+                {t('write.createVersion.minorButton')}
               </Button>
             </li>
             <li>
               <Button onClick={(e) => handleCreateVersion(e, true)}>
-                Create Major
+                {t('write.createVersion.majorButton')}
               </Button>
             </li>
           </ul>

front/src/components/Write/Reference.jsx

@@ -1,5 +1,6 @@
 import React, { memo } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { useTranslation } from 'react-i18next'
 
 import { Clipboard } from 'react-feather'
 import styles from './reference.module.scss'
@@ -8,6 +9,8 @@ import Button from '../Button'
 
 const BibliographyReference = memo(function BibliographyReference ({ entry }) {
   const { key, title, type, date, authorName } = entry
+  const { t } = useTranslation()
+
   return (
     <div
       className={styles.reference}
@@ -24,7 +27,7 @@ const BibliographyReference = memo(function BibliographyReference ({ entry }) {
         </p>
       </div>
       <CopyToClipboard text={`[@${key}]`}>
-        <Button title="Copy to clipboard" className={styles.copyToClipboard} icon={true}><Clipboard/></Button>
+        <Button title={t('write.copyClipboard.referenceButton')} className={styles.copyToClipboard} icon={true}><Clipboard/></Button>
       </CopyToClipboard>
     </div>
   )

front/src/components/Write/ReferenceList.jsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import { shallowEqual, useSelector } from 'react-redux'
 import { Search } from 'react-feather'
+import { useTranslation } from 'react-i18next'
 
 import Reference from './Reference'
 import styles from './ReferenceList.module.scss'
@@ -23,16 +24,17 @@ export default function ReferenceList() {
     }
   }
   const handleShowAll = useCallback(() => setShowAll(true), [])
+  const { t } = useTranslation()
   return (
     <>
-      <Field className={styles.searchField} type="text" icon={Search} value={filter} placeholder="Search" onChange={(e) => setFilter(e.target.value)} />
+      <Field className={styles.searchField} type="text" icon={Search} value={filter} placeholder={t('write.searchFieldBiblio.placeholder')} onChange={(e) => setFilter(e.target.value)} />
       {filter && <span className={styles.resultFoundCount}>{bibTeXFound.length} found</span>}
       {bibTeXFound
         .map((entry, index) => (
           <Reference key={`ref-${entry.key}-${index}`} entry={entry} />
         ))
       }
-      {!showAll && bibliographyEntries.length > 25 && <Button className={styles.showAll} onClick={handleShowAll}>Show all {bibliographyEntries.length} references</Button>}
+      {!showAll && bibliographyEntries.length > 25 && <Button className={styles.showAll} onClick={handleShowAll}>{t('write.showBiblio.button')} {bibliographyEntries.length} references</Button>}
     </>
   )
 }

front/src/components/Write/Sommaire.jsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useRouteMatch } from 'react-router-dom'
 import { ChevronDown, ChevronRight } from 'react-feather'
+import { useTranslation } from 'react-i18next'
 import { usePandocAnchoring } from '../../hooks/pandoc.js'
 
 import styles from './sommaire.module.scss'
@@ -21,11 +22,12 @@ export default function Sommaire () {
       ? document.querySelector(`#${target.dataset.headingAnchor}`)?.scrollIntoView()
       : dispatch({ type: 'UPDATE_EDITOR_CURSOR_POSITION', lineNumber: parseInt(target.dataset.index, 10), column: 0 })
   },[hasHtmlAnchors])
+  const { t } = useTranslation()
 
   return (
     <section className={[styles.section, menuStyles.section].join(' ')}>
       <h1 onClick={toggleExpand}>
-        {expand ? <ChevronDown/> : <ChevronRight/>} Table of contents
+        {expand ? <ChevronDown/> : <ChevronRight/>} {t('write.titleToc.sidebar')}
       </h1>
       {expand && (<ul>
         {articleStructure.map((item) => (

front/src/components/Write/Stats.jsx

@@ -1,13 +1,15 @@
 import React, { useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { ChevronDown, ChevronRight } from 'react-feather'
+import { useTranslation } from 'react-i18next'
 
 import menuStyles from './menu.module.scss'
 
 export default function WriteStats ({ stats }) {
   const expand = useSelector(state => state.articlePreferences.expandStats)
   const dispatch = useDispatch()
   const toggleExpand = useCallback(() => dispatch({ type: 'ARTICLE_PREFERENCES_TOGGLE', key: 'expandStats' }), [])
+  const { t } = useTranslation()
 
   return (
     <section className={menuStyles.section}>
@@ -16,10 +18,10 @@ export default function WriteStats ({ stats }) {
       </h1>
       {expand && (
         <>
-          <p>Words : {stats.wordCount}</p>
-          <p>Characters : {stats.charCountNoSpace}</p>
-          <p>Characters (with spaces) : {stats.charCountPlusSpace}</p>
-          <p>Citations : {stats.citationNb}</p>
+          <p>{t('write.wordCount.stat', {stats: stats.wordCount})}</p>
+          <p>{t('write.charCountNoSpace.stat', {stats: stats.charCountNoSpace})}</p>
+          <p>{t('write.charCountPlusSpace.stat', {stats: stats.charCountPlusSpace})}</p>
+          <p>{t('write.citations.stat', {stats: stats.citationNb})}</p>
         </>
       )}
     </section>

front/src/components/Write/Versions.jsx

@@ -54,11 +54,11 @@ function Version ({ articleId, compareTo, readOnly, selectedVersion, v }) {
         <Field autoFocus={true} type="text" value={title} onChange={(event) => setTitle(event.target.value)}
                placeholder={'Label of the version'}/>
         <div className={styles.actions}>
-          <Button title="Save" primary={true}>
-            <Check/> Save
+          <Button title={t('write.saveButton.versionName')} primary={true}>
+            <Check/> {t('write.saveButton.versionName')}
           </Button>
-          <Button title="Cancel" type="button" onClick={cancelRenaming}>
-            Cancel
+          <Button title={t('write.cancelButton.versionName')} type="button" onClick={cancelRenaming}>
+          {t('write.cancelButton.versionName')}
           </Button>
         </div>
       </form>
@@ -76,7 +76,7 @@ function Version ({ articleId, compareTo, readOnly, selectedVersion, v }) {
         <span className={styles.versionLabel}>
           v{v.version}.{v.revision}{' '}{title || ''}
         </span>
-        {!readOnly && <Button title="Edit" icon={true} className={styles.editTitleButton} onClick={startRenaming}>
+        {!readOnly && <Button title={t('write.editButton.versionName')} icon={true} className={styles.editTitleButton} onClick={startRenaming}>
           <Edit3 size="20"/>
         </Button>}
       </header>}
@@ -99,7 +99,7 @@ function Version ({ articleId, compareTo, readOnly, selectedVersion, v }) {
             className={clsx(buttonStyles.button, buttonStyles.secondary, styles.action)}
             to={compareLink}
           >
-            Compare
+            {t('write.compareButton.version')}
           </Link>
         </li>
       )}
@@ -109,7 +109,7 @@ function Version ({ articleId, compareTo, readOnly, selectedVersion, v }) {
             className={clsx(buttonStyles.button, buttonStyles.secondary, styles.action)}
             to={`/article/${articleId}/${versionPart}`}
           >
-            Stop
+            {t('write.stopButton.version')}
           </Link>
         </li>
       )}
@@ -140,15 +140,16 @@ export default function Versions ({ article, selectedVersion, compareTo, readOnl
     setExpandCreateForm(true)
   }, [])
   const cancelExport = useCallback(() => setExportParams({}), [])
+  const { t } = useTranslation()
 
   return (
     <section className={clsx(menuStyles.section)}>
       <h1 className={expand ? null : styles.closed} onClick={toggleExpand}>
         {expand ? <ChevronDown/> : <ChevronRight/>}
-        Versions
+        {t('write.titleVersion.sidebar')}
 
         {!readOnly && <Button className={styles.headingAction} small={true} disabled={readOnly} onClick={createNewVersion}>
-          New Version
+        {t('write.newVersion.button')}
         </Button>}
         {readOnly && <Link className={clsx(buttonStyles.button, buttonStyles.secondary, styles.editMode, styles.headingAction)} to={`/article/${article._id}`}> <ArrowLeft/> Edit Mode</Link>}
       </h1>

front/src/components/Write/WorkingVersion.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useMemo, useState, useCallback } from 'react'
 import { shallowEqual, useSelector } from 'react-redux'
 import { Link } from "react-router-dom";
 import { AlertCircle, AlignLeft, Check, Edit3, Eye, Loader, Printer } from 'react-feather'
+import { useTranslation } from 'react-i18next'
 import ArticleContributors from '../ArticleContributors.jsx'
 import TimeAgo from '../TimeAgo.jsx'
 
@@ -76,6 +77,7 @@ export default function WorkingVersion ({ articleInfos, live, selectedVersion, m
   const workingArticle = useSelector(state => state.workingArticle, shallowEqual)
   const cancelExport = useCallback(() => setExporting(false), [])
   const openExport = useCallback(() => setExporting(true), [])
+  const { t } = useTranslation()
 
 
   const previewUrl = selectedVersion
@@ -113,12 +115,12 @@ export default function WorkingVersion ({ articleInfos, live, selectedVersion, m
             </Link>
           </li></>)}
           <li>
-            <Button icon title="Download a printable version" onClick={openExport}>
+            <Button icon title={t('write.title.buttonExport')} onClick={openExport}>
               <Printer/>
             </Button>
           </li>
           <li>
-            <Link to={previewUrl} title="Preview (open a new window)" target="_blank" rel="noopener noreferrer"
+            <Link to={previewUrl} title={t('write.title.buttonPreview')} target="_blank" rel="noopener noreferrer"
                   className={buttonStyles.icon}>
               <Eye/>
             </Link>

front/src/components/Write/bibliographe/Bibliographe.jsx

@@ -1,19 +1,21 @@
 import React, { useCallback, useState } from 'react'
 import { useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next'
 
 import NavTag from '../../NavTab'
 
 import ZoteroPanel from './ZoteroPanel'
 import CitationsPanel from './CitationsPanel'
 import RawBibtexPanel from './RawBibtexPanel'
 
-const tabItems = [
-  { value: 'zotero', name: 'Zotero' },
-  { value: 'citations', name: 'Citations' },
-  { value: 'raw', name: 'Raw BibTeX' }
-]
 
 export default function Bibliographe({ article, cancel }) {
+  const { t } = useTranslation()
+  const tabItems = [
+    { value: 'zotero', name: t('writeBibliographe.zotero.tabItem') },
+    { value: 'citations', name: t('writeBibliographe.citation.tabItem') },
+    { value: 'raw', name: t('writeBibliographe.rawBibtex.tabItem') }
+  ]
   const [selector, setSelector] = useState(tabItems.at(0).value)
   const dispatch = useDispatch()
   const handleTabChange = useCallback((value) => setSelector(value), [])