Showing
4 changed files
with
25 additions
and
21 deletions
| ... | @@ -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"] { | ... | ... |
-
Please register or sign in to post a comment