https://assets.vocalvideo.com/assets/controllers/global/trix_controller-a85487dd.js

1import { Controller } from '@hotwired/stimulus'
2
3export default class TrixController extends Controller {
4
5  // Any trix customization would go here
6  // In this example, we're creating buttons for the newly defined block attributes (see trix.js)
7  // And then appending them into the toolbar
8
9
10  connect() {
11    // Grab a reference to the toolbar(s) on the page.
12    const toolbar = this.element.previousSibling
13    // HTML for our buttons
14    const h2ButtonHTML = '<button type="button" class="trix-button trix-button--icon trix-button--icon-heading2" data-trix-attribute="heading2" title="Heading2">H2</button>'
15    const h3ButtonHTML = '<button type="button" class="trix-button trix-button--icon trix-button--icon-heading3" data-trix-attribute="heading3" title="Heading3">H3</button>'
16
17    this._initializeListener = () => {
18      const sibling1 = toolbar.querySelector('.trix-button--icon-heading-1')
19      if (sibling1) { sibling1.insertAdjacentHTML('afterend', h2ButtonHTML) }
20      const sibling2 = toolbar.querySelector('[data-trix-attribute="heading2"]')
21      if (sibling2) { sibling2.insertAdjacentHTML('afterend', h3ButtonHTML) }
22    }
23    this.element.addEventListener('trix-initialize', this._initializeListener, { once: true })
24  }
25
26  disconnect() {
27    this.element.removeEventListener('trix-initialize', this._initializeListener)
28  }
29}