question
[ikiwiki.git] / doc / todo / mdwn_preview.mdwn
1 The [StackOverflow](http://stackoverflow.com/) site uses markdown for markup.
2 It has a fancy javascript thing for showing a real-time preview of what the user
3 is editing. It would be nice if ikiwiki could support this, too. The thing they
4 use on StackOverflow is supposed to be free software, so it should be easy to
5 add to ikiwiki.
6
7 > See [[wikiwyg]]. Note that I do not have a copy of the code for that, or
8 > it'd be in ikiwiki already. --[[Joey]] 
9
10 >> I just had a brief look at the [[wikiwyg]] page and the link to the plugin was
11 >> broken.  The StackOverflow site uses the [WMD](http://wmd-editor.com/) editor,
12 >> which seems to be related to the [ShowDown](http://attacklab.net/showdown/)
13 >> javascript port of Markdown.  Interestingly, [WMD source](http://wmd.googlecode.com/)
14 >> is now available under an MIT license, though it is supposedly undergoing heavy
15 >> refactoring.  It looks like there was previous discussion ( [[todo/Add_showdown_GUI_input__47__edit]] )
16 >> about a showdown plugin.  Maybe a WMD plugin would be worthwhile.  I might
17 >> look into it if I have time on the weekend. -- [[Will]]
18
19 [[!tag wishlist]]
20
21 >>> Below is a simple plugin/[[patch]] to make use of the WMD editor.  Turns out it isn't hard at all to
22 >>> get a basic version going (which doesn't handle directives at all, nor does it swtich itself off when you're
23 >>> editing something other than Markdown source).  I've
24 >>> removed the done tag so this is visible as a patch. -- [[Will]]
25
26 >>> Hmm, it would be good if it turned off for !mdwn. Although this could
27 >>> be difficult for a new page, since there is a dropdown selector to
28 >>> choose the markup language then. But it should be doable for editing an
29 >>> existing page.
30 >>>
31 >>> Can I get a license statement (ie, GPL-2+) ffrom you for the plugin?
32 >>> --[[Joey]] 
33
34 ------
35
36 ### Instructions:
37
38
39 Download the [WMD source](http://wmd-editor.com/downloads/wmd-1.0.1.zip).  In that zip file you'll
40 find a few example html files, a readme and `wmd` directory.  Move the `wmd` directory into the
41 ikiwiki `underlays` directory.  You should now have an `underlays/wmd/wmd.js` file as well as 
42 some other javascript files and an images directory in the same place.
43
44 > So, I wonder if I should add a copy of the WMD source to ikiwiki, or rely
45 > on the user or distribution providing it. It does not seem to be packaged
46 > for Debian yet. --[[Joey]] 
47
48 Note that the WMD plugin does **not** handle directives.  For this reason the normal `preview` button
49 remains.  Some CSS to clean up the display of the live WMD preview would be good.
50
51 > Can you elucidate the CSS comment -- or will it be obvious what you mean
52 > when I try it? Is it what's needed for the live preview? --[[Joey]]
53
54 Install the following patch and plugin file.  Then enable the 'wmd' plugin.
55
56
57     diff --git a/templates/editpage.tmpl b/templates/editpage.tmpl
58     index 4b54db2..b1cf015 100644
59     --- a/templates/editpage.tmpl
60     +++ b/templates/editpage.tmpl
61     @@ -37,6 +37,7 @@ Optional comment about this change:<br />
62      </div>
63      </TMPL_IF>
64      <TMPL_VAR FORM-END>
65     +<TMPL_VAR WMD_PREVIEW>
66      
67      <TMPL_IF NAME="PAGE_PREVIEW">
68      <hr />
69
70 -----
71
72     #!/usr/bin/perl
73     package IkiWiki::Plugin::wmd;
74     
75     use warnings;
76     use strict;
77     use IkiWiki 3.00;
78     use POSIX;
79     use Encode;
80     
81     sub import {
82         add_underlay("wmd");
83         hook(type => "getsetup", id => "wmd", call => \&getsetup);
84         hook(type => "formbuilder_setup", id => "wmd", call => \&formbuilder_setup);
85     }
86     
87     sub getsetup () {
88         return
89                 plugin => {
90                         safe => 1,
91                         rebuild => 1,
92                 },
93     }
94     
95     sub formbuilder_setup (@) {
96         my %params=@_;
97         my $form=$params{form};
98     
99         return if ! defined $form->field("do");
100         
101         return unless (($form->field("do") eq "edit") ||
102                                 ($form->field("do") eq "create"));
103     
104         $form->tmpl_param("wmd_preview", "<div class=\"wmd-preview\"></div>\n".include_javascript(undef, 1));
105     }
106     
107     sub include_javascript ($;$) {
108         my $page=shift;
109         my $absolute=shift;
110         
111         return '<script src="'.urlto("wmd.js", $page, $absolute).
112                 '" type="text/javascript"></script>'."\n";
113     }
114     
115     1
116