diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6146af5..bab52f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,9 @@ All notable changes to EasyMDE will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-[//]: # (## [Unreleased])
+## [Unreleased]
+### Added
+- `toolbarButtonClassPrefix` option to resolve conflicts with Bootstrap classes ([#493]).
## [2.17.0] - 2022-08-20
### Added
@@ -254,6 +256,7 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
- Cursor not always showing in "text" mode over the edit field
+[#493]: https://github.com/Ionaru/easy-markdown-editor/issues/493
[#478]: https://github.com/Ionaru/easy-markdown-editor/issues/478
[#399]: https://github.com/Ionaru/easy-markdown-editor/issues/399
[#252]: https://github.com/Ionaru/easy-markdown-editor/issues/252
diff --git a/README.md b/README.md
index 5a5d496..437d278 100644
--- a/README.md
+++ b/README.md
@@ -206,6 +206,7 @@ easyMDE.value('New input for **EasyMDE**');
- **theme**: Override the theme. Defaults to `easymde`.
- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
+- **toolbarButtonClassPrefix**: Adds a prefix to the toolbar button classes when set. For example, a value of `"mde"` results in `"mde-bold"` for the Bold button.
- **direction**: `rtl` or `ltr`. Changes text direction to support right-to-left languages. Defaults to `ltr`.
@@ -267,7 +268,7 @@ const editor = new EasyMDE({
preview.innerHTML = customMarkdownParser(plainText);
}, 250);
- // If you return null, the innerHTML of the preview will not
+ // If you return null, the innerHTML of the preview will not
// be overwritten. Useful if you control the preview node's content via
// vdom diffing.
// return null;
@@ -311,6 +312,7 @@ const editor = new EasyMDE({
tabSize: 4,
toolbar: false,
toolbarTips: false,
+ toolbarButtonClassPrefix: "mde",
});
```
diff --git a/cypress/e2e/3-class-prefix/class-prefix.cy.js b/cypress/e2e/3-class-prefix/class-prefix.cy.js
new file mode 100644
index 0000000..5853ecc
--- /dev/null
+++ b/cypress/e2e/3-class-prefix/class-prefix.cy.js
@@ -0,0 +1,17 @@
+///