YzNLdVg

index.html

<form x-data="initialData()" x-init="init()" x-on:trix-action-invoke="if ($event.actionName == 'x-horizontal-rule') insertHorizontalRule($event)">
  <input id="x" type="hidden" name="content">
  <trix-editor x-ref="trix" input="x"></trix-editor>
</form>

script.js

function initialData() {
  return {
    element: '',
    init() {
      Trix.config.blockAttributes.heading1.tagName = 'h2';
      
      this.element = this.$refs.trix;
      
      this.insertDividerElements();
    },
    insertDividerElements() {
      this.quoteButton.insertAdjacentHTML('afterend', this.horizontalButtonTemplate);
    },
    insertHorizontalRule($event) {
      $event.target.editor.insertAttachment(this.buildHorizontalRule());
    },
    buildHorizontalRule() {
      return new Trix.Attachment({ content: '<hr>', contentType: 'application/vnd.alpinejs.horizontal-rule.html' });
    },
    get quoteButton() {
      return this.toolbarElement.querySelector('[data-trix-attribute=quote]');
    },
    get toolbarElement() {
      return this.element.toolbarElement;
    },
    get horizontalButtonTemplate() {
      return '<button type="button" class="trix-button" data-trix-action="x-horizontal-rule" tabindex="-1" title="Divider">HR</button>';
    }
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.3.1/trix.css" rel="stylesheet" />

yznldvg.markdown

YzNLdVg

A Pen by Oliver Jimenez-Servin on CodePen.

License.