# Dude, where's my cursor?

This user script makes it easier to edit long questions and answers by doing the following things:

• It constrains the height of the Markdown preview to 500 pixels by default, so you can see the preview of the section you're editing (and don't have to scroll down a mile to see the preview of the last sentence you just edited). When you move around in the text box, it will scroll the preview according to your text cursor movement, to keep the part visible that you're working on.

You can press Ctrl-, (that's a comma) to toggle between this height-constrained mode and the normal, full-height mode (e.g. for your final proof-reading run).

• When you click inside the text box or press Ctrl-. (that's a period), it will highlight the position in the preview that corresponds to your text cursor with a flashing red ellipse.

• When you click on some text in the preview, it will move your text cursor to the corresponding position in the text box. In other words, this is more or less the opposite of the previous point.

## Video

If that description is too confusing, here's a short screen cast that shows what it looks like. The yellow sphere around the mouse cursor is just so you can see it more easily; when this sphere turns red, it means "click".

## Caveats

There are a few issues with this user script that you should be aware of. I'm putting the script out there anyway because I have been using it for a while now and have found it to be extremely helpful, despite these caveats.

• This is anything but high-performance JavaScript. Especially the "click on preview -> find corresponding source position" can take a noticable amount of time in long posts. But everything else doesn't come for free either – there's a lot going on everytime you just press a cursor key in the text box. On a reasonably modern computer this shouldn't be an issue (I don't notice a lag when typing), but keep this in mind when running it on your old 386.

• It usually works, but not 100% of the time. In the "click textbox -> highlight preview" direction, it's sometimes possible that the end of a line will be highlighted even though the word is actually on the next line. It will almost always be correct though.

In the "click preview -> move text cursor" direction, it usually works as well, but the success rate may be a bit lower. You will get the flashing red ellipse when you click on the preview; if this ellipse is in a different place than where you clicked, then you know it failed. Again, this is rare, but sometimes happens. In particular make sure you click on text, and not on white space between paragraphs etc.

• Also note that one line in the Markdown source may correspond to multiple positions in the preview (e.g. a [1]: http://foo reference that's used in multiple places) and vice versa (e.g. a link in the preview may come from such a reference at the bottom of the post, and from the [actual][use] somewhere else in the post body). This may cause you sometimes to jump to an unexpected place.

• It utterly fails in posts that contain client-side post-processed content. In particular this means MathJax, which is why the script will refuse to run on MathJax-enabled StackExchange sites. But don't expect it to work quite correctly either if the post has jTab content on music.se, a rendered Go board on bordgames.se, a replayer on chess.se, etc.

All that said, you can just try it out and see for yourself.

• "Apps, extensions and user scripts cannot be added from this website." :( – badp Jan 26 '13 at 20:26
• @badp As always in Chrome, you have to open chrome://extensions, and then drag the script from the download bar at the bottom onto that tab. – balpha Jan 26 '13 at 20:29
• If you're using Chrome, you save the script to your desktop. Then you open tools > extensions and drag/drop the script into the window... magic... – Chase Florell Jan 26 '13 at 20:31
• ah, I didn't refresh the page before commenting... my bad. – Chase Florell Jan 26 '13 at 20:32
• @balpha When I do that, the .js source is loaded in place of the Extensions page. ("Chrome 26? Unsupported!") – badp Jan 26 '13 at 20:33
• Just ran this script and it's pretty frigging amazing!!! Thanks for this. I always wondered why the SE guys couldn't add something along these lines. A simple (If I click in the text area, place my cursor in that spot in the markdown editor... glad This exists. – Chase Florell Jan 26 '13 at 20:34
• ...oh, right, it's got to end in ".user.js"; "sigh.js" won't cut it. – badp Jan 26 '13 at 20:38
• this is great! would it make sense to side-by-side the editor and preview too? – Jeff Atwood Jan 26 '13 at 21:08
• @JeffAtwood Interesting idea, though I wonder if that's feasible. Mapping a character in a text area to a screen position is pretty much impossible. – balpha Jan 26 '13 at 21:14
• Love it, great job. – plurby Jan 26 '13 at 22:46
• This is fantastic. I'd love for it to become a standard feature eventually. – Jeremy Banks Jan 27 '13 at 5:30
• The mark is ~two lines off with Chrome /Tampermonkey – Helmar Sep 20 '17 at 17:37