@Ionaru 's review : disable actions on top of dropdown, add dropdown icon and open on clic

src/css/easymde.css

@@ -121,7 +121,6 @@
     display: inline-block;
     text-align: center;
     text-decoration: none !important;
-    width: 30px;
     height: 30px;
     margin: 0;
     padding: 0;
@@ -130,6 +129,10 @@
     cursor: pointer;
 }
 
+.editor-toolbar button {
+    width: 30px;
+}
+
 .editor-toolbar button.active,
 .editor-toolbar button:hover {
     background: #fcfcfc;
@@ -314,8 +317,9 @@
     font-style: italic;
 }
 
-.easymde-dropdown {
+.editor-toolbar .easymde-dropdown {
     position: relative;
+    width: 45px;
 }
 
 .easymde-dropdown-content {
@@ -325,8 +329,21 @@
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     padding: 8px;
     z-index: 2;
+    top: 30px;
 }
 
-.easymde-dropdown:hover .easymde-dropdown-content {
+.easymde-dropdown:active .easymde-dropdown-content,
+.easymde-dropdown:focus .easymde-dropdown-content{
     display: block;
 }
+
+.down {
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  border: solid #777;
+  border-width: 0 3px 3px 0;
+  display: inline-block;
+  padding: 2px;
+  margin-left: 8px;
+  margin-bottom: 3px;
+}

src/js/easymde.js

@@ -114,14 +114,17 @@ function fixShortcut(name) {
  * Create dropdown block
  */
 function createToolbarDropdown(options, enableTooltips, shortcuts, parent) {
-    var el = createToolbarButton(options, enableTooltips, shortcuts, 'div', parent);
+    var el = createToolbarButton(options, false, enableTooltips, shortcuts, 'button', parent);
     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);
+        var child = createToolbarButton(options.children[childrenIndex], true, enableTooltips, shortcuts, 'button', parent);
         content.appendChild(child);
     }
+    var dropIcon = document.createElement('i');
+    dropIcon.className = 'down';
+    el.appendChild(dropIcon);
     el.appendChild(content);
     return el;
 }
@@ -129,7 +132,7 @@ function createToolbarDropdown(options, enableTooltips, shortcuts, parent) {
 /**
  * Create button element for toolbar.
  */
-function createToolbarButton(options, enableTooltips, shortcuts, markup, parent) {
+function createToolbarButton(options, enableActions, enableTooltips, shortcuts, markup, parent) {
     options = options || {};
     var el = document.createElement(markup);
     el.className = options.name;
@@ -182,7 +185,7 @@ function createToolbarButton(options, enableTooltips, shortcuts, markup, parent)
     }
     el.appendChild(icon);
 
-    if (options.action) {
+    if (options.action && enableActions) {
         if (typeof options.action === 'function') {
             el.onclick = function (e) {
                 e.preventDefault();
@@ -2285,7 +2288,7 @@ EasyMDE.prototype.createToolbar = function (items) {
             } else 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);
+                el = createToolbarButton(item, true, self.options.toolbarTips, self.options.shortcuts, 'button', self);
             }