MarkItUp: Tab/Indent, Set Selection

Question

I see that theres is no build in way for doing tabs/indents in MarkItUp? So I did something like

onTab: { 
  keepDefault: false, 
  replaceWith: function(markItUp) { 
    return miu.openEachLineWith(markItUp, '  '); 
  }
},
openEachLineWith: function(markItUp, openingStr) {
  var textarea = markItUp.textarea,
      selStart = textarea.selectionStart,
      selEnd = textarea.selectionEnd,
      selText = textarea.value.substring(selStart, selEnd),
      lines = [], 
      charsAdded = 0;

  lines = selText.split(/\r?\n/);
  for (var i = 0, len = lines.length; i < len; i++) {
    lines[i] = openingStr + lines[i];
    charsAdded += openingStr.length;
  }
  textarea.selectionEnd = selEnd + charsAdded;
  return lines.join('\n');
}

which works but, how can I set the selection after replacing the the text, I want it to select the tabbed text, also I prefer the way the editor here on SO works where when I bold some text, it selects the bolded text instead of moving the cursor to the end, can I do that with markItUp too?

Answer 1

I've been working on a script to do this. Here's an example: http://jsfiddle.net/timdown/dp2WL/2/

It indents when Tab is pressed and outdents when Shift + Tab is pressed and doesn't require any library. It hasn't had as much testing as I'd like, but seems to work well in all major browsers, including IE 6. The main code comes from an open source project I'm working on. The bit that enables tab indentation is at the bottom:

window.onload = function() {
    rangyInputs.init();
    rangyInputs.enableTabIndentation(document.getElementById("test"), "    ");
};

Answer 2

You must set the selection in the afterInsert callback (not in replaceWith)