Switched out markdown render

Fixes #304.
Fixes #359.

diff --git a/package.json b/package.json
index 9f2ce4c1ae6d96c8df3a599ae1c420b0e1a56db7..b60facff3430df4bf6c8f75875db326310ff2204 100644 (file)
--- a/package.json
+++ b/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"
   },

diff --git a/readme.md b/readme.md
index 65dcbe7b10d962d49a5c3a3c1a6f2000951658e1..3e269e1758d96a57f402b3538ee008c4e973fe05 100644 (file)
--- a/readme.md
+++ b/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)

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index 19badcac83e5f570101305b250b3f099a8cef559..0bc664200f70a7459859abe1abf38061719a0498 100644 (file)
--- a/resources/assets/js/directives.js
+++ b/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));
                 });
 
             }

diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index a74a81647bd1c0cf8d93c266ccf8872e56815059..df717dd8df8dfd9b7d77b82152893e92f82a6ac6 100644 (file)
--- a/resources/assets/sass/_text.scss
+++ b/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"] {