Preserve scroll position and textarea height when previewing a comment

[roryokane]

The problem

Say I am writing a long comment, and I have used the browser-provided drag handles on textareas to make the editing area taller:

I am having trouble writing this last paragraph. So I click Preview to see how it looks without markup, so I can review what I have written more easily. I see this:

After reading the preview of the comment, I know what to write next. But now I have to drag the window back to a readable height, and then scroll back to where I was. This is very annoying when it happens multiple times over the course of writing a long comment.

The solution

The Preview button currently deletes and replaces the comment textarea. It should save the scroll position and height before deletion, and restore them after creating the replacement. Or, even better, it should just preserve the current textarea element, so that all properties remain the same. This would make it easier to preserve other useful properties in the future if necessary, such as cursor position. (Right now, cursor position is always lost by the click outside of the textarea, so it doesn’t need to be preserved.)

The JavaScript that handles previewing is previewComment in application.js. It currently sends the comment form to the server, then uses jQuery’s replaceWith to overwrite the entire comment form (the closest .comment) with the HTML contained in the server’s response. The server’s response comes from preview in CommentsController, which renders the view comments/commentbox.

This issue will still apply if #101 “Use a Github-style markdown previewer tab” is implemented. When switching back from the preview tab, the scroll position and height should be the same as the user left them. GitHub’s implementation already does this.