Markdown pour la description

- Ajout d'un editeur de markdown
    - On garde le formattage des espaces
    - On empeche l'utilisateur de mettre du html

app/classes/Framadate/Utils.php

@@ -133,12 +133,26 @@ class Utils {
         return TABLENAME_PREFIX . $tableName;
     }
 
-    public static function markdown($md, $clear) {
+    public static function markdown($md, $clear=false, $line=true) {
         $parseDown = new \Parsedown();
 
-        $html = $parseDown
+        $parseDown
             ->setMarkupEscaped(true)
-            ->line($md);
+            ->setBreaksEnabled(true)
+            ->setUrlsLinked(false);
+
+        if ($line) {
+            $html  = $parseDown->line($md);
+        } else {
+            $md = preg_replace_callback(
+                '#( ){2,}#',
+                function ($m) {
+                    return str_repeat(' ', strlen($m[0]));
+                },
+                $md
+            );
+            $html  = $parseDown->text($md);
+        }
 
         $text = strip_tags($html);
 

app/inc/smarty.php

@@ -57,8 +57,8 @@ function smarty_function_poll_url($params, Smarty_Internal_Template $template) {
     return Utils::getUrlSondage($poll_id, $admin, $vote_unique_id, $action, $action_value);
 }
 
-function smarty_modifier_markdown($md, $clear = false) {
+function smarty_modifier_markdown($md, $clear = false, $inline=true) {
-    return Utils::markdown($md, $clear);
+    return Utils::markdown($md, $clear, $inline);
 }
 
 function smarty_modifier_resource($link) {

create_poll.php

@@ -270,7 +270,7 @@ $smarty->assign('goToStep2', GO_TO_STEP_2);
 $smarty->assign('poll_type', $poll_type);
 $smarty->assign('poll_title', Utils::fromPostOrDefault('title', $_SESSION['form']->title));
 $smarty->assign('poll_id', Utils::fromPostOrDefault('id', $_SESSION['form']->id));
-$smarty->assign('poll_description', Utils::fromPostOrDefault('description', $_SESSION['form']->description));
+$smarty->assign('poll_description', !empty($_POST['description']) ? $_POST['description'] :  $_SESSION['form']->description);
 $smarty->assign('poll_name', Utils::fromPostOrDefault('name', $_SESSION['form']->admin_name));
 $smarty->assign('poll_mail', Utils::fromPostOrDefault('mail', $_SESSION['form']->admin_mail));
 $smarty->assign('poll_editable', Utils::fromPostOrDefault('editable', $_SESSION['form']->editable));

css/style.css

@@ -136,10 +136,22 @@ header .lead {
 
 .poll-description {
     font-family: inherit;
-    white-space: pre-wrap;
     word-break: initial;
 }
 
+/** Description in markdown **/
+.CodeMirror, .CodeMirror-scroll {
+    min-height: 200px;
+}
+.CodeMirror {
+    background: #f5f5f5 none repeat scroll 0 0;
+    overflow: hidden;
+    position: relative;
+}
+.editor-toolbar {
+    background-color: #eee;
+}
+
 h4.control-label {
     display: inline-block;
     max-width: 100%;

js/app/classic_poll.js

@@ -104,7 +104,7 @@
         var element = $('#' + $(this).val());
         
         if (img != '' && link != '') {
-            .val('[![' + text + '](' + img + ')](' + link + ')');
+            element.val('[![' + text + '](' + img + ')](' + link + ')');
         } else if (img != '') {
             element.val('![' + text + '](' + img + ')');
         } else if (link != '') {

js/app/create_poll.js

@@ -90,4 +90,13 @@ $(document).ready(function () {
         document.getElementById("cookie-warning").setAttribute("style", "");
     }
 
+
+    // Markdown for description
+    var simplemde = new SimpleMDE({
+        element: $('#poll_comments')[0],
+        forceSync: true,
+        status: false,
+        previewRender: window.myPreviewRender
+    });
+
 });

js/core.js

@@ -1,6 +1,7 @@
 $(document).ready(function() {
 
     window.lang = $('html').attr('lang');
+    var simplemde;
 
     /**
      *  adminstuds.php
@@ -48,17 +49,38 @@ $(document).ready(function() {
         return false;
     });
 
+    window.myPreviewRender = function (text) {
+        text = text.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
+            return '&#'+i.charCodeAt(0)+';';
+        });
+        text = SimpleMDE.prototype.markdown(text);
+        text = text.replace(/ /g, '&nbsp;');
+
+        return text;
+    };
+
     $('#description-form .btn-edit').on('click', function() {
         $('#description-form .well').hide();
+        $('#description-form .control-label .btn-edit').hide();
         $('#description-form .js-desc').removeClass('hidden');
         $('.js-desc textarea').focus();
+        simplemde = new SimpleMDE({
+            element: $('.js-desc textarea')[0],
+            forceSync: true,
+            status: false,
+            previewRender: window.myPreviewRender
+        });
+
         return false;
     });
 
     $('#description-form .btn-cancel').on('click', function() {
         $('#description-form .well').show();
+        $('#description-form .control-label .btn-edit').show();
         $('#description-form .js-desc').addClass('hidden');
         $('.js-desc .btn-edit').focus();
+        simplemde.toTextArea();
+        simplemde = null;
         return false;
     });
 

tpl/create_poll.tpl

@@ -1,8 +1,10 @@
 {extends file='page.tpl'}
 
 {block name="header"}
+    <script src="{"js/simplemde.min.js"|resource}" type="text/javascript"></script>
     <script src="{"js/app/create_poll.js"|resource}" type="text/javascript"></script>
     <link rel="stylesheet" href="{"css/app/create_poll.css"|resource}">
+    <link rel="stylesheet" href="{"css/simplemde.min.css"|resource}">
 {/block}
 
 {block name=main}
@@ -63,7 +65,7 @@
                     <div class="col-sm-8">
                         <textarea id="poll_comments" name="description"
                                   class="form-control" {$errors['description']['aria']}
-                                  rows="5">{$poll_description|html}</textarea>
+                                  rows="5">{$poll_description|escape}</textarea>
                     </div>
                 </div>
                 {if !empty($errors['description']['msg'])}

tpl/part/poll_info.tpl

@@ -75,9 +75,9 @@
             {if $admin || preg_match('/[^ \r\n]/', $poll->description)}
                 <div class="form-group col-md-8" id="description-form">
                     <label class="control-label">{__('Generic', 'Description')}{if $admin && !$expired} <button class="btn btn-link btn-sm btn-edit" title="{__('PollInfo', 'Edit the description')}"><span class="glyphicon glyphicon-pencil"></span><span class="sr-only">{__('Generic', 'Edit')}</span></button>{/if}</label>
-                    <pre class="form-control-static well poll-description">{$poll->description|html}</pre>
+                    <div class="form-control-static well poll-description">{$poll->description|markdown:false:false}</div>
                     {if $admin && !$expired}
-                        <div class="hidden js-desc text-right">
+                        <div class="hidden js-desc">
                             <label class="sr-only" for="newdescription">{__('Generic', 'Description')}</label>
                             <textarea class="form-control" id="newdescription" name="description" rows="2" cols="40">{$poll->description|html}</textarea>
                             <button type="submit" id="btn-new-desc" name="update_poll_info" value="description" class="btn btn-sm btn-success" title="{__('PollInfo', 'Save the description')}"><span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Save')}</span></button>

tpl/studs.tpl

@@ -4,8 +4,10 @@
     <script src="{"js/jquery-ui.min.js"|resource}" type="text/javascript"></script>
     <script src="{"js/Chart.min.js"|resource}" type="text/javascript"></script>
     <script src="{"js/Chart.StackedBar.js"|resource}" type="text/javascript"></script>
+    <script src="{"js/simplemde.min.js"|resource}" type="text/javascript"></script>
     <script src="{"js/app/studs.js"|resource}" type="text/javascript"></script>
     <link rel="stylesheet" href="{'css/jquery-ui.min.css'|resource}">
+    <link rel="stylesheet" href="{'css/simplemde.min.css'|resource}">
 
 {/block}