I am trying to add a horizontal line option to the Trix editor in Rails 6.1.4. The example that I am finding for this (https://codepen.io/javan/pen/oQpevW) works perfectly, as long as it runs in CodePen. When I implement the example I am getting the option on the toolbar, but when I attempt to use it, I get the error message that "insertAttachment" is not a function.
addEventListener("trix-initialize", (event) ->
toolbarElement = event.target.previousSibling
blockTools = toolbarElement.querySelector("[data-trix-button-group=block-tools]")
if !!blockTools
blockTools.insertAdjacentHTML("afterbegin", '<button type="button" class="trix-button" data-trix-action="x-horizontal-rule" title="Horizontal Rule" tabindex="-1">-</button>')
)
addEventListener("trix-action-invoke", (event) ->
if (event.actionName == "x-horizontal-rule")
editor = event.target
attachment = new Trix.Attachment({ content: "<hr>", contentType: "application/vnd.trix.horizontal-rule.html" })
editor.insertAttachment(attachment)
)
As an interesting side-note, the initialize event was always triggered on the edit div, not the toolbar div, so I had to grab the previous sibling of the event target, otherwise the "block-tools" button group was never found. The "trix-action-invoke" event is triggering as it should and I have verified that the target is the correct div.
Because the example is using Trix 1.0.0, I tried with this version as well, but it generated the error message stating "Trix.Attachment is not a constructor".
I read a post for a different issue ("new Trix is not defined" when using Basecamp / Trix Editor) that implied that there could be a problem with Trix not being loaded yet by the time I want to use it, and it suggested to pull the JS from cloudflare directly, but this didn't solve my issue.
Any suggestions on what could be done to get this to work?