731651 - kumascript: Improve editing UI for Template:* pages

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Editing, defect, P3)

Description

[Les Orchard [:lorchard]]

With kumascript, pages whose slugs match the pattern "Template:*" will be treated as executable Embedded JS templates. These contain a mix of HTML markup and JavaScript code.

But, the CKEditor UI for editing pages in general is not so great for editing EJS templates. Some things that might help making edit templates better:

* Default CKEditor to source editing

* Build a "scripting jig" to interactively develop an EJS template using 3 panes:
    * EJS source, maybe using a better source editor than CKEditor
    * scratchpad wiki document using the EJS template
    * auto-updated preview of the rendered scratchpad with macros evaluated

Comment 1

[Luke Crouch [:groovecoder]]

Is this a use-case for jsfiddle?

Comment 2

[Les Orchard [:lorchard]]

(In reply to Luke Crouch [:groovecoder] from comment #1)
> Is this a use-case for jsfiddle?

Probably not, though something similar in spirit would be good.

This isn't rendering changes to HTML/CSS/JS, this is rendering changes to EJS and wiki markup and requires a hit to the server between changes.

Comment 3

[Les Orchard [:lorchard]]

(In reply to Luke Crouch [:groovecoder] from comment #1)
> Is this a use-case for jsfiddle?

Probably not, though something similar in spirit would be good.

This isn't rendering changes to HTML/CSS/JS, this is rendering changes to EJS and wiki markup and requires a hit to the server between changes.

Comment 4

[Les Orchard [:lorchard]]

Might be interesting to switch from CKEditor to ACE for things like templates. It's what github uses for in-browser code editing:

https://github.com/blog/905-edit-like-an-ace

Comment 5

[Luke Crouch [:groovecoder]]

w00t for Bespin/Skywriter/Cloud9!

Comment 6

[Les Orchard [:lorchard]]

So, I tried an experiment, and was kind of amazed (and scared) at how fast this went:

https://github.com/lmorchard/kuma/tree/bug-731651-improve-template-editing
https://github.com/lmorchard/kuma/commit/77d948ee59d7cbf0a83060f2689da9f067e550ac

I don't think it's quite ready for a pull request, and needs some cleanup and some more playing. But, for a quick demo, I went ahead and cherrypicked the commit into my EC2 server:

http://developer-dev.mozilla.org/en-US/docs/en-US/Template:deprecatedGeneric
http://developer-dev.mozilla.org/en-US/docs/en-US/Template:deprecatedGeneric$edit

I just have to be missing something... it can't be that easy, can it?

Of course, there is something like 600kb of JS involved. But, that can probably be minified and compressed quite a bit more.

Comment 7

[Luke Crouch [:groovecoder]]

whoa, that's cool. It's MVP to at least demo in NYC and get feedback.

(links are actually:
http://mdn.lmorchard.com/en-US/docs/en-US/Template:deprecatedGeneric$edit
http://mdn.lmorchard.com/en-US/docs/en-US/Template:deprecatedGeneric
)

Comment 8

[[github robot]]

Commits pushed to mdn at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/fa9f570d14afe6ba13be7d8204ee48b1dcad3c5d
bug 731651: Template syntax highlighting and ACE editor

https://github.com/mozilla/kuma/commit/9c0c81c76e274541553bf0d8dfcdc7ed3bb1c9e3
Merge pull request #141 from lmorchard/bug-731651-improve-template-editing

Bug 731651 template syntax highlighting and ACE editor