I want to add a button which would add a <hr> tag to the quill.js (beta) editor.

Here the fiddle.

<!-- Initialize Quill editor -->

    <div id=toolbar-container>

        <span class=ql-formats>

          <button class=ql-hr></button>  //here my hr-button

        </span>

        <span class=ql-formats>

          <button class=ql-bold></button>

          <button class=ql-italic></button>

        </span>

    </div>



    <div id=editor>



      <p>Hello World!</p>

      <hr> // this gets replaced by <p> tag automatically *strange*

      <p>Some initial <strong>bold</strong> text</p>

    </div>

I initialize my editor:

 var quill = new Quill('#editor', {

        modules: {

          toolbar: '#toolbar-container'

        },

        placeholder: 'Compose an epic...',

        theme: 'snow'

      });

Here I add a <h1> tag functionality to my editor and it works very well:

  $('.ql-hr').on(click,function(){



      var range = quill.getSelection();      

      var text = quill.getText(range.index, range.length);

      quill.deleteText(range.index, range.length);

      quill.pasteHTML(range.index, '<h1>'+text+'</h1>');

  })

Now I try the same for a <hr> tag, which doesn't work at all:

  $('.ql-hr').on(click,function(){



      var range = quill.getSelection();      

      quill.pasteHTML(range.index, '<hr>');

  })

the <hr> tag in the initial div#editor gets replaced with a <p> tag. And the button functionality I added doensn't work for <hr> tags, but for other tags it works. I know the <hr> tag is not implemented to Quill.js, that's also why I get this console output:

quill:toolbar ignoring attaching to nonexistent format hr select.ql-hr

Is there any way to fix this?