Trix: i18n support is missing

[antpaw]

I can't find how to do this

  require '../../../lib/client/trix-core.js'
  Trix.config.lang =
    bold: window.i18n.t('wysiwyg.bold')
    heading: window.i18n.t('wysiwyg.heading')
    italic: window.i18n.t('wysiwyg.italic')
    link: window.i18n.t('wysiwyg.link')
    strike: window.i18n.t('wysiwyg.strike')
    underline: window.i18n.t('wysiwyg.underline')
    unlink: window.i18n.t('wysiwyg.unlink')
    urlPlaceholder: window.i18n.t('wysiwyg.urlPlaceholder')

It looks like this code is running way before I set this lang options.
https://github.com/basecamp/trix/blob/master/src/trix/config/toolbar.coffee

[javan]

Sorry about that. It was an oversight on our part. Also noted in https://github.com/basecamp/trix/issues/149 and https://github.com/basecamp/trix/issues/57#issuecomment-159756175.

As a workaround, you can update the toolbar elements to use your new lang settings.

langMapping = {}

for key, value of Trix.config.lang
  selector = "button[title='#{value}'], input[value='#{value}'], input[placeholder='#{value}']"
  if element = Trix.config.toolbar.content.querySelector(selector)
    langMapping[key] = element

Trix.config.lang =
  bold: window.i18n.t('wysiwyg.bold')
  heading: window.i18n.t('wysiwyg.heading')
  italic: window.i18n.t('wysiwyg.italic')
  link: window.i18n.t('wysiwyg.link')
  strike: window.i18n.t('wysiwyg.strike')
  underline: window.i18n.t('wysiwyg.underline')
  unlink: window.i18n.t('wysiwyg.unlink')
  urlPlaceholder: window.i18n.t('wysiwyg.urlPlaceholder')

for key, element of langMapping
  value = Trix.config.lang[key]

  if element.hasAttribute("title")
    element.setAttribute("title", value)

  if element.hasAttribute("value")
    element.setAttribute("value", value)

  if element.hasAttribute("placeholder")
    element.setAttribute("placeholder", value)

  if element.textContent
    element.textContent = value

langMapping = null

Not pretty, but works.

[antpaw]

wow, thanks

[jerefrer]

@javan There is a little quirk with this coffee. The link button has the same text in the toolbar and in the dialog it opens, but querySelector only return the first, so the second does not get updated.

Here's a revised version that handles multiple elements with the same text:

langMapping = {}

for key, value of Trix.config.lang
  selector = "button[title='#{value}'], input[value='#{value}'], input[placeholder='#{value}']"
  elements = Trix.config.toolbar.content.querySelectorAll(selector)
  if elements.length
    langMapping[key] = elements

Trix.config.lang =
  bold: 'Gras'
  italic: 'Italique'
  strike: 'Barrer'
  underline: 'Souligner'
  heading1: 'Titre'
  code: 'Code'
  quote: 'Citation'
  bullets: 'Liste à puce'
  numbers: 'Liste numérotée'
  indent: 'Indenter'
  outdent: 'Désindenter'
  undo: 'Annuler la modification'
  redo: 'Appliquer à nouveau la modification'
  link: 'Créer lien'
  unlink: 'Effacer lien'
  urlPlaceholder: 'Entrez une URL'

for key, elements of langMapping

  value = Trix.config.lang[key]

  for element in elements

    if element.hasAttribute("title")
      element.setAttribute("title", value)

    if element.hasAttribute("value")
      element.setAttribute("value", value)

    if element.hasAttribute("placeholder")
      element.setAttribute("placeholder", value)

    if element.textContent
      element.textContent = value

langMapping = null

[bbenezech]

Crap, nothing works for captionPlaceholder.
@javan do you know a workaround? I need to get rid of Try a caption here...
I feel like I am going to need to fork the project, sounds silly for one little string 🍴

[javan]

@bbenezech seems to work here:

[jakub-zawislak]

Is there any new better way to add i18n? When I change Trix.config.lang then it works only for captionPlaceholder (but there is also an issue - it changes to default on click).

In the examples above there is Trix.config.toolbar.content.querySelectorAll... but my Trix.config.toolbar is {}

[warsucks]

@javan The current documentation (https://github.com/basecamp/trix/wiki/I18n) has an example with:

import * as Trix from "trix"
import translations from "./my-trix-translations"

const translation = translations[document.documentElement.lang]
if (translation) {
  Trix.config.lang = translation
}

This example in documentation does the same thing as originally posted in this issue. Is this setting of Trix.config.lang after loading trix now expected to work or not? When I try it out, it's not working, so I would like to know whether or not that's expected before filing a new GH issue. Thank you!!