Switched out markdown render

Fixes #304.
Fixes #359.

package.json

@@ -33,7 +33,8 @@
     "clipboard": "^1.5.16",
     "dropzone": "^4.0.1",
     "gulp-util": "^3.0.8",
-    "marked": "^0.3.5",
+    "markdown-it": "^8.3.1",
+    "markdown-it-task-lists": "^2.0.0",
     "moment": "^2.12.0",
     "vue": "^2.2.6"
   },

readme.md

@@ -74,7 +74,7 @@ These are the great projects used to help build BookStack:
 * [Dropzone.js](http://www.dropzonejs.com/)
 * [ZeroClipboard](http://zeroclipboard.org/)
 * [TinyColorPicker](http://www.dematte.at/tinyColorPicker/index.html)
-* [Marked](https://github.com/chjj/marked)
+* [markdown-it](https://github.com/markdown-it/markdown-it) and [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists)
 * [Moment.js](http://momentjs.com/)
 * [BarryVD](https://github.com/barryvdh)
     * [Debugbar](https://github.com/barryvdh/laravel-debugbar)

resources/assets/js/directives.js

@@ -1,6 +1,7 @@
 "use strict";
 const DropZone = require("dropzone");
-const markdown = require("marked");
+const MarkdownIt = require("markdown-it");
+const mdTasksLists = require('markdown-it-task-lists');
 
 module.exports = function (ngApp, events) {
 
@@ -214,18 +215,8 @@ module.exports = function (ngApp, events) {
         }
     }]);
 
-    let renderer = new markdown.Renderer();
-    // Custom markdown checkbox list item
-    // Attribution: https://github.com/chjj/marked/issues/107#issuecomment-44542001
-    renderer.listitem = function(text) {
-        if (/^\s*\[[x ]\]\s*/.test(text)) {
-            text = text
-                .replace(/^\s*\[ \]\s*/, '<input type="checkbox"/>')
-                .replace(/^\s*\[x\]\s*/, '<input type="checkbox" checked/>');
-            return `<li class="checkbox-item">${text}</li>`;
-        }
-        return `<li>${text}</li>`;
-    };
+    const md = new MarkdownIt();
+    md.use(mdTasksLists, {label: true});
 
     /**
      * Markdown input
@@ -244,20 +235,20 @@ module.exports = function (ngApp, events) {
                 element = element.find('textarea').first();
                 let content = element.val();
                 scope.mdModel = content;
-                scope.mdChange(markdown(content, {renderer: renderer}));
+                scope.mdChange(md.render(content));
 
                 element.on('change input', (event) => {
                     content = element.val();
                     $timeout(() => {
                         scope.mdModel = content;
-                        scope.mdChange(markdown(content, {renderer: renderer}));
+                        scope.mdChange(md.render(content));
                     });
                 });
 
                 scope.$on('markdown-update', (event, value) => {
                     element.val(value);
                     scope.mdModel = value;
-                    scope.mdChange(markdown(value));
+                    scope.mdChange(md.render(value));
                 });
 
             }

resources/assets/sass/_text.scss

@@ -269,19 +269,31 @@ span.highlight {
 /*
  * Lists
  */
+ul, ol {
+  overflow: hidden;
+  p {
+    margin: 0;
+  }
+}
 ul {
   padding-left: $-m * 1.3;
   list-style: disc;
-  overflow: hidden;
+  ul {
+    list-style: circle;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  label {
+    margin: 0;
+  }
 }
 
 ol {
   list-style: decimal;
   padding-left: $-m * 2;
-  overflow: hidden;
 }
 
-li.checkbox-item {
+li.checkbox-item, li.task-list-item {
   list-style: none;
   margin-left: - ($-m * 1.3);
   input[type="checkbox"] {