# HG changeset patch
# User Atul Varma <varmaa@toolness.com>
# Date 1233524006 28800
# Node ID 06e8c49e9dec7487772ef0d6a9471db9335444da
# Parent  01313b55ed090288dfd5c5bfcf50dc0b8b1d2f97
Wikicreole markup is now editable. Also refactored things a bit so that variables have better names, DRY is preserved better.

diff -r 01313b55ed09 -r 06e8c49e9dec wiki.css
--- a/wiki.css	Sun Feb 01 13:15:55 2009 -0800
+++ b/wiki.css	Sun Feb 01 13:33:26 2009 -0800
@@ -10,7 +10,11 @@
     margin: 0 auto;
 }
 
-.wikiedit {
+.creole-markup {
+    display: none;
+}
+
+.wiki-edit {
     font-family: monaco, andale mono, lucidatypewriter, courier,
                  courier new, monospace;
     font-size: 10pt;
diff -r 01313b55ed09 -r 06e8c49e9dec wiki.js
--- a/wiki.js	Sun Feb 01 13:15:55 2009 -0800
+++ b/wiki.js	Sun Feb 01 13:33:26 2009 -0800
@@ -2,34 +2,42 @@
   eventHandlers: {}
 };
 
-App.eventHandlers.makeEditable = function makeEditable(aEvt) {
+App.eventHandlers.editPart = function editPart(aEvt) {
   if (!aEvt.shiftKey)
     return;
 
   aEvt.preventDefault();
 
-  var item = this;
-  var newItem = $('<textarea class="wikiedit"></textarea>');
-  $(newItem).attr("value", $(item).html());
+  var part = this;
+  var editablePart = $('<textarea class="wiki-edit"></textarea>');
+  $(editablePart).attr("value", $(".creole-markup", part).text());
 
   function setScrollHeight() {
-    var scrollHeight = $(newItem).get(0).scrollHeight;
-    $(newItem).height(scrollHeight);
+    var scrollHeight = $(editablePart).get(0).scrollHeight;
+    $(editablePart).height(scrollHeight);
   }
 
-  $(newItem).blur(
+  $(editablePart).blur(
     function() {
-      var html = $(newItem).attr("value");
-      $(item).html(html);
-      $(item).mousedown(App.eventHandlers.makeEditable);
-      $(newItem).replaceWith(item);
+      var markup = $(editablePart).attr("value");
+      $(editablePart).replaceWith(App.createPart(markup));
     });
 
-  $(newItem).keyup(setScrollHeight);
-  $(item).replaceWith(newItem);
+  $(editablePart).keyup(setScrollHeight);
+  $(part).replaceWith(editablePart);
   setScrollHeight();
 
-  $(newItem).focus();
+  $(editablePart).focus();
+};
+
+App.createPart = function createPart(markup) {
+  var partDiv = $('<div class="part"></div>');
+  var markupDiv = $('<div class="creole-markup"></div>');
+  markupDiv.text(markup);
+  App.creole.parse(partDiv.get(0), markup);
+  partDiv.mousedown(App.eventHandlers.editPart);
+  partDiv.append(markupDiv);
+  return partDiv;
 };
 
 App.processMarkup = function processMarkup(text) {
@@ -37,11 +45,8 @@
   jQuery.each(
     parts,
     function(i) {
-      var part = this;
-      var partDiv = $('<div class="wiki"></div>');
-      App.creole.parse(partDiv.get(0), part);
-      partDiv.mousedown(App.eventHandlers.makeEditable);
-      $("#content").append(partDiv);
+      var partMarkup = this.toString();
+      $("#content").append(App.createPart(partMarkup));
     }
   );
 };