(no commit message)

[git.ikiwiki.info.git] / doc / todo / mdwn_preview.mdwn

diff --git a/doc/todo/mdwn_preview.mdwn b/doc/todo/mdwn_preview.mdwn
index bbb105041b80a3c4c56c9b77063efedc458f61ee..fa69bad47d77836337394e2484557aa15fad71f3 100644 (file)
--- 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
 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


@@ -120,10 +154,10 @@ Place the following file in `underlays/wmd/wmd-ikiwiki.js`.
        
        if (currentType == "mdwn") {
                wmd_options = { output: "Markdown" };
        
        if (currentType == "mdwn") {
                wmd_options = { output: "Markdown" };

-               document.getElementById("wmd-preview-container").style.hidden = false;
+               document.getElementById("wmd-preview-container").style.display = 'none';

        } else {
                wmd_options = { autostart: false };
        } else {
                wmd_options = { autostart: false };

-               document.getElementById("wmd-preview-container").style.hidden = true;
+               document.getElementById("wmd-preview-container").style.display = 'block';

        }
     }
     
        }
     }
     


@@ -138,7 +172,7 @@ Place the following file in `underlays/wmd/wmd-ikiwiki.js`.
        var currentType = getType(typeSelector);
        
        if (currentType == "mdwn") {
        var currentType = getType(typeSelector);
        
        if (currentType == "mdwn") {

-               enableWMD();
+               window.setTimeout(enableWMD,10);

        }
        
        typeSelector.onchange=function() {
        }
        
        typeSelector.onchange=function() {


@@ -156,8 +190,9 @@ Place the following file in `underlays/wmd/wmd-ikiwiki.js`.
     {
        if (typeSelector.nodeName.toLowerCase() == 'input') {
                return typeSelector.getAttribute('value');
     {
        if (typeSelector.nodeName.toLowerCase() == 'input') {
                return typeSelector.getAttribute('value');

-       } else if (typeSelector.nodeName.toLowerCase() == 'selector') {
-               return typeSelector.options[typeSelector.selectedIndex];
+       } else if (typeSelector.nodeName.toLowerCase() == 'select') {
+               return typeSelector.value;
+               // return typeSelector.options[typeSelector.selectedIndex].innerText;

        }
        return "";
     }
        }
        return "";
     }


@@ -168,7 +203,7 @@ Place the following file in `underlays/wmd/wmd-ikiwiki.js`.
        var previewDiv = document.getElementById("wmd-preview");
        var previewDivContainer = document.getElementById("wmd-preview-container");
        
        var previewDiv = document.getElementById("wmd-preview");
        var previewDivContainer = document.getElementById("wmd-preview-container");
        

-       previewDivContainer.style.hidden = false;
+       previewDivContainer.style.display = 'block';

        // editContent.style.width = previewDivContainer.style.width;
        
        /***** build the preview manager *****/
        // editContent.style.width = previewDivContainer.style.width;
        
        /***** build the preview manager *****/


@@ -179,17 +214,17 @@ Place the following file in `underlays/wmd/wmd-ikiwiki.js`.
        var editor = new Attacklab.wmd.editor(editContent,previewManager.refresh);
     
        // save everything so we can destroy it all later
        var editor = new Attacklab.wmd.editor(editContent,previewManager.refresh);
     
        // save everything so we can destroy it all later

-       instance = {ta:textarea, div:previewDiv, ed:editor, pm:previewManager};
+       instance = {ta:editContent, div:previewDiv, ed:editor, pm:previewManager};

     }
     
     function disableWMD()
     {
     }
     
     function disableWMD()
     {

-       document.getElementById("wmd-preview-container").style.hidden = true;
+       document.getElementById("wmd-preview-container").style.display = 'none';

     
        if (instance != null) {
                instance.pm.destroy();
                instance.ed.destroy();
     
        if (instance != null) {
                instance.pm.destroy();
                instance.ed.destroy();

-               //inst.ta.style.width='100%'
+               // inst.ta.style.width='100%'

        }
        instance = null;
     }
        }
        instance = null;
     }