Syntax Highlighting for snippet, plugin, module and chunk editing using EditArea

I came across a VERY easy way to implement syntax highlighting into MODx! tested using v0.9.5
found via post in etomite forums referencing http://www.cdolivet.net/editarea/editarea/exemples/exemple_full.html

Screenshot of EditArea+MODx in action: (Editing a Snippet)


NOTE: the subtle red underlines underneath some of the words is not part of the highlighter, rather an inline spell-check feature of the FireFox 2.0 browser.

Compatibility tests:
- Firefox 1.5+ It tested great in 2.0
- IE 6 & 7 7.0 final confirmation awaits...
- Netscape 8 with rendering mode IE
- Mozilla 1.7 (buggy)
- Opera 9

What’s great about this highlighter, is that it highlights in real-time, as you type!


Easy installation steps:


UPDATE: See Gildas’ Plugin implementation below...

Cheers!

I was concerned that users of the "Bottom Button Bar" plugin would not successfully Save changes when clicking the bottom Save button, per the missing 3b Step. Oddly enough, it works! .. I wonder if 3b can be omitted entirely?

Has anyone else tested this implementation yet? Very interested in your thoughts, as well as opinions of EditArea vs. CodePress (similar approach in an alternate thread)

Great job . I will test that when will be less busy.
I think until this is not include in the core code we need a plugin. With beta testing of 0.9.5 and future 0.9.7, it’s very boring to change the code at each update.

It works very well, but it need many "core code" modification So you will find hereafter my first version of the Plugin :

Edit : The last version is here : http://modxcms.com/forums/index.php/topic,8285.msg65110.html#msg65110

Great work both!

I’ve just installed the plugin, without any hickups, although you forgot to mention which events should be ticked for the plugin.
They are:
OnTempFormRender (template editor - html highlighting)
OnChunkFormRender (chunk editor - html highlighting)
OnDocFormRender (Document editor if you are not using an RTE - html highlighting)
OnSnipFormRender (Snippet editor - php highlighting)
OnPluginFormRender (plugin editor - php highlighting)
OnModFormRender (module editor - php highlighting)

Offcourse you only need to select the events for which you want to enable highlighting. If I can make a suggestion for the next plugin version, how about adding some configuration variables for the highlighting so you can choose to highlight html, js or php for different uses?

I must say I’m impressed with editearea. I like almost everything about it especially the bracket matching. I would certainly prefer it above codepress except for one major drawback... performance. Editarea at times slowed down to such a degree that it took over a second to respond to my key strokes, and that while editing a not so big snippet (UltimateParent which is a mere 28 lines).

Amazing, great work !

About performance : what factors come into play here ?
The client’s performance or the server, or simply a script which is too heavy ?

Edit : Checked out the plugin and files.

I see the path to edit_area is media/edit_area/edit_area_full.js

Wouldn’t it be better to have it in assets/plugins/edit_area like for every other plugins ?
Which other Edit Area files need to be uploaded (I guess all), and where ?

Quote from: davidm at Oct 26, 2006, 10:36 AM

I see the path to edit_area is media/edit_area/edit_area_full.js

Wouldn’t it be better to have it in assets/plugins/edit_area like for every other plugins ?
Which other Edit Area files need to be uploaded (I guess all), and where ?

Before writing this plugin I’ve installed EditArea as explain by Pixelchutes i.e in /manager/media. But indeed, /assets/plugins is more apropriate As explain by Pixelchutes you only need to copy the edit_area directory from the EditArea distribution.

About performance : what factors come into play here ?
The client’s performance or the server, or simply a script which is too heavy ?

Can’t say anything about server performance as it runs on my local network... It’s the client performance that I noticed in being slow. I haven’t given it a lot of testing (yet) but in Firefox (1.5) there is a noticable delay between keystrokes (as I said in the message above, up to a second in a few instances). IE 6 seems to fare a bit better in that respect. There’s still a delay but it’s much more manageable. I also wanted to try a quick test in Opera (7.23) but I can’t seem to log into the manager... (better look into that) Oh, all of this on WinXP sp2, AMD 2.6 GHz 512Kb

I’ve found a bug in my plugin for document edition So, I suggest you to remove the "OnDocFormRender" events handler...

Quote from: Gildas at Oct 26, 2006, 01:09 PM

Before writing this plugin I’ve installed EditArea as explain by Pixelchutes i.e in /manager/media. But indeed, /assets/plugins is more apropriate As explain by Pixelchutes you only need to copy the edit_area directory from the EditArea distribution.

@Gildas- Great work! Haven’t tried out the Plugin yet, but looks very nice. Any idea on what the "bug" was/is during doc. editing?

@TobyL- Thank you for posting the events.

I do agree that I wish EditArea’s performance was a little better. It does say that it’s intended use is for SMALL TEXT. I wonder, whether it’s definable by param, or by default, would it make more sense to have EditArea (the "editor": line #, status bar, etc) and highlighting toggled OFF by default? By allowing Toggling, but keeping off by default, highlighting--costing slight performance drawback--is only a click away... Thoughts?

Personally, I enjoy the highlighting, Line #’s, and built in functions so much (for being in a browser) that I don’t get very irritated waiting a second or so for it to render.

I find it more irritating not knowing where comments begin/end, if I’ve closed a string declaration, or typed a function name correctly (reserved keyword highlighting). Also, I am a HUGE fan of the bracket matching, something I use very much in my desktop editor. As the old paradox says,

"Pain is beauty, beauty is pain."