Since I've upgraded this blog software to Rails 6, I wanted to also integrate the new ActionText component with the Trix editor to allow me to write new posts. The integration is easy to get configured and working. Since I only use the component in Admin mode, I created a new admin.js webpack and added these lines:
However, Trix has a default setting for Headings that sets the enclosing tag to H1, which doesn't work for my blog. On the index pages, I display the post titles as H2 and on the post page itself, I use H1 for the post title. If the headings inside the post are also H1 tags, then Google is likely to be upset, and it's harder to style them differently.
So how could I change the default behavior in Trix?
Browsing the Trix source code for configuration
When I looked at the Trix source code, I found the source file for the header1 configuration that shows that the tag to use for each toolbar button seems to be configurable. With more searching, I found some example code that shows that the configuration could be accessed like this
So I added some code to my admin.js file to see what configuration was available
Sadly, this doesn't work. Neither does window.Trix. I couldn't find where the Trix object being defined by the Trix library was ending up.
Is Webpack interfering here?
One of the main reasons to use Webpack is to stop libraries from polluting the global name space to avoid these libraries interfering with each other and causing hard to find bugs.
What this means is that each library, when loaded, has it's own module context to add it's global state to. I found this out with some poking around in the debugger in the browser. But then, that global state is then returned from the require method that is used to load the library.
If, like me, you're a Ruby programmer, it's a bit of a surprise to be getting a useful return value from a called to require, but in this case, this method is a Webpack function, not a Ruby one!
How do I get a 'global' Trix object?
Now I had all the pieces to get what I needed into place. Here's the code I ended up with.
var Trix = require("trix") require("@rails/actiontext") Trix.config.blockAttributes.heading1.tagName = "h3";
The big change here is to assign the return of the require for the Trix library to a new Trix variable. Now I can access the configuration object and manipulate the setting I needed. In this case, I change the toolbar Heading button to insert H3 tags instead of H1 tags.
Since this information is used at the time the insert occurs, it can be changed globally at any time before the user clicks the button.
Scratching the surface of Trix configuration
The Trix editor has been designed to be extremely configurable. You can create your own toolbars and completely change the behavior of existing toolbar buttons, but sometimes, just getting started can be tricky. For those of us, like me, who are new to the Webpack system, just getting access to the code can be the hardest part!