Fixed model extending mis-use

[bookstack] / resources / assets / js / directives.js

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index ef8bcd85c6c5ee8e80111a6303e1e7b2a3984d6d..19badcac83e5f570101305b250b3f099a8cef559 100644 (file)
--- a/resources/assets/js/directives.js
+++ b/resources/assets/js/directives.js
@@ -1,8 +1,8 @@
 "use strict";
 "use strict";

-import DropZone from "dropzone";
-import markdown from "marked";
+const DropZone = require("dropzone");
+const markdown = require("marked");

 
 

-export default function (ngApp, events) {
+module.exports = function (ngApp, events) {

 
     /**
      * Common tab controls using simple jQuery functions.
 
     /**
      * Common tab controls using simple jQuery functions.


@@ -214,6 +214,19 @@ export default 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*/, '<input type="checkbox"/>')
+                .replace(/^\s*\[x\]\s*/, '<input type="checkbox" checked/>');
+            return `<li class="checkbox-item">${text}</li>`;
+        }
+        return `<li>${text}</li>`;
+    };
+

     /**
      * Markdown input
      * Handles the logic for just the editor input field.
     /**
      * Markdown input
      * Handles the logic for just the editor input field.


@@ -231,13 +244,13 @@ export default function (ngApp, events) {
                 element = element.find('textarea').first();
                 let content = element.val();
                 scope.mdModel = content;
                 element = element.find('textarea').first();
                 let content = element.val();
                 scope.mdModel = content;

-                scope.mdChange(markdown(content));
+                scope.mdChange(markdown(content, {renderer: renderer}));

 
                 element.on('change input', (event) => {
                     content = element.val();
                     $timeout(() => {
                         scope.mdModel = content;
 
                 element.on('change input', (event) => {
                     content = element.val();
                     $timeout(() => {
                         scope.mdModel = content;

-                        scope.mdChange(markdown(content));
+                        scope.mdChange(markdown(content, {renderer: renderer}));

                     });
                 });
 
                     });
                 });