How can I add a new format ( tag) to Quill.js?

I have still no idea why the question has downvotes, but however here is the solution:

Import the embed blot – important: not “block”, not “embed”, “block/embed”!

var Embed = Quill.import('blots/block/embed');

Define a new class that extends that Embed

class Hr extends Embed {
    static create(value) {
        let node = super.create(value);
        // give it some margin
        node.setAttribute('style', "height:0px; margin-top:10px; margin-bottom:10px;");
        return node;
    }
}

Define your tag

Hr.blotName="hr"; //now you can use .ql-hr classname in your toolbar
Hr.className="my-hr";
Hr.tagName="hr";

Write a custom handler for the <hr> button

var customHrHandler = function(){
    // get the position of the cursor
    var range = quill.getSelection();
    if (range) {
        // insert the <hr> where the cursor is
        quill.insertEmbed(range.index,"hr","null")
    }
}

Register your new format

Quill.register({
    'formats/hr': Hr
});

Instantiate your Editor with the right selectors in your HTML

var quill = new Quill('#editor', {
    modules: {
        toolbar: { container: '#toolbar-container',
            handlers: {
                'hr': customHrHandler
            }
        }
    },
    theme: 'snow'
});

The HTML part remains the same. The whole <hr> functionality can be done similar to the <img> format.

Thank you, you helpful community.