Trix: Unable to insert self-closing horizontal ruler html tag: <hr/>

[betorina]

I looks like it is unable to insert a self-closing horizontal ruler html tag <hr/> or simply <hr>

Inserting this HTML tag triggered from a custom Trix button in the toolbar looked quite easy at first try:

document.addEventListener 'trix-action-invoke', (event) ->
  if event.actionName == 'x-hrule'
    document.querySelector('trix-editor').editor.insertHTML("<hr>")

But then it seems that the <hr>tag is not allowed in the editor.
So I tried:

Trix.config.blockAttributes.rule = { tagName: 'hr' }

But then more trouble starts because it want to write text inside <hr> start and end tags. And the editor doesn't expand anymore etc.

I cannot find a way to whitelist this <hr> tag like the <br> already is.
Maybe is it possible to whitelist an element without calling Trix.config.blockAttributes and/or textAttributes.
Suggestions welcome.

[javan]

<hr>s are weird! I think they're the only self-closing block level element? And as you've discovered, they don't fit well as text or block attributes in Trix.

In Basecamp, we implemented horizontal rules as content attachments:

const attachment = new Trix.Attachment({ content: "<hr>", contentType: "application/vnd.trix.horizontal-rule.html" })
editor.insertAttachment(attachment)

Here's a working example: https://codepen.io/javan/pen/oQpevW

Hope that helps!

[betorina]

Sure, that's great! Thanks for the help, explanation and the very useful example.

[stale[bot]]

This issue has been automatically marked as stale after 90 days of inactivity. It will be closed if no further activity occurs.