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

[wubini]

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)

[woodhull]

@javan I think this is fixed in https://github.com/basecamp/trix/commit/520cc50afff2b90120f49038945eb0cb73d82535

Could you cut a new release with this bug fix?

[wubini]

@woodhull I tested with that version! see original post

[woodhull]

@warsucks Interesting!

I just tried to test this fix in a fork here, where I've run blade to rebuild the dist folder: https://github.com/controlshift/trix

Needed to fork the upstream repository to be able to recompile a new dist revision with the bug fix included. Also had to update some gems for dep installation to work reliably on my mac, but I don't think that would have changed the output.

Unfortunately, its still not working for me in my test case.

[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?

[stale[bot]]

This issue has been automatically marked as stale after 90 days of inactivity. It will be closed if no further activity occurs.

[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