allow dropdown menu on toolbar to group secondary buttons

README.md

@@ -346,6 +346,46 @@ var easyMDE = new EasyMDE({
 });
 ```
 
+Put some buttons on dropdown menu
+
+```Javascript
+var easyMDE = new EasyMDE({
+	toolbar: [{
+                name: "heading",
+                action: EasyMDE.toggleHeadingSmaller,
+                className: "fa fa-header",
+                title: "Headers",
+            },
+            "|",
+            {
+                name: "others",
+                className: "fa fa-blind",
+                title: "others buttons",
+                children: [
+                    {
+                        name: "image",
+                        action: EasyMDE.drawImage,
+                        className: "fa fa-picture-o",
+                        title: "Image",
+                    },
+                    {
+                        name: "quote",
+                        action: EasyMDE.toggleBlockquote,
+                        className: "fa fa-percent",
+                        title: "Quote",
+                    },
+                    {
+                        name: "link",
+                        action: EasyMDE.drawLink,
+                        className: "fa fa-link",
+                        title: "Link",
+                    }
+                ]
+            },
+		// [, ...]
+	]
+});
+```
 
 ### Keyboard shortcuts
 

src/css/easymde.css

@@ -22,7 +22,7 @@
     right: 0;
     bottom: 0;
     height: auto;
-    z-index: 9;
+    z-index: 8;
     border-right: none !important;
     border-bottom-right-radius: 0 !important;
 }
@@ -72,9 +72,6 @@
 .editor-toolbar.fullscreen {
     width: 100%;
     height: 50px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
     padding-top: 10px;
     padding-bottom: 10px;
     box-sizing: border-box;
@@ -119,7 +116,7 @@
     padding: 0;
 }
 
-.editor-toolbar button {
+.editor-toolbar button, .editor-toolbar .easymde-dropdown {
     background: transparent;
     display: inline-block;
     text-align: center;
@@ -316,3 +313,20 @@
     color: #7f8c8d;
     font-style: italic;
 }
+
+.easymde-dropdown {
+    position: relative;
+}
+
+.easymde-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    padding: 8px 8px;
+    z-index: 2;
+}
+
+.easymde-dropdown:hover .easymde-dropdown-content {
+    display: block;
+}

src/js/easymde.js

@@ -110,15 +110,30 @@ function fixShortcut(name) {
     return name;
 }
 
+/**
+ * Create dropdown block
+ */
+function createToolbarDropdown(options, enableTooltips, shortcuts, parent) {
+    var el = createToolbarButton(options, enableTooltips, shortcuts, 'div');
+    el.className += ' easymde-dropdown';
+    var content = document.createElement('div');
+    content.className = 'easymde-dropdown-content';
+    for (var childrenIndex = 0; childrenIndex < options.children.length; childrenIndex++) {
+        var child = createToolbarButton(options.children[childrenIndex], enableTooltips, shortcuts, 'button', parent);
+        content.appendChild(child);
+    }
+    el.appendChild(content);
+    return el;
+}
 
 /**
  * Create button element for toolbar.
  */
-function createToolbarButton(options, enableTooltips, shortcuts) {
+function createToolbarButton(options, enableTooltips, shortcuts, markup, parent) {
     options = options || {};
-    var el = document.createElement('button');
+    var el = document.createElement(markup);
     el.className = options.name;
-    el.setAttribute('type', 'button');
+    el.setAttribute('type', markup);
     enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
 
     // Properly hande custom shortcuts
@@ -167,6 +182,20 @@ function createToolbarButton(options, enableTooltips, shortcuts) {
     }
     el.appendChild(icon);
 
+    if (options.action) {
+        if (typeof options.action === 'function') {
+            el.onclick = function (e) {
+                e.preventDefault();
+                options.action(parent);
+            };
+        } else if (typeof options.action === 'string') {
+            el.onclick = function (e) {
+                e.preventDefault();
+                window.open(options.action, '_blank');
+            };
+        }
+    }
+
     return el;
 }
 
@@ -2254,23 +2283,13 @@ EasyMDE.prototype.createToolbar = function (items) {
             if (item === '|') {
                 el = createSep();
             } else {
-                el = createToolbarButton(item, self.options.toolbarTips, self.options.shortcuts);
+                if (item.children) {
+                    el = createToolbarDropdown(item, self.options.toolbarTips, self.options.shortcuts, self);
+                } else {
+                    el = createToolbarButton(item, self.options.toolbarTips, self.options.shortcuts, 'button', self);
+                }
             }
 
-            // bind events, special for info
-            if (item.action) {
-                if (typeof item.action === 'function') {
-                    el.onclick = function (e) {
-                        e.preventDefault();
-                        item.action(self);
-                    };
-                } else if (typeof item.action === 'string') {
-                    el.onclick = function (e) {
-                        e.preventDefault();
-                        window.open(item.action, '_blank');
-                    };
-                }
-            }
 
             toolbarData[item.name || item] = el;
             bar.appendChild(el);