Better HTML Fiddle UI

[aldendaniels]

The "Insert Snippet" functionality provides a lot of JSFiddle capability, but not its beguiling simplicity. I'd like to provide a feature that's much more akin to JSFiddle in that it has separate sections for the Script/Style/Html and doesn't force you to see the the Doctype/Html Tags/Script tags, etc.

I dislike, however, that JSFiddle makes me squeeze everything into four boxes. Instead, I'd like a single document with "section headers" delineating the different sections. By keeping everything in a single document, find/replace and general document navigation remain easy.

To do this.

1. Create a custom mode that has HTML, JS, and CSS has sub-modes delineated by a magical "SECTION:" syntax.
2. Use oEditSession.addFold("", new range.Range(1, 0, 2, 0)) to hide the magic line.
3. Use Line Widgets (see Add support for line widgets ajaxorg/ace#1678) or a fancy marker to cover the folded line with a nice looking header.
4. Hack ace to make the line numbers skip the header lines. Ace already supports editor.setOption("firstLineNumber", 10) so this is likely doable.
5. On deletion, check to see if the magic line has been deleted. If so, re-insert it at the deletion range start point.
6. Have an awesome JSFiddle-style config bar as was mocked up in e30f66c:
   

[aldendaniels]

If we don't end up doing this (or as a stop-gap measure before this) we could add support for CoffeeScript / LESS by implementing ajaxorg/ace#1727.