trix_controller.js

import { Controller } from "@hotwired/stimulus"
import Trix from 'trix'
const { lang } = Trix.config

// Connects to data-controller="trix"
export default class extends Controller {
  static targets = ['editor']

  connect() {
    document.addEventListener('trix-before-initialize', () => {
      this.initTrix()
      // console.log()
    })
  }

  initTrix() {
    // Trix.config.blockAttributes.heading1.tagName = 'h3'
    Trix.config.toolbar.getDefaultHTML = this.getDefaultHTML.bind(this)
    // this.addForegroundButtonConfig()
    // this.addBackgroundButtonConfig()
    this.addTextAlignCenterButtonConfig()
    this.addTextAlignRightButtonConfig()
    this.addTextAlignJustifyButtonConfig()
    this.addTextAlignLeftButtonConfig()
  }

  addTextAlignCenterButtonConfig() {
    Trix.config.blockAttributes.textAlignCenter = {
      tagName: 'centered-div'
    }
  }

  addTextAlignRightButtonConfig() {
    Trix.config.blockAttributes.textAlignRight = {
      tagName: 'right-div'
    }
  }

  addTextAlignJustifyButtonConfig() {
    Trix.config.blockAttributes.textAlignJustify = {
      tagName: 'justified-div'
    }
  }

  addTextAlignLeftButtonConfig() {
    Trix.config.blockAttributes.textAlignLeft = {
      tagName: 'left-div'
    }
  }

  getDefaultHTML() {
    // trix default HTML from:
    // ${this.textAlignButtons}
    // trix default HTML
  }

  get textAlignButtons() {
    // return my text align HTML
  }
}