Allow changing configuration before initializing trix

[Timmitry]

trafficstars

This is a follow-up of https://github.com/basecamp/trix/issues/528, which was closed, even though there is no easy solution to handle this case.

The basic problem is the following: When using some bundling tool (webpack, vite, ...) and importing trix, it automatically initializes itself. This makes it impossible to change the configuration, resulting in broken behaviour:

import Trix from 'trix';
// At this point, trix is already initialized, and will have parsed all inputs and initialized the editors on the page.

// Changing the configuration here will not work properly. Existing h3 tags in inputs will be converted to <strong> tags!
Trix.config.blockAttributes.heading1.tagName = 'h3';

It would be nice to be able to change the configuration. Suggested change:

import { Trix } from 'trix'; // Note the named import, which would not clash with the current default export
Trix.config.blockAttributes.heading1.tagName = 'h3';
Trix.start(); // Similar to what ActiveStorage does

[afcapel]

@Timmitry the new v2 (still beta) allow ESM imports. I haven't tried this myself, but you could import and modify the config before the main Trix import.

// in my_trix_config.js

import config from 'trix/config' 

config.blockAttributes.heading1.tagName = 'h3'

import './my_trix_config'
import Trix from 'trix'

[Timmitry]

@afcapel Thanks for your answer! However, import config from 'trix/config'; already gives an error Unable to resolve path to module 'trix/config'., from both eslint and vite. I am already using 2.0.0-alpha.1, as the workaround did not seem to work with 1.3.1...

[nyrf]

+1 for this, trix-before-initialize would't run with vite now, v2 still have this issue.

[dhasilva]

+1. Changing Trix.config.lang nas no effect.

[jahudka]

I find it hard to wrap my head around this..

• The only way to configure the editor is apparently to modify a package export shared by all the editor instances..?
• But in fact even that is useless because you cannot access the property before the editor initialises, and when it does, it mangles the original content because it's misconfigured...?
• Although most of this is probably mitigated by the fact that the available configuration options aren't even documented...

What's happening here?

[Timmitry]

@jahudka That seems to be about right 🤷 Customizing the editor was really hard, and next time, I will rather take another rich text editor and configure it to work with ActiveStorage to avoid this hassle... 😞

[Napishite]

I've also stuck on similar problem: I had to translate toolbar and customize buttons. Changing Trix.config.lang and getDefaultHTML has no affect.

This article solved my issue: https://dev.to/paramagicdev/modifying-the-default-toolbar-in-trix-411b

@jahudka maybe it may help you too?