How to create a Trix custom toolbar


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-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”.


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>


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

Waarom behalen zo veel hoogbegaafden geen diploma?

This video really struck a cord.

We tuned the world for the average. However, if we want to make a world that is inclusive of everyone we need to accommodate for people outside the average. Intelligence is only one example. And we should prevent ourselves from judging if someone falls above or below the average. That is what diversity and inclusivity are all about.

Cycle superhighways

I’m in London. As a dutchie I love my bicycle and riding it. So what do you do? You ride a bike in London.

The software of the renting poles can be improved qute a bit. I tried to rent 2 bikes. One for me and one for my girlfriend. Everytime I tried that the software crashed on me. Luckily renting one bike worked. then I used the app to rent another bike.

So we went on our merry way. The pricing is very fair. You rent one bike for 24 hours. This costs £2. Every trip with it within 30 minutes is free. Any longer and you pay £2 per 30 minutes. So as good tourists we kept all our trips within 30 minutes and could ride our bikes for £4 all day.

London isn’t Amsterdam. It feels really dangerous to step on a bike here, but it is getting better. There are now these things called cycle superhighways. In the Netherlands these ‘highways’ would be called regular bike paths. And the highways end fairly randomly and then you have no idea where you are going. It feels too much like an expedition. Which is a good for a tourist, bad for a commuter.

But while the tourist sees all the streets for the first time. The commuter can explore all roads and plan a safe route. Then biking becomes a real option. As an alternative to the hot London underground. But the best thing is to combine those two. The cycle superhighways have good signage where underground stations are.

I think cycling in London is here to stay. I really look forward to visiting London again in a few years to see how everything had improved. In the Netherlands we are spoiled, and it is really exciting to see other countries following the lead.

Walking the Nijmegen Marches

After walking for 4 days straight, I finally reached Nijmegen using the famous Via Gladiola. I walked 200 kilometers in total. I didn’t realize exactly how much this is until I actually walked them.

But alas, I did it:

In the background you can see some gladioli, this is the traditional reward we get for finishing the 4-day marches.

I want to thank Omar for walking and training with me for this whole journey.

I want to thank my girlfriend for the amazing support. She cooked, cared and punctured my blisters. She is amazing.

And I want to thank Yoast for the support they gave alongside the route in Wijchen and for sponsoring our t-shirts and signup fee.

Without these awesome supporters, I wouldn’t have been able to do this. Or without all the supporters alongside the route.

Currently at WordCamp Antwerp

I am currently volunteering at the first Belgian WordCamp ever: WordCamp Antwerp. This morning I’ve been at the registration desk where attendees helped me find their batch, on which I greeted them with a smile and pointed them to the location they could get coffee. The volunteer shirts are really nice and stand out from the crowd. “Just ask someone in a yellow shirt if you have any questions” was said a ton during the registration.

The whole morning I spend watching te camera equipment in the main room and made sure the audio was working. It is weird hearing the talk live in one ear and hearing it recorded by a microphone in the other.

There is a sense of amazement in me when someone thanks me for volunteering. I don’t think it is that special, but it is a way to give back to the community. The best way to respond is probably to say “Thank you” and leave it at that, but that leaves slightly guilty.

Tomorrow will be my first WordCamp talk and the nerves have really begun now. I am free on the volunteers schedule and that gives room in my head for nerves. I’ll probably do fine as all my colleagues have been saying all week and even today. Let’s do some final preparations so I am totally ready.

👋🏻 from WordCamp Antwerp!

WordCamp Antwerp registration desk
Photo by Jip Moors

Current status: Barbershop Quartet

A few weeks ago Omar and Joost said to me: “You really need a vacation, you haven’t had a week of since you started.” They were and are completely correct. It would be silly to suggest I didn’t need a vacation. After being in crunch mode for several weeks preparing for two exams and after that releasing Yoast SEO 3.2, while in the same week giving two presentations within Yoast on different subjects I was really tired.

And then you are free to do anything. The void that is left will be filled with a rollercoaster of emotions. There is a place in my life for a meditative practice but I have not been able to stick with it for longer than 30 days. This means that I don’t listen to my emotions enough while in crunch mode or while working normally and they all get released when there is a moment of free time.

Whenever I am in an emotional rollercoaster it is always filled with sentimental music. This time, it is the barbershop quartet from Bioshock Infinite. It got triggered by this video from PAX. Cosplayers are awesome! So this has been on repeat for a while now. Other instances of this featured Baba Yetu, Hide and Seek, and even Meet the Medic. All these songs give me goosebumps when I haven’t listened to them for a long time.

I am very proud of everything I have done over the last years, from someone that woke up panicking to the sound of being called about a missed appointment to someone that can give two presentations in a week while being super nervous for both of them while having just done two exams. While I write this I am amazed and proud of the turnaround.

Except for the fact that in a lot of cases it doesn’t feel different, I still feel anxious, I still feel scared, I still feel like I don’t belong to be here. And all this is multiplied when I am not busy.

I haven’t really found a good way to deal with weeks like these. Any tips or guidance is welcome.

Numbered tasks in OmniFocus

I’m an avid user of OmniFocus. It gives me the ability to manage all my current projects and to prevent me from forgetting things I want to do. For example when I pack for a trip I use the awesome Templates.scpt AppleScript to generate a new project.

It has a lot of awesome features, such as being able to customise the due date when creating a project. But when planning the courses I’m doing there was a missing feature: The ability to create a project with numbered tasks. For example:

Example of numbered tasks

I worked around this by creating a template that has 25 sequential tasks, from “Read chapter 1” through “Read chapter 25” because most courses have less than 25 chapters. Then on every task I added “@if $Chapters < 1 then delete” through “@if $Chapters < 25”. It takes a relatively long time to scaffold a project this way, but while it’s working I can focus on doing something else.

Screenshot of the workaround OmniFocus template

So I bought a house

On friday I signed the papers that make me, or probably more the bank, owner of a lovely house in Wijchen. Both my brothers and my parents were present to experience this with me.


One of my brothers asked “Do you feel different now that you signed the papers?” It’s something I thought about myself, rationally yes. The owner of the house changed two days ago, but emotionally I bought this house in two months: From the moment of agreeing with the seller on a price until last Friday.

The amount of signatures you have to put on paper is astonishing. They really don’t want you to take it lightly.

Today I will be buying a bed and hopefully move in next week.