Dan Brown

Added checkbox sytax parsing to markdown lists

Closes #319
...@@ -214,6 +214,19 @@ export default function (ngApp, events) { ...@@ -214,6 +214,19 @@ export default function (ngApp, events) {
214 } 214 }
215 }]); 215 }]);
216 216
217 + let renderer = new markdown.Renderer();
218 + // Custom markdown checkbox list item
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 +
217 /** 230 /**
218 * Markdown input 231 * Markdown input
219 * Handles the logic for just the editor input field. 232 * Handles the logic for just the editor input field.
...@@ -231,13 +244,13 @@ export default function (ngApp, events) { ...@@ -231,13 +244,13 @@ export default function (ngApp, events) {
231 element = element.find('textarea').first(); 244 element = element.find('textarea').first();
232 let content = element.val(); 245 let content = element.val();
233 scope.mdModel = content; 246 scope.mdModel = content;
234 - scope.mdChange(markdown(content)); 247 + scope.mdChange(markdown(content, {renderer: renderer}));
235 248
236 element.on('change input', (event) => { 249 element.on('change input', (event) => {
237 content = element.val(); 250 content = element.val();
238 $timeout(() => { 251 $timeout(() => {
239 scope.mdModel = content; 252 scope.mdModel = content;
240 - scope.mdChange(markdown(content)); 253 + scope.mdChange(markdown(content, {renderer: renderer}));
241 }); 254 });
242 }); 255 });
243 256
......
...@@ -281,6 +281,14 @@ ol { ...@@ -281,6 +281,14 @@ ol {
281 overflow: hidden; 281 overflow: hidden;
282 } 282 }
283 283
284 +li.checkbox-item {
285 + list-style: none;
286 + margin-left: - ($-m * 1.3);
287 + input[type="checkbox"] {
288 + margin-right: $-xs;
289 + }
290 +}
291 +
284 /* 292 /*
285 * Generic text styling classes 293 * Generic text styling classes
286 */ 294 */
......