diff --git a/CHANGELOG.md b/CHANGELOG.md index 091a709..35ea747 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,15 +6,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] ### Added -- `unorderedListStyle` option to change the character used for unordered lists (Thanks to [@Zignature], [#389]). - -## [2.16.0] - 2021-10-28 -### Added - `direction` option to enable RTL mode (Thanks to [@souljuse], [#358]). +- `attributes` option to add custom attributes to toolbar buttons (Thanks to [@Zignature], [#388]). +- `unorderedListStyle` option to change the character used for unordered lists (Thanks to [@Zignature], [#389]). ### Fixed - Image extension detection when extension is uppercase (Thanks to [@ukjinjang], [#357]). -- Submenu actions not working in Chromium Browsers (Thanks to [@Offerel] and [@robjean9], [#364]). +- Submenu actions not working in Chromium Browsers (Thanks to [@Offerel], [@robjean9] and [@kelvinj], [#364]). ## [2.15.0] - 2021-04-22 ### Added @@ -236,6 +234,7 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown [#389]: https://github.com/Ionaru/easy-markdown-editor/pull/389 +[#388]: https://github.com/Ionaru/easy-markdown-editor/pull/388 [#364]: https://github.com/Ionaru/easy-markdown-editor/pull/364 [#358]: https://github.com/Ionaru/easy-markdown-editor/pull/358 [#357]: https://github.com/Ionaru/easy-markdown-editor/pull/357 @@ -334,6 +333,7 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown [@robjean9]: https://github.com/robjean9 [@Offerel]: https://github.com/Offerel [@Zignature]: https://github.com/Zignature +[@kelvinj]: https://github.com/kelvinj [Unreleased]: https://github.com/Ionaru/easy-markdown-editor/compare/2.16.0...HEAD diff --git a/README.md b/README.md index 6718436..7e62a19 100644 --- a/README.md +++ b/README.md @@ -379,6 +379,10 @@ const easyMDE = new EasyMDE({ }, className: "fa fa-star", title: "Custom Button", + attributes: { // for custom attributes + id: "custom-id", + "data-value": "custom value" // HTML5 data-* attributes need to be enclosed in quotation marks ("") because of the dash (-) in its name. + } }, "|" // Separator // [, ...] diff --git a/src/js/easymde.js b/src/js/easymde.js index b6290b4..20a6c40 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -219,6 +219,16 @@ function createToolbarDropdown(options, enableTooltips, shortcuts, parent) { function createToolbarButton(options, enableActions, enableTooltips, shortcuts, markup, parent) { options = options || {}; var el = document.createElement(markup); + + // Add 'custom' attributes as early as possible, so that 'official' attributes will never be overwritten. + if (options.attributes) { + for (var attribute in options.attributes) { + if (Object.prototype.hasOwnProperty.call(options.attributes, attribute)) { + el.setAttribute(attribute, options.attributes[attribute]); + } + } + } + el.className = options.name; el.setAttribute('type', markup); enableTooltips = (enableTooltips == undefined) ? true : enableTooltips; diff --git a/types/easymde-test.ts b/types/easymde-test.ts index 5a269c3..dc0ec74 100644 --- a/types/easymde-test.ts +++ b/types/easymde-test.ts @@ -59,6 +59,9 @@ const editor2 = new EasyMDE({ title: 'A Custom Button', noDisable: undefined, noMobile: false, + attributes: { + 'data-custom': 'attribute', + } }, '|', { @@ -89,6 +92,10 @@ const editor2 = new EasyMDE({ action: EasyMDE.toggleBold, className: 'fa fas fa-bold', title: 'Bold', + attributes: { + 'data-custom': 'some value', + 'data-custom-2': 'another value', + } }, ], }, diff --git a/types/easymde.d.ts b/types/easymde.d.ts index 02f06c8..e08a9ab 100644 --- a/types/easymde.d.ts +++ b/types/easymde.d.ts @@ -74,6 +74,10 @@ declare namespace EasyMDE { italic?: string; } + interface CustomAttributes { + [key: string]: string; + } + interface InsertTextOptions { horizontalRule?: ReadonlyArray; image?: ReadonlyArray; @@ -142,6 +146,7 @@ declare namespace EasyMDE { noDisable?: boolean; noMobile?: boolean; icon?: string; + attributes?: CustomAttributes; } interface ImageTextsOptions {