Adding additional actions to Trix

It’s not documented how to add additional “actions” to Trix.

Current actions can be found here:

But how do we make additional actions?

It appears an action is an object:

  test: Boolean,
  perform: void

So test is like “hey should we perform the action?”

and perform is what gets called if test === true. Seems reasonable.

Now to the hard part, I couldn’t find any docs to add an additional Trix action.

But, in sleuthing through the console I found this:


Object {
  attachFiles: Object { test: test(), perform: perform() }
  decreaseNestingLevel: Object { test: test(), perform: perform() }
  increaseNestingLevel: Object { test: test(), perform: perform() }
  link: Object { test: test() }
  redo: Object { test: test(), perform: perform() }
  undo: Object { test: test(), perform: perform() }

So it appears we can add additional actions by tapping into the editorController.actions on a currently active instance of “trix-editor”.

So a simple example to add an action may look like this:

document.addEventListener('trix-initialize', updateActions);

function updateActions() {
  const editors = document.querySelectorAll("trix-editor")
  const myAction = { test: true, perform: console.log("Hi!") }
  editors.forEach((editor) => Object.assign(editor.editorController.actions, { myAction })

And now when we add an item to the toolbar, we should be able to do something like this to trigger our action:

<button data-trix-action="myAction"></button>

This is a small precursor to me exploring table support, but figured I’d share as it took a while to track down!