Better handling of indentation and the TAB key when editing posts

Question

About

This user script changes the behavior of a few keys (most notably the Tab key) within the post editor to behave more like it does in IDEs or text editors:

• When multiple lines are selected, Tab and Shift-Tab indent and dedent these lines

• When nothing is selected, Tab and Shift-Tab insert or remove whitespace to align the cursor on a tab boundary

• When the cursor is within the left margin of a line, Backspace removes whitespace to align the cursor on a tab boundary (in other words, it may delete more than just one space character)

• On indented lines, the Home key toggles the cursor between the actual beginning of the line and the beginning of the real content (in other words, it jumps back and forth to before and after the leading whitespace). This only happens on lines that are indented by at least four spaces or a tab, since it can be confusing for the following reason: When you press Home in the text editor, you expect the cursor to jump to the beginning of the line as it is displayed, which (due to wrapping) may be different from the actual previous newline character.

• So you don't have to reach for the mouse to tab out of the editor you can press and release the Ctrl key, and the next key press will not be intercepted; thus Tab takes you out of the editor. Pressing and releasing Ctrl will grey out the text editor until the next keystroke to clarify this. If you think this is too awkward, I'm open to other suggestions, but there should be some way to tab out of the editor .

Note that this will never insert TAB characters, only spaces. It does however handle already-present TABs, and it handles them the same way the Markdown converter does.

Feedback very welcome, except for discussions about a) tabs vs. spaces, and b) tab width :)

Download

Click this link to install it [Archive link 2017-03-18]

Answer 1

Inheriting indention when pressing enter

What I'd like to suggest is that if you press enter, the indentation is copied from the line you're coming from, and then automatically put before the next line. This would make it a bit easier to type out code on SO. Of course this would create the problem that people who would want to end their code would be required to press shift+tab or backspace, so to fix that, you could make it that it stops inheriting previous indentation when pressing enter with only whitespace on that line. For example, with the things between [] being inserted by the script; ⇆ Tab, ↵ Enter and ← Backspace:

[⇆ ]lorem Ipsum(dolor) {
[↵ ]    sit amet;
[↵←]}
[↵ ]|

and after pressing enter again, it inserts a newline, but removes the previously added indentation, so pressing enter again would change that to the following:

[⇆ ]lorem Ipsum(dolor) {
[↵ ]    sit amet;
[↵←]}

|

So in summary, it would do this when pressing enter:

• ...insert the exact same amount of indentation as the previous line had
• ...and only whitespace exists on the line, remove that whitespace and insert an enter

Other keys triggering default behaviour

I'd like to suggest using either alt+shift or ctrl+alt the esc key instead of ctrl. It would happen a lot less that people would use esc without actually meaning to do this. The ctrl key is used a lot in other situations, such as copy/pasting, backspacing full words, etc. In those situations where you use ctrl it might happen (and does regularly happen) that you press the ctrl key without actually intending to trigger the white-out.

Answer 2

This uses the jQuery .on(...) feature which is only available in 1.7 and up. Careers is still using an older version and you get an exception on every page right now with this installed.

We will be updating soon, but it would be nice if you could add a config page to turn it on/off for each site.

Answer 3

It would be nice to have a script option to adjust the indentation size. I, for one, would probably find an indent size of two spaces helpful.

(Many questions I'm editing to correct indentation are not aligned nicely on four-space indents.)

Answer 4

With the recent network-wide HTTPS switch, the include's should change to:

// @include        https://stackoverflow.com/*
// @include        https://*.stackoverflow.com/*

Also, in case of editing a question in the review queues, I noticed that the script wasn't working. The problem was in this line:

$("#mainbar").on("keydown", ".wmd-input", function (evt) { ...

As one goes through various posts in the queue, I suspect the mainbar element itself would be removed/replaced. A fix to that would be:

$("#content").on("keydown", ".wmd-input", function (evt) { ...

I suspect that the other event listener might need to be changed similarly for Ctrl + Tab combo.

Answer 5

I changed the @includes in the script header for the following simplified @matches:

// @match           *://*.askubuntu.com/questions*
// @match           *://*.mathoverflow.net/questions*
// @match           *://*.serverfault.com/questions*
// @match           *://*.stackapps.com/questions*
// @match           *://*.stackexchange.com/questions*
// @match           *://*.stackoverflow.com/questions*
// @match           *://*.superuser.com/questions*
// @exclude         http://chat.*
// @exclude         http://blog.*
// @exclude         http://careers.stackoverflow.com.*

Those will limit the script only to pages under /questions and to restrict only to individual questions, changed the following check at the start:

// are we really really on a Stack Exchange site?
if (!(window.StackExchange && StackExchange.options.routeName.indexOf('Questions/Show') !== -1 ))
    return;

Answer 6

Tabbing out of the editor

While tapping ctrl and then tab works well for tabbing out of the editor, i'd like to suggest an improvement. Unless the cursor is at the beginning of the line, it should tab out. Intending should only occur at the beginning of the line.