No tab key support

It has been a while for me here on Stack Overflow, and from the beginning of my experience I've noticed something which still leaves a bad taste in my mouth when I create and edit posts: in the current Markdown editor there's no support for the TAB key.

This isn't only related to Stack Overflow (obviously), it concerns all the Stack Exchange sites, although Stack Overflow users are the ones who suffer the most for this because of the enormous amount of short or long code snippets which get posted and edited every day by everyone.

It often happens that, when writing a code snippet, if I want to indent or dedent several lines of code I have to move the caret at the beginning of each line and manually add four spaces, and let's say it, this is just boring and time wasting. Despite the fact that I prefer tab (\t) characters, I understand that tabs may not always be rendered the same way, and it's better to use spaces for code snippets, but as of now, it's a real pain to always have to hit that spacebar thousand of times every day while writing posts.

Background research

I'm not posting another duplicated question here on meta, I've already seen someone trying to bring this feature request to the attention of Stack Exchange developers. Some examples of this are the following questions:

• Why does tab key not work while writing questions/answers?
• Preferences option to enable tab-key space inserting
• Is there a way to indent a chunk of code? [duplicate]
• Will the Stack Overflow editor ever get better?

But unfortunately looks like this feature request has always been rejected. For example, quoting from the most upvoted answer I've found (emphasis mine):

General internet browser convention dictates that the tab key be used to cycle between various controls on the page, and not to represent the \t character, even when a text input control has focus.

For the site to fight this would be both somewhat difficult, because the browser is designed to not do what you are asking of it, and also violates the user expectation of this virtually ubiquitous web browser feature. While this may be possible, it's generally not a very good idea. [...]

Now, I understand that the real behavior of the TAB key should be to cycle between page controls and input fields, but that's a feature worth a submission form (some page with a good amount of input fields), and not a page containing a single main <textarea>.

Many programming sites already implement this by default, and we, as developers, generally expect the tab key to behave like this, being used to IDEs and text editors which support this feature by default. I personally hit the tab key several times a day while editing answers without thinking about it and always ending up being teleported at the bottom of the page, in the edit summary or tag field, having to scroll back to the top.

My proposal

Implementing tab characters (\t) is not a good idea, and that's ok. This although doesn't mean that we cannot implement four-spaces indentation with the TAB key.

To make these Markdown editors much more powerful and smart, I propose to implement a switchable TAB indentation functionality. It would basically be just a little button, nothing cumbersome, something similar to this:

^{Image edited by me}

The user will simply toggle the functionality from that little button, and will be able to:

• Indent by 4 spaces at the current caret position pressing TAB;
• Dedent by 4 spaces (if they're present) at the current caret position pressing Shift+TAB;
• Indent multiple lines of code by 4 spaces selecting them and pressing TAB;
• Dedent multiple lines of code by 4 spaces selecting them and pressing Shift+TAB.

Here's a visual example of what I'm talking about:

^{GIF created by me using ScreenToGif v1.4.1}

Now I think you probably understand why this would be really significant when talking about very long snippets of code with multiple nested indented blocks.

My personal solution

As a personal solution I created a little JavaScript script called textarea-devtab.js, which you can test here. It basically implements this small but very useful feature on any children textarea of the chosen Element. If you want, you can easily add this to your Chrome devtools code snippets and run it whenever you need (as I personally do at the moment).

Simple as this, you can:

// Enable it on any element's children textareasmyElement.enableTextareaDevTab();// Disable it at any momentmyElement.disableTextareaDevTab();// Enable it for any textarea of the pagedocument.body.enableTextareaDevTab();

It's just sixty lines of code so I don't see the need of any copyright/license/attribution, I just wanted to share it with my fellow programmers here on Stack Overflow :)

I would like to give a boost to this post so that Stack programmers will notice it as soon as possible.

Could we have this beautiful feature?