Marijn Haverbeke

"... author of the thing, didn't submit the link here) did do some polishing and commenting on the code recently ..."

Hey Marijn I didn't know the code had been previously submitted. I added your article because I've been looking to hack up a simple Javascript console editor to work with.

editing Javascript in Firebug is okay for simple expressions
useless for anything above 3 lines

Coding in the browser allows the REPL [0] time to be reduced and you get instant feedback. So this lead me to your article. What I intend to do is try to re-create pythons idle shell [2] allowing you to type in syntax (highlighted) then press enter, eval the code on the next line. Reading your article helps me a lot in solving this.

I re-created the demo in about 5min last night. One problem I do have is entering text then hitting newline. Artifacts are left on-screen and the gutter spacing is odd. I'll see if YUI Dom object can solve the placement problem.

I do like the style of syntaxhighlighter. [3] Did you ever think of adding line numbers?

[0] http://en.wikipedia.org/wiki/REPL

[1] Demo code ~ http://marijn.haverbeke.nl/codemirror/

[2] http://www.python.org/idle/doc/idle2.html#Shell

[3] http://code.google.com/p/syntaxhighlighter/

Well that's impressive stuff! Especially as it doesn't use designMode or the like.

I too have had 'fun' with text editing in browsers. And I need to revisit it at some point. :-(

Here's an experiment of mine: http://www.fluffy.co.uk/stediting/ -- very proof of concept, only left+right keyboard navigation works so far. However, it does show that proportionally spaced text is possible with this kind of technique. Using monospaced fonts, like Ymacs does, is cheating.

I was going to do make something which would sort this out once and for all: http://code.google.com/p/editable-framework-js/ but as is the way with many an open source project, it didn't get much further than thinking about the design.

I found this linked from the Ymacs site http://marijn.haverbeke.nl/codemirror/story.html which is a nice explanation about why using designMode is a nightmare.

I looked at EditArea before building the AppJet Code Editor (ACE). (See our in-browser code editor with syntax highlighting at appjet.com).

The problem with EditArea is that the overlay method causes visible ghosting when you insert newlines, even on a fast computer. Also not being able to see highlighting on the current line bothered me.

I based the ACE implementation on http://marijn.haverbeke.nl/codemirror/story.html only simplified the parser and added some features like paren/bracket/brace flashing. The basic idea is to use design mode but keep careful track of the DOM of the design body and cursor. The big challenges then become things like undo support (which we still haven't implemented yet), but the major advantage is that you get a fast and native feel, which is important. We plan to open-source ACE pretty soon.

3. Jeremy McAnally ( Mr. Neighborly's Humble Little Ruby Book: http://www.humblelittlerubybook.com/book/ ) ( http://www.jeremymcanally.com/ )

4. Marijn Haverbeke (Eloquent Javascript: http://eloquentjavascript.net/ ) ( http://marijn.haverbeke.nl/ )

5. Young Zed Shaw ( http://www.zedshaw.com/ ) ( Older Zed Shaw is just a little bit less out there )

And a few more can be found on Bonus500's Twitter Follow list.

http://en.wikipedia.org/wiki/Comparison_of_Javascript-based_source_code_editors

EditArea has a lot of features and works well, if it displays properly in your browser:
http://www.cdolivet.net/editarea/

CodePress does pretty well in FireFox:
http://codepress.org/

I think CodeMirror has the most potential -- I like the parser design in particular:
http://marijn.haverbeke.nl/codemirror/