From 347cbb99894dbcf5c69cfdfc13433798570f3b99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Mart=C3=ADn=20Jord=C3=A1n?=
 <31826994+erikmartinjordan@users.noreply.github.com>
Date: Fri, 23 Oct 2020 11:42:01 +0200
Subject: [PATCH] Replace onTab for keyBindingFn
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

· onTab is deprecated and after key pressing it, it doesn't indent the text.

· Indent line on selection adding spaces at the start of the line.
---
 src/index.js                      | 16 +++++++++-------
 src/modifiers/adjustBlockDepth.js | 20 +++++++++++++++++---
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/index.js b/src/index.js
index 69c6c01..14bca9b 100755
--- a/src/index.js
+++ b/src/index.js
@@ -121,14 +121,16 @@ const createMarkdownShortcutsPlugin = (config = { insertEmptyBlockOnReturnWithMo
           return null;
       }
     },
-    onTab(ev) {
-      const editorState = store.getEditorState();
-      const newEditorState = adjustBlockDepth(editorState, ev);
-      if (newEditorState !== editorState) {
-        store.setEditorState(newEditorState);
-        return 'handled';
+    keyBindingFn(ev) {
+      if(ev.key === 'Tab'){
+        const editorState = store.getEditorState();
+        const newEditorState = adjustBlockDepth(editorState, ev);
+        if (newEditorState !== editorState) {
+          store.setEditorState(newEditorState);
+          return 'handled';
+        }
+        return 'not-handled';    
       }
-      return 'not-handled';
     },
     handleReturn(ev, editorState) {
       const newEditorState = checkReturnForState(editorState, ev, config);
diff --git a/src/modifiers/adjustBlockDepth.js b/src/modifiers/adjustBlockDepth.js
index 64d714e..097024e 100644
--- a/src/modifiers/adjustBlockDepth.js
+++ b/src/modifiers/adjustBlockDepth.js
@@ -1,12 +1,26 @@
 import { CheckableListItemUtils } from 'draft-js-checkable-list-item';
-import { RichUtils } from 'draft-js';
+import { Modifier, EditorState } from 'draft-js';
 
 const adjustBlockDepth = (editorState, ev) => {
-  const newEditorState = CheckableListItemUtils.onTab(ev, editorState, 4);
+  
+  const tabDepth = 4;
+    
+  const newEditorState = CheckableListItemUtils.onTab(ev, editorState, tabDepth);
   if (newEditorState !== editorState) {
     return newEditorState;
   }
-  return RichUtils.onTab(ev, editorState, 4);
+    
+  let selectionState = editorState.getSelection();
+  let anchorKey = selectionState.getAnchorKey();
+  let currentContent = editorState.getCurrentContent();
+  let currentContentBlock = currentContent.getBlockForKey(anchorKey);
+  let start = selectionState.getStartOffset();
+  let end = selectionState.getEndOffset();
+  let selectedText = currentContentBlock.getText().slice(start, end);
+    
+  let nextState = Modifier.replaceText(currentContent, selectionState, (' ').repeat(tabDepth) + selectedText);
+    
+  return EditorState.push(editorState, nextState, 'indent');
 };
 
 export default adjustBlockDepth;