Merge pull request #388 from Zignature/options-toolbarbutton-attributes

Fix for issue #380 Custom attributes for toolbar buttons

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
 
 <!-- Linked PRs -->
 [#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
 
 <!-- Linked versions -->
 [Unreleased]: https://github.com/Ionaru/easy-markdown-editor/compare/2.16.0...HEAD

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
         // [, ...]

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;

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',
+                    }
                 },
             ],
         },

types/easymde.d.ts

@@ -74,6 +74,10 @@ declare namespace EasyMDE {
         italic?: string;
     }
 
+    interface CustomAttributes {
+        [key: string]: string;
+    }
+
     interface InsertTextOptions {
         horizontalRule?: ReadonlyArray<string>;
         image?: ReadonlyArray<string>;
@@ -142,6 +146,7 @@ declare namespace EasyMDE {
         noDisable?: boolean;
         noMobile?: boolean;
         icon?: string;
+        attributes?: CustomAttributes;
     }
 
     interface ImageTextsOptions {