Trix Heading

richtext.css

trix-toolbar .trix-dialog--heading {
  max-width: 190px;
}

.trix-content h1, .trix-content h2, .trix-content h3, .trix-content h4, .trix-content h5, .trix-content h6 {
  line-height: 1.2;
  margin: 0;
}

.trix-content h1 {
  font-size: 36px;
}

.trix-content h2 {
  font-size: 26px;
}

.trix-content h3 {
  font-size: 18px;
}

.trix-content h4 {
  font-size: 18px;
}

.trix-content h5 {
  font-size: 14px;
}

.trix-content h6 {
  font-size: 12px;
}

richtext.js

import Trix, { removeNode } from "trix"

class RichText {
  constructor(element) {
    this.element = element

    this.removeOriginalHeadingButton()
    this.insertNewHeadingButton()
    this.insertHeadingDialog()
  }

  removeOriginalHeadingButton() {
    removeNode(this.originalHeadingButton)
  }

  insertNewHeadingButton() {
    this.buttonGroupBlockTools.insertAdjacentHTML("afterbegin", this.headingButtonTemplate)
  }

  insertHeadingDialog() {
    this.dialogsElement.insertAdjacentHTML("beforeend", this.dialogTemplate)
  }

  get buttonGroupBlockTools() {
    return this.toolbarElement.querySelector("[data-trix-button-group=block-tools]")
  }

  get dialogsElement() {
    return this.toolbarElement.querySelector("[data-trix-dialogs]")
  }

  get originalHeadingButton() {
    return this.toolbarElement.querySelector("[data-trix-attribute=heading1]")
  }

  get toolbarElement() {
    return this.element.toolbarElement
  }

  get headingButtonTemplate() {
    return '<button type="button" class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-action="heading" title="Heading" tabindex="-1">Heading</button>'
  }

  get dialogTemplate() {
    return `
      <div class="trix-dialog trix-dialog--heading" data-trix-dialog="heading" data-trix-dialog-attribute="heading">
        <div class="trix-dialog__link-fields">
          <div class="trix-button-group">
            <button class="trix-button trix-button--dialog" data-trix-attribute="heading1">H1</button>
            <button class="trix-button trix-button--dialog" data-trix-attribute="heading2">H2</button>
            <button class="trix-button trix-button--dialog" data-trix-attribute="heading3">H3</button>
            <button class="trix-button trix-button--dialog" data-trix-attribute="heading4">H4</button>
            <button class="trix-button trix-button--dialog" data-trix-attribute="heading5">H5</button>
            <button class="trix-button trix-button--dialog" data-trix-attribute="heading6">H6</button>
          </div>
        </div>
      </div>
    `
  }
}

addEventListener("trix-initialize", function (e) {
    new RichText(e.target)
})

Trix.config.blockAttributes.heading2 = { tagName: "h2", terminal: true, breakOnReturn: true, group: false }
Trix.config.blockAttributes.heading3 = { tagName: "h3", terminal: true, breakOnReturn: true, group: false }
Trix.config.blockAttributes.heading4 = { tagName: "h4", terminal: true, breakOnReturn: true, group: false }
Trix.config.blockAttributes.heading5 = { tagName: "h5", terminal: true, breakOnReturn: true, group: false }
Trix.config.blockAttributes.heading6 = { tagName: "h6", terminal: true, breakOnReturn: true, group: false }