Add Markdown preview for textarea, see #407

5 files changed, 91 insertions, 6 deletions

diff --git a/app/Template/comment_create.php b/app/Template/comment_create.php
index 11772f75..5590b77d 100644
--- a/app/Template/comment_create.php
+++ b/app/Template/comment_create.php
@@ -6,7 +6,24 @@
     <?= Helper\form_csrf() ?>
     <?= Helper\form_hidden('task_id', $values) ?>
     <?= Helper\form_hidden('user_id', $values) ?>
-    <?= Helper\form_textarea('comment', $values, $errors, array(! isset($skip_cancel) ? 'autofocus' : '', 'required', 'placeholder="'.t('Leave a comment').'"'), 'comment-textarea') ?><br/>
+
+    <div class="form-tabs">
+        <ul class="form-tabs-nav">
+            <li class="form-tab form-tab-selected">
+                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
+            </li>
+            <li class="form-tab">
+                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
+            </li>
+        </ul>
+        <div class="write-area">
+            <?= Helper\form_textarea('comment', $values, $errors, array(! isset($skip_cancel) ? 'autofocus' : '', 'required', 'placeholder="'.t('Leave a comment').'"'), 'comment-textarea') ?>
+        </div>
+        <div class="preview-area">
+            <div class="markdown"></div>
+        </div>
+    </div>
+
     <div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
 
     <div class="form-actions">
diff --git a/app/Template/comment_edit.php b/app/Template/comment_edit.php
index 4ce48964..96b7a872 100644
--- a/app/Template/comment_edit.php
+++ b/app/Template/comment_edit.php
@@ -7,7 +7,25 @@
     <?= Helper\form_csrf() ?>
     <?= Helper\form_hidden('id', $values) ?>
     <?= Helper\form_hidden('task_id', $values) ?>
-    <?= Helper\form_textarea('comment', $values, $errors, array('autofocus', 'required', 'placeholder="'.t('Leave a comment').'"'), 'comment-textarea') ?><br/>
+
+    <div class="form-tabs">
+        <ul class="form-tabs-nav">
+            <li class="form-tab form-tab-selected">
+                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
+            </li>
+            <li class="form-tab">
+                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
+            </li>
+        </ul>
+        <div class="write-area">
+            <?= Helper\form_textarea('comment', $values, $errors, array('autofocus', 'required', 'placeholder="'.t('Leave a comment').'"'), 'comment-textarea') ?>
+        </div>
+        <div class="preview-area">
+            <div class="markdown"></div>
+        </div>
+    </div>
+
+    <div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
 
     <div class="form-actions">
         <input type="submit" value="<?= t('Update') ?>" class="btn btn-blue"/>
diff --git a/app/Template/task_edit.php b/app/Template/task_edit.php
index 73e00a31..701bd08e 100644
--- a/app/Template/task_edit.php
+++ b/app/Template/task_edit.php
@@ -12,7 +12,24 @@
         <?= Helper\form_text('title', $values, $errors, array('required')) ?><br/>
 
         <?= Helper\form_label(t('Description'), 'description') ?>
-        <?= Helper\form_textarea('description', $values, $errors) ?><br/>
+
+        <div class="form-tabs">
+            <ul class="form-tabs-nav">
+                <li class="form-tab form-tab-selected">
+                    <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
+                </li>
+                <li class="form-tab">
+                    <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
+                </li>
+            </ul>
+            <div class="write-area">
+                <?= Helper\form_textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"')) ?>
+            </div>
+            <div class="preview-area">
+                <div class="markdown"></div>
+            </div>
+        </div>
+
         <div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
 
     </div>
diff --git a/app/Template/task_edit_description.php b/app/Template/task_edit_description.php
index 09dca30a..f805c034 100644
--- a/app/Template/task_edit_description.php
+++ b/app/Template/task_edit_description.php
@@ -5,9 +5,25 @@
 <form method="post" action="?controller=task&amp;action=description&amp;task_id=<?= $task['id'] ?>&amp;ajax=<?= $ajax ?>" autocomplete="off">
 
     <?= Helper\form_csrf() ?>
-
     <?= Helper\form_hidden('id', $values) ?>
-    <?= Helper\form_textarea('description', $values, $errors, array('autofocus', 'placeholder="'.t('Leave a description').'"'), 'description-textarea') ?><br/>
+
+    <div class="form-tabs">
+        <ul class="form-tabs-nav">
+            <li class="form-tab form-tab-selected">
+                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
+            </li>
+            <li class="form-tab">
+                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
+            </li>
+        </ul>
+        <div class="write-area">
+            <?= Helper\form_textarea('description', $values, $errors, array('autofocus', 'placeholder="'.t('Leave a description').'"'), 'description-textarea') ?>
+        </div>
+        <div class="preview-area">
+            <div class="markdown"></div>
+        </div>
+    </div>
+
     <div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
 
     <div class="form-actions">
diff --git a/app/Template/task_new.php b/app/Template/task_new.php
index 43916551..ee8aed7c 100644
--- a/app/Template/task_new.php
+++ b/app/Template/task_new.php
@@ -14,7 +14,24 @@
             <?= Helper\form_text('title', $values, $errors, array('autofocus', 'required'), 'form-input-large') ?><br/>
 
             <?= Helper\form_label(t('Description'), 'description') ?>
-            <?= Helper\form_textarea('description', $values, $errors) ?><br/>
+
+            <div class="form-tabs">
+                <ul class="form-tabs-nav">
+                    <li class="form-tab form-tab-selected">
+                        <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
+                    </li>
+                    <li class="form-tab">
+                        <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
+                    </li>
+                </ul>
+                <div class="write-area">
+                    <?= Helper\form_textarea('description', $values, $errors, array('placeholder="'.t('Leave a description').'"')) ?>
+                </div>
+                <div class="preview-area">
+                    <div class="markdown"></div>
+                </div>
+            </div>
+
             <div class="form-help"><a href="http://kanboard.net/documentation/syntax-guide" target="_blank" rel="noreferrer"><?= t('Write your text in Markdown') ?></a></div>
 
             <?php if (! isset($duplicate)): ?>