X-Git-Url: http://git.vanrenterghem.biz/git.ikiwiki.info.git/blobdiff_plain/cc194fe527261b6a36a79df59c626bd3d7891b84..651cdd4b2a85f4e5f9d298a7eea7d0e6d94442b1:/doc/todo/mdwn_preview.mdwn?ds=sidebyside diff --git a/doc/todo/mdwn_preview.mdwn b/doc/todo/mdwn_preview.mdwn index 4c361052b..fa69bad47 100644 --- a/doc/todo/mdwn_preview.mdwn +++ b/doc/todo/mdwn_preview.mdwn @@ -1,3 +1,37 @@ +ikiwiki needs a wysiwyg markdown editor. While there have been tries using +WMD etc, they are not fully satisfactory, and also the license of +everything around WMD is [[unclear|plugins/wmd/discussion]]. + +[Hallo](https://github.com/bergie/hallo) is the closest to a solution +I've seen. +The user can edit the page by clicking on the html part they want to change +and typing. Selecting text pops up a toolbar to modify it. + +[Demo of Hallo with live WYSIWYG markdown editing](http://bergie.github.com/hallo/markdown.html) +This demo uses showdown, and I still don't know what the license of +showdown is. However, the showdown part seems to only be to handle the live +conversion from the markdown source in the edit field to the html. The +(edited) html to markdown conversion is accomplished by Hallo. + +So, ikiwiki could use this in a page edit UI that does not show the +markdown at all. The user would edit the live page, entirely in wysiwyg +mode, and on saving hallo's generated markdown would be saved. Probably +there would need to be a button to bring up the current markdown editor +too, but without showdown, changes in it would not immediatly preview, so +it'd make sense to disable hallo when the editor is visible. + +Issue: Ikiwiki directives can generate html. We would not want that html to +be editable by halo and converted back to markdown. Also, the directives +need to appear in the html so users can edit them. This seems to call for a +special page rendering mode for editing, in which directives are either not +expanded, or are expanded but the generated html wrapped in some tag that +makes hallo refuse to edit it (which would probably require that feature be +added to hallo, currently it acts on all blocks with `class=editable`), +or otherwise allows it to be stripped out at save time. --[[Joey]] + +### old discussion + + The [StackOverflow](http://stackoverflow.com/) site uses markdown for markup. It has a fancy javascript thing for showing a real-time preview of what the user is editing. It would be nice if ikiwiki could support this, too. The thing they @@ -18,83 +52,288 @@ add to ikiwiki. [[!tag wishlist]] ->>> Below is a simple plugin/[[patch]] to make use of the WMD editor. Turns out it isn't hard at all to ->>> get a basic version going (that don't handle directives at all). I've +>>> Below is a simple plugin/[[patch]] to make use of the WMD editor. + +>>>> Now added to ikiwiki, thanks! --[[Joey]] + +>>> Turns out it isn't hard at all to +>>> get a basic version going (which doesn't handle directives at all, nor does it swtich itself off when you're +>>> editing something other than Markdown source). I've >>> removed the done tag so this is visible as a patch. -- [[Will]] ------- +>>>> Hmm, it would be good if it turned off for !mdwn. Although this could +>>>> be difficult for a new page, since there is a dropdown selector to +>>>> choose the markup language then. But it should be doable for editing an +>>>> existing page. + +>>>>> I agree. I'm working on this for for both new pages and existing pages. +>>>>> It shouldn't be hard once I get WMD going through the javascript API. +>>>>> At the moment that is inexplicably failing, and I haven't had time to have a good look at why. +>>>>> I may not get a chance to look at this again for a few weeks. + +>>>> Can I get a license statement (ie, GPL-2+) ffrom you for the plugin? +>>>> --[[Joey]] + +>>>>> Certainly. You're free to use the code I posted below under the GPL-2+ license. You'll note +>>>>> however that I haven't said anything about the WMD code itself. The WMD web page says: -### Instructions: +>>>>>> "I'm refactoring the code, and will be releasing WMD under the MIT license soon. For now you can download the most recent release (wmd-1.0.1.zip) and use it freely." +>>>>> It might be best to contact to for an explicit license on that if you want to include it. +>>>>> -- [[Will]] -Download the [WMD source](http://wmd-editor.com/downloads/wmd-1.0.1.zip). In that zip file you'll -find a few example html files, a readme and `wmd` directory. Move the `wmd` directory into the -ikiwiki `underlays` directory. You should now have an `underlays/wmd/wmd.js` file as well as -some other javascript files and an images directory in the same place. +> So, I wonder if I should add a copy of the WMD source to ikiwiki, or rely +> on the user or distribution providing it. It does not seem to be packaged +> for Debian yet. Hmm, I also can't find any copyright or license info in +> the zip file. --[[Joey]] + +>> This is a good question. My thought is that it will probably not be packaged any time soon, +>> so you're better off adding it to IkiWiki. I'd contact the author of WMD and ask them. They +>> may have more insight. -- [[Will]] Note that the WMD plugin does **not** handle directives. For this reason the normal `preview` button remains. Some CSS to clean up the display of the live WMD preview would be good. -Install the following patch and plugin file. Then enable the 'wmd' plugin. +> Can you elucidate the CSS comment -- or will it be obvious what you mean +> when I try it? Is it what's needed for the live preview? --[[Joey]] +>> In the version of the plugin below, a new `div` is added just below the form. WMD +>> populates this div with the HTML it generates from the Markdown source. This is not very +>> pretty at the moment - it appears in the same place as the preview used to, but with no +>> header or anything. Any standard IkiWiki preview will appear below the WMD live preview. +>> I recommend having a look at +>> for what a little CSS could achieve. -- [[Will]] - diff --git a/templates/editpage.tmpl b/templates/editpage.tmpl - index 4b54db2..b1cf015 100644 - --- a/templates/editpage.tmpl - +++ b/templates/editpage.tmpl - @@ -37,6 +37,7 @@ Optional comment about this change:
- - - - + - - -
+> Hmm, now that I've tried it, I notice that it does live preview by +> default, below the edit window. Which is nice, but then if I hit the +> preview button, I get two previews.. which is confusing. (Also, minor, +> but: the live preview is missing the "Page Preview:" header.) --[[Joey]] + +> I wonder how annoying it would be to add some kind of simplistic wikilink +> support to wmd's preview? And/or a wikilink button? While not supporting +> directies is fine, not supporting wikilinks in a wiki seems a bit +> lacking. It may also entice novide users to not use wikilinks and instead +> use the hyperlinks that wmd does support. --[[Joey]] + +> Bug: When I preview, all the text in the edit field seems to be +> converted from mdwn to html. I think that wmd is converting the mdwn +> into html when the form is posted, so it would also save like that. +> I assume that is designed for websites that do not use markdown +> internally. Doesn't it have a setting to leave it as markdown? +>> Found setting, fixed. --[[Joey]] + +>>> As I noted above, I've been working on the non-markdown page issue. +>>> Below is my a new javascript file that I'm using, and below that a patch +>>> to enable it. This patch makes the normal usage prettier - you get +>>> a side panel with the live preview in it. It also adds a new config +>>> option, `wmd_use101api`, which turns on code that tries to use the +>>> wmd api. At the moment this code doesn't seem to work - moreover the +>>> code that uses the new API dies early, so any code after that point is +>>> completely untested. I will not +>>> get a chance to look at this again soon though, so I thought I'd post +>>> my progress so far. -- [[Will]] + + +Place the following file in `underlays/wmd/wmd-ikiwiki.js`. ------ +---- - #!/usr/bin/perl - package IkiWiki::Plugin::wmd; + // This is some code to interface the WMD interface 1.0.1 with IkiWiki + // The WMD interface is planned to change, so this file will likely need + // updating in future. - use warnings; - use strict; - use IkiWiki 3.00; - use POSIX; - use Encode; + if (useWMDinterface) { + wmd_options = { autostart: false, output: "Markdown" }; + var instance = null; - sub import { - add_underlay("wmd"); - hook(type => "getsetup", id => "wmd", call => \&getsetup); - hook(type => "formbuilder_setup", id => "wmd", call => \&formbuilder_setup); + hook("onload", initwmd); + } else { + var typeSelector = document.getElementById("type"); + + var currentType = getType(typeSelector); + + if (currentType == "mdwn") { + wmd_options = { output: "Markdown" }; + document.getElementById("wmd-preview-container").style.display = 'none'; + } else { + wmd_options = { autostart: false }; + document.getElementById("wmd-preview-container").style.display = 'block'; + } } - sub getsetup () { - return - plugin => { - safe => 1, - rebuild => 1, - }, + function initwmd() { + if (!Attacklab || !Attacklab.wmd) { + alert("WMD hasn't finished loading!"); + return; + } + + var typeSelector = document.getElementById("type"); + + var currentType = getType(typeSelector); + + if (currentType == "mdwn") { + window.setTimeout(enableWMD,10); + } + + typeSelector.onchange=function() { + var docType=getType(this); + + if (docType=="mdwn") { + enableWMD(); + } else { + disableWMD(); + } + } } - sub formbuilder_setup (@) { - my %params=@_; - my $form=$params{form}; + function getType(typeSelector) + { + if (typeSelector.nodeName.toLowerCase() == 'input') { + return typeSelector.getAttribute('value'); + } else if (typeSelector.nodeName.toLowerCase() == 'select') { + return typeSelector.value; + // return typeSelector.options[typeSelector.selectedIndex].innerText; + } + return ""; + } - return if ! defined $form->field("do"); + function enableWMD() + { + var editContent = document.getElementById("editcontent"); + var previewDiv = document.getElementById("wmd-preview"); + var previewDivContainer = document.getElementById("wmd-preview-container"); + + previewDivContainer.style.display = 'block'; + // editContent.style.width = previewDivContainer.style.width; - return unless (($form->field("do") eq "edit") || - ($form->field("do") eq "create")); + /***** build the preview manager *****/ + var panes = {input:editContent, preview:previewDiv, output:null}; + var previewManager = new Attacklab.wmd.previewManager(panes); - $form->tmpl_param("wmd_preview", "
\n".include_javascript(undef, 1)); - } + /***** build the editor and tell it to refresh the preview after commands *****/ + var editor = new Attacklab.wmd.editor(editContent,previewManager.refresh); - sub include_javascript ($;$) { - my $page=shift; - my $absolute=shift; - - return ''."\n"; + // save everything so we can destroy it all later + instance = {ta:editContent, div:previewDiv, ed:editor, pm:previewManager}; } - 1 + function disableWMD() + { + document.getElementById("wmd-preview-container").style.display = 'none'; + + if (instance != null) { + instance.pm.destroy(); + instance.ed.destroy(); + // inst.ta.style.width='100%' + } + instance = null; + } + +---- + + diff --git a/IkiWiki/Plugin/wmd.pm b/IkiWiki/Plugin/wmd.pm + index 9ddd237..743a0b8 100644 + --- a/IkiWiki/Plugin/wmd.pm + +++ b/IkiWiki/Plugin/wmd.pm + @@ -17,6 +17,13 @@ sub getsetup () { + return + plugin => { + safe => 1, + + rebuild => 1, + + }, + + wmd_use101api => { + + type => "boolean", + + description => "Use the advanced, but unstable, WMD api for markdown preview.", + + safe => 0, + + rebuild => 0, + }, + } + + @@ -24,29 +31,25 @@ sub formbuilder_setup (@) { + my %params=@_; + my $form=$params{form}; + + - return if ! defined $form->field("do"); + + return unless defined $form->field("do"); + + return unless $form->field("do") eq "edit" || + - $form->field("do") eq "create" || + - $form->field("do") eq "comment"; + - + - $form->tmpl_param("wmd_preview", "
\n". + - include_javascript(undef, 1)); + -} + - + -sub include_javascript ($;$) { + - my $page=shift; + - my $absolute=shift; + - + - my $wmdjs=urlto("wmd/wmd.js", $page, $absolute); + - return <<"EOF" + - + - + -EOF + + $form->field("do") eq "create" || + + $form->field("do") eq "comment"; + + + + my $useAPI = $config{wmd_use101api}?'true':'false'; + + my $ikiwikijs = urlto("ikiwiki.js", undef, 1); + + my $wmdIkiwikijs = urlto("wmd-ikiwiki.js", undef, 1); + + my $wmdjs = urlto("wmd.js", undef, 1); + + + + my $previewScripts = <<"EOS"; + + + + + + + + + +EOS + + + + $form->tmpl_param("wmd_preview", $previewScripts); + } + + 1 + diff --git a/doc/style.css b/doc/style.css + index a6e6734..36c2b13 + --- a/doc/style.css + +++ b/doc/style.css + @@ -76,9 +76,16 @@ div.tags { + float: right; + } + + +/* + #editcontent { + width: 100%; + } + +*/ + + + +#wmd-preview-container { + + width: 49%; + + float: right; + +} + + img { + border-style: none; + diff --git a/templates/editpage.tmpl b/templates/editpage.tmpl + index b1cf015..1d2f080 100644 + --- a/templates/editpage.tmpl + +++ b/templates/editpage.tmpl + @@ -15,6 +15,14 @@ Page type: + + + + + + +
+ +
+ +Live preview: + +
+ +
+ +
+ + +
+ + Optional comment about this change: