feat : allow dropdown menu on toolbar to group secondary buttons

[firm1]

This PR allow to groups somes buttons in dropdown menu.

Result give something like screenshot

[Situphen]

I read the code and here are my two cents. Of course @Ionaru as the last word.

[firm1]

Thank you @Situphen for your review, I updated the code with your suggests.

@Ionaru , you can decide now.

[A-312]

fix: #129 *

[Ionaru]

Feedback from testing:

1. The dropdown toolbar buttons seem to inherit the action of the top-level button, for example

new EasyMDE({
    toolbar: [{
        name: 'bold',
        action: EasyMDE.toggleBold,
        className: 'fa fa-bold',
        title: 'Bold',
        children: [
            {
                name: "italic",
                action: EasyMDE.toggleItalic,
                className: "fa fa-italic",
                title: "Italic",
            }
        ]
    }
});

Using the dropdown and clicking the toggleItalic button will trigger both toggleBold and toggleItalic.

2. I'd like there to be some indication of a dropdown being present on a button, currently when looking at the toolbar there is no way to know if there are any dropdowns and users will have to test each button.

3. Dropdowns that open when hovering do not provide a great mobile experience, is there anything we can do to improve that? Having an indicator might solve this as well.

[firm1]

Very good remarks, thanks. I'll take care of your suggestions.

[A-312]

2. We can use ▼ on ::before or ::after

[firm1]

Hi @Ionaru ,
I've considered all your comments, can you check that it corresponds to what is expected ?

Cheers,

[firm1]

Else, if you prefer, i have this style too.

[Ionaru]

A small thing I've noticed is that the noDisable flag doesn't get applied properly, the button is no longer clickable when in preview-mode, but the cursor still turns into a pointer when hovering over the dropdown.

[firm1]

I @Ionaru i can't reproduce your last problem.

Can you give me your html example file and your browser name and version please ?

[Ionaru]

    new EasyMDE({
        autoDownloadFontAwesome: false,
        toolbar: [{
            name: 'bold',
            className: 'fa fa-bold',
            title: 'Bold',
            noDisable: true,
            children: [
                {
                    name: "italic",
                    action: EasyMDE.toggleItalic,
                    className: "fa fa-italic",
                    title: "Italic",
                }
            ]
        }]
    });

Then enable preview mode and hover over the italic button.

[A-312]

@Ionaru In the master branch, I get the same behavior of this PR

[A-312]

ping @Ionaru can you explain more that we should get ? because on master branch I got the same behavior

[Ionaru]

Hmm alright if it's the same on master then it's fine I suppose

[A-312]

Hmm alright if it's the same on master then it's fine I suppose

If you want that we fix this issue, we need to understand the behavior of this property. But we are waiting this PR, maybe we can open a ticket ?

[Ionaru]

@A-312 @firm1 I've made a small change to the dropdown code to allow the dropdown to use the built-in button shortcuts.

new EasyMDE({
    toolbar: [{
        name: 'Text tools',
        className: 'fas fa-edit',
        title: 'Common text edit tools',
        noDisable: true,
        children: ['bold', 'italic'],
    }],
});

Please check if the code is also still valid for your use-cases.

[A-312]

firm1 has less time to review, I will review this evening.

[A-312]

I have forgotten to review this PR, I did, this seem OK for me.