[WikiEN-l] WYSIWTF

[Magnus Manske]

Hi all,

I'm still on vacation, but I saw "the WYSIWYG discussion, reloaded",
and was bored, so...

As far as I could deduce, the goal is to use a run-of-the-mill HTML
WYSIWYG editor, with minimal modifications, to edit MediaWiki text.
Since rebuilding the perfect parser has Failed Repeatedly (TM), any
parsed substitute should fall back gracefully, that is, only parse
wikitext into some HTML structure when it is very sure it is doing it
right, and otherwise leave it alone and just show it as old, ugly
wikitext.

I took two hours to write a pure JavaScript demo that can render
(note, not parse!) wikitext as HTML, so that a WYSIWYG HTML editor
could use it. Some elements, like headings, blank lines, and
templates, it converts into a pseudo-parsed structure, using classes
to indicate where the element(s) came from. I believe that, basically,
the original wikitext could be reconstructed from the rendered HTML
(not checked, though), and that changes in plain ol' HTML (read:
WYSIWYG edits) could be integrated likewise.

My demo is rudimentary: no checking for HTML comments or <nowiki>, no
bold or italics, no <ref> or [[link]] handling, and tables and lists
are ignored as well. But even so, the output remains readable and
recognisable as wikitext, and it should be quite clear how the
original wikitext could be regenerated from it.

The main function right now is the template collapse. Template code is
surrounded by a green border, and the template name is green. Long
templates hide their parameters, which can be shown by double-clicking
the template name. Depending on context, it is decided to use <div> or
<span>, so short inline templates stay inline. It is not always
pretty, but IMHO demonstrates the concept.

The JavaScript seems reasonably quick. Yes, some wikitext will be hard
to render; but frankly, we can just ignore it for the time being.
Better something that works quickly and reliably in most cases and
fails gracefully than something that would be perfect but never gets
done, I say!


Again, quick hack demo warning. If you're brave enough to try it, my
test article (only runs in article namespace ATM) is the article of
the day, [[Lince (tank)]].

JavaScript at http://toolserver.org/~magnus/wysiwtf/wysiwtf.js
CSS at http://toolserver.org/~magnus/wysiwtf/wysiwtf.css

To test, edit your vector.js, and copy this:
document.write('<script type="text/javascript"
src="http://toolserver.org/~magnus/wysiwtf/wysiwtf.js"><\/script>');
document.write('<link rel="stylesheet" type="text/css"
href="http://toolserver.org/~magnus/wysiwtf/wysiwtf.css"><\/link>');

Force-reload, go to an article, and you'll see a new "WYSIWTF" tab (I
trust you can decipher the acronym ;-)

Enjoy! ;-)

Magnus