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;