Improvements to editor for formatting source code

Question

Does anyone else have problems with the editor? I may be doing something incredibly stupid, but I find that whenever I use tab I tab out of the box. This is obviously irritating if you're trying to add a code sample.

So it would be quite cool if tab inside the main text box could be used for indenting. I know this would mess up people who like to navigate the form using tab but the content for a question is often large enough to justify it IMO.

What are your thoughts? Any other issues you have with the editor?

Answer 1

One very simple one - when writing code, when we hit "enter" it would be really nice if it went to the same indent, i.e.

void Foo()
{
   if (foo) <- I'm about to hit enter here
 > | <- I would like the cursor to be positioned here

Another request - the Ctrl-K shortcut indents the code if any of it is at the first column, but outdents otherwise. It would be nice to have a shortcut to always indent, so it's easy to indent a whole block of code. (Usually I add an extra line with a character at the start, then select the whole block including the new line, hit Ctrl-K and then remove the extra line, but that's a pain.)

Oh, and finally: a shortcut key to display all the shortcuts as an overlay, like Google Reader does. (Press "?" in Google Reader to see what I mean.)

Answer 2

These shortcuts are found in many / most editors. These would be very useful for putting a code block inside of a list item, for example

• Ctrl + ] : Indent by 4 spaces
• Ctrl + > or . : Indent by 4 spaces
• Ctrl + [ : De-indent by 4 spaces
• Ctrl + < or , : De-indent by 4 spaces

Other potentially useful keyboard shortcuts.

• Ctrl + & or 7 : Replace < with < > with > etc (HTML escape special characters)
• Ctrl + ! or 1 : Replace selected text with the final html code
  This would be useful when you want a code sample in a blockquote.

---

It should also be possible to have customized combos that are attached to an account.
Since there are many different variations of keyboards, it would be short-sighted to have only have a hard-coded set of available combos.

Answer 3

I stopped using the editor for code editing a long time ago. I just fire up an IDE and do it there, just remember to indent the entire codeblock by one tab and select and copy paste.

Answer 4

Please do not make tab key insert an actual tab!

Many users (well, at least this one) rely on the tab key to change focus when they are not using their mouse. It would break a fundamental UI feature that's been around in data entry forms (on and off the web) since at least Windows 3.1.

I'd suggest to use spaces if you are entering code in the editor. If you have an unusually large block of code, you're probably copy/pasting from an IDE anyway.

If you still want to break tab behavior, there's a StackApp for that.

Answer 5

Overriding system shortcuts is a bad thing. I can no longer paste into the text editing field without using the mouse, using Mac OS X, on a Dvorak/Cmd-Querty keyboard. (Cmd-V converts into "Code", which is Ctrl-K).

Answer 6

I think it would be better if the editor and the preview panes were horizontally aligned, even if it would temporarily hide the right sidebar's content ():

+-------------------------------------------------+
| o o o             Stack Overflow                | 
| < > + - [≥ http://stackoverflow.com/          ] | 
|_[ StackOverflow ][ tab2 ]_______________________| 
|                                                 | 
| B I | @ “ {} [] | < >                           | 
| +---------------------+  +--------------------+ | 
| | Editor source       |  | Preview            | |  
| |                     |  |                    | | 
| |                     |  |                    | | 
| |                     |  |                    | | 
| +---------------------+  +--------------------+ | 
|                                                 | 
+-------------------------------------------------+ 

If the editor area could autogrow, then the actual contents in the source and the preview panes would be approximately aligned, thus extensive vertical scrolling (in the editor area AND the page) could be entirely avoided.

Answer 7

Priority list IMHO:

1. Fix the Chrome blockquote bug (or have it fixed)
2. Make further efforts to match a post's preview and the actual rendering (this list appears correctly in the preview, see item "6")
3. Autoindentation (see Jon Skeet's answer)
4. Autoindent lists (so that if I pressed Enter right now, it would move on to item 4)

5. Add a character palette for all sorts of useful characters from m-dashes to backticks and tilde (not everybody has them on their keyboard) to arrows block drawing characters to mathematical operators. For example: (Mr. ­ makes this look misaligned)

   ┌─┬┐ αµ ~∀ ±− ­ ↖↑↗ “” 
   │├┼┤ βϱ `∃ ײ – ←⇔→ ⇐⇒
   └─┴┘ πω ¬∈ ÷³ — ↙↓↘ ⊂⊃
   

6. Make it less annoying to copy and paste data from the post preview.

Answer 8

Have the title field as a textarea so that browsers' spell checking functionality works there as well.

my tongue is only slightly in my cheek here

UPDATE I've just discovered that Google Chrome can spell check text boxes, but it appears to be on a per page or site basis as I have to keep re-enabling the option.

Answer 9

You should be able to paste in the raw URL to a question and the editor will auto-link it with the title of the question. This alone will save me a bunch of time in copying and pasting twice to link a question.

Answer 10

Cheers,

It was suggested to me that I should post here a request fixing problem with AltGr+G on Croatian keyboards. Basically, AltGr+F is used to insert [, and AltGr+G is used to insert ] on Croatian keyboard.

More details here.

Answer 11

I'd like the editor to write the code I mean, not the code I type. It should be smart enough to correct any usage errors I make due to the lack of intellisense. A unit testing framework that allows me to check my code for errors would be nice, too.

:-J

Answer 12

I find it annoying too - especially when writing code, or pasting code in from Visual Studio and then trying to use hightlighting and tabs to move it to the left.

Using "Shift tab" or "Alt tab" (well perhaps not this combination, but you get the idea) might be a compromise.

Answer 13

In case anyone wants to try out how it feels live:

Try Codility's Demo test.

It supports both the tab-key and auto-maintains the indentation level. Myself, I love it.

edit: stumbled upon http://compilr.com as well

Answer 14

I want to make a case for TAB key adding tab-spaces -

1. I disagree with this explanation.

2. When in a code-editor, pressing 'tab' more often than not is because I want to want to add a tab space.

3. It's what one would expect in that context. And hence more user-friendly than consistency! (Come, on!)

_{PS : I have even implemented a workaround for textarea fields, I can post it here but not sure that's required/considered.}

Answer 15

I get that the StackOverflow questions/answer box is not for any sort of serious code editing, but a couple toolbar buttons + keyboard shortcuts for performing indent and outdent would be a very nice upgrade. It would benefit both code editing and list editing.

Suggested keyboard shorcuts (keeping in mind that tab and shift-tab are not really a good option within a browser): Ctrl+</Ctrl+> and/or Ctrl+[/Ctrl+]

In addition, being able to maintain the same level of indent when pressing enter would be equally as valuable.

Sure, we could all switch to a dedicated text editor when typing code, but that adds unnecessary friction to the process when you just have a few lines to type. Good user experience is all about minimizing this type of friction, and indenting/outdenting is a pretty common use case.

Answer 16

I don't know if this was the case when this question was asked, but Shift+Enter continues the current Markdown line formatting:

In code, I press Shift+Enter
<-- and end up here.

• Similarly, in a bullet list
• Shift+Enter put me here.

It doesn't work for a simple formatted block

However,

If you include a space it works again (but you need two spaces at the end of the line
to get this format to display with a new line).

Answer 17

Please have the tab work in the editing textbox instead of taking the focus elsewhere.

Answer 18

Please don't force my browser to act like a desktop text editor!

There's already problems with seemingly simple things like trying to give the editor keyboard shortcuts.. For example, the code-block command Ctrl+k invokes the delete-selection emacs'ish command in Camino.

Messing with the inputs indentation really isn't a <textarea>'s job, and that's all the "editor" really is! I imagine such a feature could easily screw with pasting into the input box, for example.

This pushes a simple textarea into the "The Uncanny Valley of User Interface[s]", something I feel the WMD editor has quite successfully avoided (disable Javascript and this box basically works the same, minus the preview)

The editor isn't too bad for writing code.. For single-level-of-indentation code, I generally write it with no indentation, then use the ctrl+k shortcut to indent the first level, then select the rest of the code and hit ctrl+k again.. I'll try and demonstrate..

Step 1 (write script with no indentation):

if(true){
something()
}

Step 2 (select the lines and ctrl+k to indent it):

if(true){

    something()

}

Step 3 (remove the extra two lines, select all the code, press ctrl+k to make it into the final code-block):

    if(true){
        something()
    }

If I want to write code with anything more than one level of indentation, I just copy the answer-text into to a proper text editor (which I'm sure most users have open anyway!)

There's a good Firefox addon for this, actually. "It's All Text!" adds a little "Edit" button to each input box.. When clicked it loads the current text into your editor-of-choice.. When you save the file, the textarea is updated and you can post your answer. Same as the copy-and-paste to a proper editor, with less key-strokes!