From 358efd1d1c4e2e27f1d0f20e9a91e0fc8c213d73 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Wed, 29 May 2013 22:43:09 +0100
Subject: [PATCH] Add optional preview in edit mode

---
 core/templates/EditTemplate.tid      | 18 ++++++++++++++----
 themes/tiddlywiki/snowwhite/base.tid | 22 +++++++++++++++++++++-
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/core/templates/EditTemplate.tid b/core/templates/EditTemplate.tid
index 623746a0a..94545584d 100644
--- a/core/templates/EditTemplate.tid
+++ b/core/templates/EditTemplate.tid
@@ -13,8 +13,18 @@ modifier: JeremyRuston
 
 <$edit field="tags"/>
 
-<div class="tw-tiddler-help">Use WikiText to add formatting, images, and dynamic features</div>
-
-@@.body
+<$reveal state="$:/ShowEditPreview" type="match" text="yes">
+<span class="tw-tiddler-help">Use WikiText to add formatting, images, and dynamic features</span> <$button type="set" set="$:/ShowEditPreview" setTo="no" >Hide preview</$button>
+<div class="tw-tiddler-preview">
+<div class="tw-tiddler-preview-preview">
+<$view field="text" format="wikified"/>
+</div>
+<div class="tw-tiddler-preview-edit">
 <$edit field="text"/>
-@@
+</div>
+</div>
+</$reveal>
+<$reveal state="$:/ShowEditPreview" type="nomatch" text="yes">
+<span class="tw-tiddler-help">Use WikiText to add formatting, images, and dynamic features</span> <$button type="set" set="$:/ShowEditPreview" setTo="yes" >Show preview</$button>
+<$edit field="text"/>
+</$reveal>
diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid
index 59886c498..48a30ed54 100644
--- a/themes/tiddlywiki/snowwhite/base.tid
+++ b/themes/tiddlywiki/snowwhite/base.tid
@@ -429,7 +429,7 @@ a.tw-tiddlylink-missing {
 .tw-tiddler-frame .tw-edit-texteditor input, .tw-tiddler-frame .tw-edit-texteditor textarea {
 	width: 100%;
 	padding: 3px 3px 3px 3px;
-	border: 1px solid #888;
+	border: 1px solid #ccc;
 	line-height: 1.3em;
 	-webkit-appearance: none;
 	margin: 0.25em 0 0.25em 0;
@@ -447,6 +447,26 @@ canvas.tw-edit-bitmapeditor  {
 	-ms-user-select: none;
 }
 
+/*
+** Tiddler edit mode
+*/
+
+.tw-tiddler-preview {
+	overflow: auto;
+}
+
+.tw-tiddler-preview-preview {
+	float: right;
+	width: 48%;
+	border: 1px solid #ccc;
+	margin: 4px 3px 3px 3px;
+	padding: 3px 3px 3px 3px;
+}
+
+.tw-tiddler-preview-edit {
+	width: 48%;
+}
+
 /*
 ** Dropdowns
 */