Add Markdown preview for textarea, see #407

app/Controller/App.php

@@ -4,6 +4,7 @@ namespace Controller;
 
 use Model\Project as ProjectModel;
 use Model\SubTask;
+use Helper;
 
 /**
  * Application controller
@@ -153,4 +154,22 @@ class App extends Base
             )
         );
     }
+
+    /**
+     * Render Markdown Text and reply with the HTML Code
+     *
+     * @access public
+     */
+    public function preview()
+    {
+        $payload = $this->request->getJson();
+
+        if (empty($payload['text'])) {
+            $this->response->html('<p>'.t('Nothing to preview...').'</p>');
+        }
+        else {
+            $this->response->html(Helper\markdown($payload['text']));
+        }
+    }
+
 }

app/Locale/da_DK/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Locale/de_DE/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Locale/es_ES/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Locale/fi_FI/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Locale/fr_FR/translations.php

@@ -599,4 +599,7 @@ return array(
     'Daily project summary export for "%s"' => 'Export du résumé quotidien du projet pour « %s »',
     'Exports' => 'Exports',
     'This export contains the number of tasks per column grouped per day.' => 'Cet export contient le nombre de tâches par colonne groupé par jour.',
+    'Nothing to preview...' => 'Rien à prévisualiser...',
+    'Preview' => 'Prévisualiser',
+    'Write' => 'Écrire',
 );

app/Locale/it_IT/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Locale/ja_JP/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Locale/pl_PL/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Locale/pt_BR/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Locale/ru_RU/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Locale/sv_SE/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Locale/th_TH/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Locale/zh_CN/translations.php

@@ -599,4 +599,7 @@ return array(
     // 'Daily project summary export for "%s"' => '',
     // 'Exports' => '',
     // 'This export contains the number of tasks per column grouped per day.' => '',
+    // 'Nothing to preview...' => '',
+    // 'Preview' => '',
+    // 'Write' => '',
 );

app/Model/Acl.php

@@ -31,7 +31,7 @@ class Acl extends Base
      * @var array
      */
     private $user_actions = array(
-        'app' => array('index'),
+        'app' => array('index', 'preview'),
         'board' => array('index', 'show', 'save', 'check', 'changeassignee', 'updateassignee', 'changecategory', 'updatecategory', 'movecolumn', 'edit', 'update', 'add', 'confirm', 'remove'),
         'project' => array('index', 'show', 'exporttasks', 'exportdaily', 'share', 'edit', 'update', 'users', 'remove', 'duplicate', 'disable', 'enable', 'activity', 'search', 'tasks', 'create', 'save'),
         'user' => array('edit', 'forbidden', 'logout', 'show', 'external', 'unlinkgoogle', 'unlinkgithub', 'sessions', 'removesession', 'last', 'notifications', 'password'),

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">

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"/>

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>

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">

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)): ?>

app/helpers.php

@@ -445,7 +445,6 @@ function form_textarea($name, $values = array(), array $errors = array(), array
     $html .= implode(' ', $attributes).'>';
     $html .= isset($values->$name) ? escape($values->$name) : isset($values[$name]) ? $values[$name] : '';
     $html .= '</textarea>';
-    if (in_array('required', $attributes)) $html .= '<span class="form-required">*</span>';
     $html .= error_list($errors, $name);
 
     return $html;