Search code examples
javascripthtmljquerysummernote

Summernote - Custom dropdown for ordered and unordered list

I am using Summernote editor v0.8.9 for quite a long time. I have created a custom dropdown button for Ordered List and Unordered List by using below code

let orderedList = function (context)
        {
            let ui = $.summernote.ui;

            // create button
            let button = ui.buttonGroup([
                ui.button({
                className: 'dropdown-toggle',
                contents: '<i class="fa fa-list-ol"/><span class="note-icon-caret"></span>',
                container: false,
                tooltip: 'Ordered List',
                data: {
                    toggle: 'dropdown'
                }
                }),
                ui.dropdown({
                    className: 'dropdown-style',
                    contents: "<ol style='list-style-type:none' class='ordered-list'><li data-value='1'>1</li><li data-value='1' style='display: none;'>1)</li><li data-value='I'>I</li><li data-value='A'>A</li><li data-value='a)' style='display: none;'>a)</li><li data-value='a'>a</li><li data-value='i'>i</li></ol>",
                    callback: function ($dropdown) {
                        $dropdown.find('li').each(function () {
                            $(this).click(function() {
                                selectedListType = orderedListMap[$(this).attr('data-value')];
                                $(context).summernote('editor.insertOrderedList');
                            });
                        });
                    }
                })
            ]);

            return button.render();   // return button as jquery object
        };

And also I get the dropdown attached to the toolbar as shown in the image

enter image description here

I have changed some code in the summernote.js to change the list style type after clicking on the dropdown item.

I am adding following code in the Bullet.prototype.wrapList method as follows

//for bullets and numbering style
if (selectedListType != 'NA') {
     listNode.setAttribute('style', 'list-style-type:' + selectedListType);
 }

I have also added the following code in the method "function replace(node, nodeName)" of "dom" object.

//for bullets and numbering style
if ((nodeName == 'OL' || nodeName == 'UL' ) && selectedListType != 'NA') {
    $(newNode).css('list-style-type', selectedListType);
}

When I click on the dropdown item I am calling below code.

$(context).summernote('editor.insertOrderedList');

At first instance everything is working fine. I can change ordered list to unordered list as well as to other types of lists. But the problem arises when I am trying to create a new list. When I try to create a new list below the existing list (note : after double entering new line, existing list closes, hence a new list is created after double entering new line),

enter image description here

the focus does not stay on the current line. Instead it goes to the old list and old list style (Ordered/unordered) is getting changed.

enter image description here

I have also kept the default UL/OL in the toolbar for deugging and I can see that the document.selection() in the method WrappedRange.prototype.nativeRange is giving proper selection for default UL/OL but is giving wrong selection for my dropdown UL/OL.

Please help.

Let me know if any info is needed from my side

Solution

  • I solved this problem.

    The problem was with the custom dropdown I created.

    The dropdown needs to be in the following structure in the 'contents' attribute inside 'ui.dropdown'

    <li>
    <a href="#"></a>
</li>
<li>
    <a href="#"></a>
</li>

    'a' tag inside 'li' tag