How to create a Trix custom toolbar

Trix

Trix is a WYSIWYG editor that seems to use the same architectural model as DraftJS. Instead of working around quirks in contenteditable they both have an internal model of content and apply transformations on this content. I’m currently working on a project in Rails and wanted to use idiomatic tools, so decided to use Trix for my WYSIWYG needs.

The default styling of Trix didn’t fit the styles I wanted and I also wanted to hide certain formatting tools and maybe add some. The obvious solution is to hide buttons with CSS, but this didn’t feel correct. I like my software to have internal quality. It also isn’t a solution for adding buttons. So what’s the solution instead?

Trix APIs

When solving such a problem you are always limited by the APIs provided by the library you’re using. In this case after searching for it I found a clarifying comment in the Trix issues:

Set the toolbar attribute to your own element and Trix will use it rather than providing its own: <trix-editor toolbar="toolbar-dom-id"></trix-editor>

So I provided toolbar attribute and and copied the default toolbar HTML to my toolbar container. If you wrap all this in a trix-toolbar element you even get the styles that trix has built-in. So that would look like this:

<trix-toolbar id="trix-toolbar">
    [Default Trix Toolbar HTML]
</trix-toolbar>
<trix-editor input="input_id" toolbar="trix-toolbar"></trix-editor>
<input type="hidden" id="input_id" />

You can then go ahead and modify this HTML any way you would like. For my use case I’ve removed all buttons except “Bold”, “Italic” and “Link”.

Underline

There are good arguments not to add an underline button. That’s why the Trix toolbar doesn’t come with an underline button. However, sometimes you have to do something which isn’t ideal. Adding an underline button is a two step process. The first step is registering a new text attribute:

import Trix from "trix";

Trix.config.textAttributes.underline = {
    style: {
        textDecoration: "underline",
    },
    inheritable: true,
    parser: (element) => {
        const style = window.getComputedStyle(element);

        return style.textDecoration === "underline" ||
            style.textDecorationLine === "underline";
    }
}

This will let Trix know how the underline text attribute is going to work. Then, you can add a new button to your toolbar with data-trix-attribute="underline" and it will work:

<button type="button" class="trix-button trix-button--icon trix-button--icon-underline" data-trix-attribute="underline" tabindex="-1">
    <span class="screen-reader-text"><%= t('trix.buttons.underline') %></span>
</button>

Concluding

Trix is a nice, simple editor that’s easy to style and make your own.