New cursor / selection idea.

[au...@muze.nl]

Hi,

I'm working on a new way to show the input bar / cursor. Instead of
moving a textarea of one line around, the idea is to make the textarea
the full size of the content, but use clipping to just show the line
where the cursor is.
This means that instead of doing all the work for cursor movement in
javascript, we can just let the textarea do its thing, and on each
keyclick/mouseup read the selection position of the textarea, and clip
around that.
Selections will than just work, on all browsers.
I've made a test page for a cross browser textarea selection library,
which is also in svn (textarea.test.html).
I've tested that in IE7, FF2, Opera 9 and Safari 3 (windows).
There are some potential problems, only IE has a method to insert
content into a specific location in a textarea, for the rest you need
to change the textarea.value, simply putting in the entire - changed -
contents. This may get slow on large files, and you can see a flicker.
If you want to add a different editor personality, e.g. joe, you will
still have to do all the cursor movement stuff in javascript.

regards,
Auke

[au...@muze.nl]

I've made a demo that also shows a syntax highlighter running parallel
to the textarea.
You can see it at http://auke.muze.nl/helene/textarea.test.html
I've tested it with IE7, FF2, Safari 3.1. The highlighter doesn't work
in Opera right now, don't really know why.
I've made a lot of shortcuts/hacks so if the textarea doesn't overlay
correctly, its because I was lazy :) It's
just a proof of concept for now.
Mouse clicks aren't redirected to the textarea either at the moment.

~
Auke

[au...@muze.nl]

I found another code editor, that uses a similar trick, but doesn't
use clipping, instead it makes the textarea almost opaque, and
overlays it similarly over the highlighted text. This has the
advantage that mouse selections simply work, and highlighting is still
visible on the current line.

See http://www.duckwizard.com/portfolio/web-based-code-editor/ (IE
doesn't like the wordpress template, the demo is at
http://www.duckwizard.com/syntaxed2/sample-css.php)