From a9d9993daed8e0d233497336809fffe85007802a Mon Sep 17 00:00:00 2001 From: Zignature Date: Tue, 11 Jan 2022 11:00:56 +0100 Subject: [PATCH 1/5] Fix for issue #380 Custom attributes for toolbar buttons Added "attributes" option to custom toolbar button --- README.md | 4 ++++ src/js/easymde.js | 6 ++++++ 2 files changed, 10 insertions(+) diff --git a/README.md b/README.md index 2a13104..59e129b 100644 --- a/README.md +++ b/README.md @@ -377,6 +377,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 3ee79e1..5016318 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -231,6 +231,12 @@ function createToolbarButton(options, enableActions, enableTooltips, shortcuts, } } + if (options.attributes) { + for (var attribute in options.attributes) { + el.setAttribute(attribute, options.attributes[attribute]); + } + } + if (options.noDisable) { el.classList.add('no-disable'); } From 565c42e0ff298a7562cd7406191bfabb44a558b8 Mon Sep 17 00:00:00 2001 From: Jeroen Akkerman Date: Tue, 11 Jan 2022 21:28:22 +0100 Subject: [PATCH 2/5] Add hasOwnProperty check --- src/js/easymde.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/js/easymde.js b/src/js/easymde.js index ccc04a0..f4a0c70 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -239,7 +239,9 @@ function createToolbarButton(options, enableActions, enableTooltips, shortcuts, if (options.attributes) { for (var attribute in options.attributes) { - el.setAttribute(attribute, options.attributes[attribute]); + if (Object.prototype.hasOwnProperty.call(options.attributes, attribute)) { + el.setAttribute(attribute, options.attributes[attribute]); + } } } From 98d9049728291841a582ad1684dad0ece4cfb27f Mon Sep 17 00:00:00 2001 From: Jeroen Akkerman Date: Tue, 11 Jan 2022 21:30:34 +0100 Subject: [PATCH 3/5] Move adding custom attributes above all others --- src/js/easymde.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/js/easymde.js b/src/js/easymde.js index f4a0c70..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; @@ -237,14 +247,6 @@ function createToolbarButton(options, enableActions, enableTooltips, shortcuts, } } - if (options.attributes) { - for (var attribute in options.attributes) { - if (Object.prototype.hasOwnProperty.call(options.attributes, attribute)) { - el.setAttribute(attribute, options.attributes[attribute]); - } - } - } - if (options.noDisable) { el.classList.add('no-disable'); } From 4ddb5b8e1b6441a7164e8a0628934fa1071c58d9 Mon Sep 17 00:00:00 2001 From: Jeroen Akkerman Date: Tue, 11 Jan 2022 21:38:36 +0100 Subject: [PATCH 4/5] Add toolbar button attributes to type declaration --- types/easymde-test.ts | 7 +++++++ types/easymde.d.ts | 5 +++++ 2 files changed, 12 insertions(+) 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 { From 7a2373eae5c803f288ab3d295e469441d8e4050c Mon Sep 17 00:00:00 2001 From: Jeroen Akkerman Date: Tue, 11 Jan 2022 21:40:13 +0100 Subject: [PATCH 5/5] Update changelog --- CHANGELOG.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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