Toolbar button for mentions and references

[vanillajonathan]

EasyMDE could provide toolbar buttons for mentions and references. These buttons would only provide icons, tooltips and insert the character @ and # into the editor. Nothing more.

It would be up to the user to implement hooks such as:

easyMDE.codemirror.on('change', function(cm, change) {
    if (change.text === '@') {
        alert('Your mention picker here');
    }
});

easyMDE.codemirror.on('change', function(cm, change) {
    if (change.text === '#') {
        alert('Your references picker here');
    }
});

[Ionaru]

Easily doable using custom toolbar buttons.

const easyMDE = new EasyMDE({
    toolbar: [
        {
            name: 'mention-hashtag',
            title: "Mention",
            action: (editor) => {
                const cm = editor.codemirror;
                const text = cm.getSelection(); // You can also implement your reference picker here.
                cm.replaceSelection('#' + text);
            },
            className: "fa fa-hashtag",
        }
    ]
});

[vanillajonathan]

Yes, but this would be easier to do using a built-in button. It would also be better to hook in the reference picker on input so it also works when the user types @ into the editor.

[Ionaru]

I agree that would be easier, but I'm trying to keep new configuration options tot a minimum until I have had the chance to rewrite the editor and get a better system for built-in buttons and plugins. ( I should make an issue tracking all that ) https://github.com/Ionaru/easy-markdown-editor/issues/447

I'll mark it as improvement and keep this open.

[vanillajonathan]

Alright, sounds good.