diff --git a/package.json b/package.json index 9f2ce4c1a..b60facff3 100644 --- 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 65dcbe7b1..3e269e175 100644 --- 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 19badcac8..0bc664200 100644 --- 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*/, '') - .replace(/^\s*\[x\]\s*/, ''); - return `
  • ${text}
  • `; - } - return `
  • ${text}
  • `; - }; + 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 a74a81647..df717dd8d 100644 --- 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"] {