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.

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.

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.

SOG

‘SOG’, a dutch abbreviation to designate you’re not working on your study. Literally translated it means ‘Study Evasiveness’. It is a weird phenomenon, you studied for a long time (you think it’s a long time, but it’s actually just one hour) and then you get distracted by something, it could be anything.

From that moment on you can’t concentrate on what you are supposed to study, you’re just doing other stuff. Some people watch youtube video’s, other people press the next button on their music player too much (like me) and what most people do is refreshing all sorts of sites too many times, Facebook addicts anyone?

But you’re not doing it with the intention to not study, you’ll think “Oh, I will do this just for a few minutes and then I’ll go on studying”. If you’re playing a game you’re actually doing something different then studying with the intention to game. The same is with working, you’re not working because you need to study.

It comes down to the simple vicious circle:

  1. You’re not gaming, working on a project or doing something with your family because you need to study.
  2. You’re not studying because you don’t have the self discipline to do it.

Which comes down to the fact that you’re actually doing nothing.

Wow, I wasted 15 minutes of my precious study time again :’)

Crafty: Another Canvas Drawing Method – Back to Basics

Crafty: Another Canvas Drawing Method – Back to Basics