1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-29 23:22:34 +01:00

Switched out markdown render

Fixes #304.
Fixes #359.
This commit is contained in:
Dan Brown 2017-04-17 12:21:10 +01:00
parent ec7be1b08b
commit fde970ba59
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
4 changed files with 25 additions and 21 deletions

View File

@ -33,7 +33,8 @@
"clipboard": "^1.5.16", "clipboard": "^1.5.16",
"dropzone": "^4.0.1", "dropzone": "^4.0.1",
"gulp-util": "^3.0.8", "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", "moment": "^2.12.0",
"vue": "^2.2.6" "vue": "^2.2.6"
}, },

View File

@ -74,7 +74,7 @@ These are the great projects used to help build BookStack:
* [Dropzone.js](http://www.dropzonejs.com/) * [Dropzone.js](http://www.dropzonejs.com/)
* [ZeroClipboard](http://zeroclipboard.org/) * [ZeroClipboard](http://zeroclipboard.org/)
* [TinyColorPicker](http://www.dematte.at/tinyColorPicker/index.html) * [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/) * [Moment.js](http://momentjs.com/)
* [BarryVD](https://github.com/barryvdh) * [BarryVD](https://github.com/barryvdh)
* [Debugbar](https://github.com/barryvdh/laravel-debugbar) * [Debugbar](https://github.com/barryvdh/laravel-debugbar)

View File

@ -1,6 +1,7 @@
"use strict"; "use strict";
const DropZone = require("dropzone"); 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) { module.exports = function (ngApp, events) {
@ -214,18 +215,8 @@ module.exports = function (ngApp, events) {
} }
}]); }]);
let renderer = new markdown.Renderer(); const md = new MarkdownIt();
// Custom markdown checkbox list item md.use(mdTasksLists, {label: true});
// 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>`;
};
/** /**
* Markdown input * Markdown input
@ -244,20 +235,20 @@ module.exports = function (ngApp, events) {
element = element.find('textarea').first(); element = element.find('textarea').first();
let content = element.val(); let content = element.val();
scope.mdModel = content; scope.mdModel = content;
scope.mdChange(markdown(content, {renderer: renderer})); scope.mdChange(md.render(content));
element.on('change input', (event) => { element.on('change input', (event) => {
content = element.val(); content = element.val();
$timeout(() => { $timeout(() => {
scope.mdModel = content; scope.mdModel = content;
scope.mdChange(markdown(content, {renderer: renderer})); scope.mdChange(md.render(content));
}); });
}); });
scope.$on('markdown-update', (event, value) => { scope.$on('markdown-update', (event, value) => {
element.val(value); element.val(value);
scope.mdModel = value; scope.mdModel = value;
scope.mdChange(markdown(value)); scope.mdChange(md.render(value));
}); });
} }

View File

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