DEV Community 👩‍💻👨‍💻

Konnor Rogers
Konnor Rogers

Posted on

Adding additional actions to Trix

It's not documented how to add additional "actions" to Trix.

Current actions can be found here:

https://github.com/basecamp/trix/blob/7940a9a3b7129f8190ef37e086809260d7ccfe32/src/trix/controllers/editor_controller.coffee#L301-L318

But how do we make additional actions?

It appears an action is an object:

{
  test: Boolean,
  perform: void
}
Enter fullscreen mode Exit fullscreen mode

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:

document.querySelector("trix-editor").editorController.actions

/* 
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() }
}
*/
Enter fullscreen mode Exit fullscreen mode

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 })
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Join us at DEV
Yes, this is technically an “ad”, but really we just want to ask if you want to join DEV. We have 900k+ developers reading, posting, and enjoying community, and would love to have you.   Create an account and continue your coding journey.