Playground: Minor issue, caret is not kept in view when pressing Enter, Tab.

[dmitshur]

This is an extremely minor issue.

In (all) text editors, if you move the caret with arrow keys, or edit text (e.g., press enter) such that the caret goes off screen, the viewport is scrolled to keep the caret in view.

Due to the overriding of Enter and Tab behaviors combined with event.PreventDefault(), pressing enter or tab while caret is offscreen does not bring the caret into view.

[dmitshur]

This seems to be a pretty common problem in browsers when trying to override some key behavior and/or move caret position programmatically.

Some solutions seem to be to emit a keyboard event, or arrange for event.PreventDefault() to not happen (this is how the Go Playground avoid this problem on Return, but it has the same issue when pressing Tab; it's just less noticeable since Tab doesn't move the caret offscreen vertically).

Relevant findings:

http://www.experts-exchange.com/Software/Internet_Email/Web_Browsers/Q_23940793.html
http://stackoverflow.com/questions/7892902/possible-to-scroll-caret-into-view-inside-a-single-html-text-field-with-javascri

[grantnelson-wf]

I added some code to track selections as we edit the code either directly, with our code editor methods (e.g. pressing enter auto-indents the new line), and during formatting. When the tracked selections change or the code is changed, the code text box now scrolls vertically and horizontally to try to keep the selection in view. (It is part of the new react component for the code box)