Implemented Undo / Redo buttons for Editor (fixes #420)

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

@@ -64,8 +64,54 @@ export let strategies = {
     replaceRange() {}
 };
 
+const flipDisabled = (codemirror, button, type) => {
+    let hasHistory = codemirror.historySize()[type];
+    let element = button.find('a');
+    button[hasHistory ? 'removeClass' : 'addClass']('button-disabled');
+
+    if (!hasHistory) {
+        element.attr('title-disabled', element.attr('title'));
+        element.attr('data-hint-disabled', element.attr('data-hint'));
+        element.removeAttr('title').removeAttr('data-hint');
+    } else {
+        element.attr('title', element.attr('title-disabled'));
+        element.attr('data-hint', element.attr('data-hint-disabled'));
+        element.removeAttr('title-disabled').removeAttr('data-hint-disabled');
+    }
+};
+
 export default {
     navigation: [
+        {
+            undo: {
+                identifier: 'undo',
+                title: 'Undo',
+                label: '<i class="fa fa-fw fa-undo"></i>',
+                modes: [],
+                action({ codemirror, button, textarea}) {
+                    button.addClass('button-disabled');
+                    codemirror.on('change', () => flipDisabled(codemirror, button, 'undo'));
+                    button.on('click.editor.undo', () => {
+                        codemirror.undo();
+                    });
+                }
+            }
+        },
+        {
+            redo: {
+                identifier: 'redo',
+                title: 'Redo',
+                label: '<i class="fa fa-fw fa-repeat"></i>',
+                modes: [],
+                action({ codemirror, button, textarea}) {
+                    button.addClass('button-disabled');
+                    codemirror.on('change', () => flipDisabled(codemirror, button, 'redo'));
+                    button.on('click.editor.redo', () => {
+                        codemirror.redo();
+                    });
+                }
+            }
+        },
         {
             bold: {
                 identifier: 'bold',

themes/grav/scss/preset.scss

@@ -785,6 +785,18 @@ form {
                 border-right: 1px solid transparent;
             }
         }
+
+        .button-disabled a {
+            color: #ccc;
+            text-shadow: 0 1px white;
+
+            &:hover, &:focus {
+                background: lighten($content-bg, 5%);
+                color: #ccc;
+                border-left: 1px solid transparent;
+                border-right: 1px solid transparent;
+            }
+        }
     }
 }