Merge branch 'develop' into feature/admin-gpm-dependencies

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 />');
+        let map = { 'actions': 'navigation', 'modes': 'states'};
-        Buttons.navigation.forEach((button) => {
+
+        ['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>`);
+                let hint = obj.title ? `data-hint="${obj.title}" title="${obj.title}"` : '';
-                    this.ui.navigation.find('.grav-editor-actions ul').append(element);
+                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 />');
+                if (obj.children) {
-        Buttons.states.forEach((button) => {
+                    let childrenContainer = $('<ul class="dropdown-menu" />');
-            Object.keys(button).forEach((key) => {
+                    element.addClass('button-group').find('a').wrap('<div class="dropdown-toggle" data-toggle="dropdown"></div>');
-                let obj = button[key];
+                    element.find('a').append(' <i class="fa fa-caret-down"></i>');
-                if (!obj.modes) { obj.modes = []; }
+                    element.append(childrenContainer);
-                if (!~this.codemirror.options.ignore.indexOf(key) && (!obj.modes.length || obj.modes.indexOf(this.codemirror.options.mode) > -1)) {
+                    obj.children.forEach((child) => this.renderButton(child, type, childrenContainer));
-                    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);
                 }
-
-                    obj.action && obj.action.call(obj.action, {
-                        codemirror: this.codemirror,
-                        button: element,
-                        textarea: this.editor,
-                        ui: this.ui
-                    });
             }
         });
-        });
     }
 
     addShortcut(identifier, shortcut, element) {

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

@@ -112,6 +112,76 @@ export default {
                 }
             }
         },
+        {
+            headers: {
+                identifier: 'headers',
+                title: 'Headers',
+                label: '<i class="fa fa-fw fa-header"></i>',
+                modes: ['gfm', 'markdown'],
+                children: [
+                    {
+                        h1: {
+                            identifier: 'h1',
+                            label: '<i class="fa fa-fw fa-header"></i>1',
+                            modes: ['gfm', 'markdown'],
+                            action({ codemirror, button, textarea }) {
+                                replacer({ name: 'h1', replace: '# $1', codemirror, button, mode: 'replaceLine' });
+                            }
+                        }
+                    },
+                    {
+                        h2: {
+                            identifier: 'h2',
+                            label: '<i class="fa fa-fw fa-header"></i>2',
+                            modes: ['gfm', 'markdown'],
+                            action({ codemirror, button, textarea }) {
+                                replacer({ name: 'h2', replace: '## $1', codemirror, button, mode: 'replaceLine' });
+                            }
+                        }
+                    },
+                    {
+                        h3: {
+                            identifier: 'h3',
+                            label: '<i class="fa fa-fw fa-header"></i>3',
+                            modes: ['gfm', 'markdown'],
+                            action({ codemirror, button, textarea }) {
+                                replacer({ name: 'h3', replace: '### $1', codemirror, button, mode: 'replaceLine' });
+                            }
+                        }
+                    },
+                    {
+                        h4: {
+                            identifier: 'h4',
+                            label: '<i class="fa fa-fw fa-header"></i>4',
+                            modes: ['gfm', 'markdown'],
+                            action({ codemirror, button, textarea }) {
+                                replacer({ name: 'h4', replace: '#### $1', codemirror, button, mode: 'replaceLine' });
+                            }
+                        }
+                    },
+                    {
+                        h5: {
+                            identifier: 'h5',
+                            label: '<i class="fa fa-fw fa-header"></i>5',
+                            modes: ['gfm', 'markdown'],
+                            action({ codemirror, button, textarea }) {
+                                replacer({ name: 'h5', replace: '##### $1', codemirror, button, mode: 'replaceLine' });
+                            }
+                        }
+                    },
+                    {
+                        h6: {
+                            identifier: 'h6',
+                            label: '<i class="fa fa-fw fa-header"></i>6',
+                            modes: ['gfm', 'markdown'],
+                            action({ codemirror, button, textarea }) {
+                                replacer({ name: 'h6', replace: '###### $1', codemirror, button, mode: 'replaceLine' });
+                            }
+                        }
+                    }
+                ]
+            }
+        },
         {
             bold: {
                 identifier: 'bold',

themes/grav/app/forms/state.js

@@ -97,9 +97,12 @@ export default class FormState {
 
             switch (type) {
                 case 'checkbox':
-                case 'radio':
                     value = field.is(':checked');
                     break;
+                case 'radio':
+                    if (!field.is(':checked')) { return; }
+                    value = field.val();
+                    break;
                 default:
                     value = field.val();
             }

themes/grav/app/utils/tabs-memory.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import Cookies from 'cookies-js';
+import { Instance as Editors } from '../forms/fields/editor';
 
 let Data = JSON.parse(Cookies.get('grav-tabs-state') || '{}');
 
@@ -9,4 +10,12 @@ $('body').on('touchstart click', '[name^="tab-"]', (event) => {
 
     Data[target.attr('name')] = target.val();
     Cookies.set('grav-tabs-state', JSON.stringify(Data), { expires: Infinity });
+
+    Editors.editors.each((index, editor) => {
+        let codemirror = $(editor).data('codemirror');
+        if (!codemirror) { return; }
+        if (codemirror.display.lastWrapWidth === 0) {
+            codemirror.refresh();
+        }
+    });
 });

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 {