How to add custom checklist plugin in Froala Editor in angular 8?

Question

I've tried to implement custom plugin of checklist using below code, by making custom plugin and assigning it to FroalaEditor.PLUGINS, it seems something missing, it shows checklist label that I've assigned in TEMPLATE Variable. Then it need to be register in editor and can be used in plugins.

(function (FroalaEditor) {

    FroalaEditor.DEFAULTS = Object.assign(FroalaEditor.DEFAULTS, {
        checklist: true
    });
    FroalaEditor.PLUGINS.checklist = function (editor) {
        // Define a unique identifier for the plugin.

        const ID = 'fr-checklist';
        // Define the default options for the plugin.
        const DEFAULTS = {
            itemPrefix: '• ',
            itemSuffix: '\n'
        };

        // Define a template for the plugin.
        const TEMPLATE =
            '<button class="fr-command fr-btn fr-checklist-btn" data-cmd="' +
            ID +
            '" title="Checklist">' +
            '<i class="fa fa-check-square-o"></i>' +
            '</button>';

        // Define a method to toggle the checklist formatting.
        function toggle() {
            console.log('test toggle', editor.commands);
            editor.commands.toggleClass('fr-checklist', 'fr-checklist-item');
        }

        function toggle1() {
            _attach();
        }

        // Define a method to check if the current selection is in a checklist item.
        function isActive() {
            return editor.el.querySelector('.fr-checklist-item') !== null;
        }

        // Define a method to initialize the plugin.
        function _init() {
            console.log('cheklist iniit');

            editor.events.on(
                'mousedown',
                function () {
                    const checklistItem = editor.el.querySelector('.fr-checklist-item');
                    if (checklistItem && !checklistItem.contains(document.activeElement)) {
                        checklistItem.blur();
                    }
                },
                true
            );
            _attach();
        }

        // Define a method to attach the plugin to the editor.
        function _attach() {
            console.log('cheklist _attach');

            const button = document.createElement('button');
            button.className = 'fr-command fr-btn fr-checklist-btn';
            button.setAttribute('data-cmd', ID);
            button.setAttribute('title', 'Checklist');
            button.innerHTML = '<i class="fa fa-check-square-o"></i>';
            button.addEventListener('click', toggle);

            // editor.toolbar.get()
            document.querySelector('.fr-btn-grp').appendChild(button);

            editor.events.on('keydown', function (e) {
                if (e.which === FroalaEditor.KEYCODE.ENTER && isActive()) {
                    const el = editor.selection.element();
                    const html = el.innerHTML;
                    if (html === DEFAULTS.itemSuffix) {
                        editor.commands.exec('insertHTML', DEFAULTS.itemSuffix);
                        return false;
                    } else if (el.tagName.toLowerCase() === 'li' && !html) {
                        const newItem = document.createElement('li');
                        newItem.innerHTML = DEFAULTS.itemPrefix;
                        el.parentNode.insertBefore(newItem, el);
                        editor.selection.setBefore(newItem);
                        return false;
                    }
                }
            });

            editor.events.on('keyup', function (e) {
                if (e.which === FroalaEditor.KEYCODE.BACKSPACE && isActive()) {
                    const el = editor.selection.element();
                    const html = el.innerHTML;
                    if (html === DEFAULTS.itemPrefix) {
                        const prevEl = el.previousSibling;
                        if (prevEl.tagName.toLowerCase() === 'li') {
                            el.parentNode.removeChild(el);
                            editor.selection.setBefore(prevEl);
                        }
                        return false;
                    }
                }
            });
        }

        // Return the plugin object.
        return {
            _init: _init,
            _attach: _attach,
            toggle1: toggle1
        };
    };
})(FroalaEditor);

FroalaEditor.DefineIcon('checklist', { NAME: 'star' });
FroalaEditor.RegisterCommand('checklist', {
    title: 'Magic',
    icon: 'fr-checklist'
});