Added support for dropdown buttons in Editor

themes/grav/app/forms/fields/editor.js

@@ -178,14 +178,22 @@ export class Toolbar {
     }
 
     renderButtons() {
-        this.ui.navigation.find('.grav-editor-actions').empty().append('<ul />');
-        Buttons.navigation.forEach((button) => {
+        let map = { 'actions': 'navigation', 'modes': 'states'};
+
+        ['actions', 'modes'].forEach((type) => {
+            this.ui.navigation.find(`.grav-editor-${type}`).empty().append('<ul />');
+            Buttons[map[type]].forEach((button) => this.renderButton(button, type));
+        });
+    }
+
+    renderButton(button, type, location = null) {
         Object.keys(button).forEach((key) => {
             let obj = button[key];
             if (!obj.modes) { obj.modes = []; }
             if (!~this.codemirror.options.ignore.indexOf(key) && (!obj.modes.length || obj.modes.indexOf(this.codemirror.options.mode) > -1)) {
-                    let element = $(`<li class="grav-editor-button-${key}"><a class="hint--top" data-hint="${obj.title}" title="${obj.title}">${obj.label}</a></li>`);
-                    this.ui.navigation.find('.grav-editor-actions ul').append(element);
+                let hint = obj.title ? `data-hint="${obj.title}" title="${obj.title}"` : '';
+                let element = $(`<li class="grav-editor-button-${key}"><a class="hint--top" ${hint}>${obj.label}</a></li>`);
+                (location || this.ui.navigation.find(`.grav-editor-${type} ul:not(.dropdown-menu)`)).append(element);
 
                 if (obj.shortcut) {
                     this.addShortcut(obj.identifier, obj.shortcut, element);
@@ -197,32 +205,16 @@ export class Toolbar {
                     textarea: this.editor,
                     ui: this.ui
                 });
-                }
-            });
-        });
 
-        this.ui.navigation.find('.grav-editor-modes').empty().append('<ul />');
-        Buttons.states.forEach((button) => {
-            Object.keys(button).forEach((key) => {
-                let obj = button[key];
-                if (!obj.modes) { obj.modes = []; }
-                if (!~this.codemirror.options.ignore.indexOf(key) && (!obj.modes.length || obj.modes.indexOf(this.codemirror.options.mode) > -1)) {
-                    let element = $(`<li class="grav-editor-button-${key}"><a class="hint--top" data-hint="${obj.title}" title="${obj.title}">${obj.label}</a></li>`);
-                    this.ui.navigation.find('.grav-editor-modes ul').append(element);
-
-                    if (obj.shortcut) {
-                        this.addShortcut(obj.identifier, obj.shortcut, element);
+                if (obj.children) {
+                    let childrenContainer = $('<ul class="dropdown-menu" />');
+                    element.addClass('button-group').find('a').wrap('<div class="dropdown-toggle" data-toggle="dropdown"></div>');
+                    element.find('a').append(' <i class="fa fa-caret-down"></i>');
+                    element.append(childrenContainer);
+                    obj.children.forEach((child) => this.renderButton(child, type, childrenContainer));
                 }
-
-                    obj.action && obj.action.call(obj.action, {
-                        codemirror: this.codemirror,
-                        button: element,
-                        textarea: this.editor,
-                        ui: this.ui
-                    });
             }
         });
-        });
     }
 
     addShortcut(identifier, shortcut, element) {

themes/grav/scss/preset.scss

@@ -784,6 +784,12 @@ form {
     }
 }
 
+#admin-main .grav-editor-toolbar .dropdown-menu {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, .075);
+    border: 1px solid $form-border;
+    background: lighten($content-bg, 5%);
+}
+
 #admin-main .grav-editor-toolbar {
     border: 1px solid $form-border;
     border-top-right-radius: $border-radius;

themes/grav/scss/template/_editor.scss

@@ -87,6 +87,10 @@
             }
         }
     }
+
+    .dropdown-menu li {
+        width: 50%;
+    }
 }
 
 .grav-editor-hide-toolbar {