Feat: add documentation about how to add new language in Tracim

[PhilippeAccorsi]

Feature description

We need an explicit documentation about what is necessary to add new translation in Tracim. Also what we need to do to update this translation when new development is done (ask contributor to update his translation? Do nothing and if something is not translated correctly, contributor can update translation?)

Context

This is a list (not complete list) of what or where change is necessary to add new language in Tracim:

• add Tinymce translation file (extracted from https://www.tiny.cloud/docs-4x/language/tinymce4x_languages.zip)
• (optional) add translation in Agenda (Caldavzap not have too much translation, issue here #3009)
• check if collaborative software is available in this language (if not, some information about that need to be added in project)
• backend:
  • email template, follow the instructions in backend/doc/i18n.md
  • add new language choice in backend/development.ini.sample for the default language setting
  • create a new language file for the default custom properties (in backend/tracim_backend/templates/user_custom_properties/default/locale/)
• frontend:
  • add language to i18next.scanner.js
  • generate all translation files (yarn build:translation in each app + frontend + frontend_lib)
  • import translation files in frontend/src/util/i18n.js and frontend_lib/src/index.js
  • add lang in frontend/src/reducer/lang.js
  • add date-fns locale to frontend_lib/src/helper.js
  • check if tinyMCE language code matches Tracim's one (list available here). If not, edit the TINYMCE_LANGUAGE object in frontend/src/util/tinyMceInit.jsto add the mapping.
• add the translation of the @all mention to the group mention list in frontend_lib/src/mentionOrLink.js
• Documentation:
  • make sure documentation is updated if somewhere language list is available

Prerequisites

• [ ] Define workflow to update translation in development process

Impacted components

• backend
• frontend
• documentation

Extra information

[raphj]

We need to define a process on what to do to handle external contributions related to the translations.

Should we ask the contributor if they would like us to ask him when updating the translation is needed.

We also should think about setting up a collaborative translation platform. LibreOffice uses Weblate for instance.

[PhilippeAccorsi]

Updated issue with Caldav translation.

[inkhey]

For backend, the documentation is here: https://github.com/tracim/tracim/blob/develop/backend/doc/i18n.md It's for all translation in backend, it's mostly (only ?) used for email template but may be used in other backend context.

It's also important to notice that backend does not really store the fact it support this or this language, and there is no endpoint to say "we support these languages".

So, if translation is done only in frontend, user will be set to the correct language but translation will not work as expected for backend side things like email templates. In the other side, if frontend doesn't support a langage but backend did, unless you use api directly, frontend will not let you change the lang.

[raphj]

In the frontend, here are some files to update (not exhaustive, feel free to edit my comment):

• frontend_lib/src/index.js - relevant section - add a line for the new translation there:

  export const enTranslation = require('../i18next.scanner/en/translation.json')
  export const frTranslation = require('../i18next.scanner/fr/translation.json')
  export const ptTranslation = require('../i18next.scanner/pt/translation.json')

• a file to create in each frontend component frontend_XXX/i18next.scanner/{lang}/translation.json

• In file frontend/src/i18n.js:

  • add an import element in this line:

    
    import { frTranslation, enTranslation, ptTranslation } from 'tracim_frontend_lib'
    ```js

  • add an import line in this block

    import en from '../i18next.scanner/en/translation.json'
    import fr from '../i18next.scanner/fr/translation.json'
    import pt from '../i18next.scanner/pt/translation.json'

  • Add a line per application following what is already there

  • Include the language in this block:

    export const getBrowserLang = () => {
    const browserLang = navigator.language
    
    if (['en', 'fr', 'pt'].includes(browserLang)) return browserLang
    if (browserLang.includes('fr')) return 'fr' // for fr-XX
    if (browserLang.includes('pt')) return 'pt' // for pt-XX
    
    return 'en'
    }

  • add the language to the block that follows
  • edit each build_XXX.sh of each frontend component to copy the translation file to frontend/
  • edit i18next.scanner.js to add the code of the language to the list of language code that is there.

This needs improvement and automation that I'd by happy to take.