Loading Trix javascript after `trix-editor` is in the DOM: Setting `Trix.config.lang` does not set custom text in toolbar

Expected: Toolbar texts are set according to those specified in Trix.config.lang Actual:

We are running trix/dist/trix.js AFTER the trix-editor is already in the DOM.

Using Rails 6.0 and Webpacker.

Steps to Reproduce

javascript code, which is loaded asynchronously (not placed in the DOM in a script tag before the trix-editor element).

import 'trix/dist/trix.css'
import Trix from 'trix/dist/trix.js'

Trix.config.lang = {
  bold: 'Gras',
  bullets: 'Liste',
  byte:  'Octet',
  bytes: 'Octets',
  captionPlaceholder: 'Ajouter légende…',
  code: 'Code',
  heading1: 'Titre',
  indent: 'Agrandir retrait',
  italic: 'Italique',
  link: 'Lien',
  numbers: 'Liste numérotée',
  outdent: 'Réduire retrait',
  quote: 'Citation',
  redo: 'Rétablir',
  remove: 'Supprimer',
  strike: 'Barré',
  undo: 'Annuler',
  unlink: 'Supprimer lien',
  url: 'Lien',
  urlPlaceholder: 'Saisir adresse URL…',
  GB: 'Go',
  KB: 'Ko',
  MB: 'Mo',
  PB: 'Po',
  TB: 'To'
}

The trix-editor element is placed in the DOM via ActionText rich_text_area, which is in a server-rendered Rails template.

Details

• Trix version: https://github.com/basecamp/trix/commit/520cc50afff2b90120f49038945eb0cb73d82535
• Browser name and version: Chrome 87
• Operating system: macOS 11.1
• Rails version: 6.0.3.4 (with ActiveText)

[matthee]

I’ve just experienced a similar bug. You cannot set Trix.config.lang directly (Like Trix.config.lang = translations). Instead, you need to update each individual key of the object.

My working implementation using Turbolinks + Webpacker looks like this:

import Trix from 'trix'
import translations from "./translations"

addEventListener("trix-before-initialize", () => Object.assign(Trix.config.lang, translations))

It is also possible to change the caption placeholder in the trix-editor element this way.

Update: Clarify I’m using Turbolinks and webpacker

[wubini]

Update: We have changed our implementation to get around this issue:

1. trix-editor element still rendered with rich_text_area via server-side rendered Rails template _trix_editor.html.haml). We are using javascript_pack_tag from Webpacker to include the Trix script within the same template and to make sure it runs before the rest of the .

_trix_editor.html.haml:

- content_for :head do
  = javascript_pack_tag 'trix',  defer: false
= simple_form_for [:org, @foo], validate: true,
                  html: {class: 'script-loader', data: {script_name: 'actionText'}} do |form|
  = form.rich_text_area :bar

app/javascript/pack/trix.js:

import Trix from 'trix'
Trix.config.lang.bold = 'Fett'
// etc, other settings on Trix.config.lang

This fixes the issue where the text wasn’t being set in time before the editor was rendered, on page loads where the script does run before the editor is rendered. This desired behavior occurs when we enter the page URL directly in the browser or refresh the page.

However, we still run into the issue that if the page is loaded by turbolinks, the Webpacker packed script included via javascript_pack_tag is NOT executed in time. The editor is rendered in the DOM before the script runs. I think this is related to https://github.com/turbolinks/turbolinks/issues/107

Therefore, we’ve had to disable turbolinks on the pages where we show a Trix editor 😦

@javan Please let us know if we can provide any further info to help debug and/or fix this issue! Does it make sense to support running the trix.js script asynchronously potentially after the DOM element has been rendered?