Add increase/decrease tab indent buttons to the editor toolbar

Question

These should work by adding spaces or removing spaces from the beginning of the current line or every line between the start and end of a text selection (inclusive).

(edited this question to supplement Improvements to editor for formatting source code)

Answer 1

Yes please on the Tab doing actual spaces instead of taking you out of the box.

Edit: This applied to his original question about allowing Tab to work right in the editing textbox. But indent/dedent buttons would go a long way towards making code formatting user-friendly.

Answer 2

Edit: Indentation buttons are now available as a user-script on Stack Apps.

---

I maded my own buttons now. Currently they reside in my bookmarks toolbar:

And they link somewhere nice, the left one for example:

javascript:var%20tb%20=%20document.getElementById("wmd-input");...

In Firefox and Chrome (the only ones I tested) you can just bookmark scripts, and they nicely convert all the whitespace. Here are the full scripts, nothing special really:

//Indentation Up
var tb = document.getElementById("wmd-input");
var text = tb.value.substring(tb.selectionStart, tb.selectionEnd);
var lines = text.split("\n");
var shift = 0;
for (var i = 0; i < lines.length; i++)
{
    lines[i] = "    " + lines[i];
    shift += 4;
}
replaceSelection(tb, lines.join("\n"));
void (0);

function replaceSelection(textbox, text)
{
    var selectionStart = textbox.selectionStart;
    textbox.value = textbox.value.substring(0, textbox.selectionStart) + text + textbox.value.substring(textbox.selectionEnd);
    textbox.selectionStart = selectionStart;
    textbox.selectionEnd = selectionStart + text.length;
}

//Indentation Down
var tb = document.getElementById("wmd-input");
var text = tb.value.substring(tb.selectionStart, tb.selectionEnd);
var lines = text.split("\n");
var shift = 0;
for (var i = 0; i < lines.length; i++)
{
    if (lines[i].substring(0, 4) == "    ")
    {
        lines[i] = lines[i].substring(4);
        shift += 4;
    }
    if (lines[i].charCodeAt(0) == 9)
    {
        lines[i] = lines[i].substring(1);
        shift++;
    }
}
replaceSelection(tb, lines.join("\n"));
void (0);

function replaceSelection(textbox, text)
{
    var selectionStart = textbox.selectionStart;
    textbox.value = textbox.value.substring(0, textbox.selectionStart) + text + textbox.value.substring(textbox.selectionEnd);
    textbox.selectionStart = selectionStart;
    textbox.selectionEnd = selectionStart + text.length;
}

Note that the preview will not update after the script has been executed. Some calls which would do that could be included I suppose.

(I am aware that the code is redundant, I just did it this way for simplicity.)

Answer 3

Select a block, or put your cursor on a new line, and hit Ctrl+K - it'll automatically indent as needed for a code block.

Answer 4

What if it looked like this:

to address concerns like this:

I'm not against this idea, but I wonder how many people would then think they could indent paragraphs without applying the formatting as code. (Or: be wondered why indented text is formatted as code.) – Arjan Jul 22 '14 at 22:58