From 4d35093129d6388a955ab85a473167b9f24e09a7 Mon Sep 17 00:00:00 2001 From: blackberrypineapple Date: Sat, 29 Jul 2023 03:46:16 +0000 Subject: [PATCH] Add indent and outdent toolbar buttons Use commands 'tabAndIndentMarkdownList' and 'shiftTabAndUnindentMarkdownList' assigned to keyboard shortcuts. --- README.md | 2 ++ src/js/easymde.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++ types/easymde.d.ts | 6 +++++- 3 files changed, 59 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6b1f074..e7fd090 100644 --- a/README.md +++ b/README.md @@ -350,6 +350,8 @@ fullscreen | toggleFullScreen | Toggle Fullscreen
fa fa-arrows-alt no-disable guide | [This link](https://www.markdownguide.org/basic-syntax/) | Markdown Guide
fa fa-question-circle undo | undo | Undo
fa fa-undo redo | redo | Redo
fa fa-redo +indent | indent | Indent
fa fa-indent +outdent | outdent | Outdent
fa fa-outdent ### Toolbar customization diff --git a/src/js/easymde.js b/src/js/easymde.js index 93b3cde..9ac98fd 100644 --- a/src/js/easymde.js +++ b/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; diff --git a/types/easymde.d.ts b/types/easymde.d.ts index daacc23..8f0cfe4 100644 --- a/types/easymde.d.ts +++ b/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;