Fix for indentation behaviour

README.md

@@ -70,7 +70,7 @@ class Editor extends React.Component {
     let newState;
 
     if (CodeUtils.hasSelectionInBlock(editorState)) {
-      newState = CodeUtils.handleKeyCommand(editorState, command);
+      newState = CodeUtils.handleKeyCommand(editorState, command, 2);
     }
 
     if (!newState) {
@@ -105,7 +105,7 @@ class Editor extends React.Component {
     const { editorState } = this.state;
     if (!CodeUtils.hasSelectionInBlock(editorState)) return 'not-handled';
 
-    this.onChange(CodeUtils.onTab(evt, editorState));
+    this.onChange(CodeUtils.onTab(evt, editorState, 2));
     return 'handled';
   }
 

lib/__tests__/buildIndentation.test.js

@@ -0,0 +1,10 @@
+var buildIndentation = require('../utils/buildIndentation');
+
+describe('buildIndentation', function() {
+  it('should correctly translate numbers to spaces', function() {
+    var spaces = buildIndentation(2);
+    expect(spaces).toBe('  ');
+    var spacesAgain = buildIndentation(3);
+    expect(spacesAgain).toBe('   ');
+  });
+});

lib/handleKeyCommand.js

@@ -5,11 +5,12 @@ var removeIndent = require('./utils/removeIndent');
  *
  * @param {Draft.EditorState} editorState
  * @param {String} command
+ * @param {Number} indent - Indent depth
  * @return {Boolean}
  */
-function handleKeyCommand(editorState, command) {
+function handleKeyCommand(editorState, command, indent) {
   if (command === 'backspace') {
-    return removeIndent(editorState);
+    return removeIndent(editorState, indent);
   }
 }
 

lib/onTab.js

@@ -1,5 +1,6 @@
 var Draft = require('draft-js');
 var getIndentation = require('./utils/getIndentation');
+var buildIndentation = require('./utils/buildIndentation');
 
 // TODO: tab should complete indentation instead of just inserting one
 
@@ -8,17 +9,18 @@ var getIndentation = require('./utils/getIndentation');
  *
  * @param {SyntheticKeyboardEvent} event
  * @param {Draft.EditorState} editorState
+ * @param {Number} indent - Indent depth
  * @return {Draft.EditorState}
  */
-function onTab(e, editorState) {
+function onTab(e, editorState, indent) {
   e.preventDefault();
 
   var contentState = editorState.getCurrentContent();
   var selection = editorState.getSelection();
   var startKey = selection.getStartKey();
   var currentBlock = contentState.getBlockForKey(startKey);
 
-  var indentation = getIndentation(currentBlock.getText());
+  var indentation = buildIndentation(indent);
   var newContentState;
 
   if (selection.isCollapsed()) {

lib/utils/buildIndentation.js

@@ -0,0 +1,20 @@
+var DEFAULT_INDENTATION = '    ';
+
+/**
+ * Build indent from given number of spaces
+ * @param indent
+ * @return {string}
+ */
+function buildIndentation(indent) {
+  if (typeof indent !== 'number') {
+    return DEFAULT_INDENTATION;
+  }
+
+  var spaces = '';
+  for (var i = 0, j = indent; i < j; i++) {
+    spaces += ' ';
+  }
+  return spaces;
+}
+
+module.exports = buildIndentation;

lib/utils/getIndentation.js

@@ -1,15 +1,13 @@
 var detectIndent = require('detect-indent');
 
-var DEFAULT_INDENTATION = '    ';
-
 /**
  * Detect indentation in a text
  * @param {String} text
  * @return {String}
  */
 function getIndentation(text) {
   var result = detectIndent(text);
-  return result.indent || DEFAULT_INDENTATION;
+  return result.indent;
 }
 
 module.exports = getIndentation;

lib/utils/removeIndent.js

@@ -2,17 +2,18 @@ var Draft = require('draft-js');
 var endsWith = require('ends-with');
 
 var getNewLine = require('./getNewLine');
-var getIndentation = require('./getIndentation');
+var buildIndentation = require('./buildIndentation');
 var getLines = require('./getLines');
 var getLineAnchorForOffset = require('./getLineAnchorForOffset');
 
 /**
  * Remove last indentation before cursor, return undefined if no modification is done
  *
  * @param {Draft.EditorState} editorState
+ * @param {Number} indentLength
  * @return {Draft.EditorState|undefined}
  */
-function removeIndent(editorState) {
+function removeIndent(editorState, indentLength) {
   var contentState = editorState.getCurrentContent();
   var selection = editorState.getSelection();
 
@@ -27,7 +28,7 @@ function removeIndent(editorState) {
 
   // Detect newline separator and indentation
   var newLine = getNewLine(blockText);
-  var indent = getIndentation(blockText);
+  var indent = buildIndentation(indentLength);
 
   // Get current line
   var lines = getLines(blockText, newLine);