Markdown button classnames can overlap with user-based classnames

We got a report from one of our users that Markdown buttons are broken.

The original issue https://github.com/Megabit/Blazorise/issues/4060

---

Basically, it seems that the class names that are used by this library can overlap with Bootstrap or with any other user classes. They are too generic with names table, bold, italic, etc.

I have tried to change them dynamically after the MDE instance is created with the following code:

const easyMDE = new EasyMDE(mdeOptions);

if (easyMDE.options.toolbar) {
    for (let index = 0; index < easyMDE.options.toolbar.length; ++index) {
        const element = easyMDE.options.toolbar[index];

        if (element && element.name && !element.name.startsWith("mde-")) {
            element.name = "mde-" + element.name;
        }
    }
}

and it kinda works but not 100%. From what I can observe, the .toolbar is a global object, and any change to it changes all of the instances. If there are 5 editors on a page, a race condition happens, and one or two editors are rendered without the previously added "mde-" prefix.

---

My question is.

1. How can I override MDE classnames? Is it even possible to do?
2. Can MDE come with predefined classnames that include a prefix? Eg. table becomes mde-table

[Ionaru]

2.18.0 has now been released and should be on npm in a few moments 😃

[Ionaru]

Good ideas! I think prefixToClasses will be easier to implement.