Add indent and outdent toolbar buttons

Use commands 'tabAndIndentMarkdownList' and
'shiftTabAndUnindentMarkdownList' assigned to keyboard shortcuts.

README.md

@@ -350,6 +350,8 @@ fullscreen | toggleFullScreen | Toggle Fullscreen<br>fa fa-arrows-alt no-disable
 guide | [This link](https://www.markdownguide.org/basic-syntax/) | Markdown Guide<br>fa fa-question-circle
 undo | undo | Undo<br>fa fa-undo
 redo | redo | Redo<br>fa fa-redo
+indent | indent | Indent<br>fa fa-indent
+outdent | outdent | Outdent<br>fa fa-outdent
 
 
 ### Toolbar customization

src/js/easymde.js

@@ -46,6 +46,8 @@ var bindings = {
     'redo': redo,
     'toggleSideBySide': toggleSideBySide,
     'toggleFullScreen': toggleFullScreen,
+    'indent': indent,
+    'outdent': outdent,
 };
 
 var shortcuts = {
@@ -1081,6 +1083,29 @@ function togglePreview(editor) {
 
 }
 
+
+/**
+ * Indent action.
+ * @param {EasyMDE} editor
+ */
+function indent(editor) {
+    var cm = editor.codemirror;
+    cm.execCommand('tabAndIndentMarkdownList');
+    cm.focus();
+}
+
+
+/**
+ * Outdent action.
+ * @param {EasyMDE} editor
+ */
+function outdent(editor) {
+    var cm = editor.codemirror;
+    cm.execCommand('shiftTabAndUnindentMarkdownList');
+    cm.focus();
+}
+
+
 function _replaceSelection(cm, active, startEnd, url) {
     if (cm.getWrapperElement().lastChild.classList.contains('editor-preview-active'))
         return;
@@ -1484,6 +1509,8 @@ var iconClassMap = {
     'guide': 'fa fa-question-circle',
     'undo': 'fa fa-undo',
     'redo': 'fa fa-repeat fa-redo',
+    'indent': 'fa fa-indent',
+    'outdent': 'fa fa-outdent',
 };
 
 var toolbarBuiltInButtons = {
@@ -1672,6 +1699,23 @@ var toolbarBuiltInButtons = {
         noDisable: true,
         title: 'Redo',
     },
+    'separator-6': {
+        name: 'separator-6',
+    },
+    'indent': {
+        name: 'indent',
+        action: indent,
+        className: iconClassMap['indent'],
+        noDisable: true,
+        title: 'Indent',
+    },
+    'outdent': {
+        name: 'outdent',
+        action: outdent,
+        className: iconClassMap['outdent'],
+        noDisable: true,
+        title: 'Outdent',
+    },
 };
 
 var insertTexts = {
@@ -2905,6 +2949,8 @@ EasyMDE.redo = redo;
 EasyMDE.togglePreview = togglePreview;
 EasyMDE.toggleSideBySide = toggleSideBySide;
 EasyMDE.toggleFullScreen = toggleFullScreen;
+EasyMDE.indent = indent;
+EasyMDE.outdent = outdent;
 
 /**
  * Bind instance methods for exports.
@@ -2987,6 +3033,12 @@ EasyMDE.prototype.toggleSideBySide = function () {
 EasyMDE.prototype.toggleFullScreen = function () {
     toggleFullScreen(this);
 };
+EasyMDE.prototype.indent = function () {
+    indent(this);
+};
+EasyMDE.prototype.outdent = function () {
+    outdent(this);
+};
 
 EasyMDE.prototype.isPreviewActive = function () {
     var cm = this.codemirror;

types/easymde.d.ts

@@ -52,7 +52,9 @@ type ToolbarButton =
     | 'preview'
     | 'side-by-side'
     | 'fullscreen'
-    | 'guide';
+    | 'guide'
+    | 'indent'
+    | 'outdent';
 
 declare namespace EasyMDE {
 
@@ -287,6 +289,8 @@ declare class EasyMDE {
     static toggleFullScreen: (editor: EasyMDE) => void;
     static undo: (editor: EasyMDE) => void;
     static redo: (editor: EasyMDE) => void;
+    static indent: (editor: EasyMDE) => void;
+    static outdent: (editor: EasyMDE) => void;
 }
 
 export as namespace EasyMDE;