Dan Brown

Switched out markdown render

Fixes #304.
Fixes #359.
...@@ -33,7 +33,8 @@ ...@@ -33,7 +33,8 @@
33 "clipboard": "^1.5.16", 33 "clipboard": "^1.5.16",
34 "dropzone": "^4.0.1", 34 "dropzone": "^4.0.1",
35 "gulp-util": "^3.0.8", 35 "gulp-util": "^3.0.8",
36 - "marked": "^0.3.5", 36 + "markdown-it": "^8.3.1",
37 + "markdown-it-task-lists": "^2.0.0",
37 "moment": "^2.12.0", 38 "moment": "^2.12.0",
38 "vue": "^2.2.6" 39 "vue": "^2.2.6"
39 }, 40 },
......
...@@ -74,7 +74,7 @@ These are the great projects used to help build BookStack: ...@@ -74,7 +74,7 @@ These are the great projects used to help build BookStack:
74 * [Dropzone.js](http://www.dropzonejs.com/) 74 * [Dropzone.js](http://www.dropzonejs.com/)
75 * [ZeroClipboard](http://zeroclipboard.org/) 75 * [ZeroClipboard](http://zeroclipboard.org/)
76 * [TinyColorPicker](http://www.dematte.at/tinyColorPicker/index.html) 76 * [TinyColorPicker](http://www.dematte.at/tinyColorPicker/index.html)
77 -* [Marked](https://github.com/chjj/marked) 77 +* [markdown-it](https://github.com/markdown-it/markdown-it) and [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists)
78 * [Moment.js](http://momentjs.com/) 78 * [Moment.js](http://momentjs.com/)
79 * [BarryVD](https://github.com/barryvdh) 79 * [BarryVD](https://github.com/barryvdh)
80 * [Debugbar](https://github.com/barryvdh/laravel-debugbar) 80 * [Debugbar](https://github.com/barryvdh/laravel-debugbar)
......
1 "use strict"; 1 "use strict";
2 const DropZone = require("dropzone"); 2 const DropZone = require("dropzone");
3 -const markdown = require("marked"); 3 +const MarkdownIt = require("markdown-it");
4 +const mdTasksLists = require('markdown-it-task-lists');
4 5
5 module.exports = function (ngApp, events) { 6 module.exports = function (ngApp, events) {
6 7
...@@ -214,18 +215,8 @@ module.exports = function (ngApp, events) { ...@@ -214,18 +215,8 @@ module.exports = function (ngApp, events) {
214 } 215 }
215 }]); 216 }]);
216 217
217 - let renderer = new markdown.Renderer(); 218 + const md = new MarkdownIt();
218 - // Custom markdown checkbox list item 219 + md.use(mdTasksLists, {label: true});
219 - // Attribution: https://github.com/chjj/marked/issues/107#issuecomment-44542001
220 - renderer.listitem = function(text) {
221 - if (/^\s*\[[x ]\]\s*/.test(text)) {
222 - text = text
223 - .replace(/^\s*\[ \]\s*/, '<input type="checkbox"/>')
224 - .replace(/^\s*\[x\]\s*/, '<input type="checkbox" checked/>');
225 - return `<li class="checkbox-item">${text}</li>`;
226 - }
227 - return `<li>${text}</li>`;
228 - };
229 220
230 /** 221 /**
231 * Markdown input 222 * Markdown input
...@@ -244,20 +235,20 @@ module.exports = function (ngApp, events) { ...@@ -244,20 +235,20 @@ module.exports = function (ngApp, events) {
244 element = element.find('textarea').first(); 235 element = element.find('textarea').first();
245 let content = element.val(); 236 let content = element.val();
246 scope.mdModel = content; 237 scope.mdModel = content;
247 - scope.mdChange(markdown(content, {renderer: renderer})); 238 + scope.mdChange(md.render(content));
248 239
249 element.on('change input', (event) => { 240 element.on('change input', (event) => {
250 content = element.val(); 241 content = element.val();
251 $timeout(() => { 242 $timeout(() => {
252 scope.mdModel = content; 243 scope.mdModel = content;
253 - scope.mdChange(markdown(content, {renderer: renderer})); 244 + scope.mdChange(md.render(content));
254 }); 245 });
255 }); 246 });
256 247
257 scope.$on('markdown-update', (event, value) => { 248 scope.$on('markdown-update', (event, value) => {
258 element.val(value); 249 element.val(value);
259 scope.mdModel = value; 250 scope.mdModel = value;
260 - scope.mdChange(markdown(value)); 251 + scope.mdChange(md.render(value));
261 }); 252 });
262 253
263 } 254 }
......
...@@ -269,19 +269,31 @@ span.highlight { ...@@ -269,19 +269,31 @@ span.highlight {
269 /* 269 /*
270 * Lists 270 * Lists
271 */ 271 */
272 +ul, ol {
273 + overflow: hidden;
274 + p {
275 + margin: 0;
276 + }
277 +}
272 ul { 278 ul {
273 padding-left: $-m * 1.3; 279 padding-left: $-m * 1.3;
274 list-style: disc; 280 list-style: disc;
275 - overflow: hidden; 281 + ul {
282 + list-style: circle;
283 + margin-top: 0;
284 + margin-bottom: 0;
285 + }
286 + label {
287 + margin: 0;
288 + }
276 } 289 }
277 290
278 ol { 291 ol {
279 list-style: decimal; 292 list-style: decimal;
280 padding-left: $-m * 2; 293 padding-left: $-m * 2;
281 - overflow: hidden;
282 } 294 }
283 295
284 -li.checkbox-item { 296 +li.checkbox-item, li.task-list-item {
285 list-style: none; 297 list-style: none;
286 margin-left: - ($-m * 1.3); 298 margin-left: - ($-m * 1.3);
287 input[type="checkbox"] { 299 input[type="checkbox"] {
......