feat(markdown): Added the HyperMD lib locally and added a Markdown bo…

…x instead of a generic textarea to the create screen

.eslintrc

@@ -13,7 +13,8 @@
     ],
     "ignorePatterns": [
         "node_modules/",
-        "database/data/"
+        "database/data/",
+        "lib/public/assets/"
     ],
     "rules": {
         "array-bracket-newline": [

.nycrc

@@ -7,6 +7,8 @@
         "lib/main.js",
         "lib/database/migrations/*.js",
         "lib/database/seeders/*.js",
+        "lib/public/assets/**/*.js",
+        "lib/public/assets/**/*.css",
         "test/**/*.js"
     ]
 }

lib/public/Model.js

@@ -28,9 +28,12 @@ import Tags from './views/Tags/Tags.js';
 export default class Model extends Observable {
     /**
      * Load all sub-models and bind event handlers
+     * @param {Object} HyperMD The hyperMD object passed from HTML code
      */
-    constructor() {
+    constructor(HyperMD) {
         super();
+        // Bind HyperMD
+        this.HyperMD = HyperMD;
 
         this.session = sessionService.get();
         this.session.personid = parseInt(this.session.personid, 10);
@@ -66,6 +69,7 @@ export default class Model extends Observable {
                 this.logs.fetchOneLog(this.router.params.id);
                 break;
             case 'create-log-entry':
+                this.logs.setMarkdownBox('text', { location: 'logs', name: 'setText' });
                 break;
             case 'tag':
                 if (this.router.params.panel) {

lib/public/assets/SmartEditor/HyperMD/mode/hypermd.css

@@ -0,0 +1,73 @@
+@charset "UTF-8";
+.CodeMirror .hmd-fold-math, .CodeMirror pre.HyperMD-table-row .cm-hmd-table-sep {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.CodeMirror span.hmd-hidden-token.cm-formatting-em, .CodeMirror span.hmd-hidden-token.cm-formatting-strong, .CodeMirror span.hmd-hidden-token.cm-formatting-strikethrough, .CodeMirror span.hmd-hidden-token.cm-formatting-code, .CodeMirror span.hmd-hidden-token.cm-formatting-link {
+  display: inline;
+  font-size: 1px !important;
+  letter-spacing: -1ch;
+  font-family: monospace;
+  color: transparent;
+}
+
+.CodeMirror {
+  /* adding some CodeMirror-not-implemented styles' default style */
+  /* tooltip for addon/hover */
+  /* gutter for addon/click */
+  /* addon/fold */
+  /* addon/table-align */
+  /* addon/fold-math */
+  /* addon/fold-emoji */
+}
+.CodeMirror .cm-inline-code,
+.CodeMirror .cm-math {
+  color: #900;
+}
+.CodeMirror div.HyperMD-hover > .HyperMD-hover-content {
+  background-color: #fff;
+  color: #000;
+  border: 1px solid #000;
+  padding: 0.5em;
+}
+.CodeMirror div.HyperMD-hover > .HyperMD-hover-content p {
+  margin: 0.2em 0;
+}
+.CodeMirror .HyperMD-goback {
+  width: 1px;
+}
+.CodeMirror div.HyperMD-goback-button {
+  background-color: #ddd;
+  color: #333;
+  text-align: center;
+  cursor: pointer;
+}
+.CodeMirror .hmd-link-icon:after {
+  content: "🔗»";
+  color: #009;
+  text-shadow: 0 0 2px #69F;
+}
+.CodeMirror pre.HyperMD-table-row {
+  white-space: pre;
+}
+.CodeMirror pre.HyperMD-table-row .hmd-table-column,
+.CodeMirror pre.HyperMD-table-row .hmd-table-column-content {
+  display: inline-block;
+}
+.CodeMirror pre.HyperMD-table-row .hmd-table-column-left {
+  text-align: left;
+}
+.CodeMirror pre.HyperMD-table-row .hmd-table-column-center {
+  text-align: center;
+}
+.CodeMirror pre.HyperMD-table-row .hmd-table-column-right {
+  text-align: right;
+}
+.CodeMirror .hmd-fold-math.hmd-fold-math.math-2 {
+  width: 100%;
+}
+.CodeMirror img.hmd-emoji {
+  height: 1.2em;
+  vertical-align: middle;
+}

lib/public/assets/SmartEditor/HyperMD/powerpack/fold-emoji-with-emojione.js

@@ -0,0 +1,43 @@
+// HyperMD, copyright (c) by laobubu
+// Distributed under an MIT license: http://laobubu.net/HyperMD/LICENSE
+//
+// POWERPACK for "addon/fold-emoji"
+//
+// Use EmojiOne to lookup emojis and render emoji `:smile:` :smile:
+//
+// :warning: **License**:
+//
+// Please follow https://www.emojione.com/licenses/free if you use this powerpack.
+// 使用前请注意阅读 EmojiOne 使用许可
+//
+
+(function (mod){ //[HyperMD] UMD patched!
+  /*commonjs*/  ("object"==typeof exports&&"undefined"!=typeof module) ? mod(null, exports, require("emojione"), require("../addon/fold-emoji"), require("emojione/extras/css/emojione.min.css")) :
+  /*amd*/       ("function"==typeof define&&define.amd) ? define(["require","exports","emojione","../addon/fold-emoji","emojione/extras/css/emojione.min.css"], mod) :
+  /*plain env*/ mod(null, (this.HyperMD_PowerPack = this.HyperMD_PowerPack || {}, this.HyperMD_PowerPack["fold-emoji-with-emojione"] = {}), emojione, HyperMD.FoldEmoji);
+})(function (require, exports, _emojione_module, fold_emoji_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    /** emojione doesn't have AMD declaration. load it from browser if needed */
+    var emojione = _emojione_module || this['emojione'] || window['emojione'];
+    exports.emojioneChecker = function (text) { return emojione.shortnameToUnicode(text) != text; };
+    exports.emojioneRenderer = function (text) {
+        var html = emojione.shortnameToImage(text);
+        if (!/^<img /i.test(html))
+            return null;
+        var attr = /([\w-]+)="(.+?)"/g;
+        var ans = document.createElement("img");
+        var t;
+        while (t = attr.exec(html))
+            ans.setAttribute(t[1], t[2]);
+        return ans;
+    };
+    // Update default EmojiChecker and EmojiRenderer
+    if (emojione) {
+        fold_emoji_1.defaultOption.emojiChecker = exports.emojioneChecker;
+        fold_emoji_1.defaultOption.emojiRenderer = exports.emojioneRenderer;
+    }
+    else {
+        console.error("[HyperMD] PowerPack fold-emoji-with-emojione loaded, but emojione not found.");
+    }
+});

lib/public/assets/SmartEditor/HyperMD/powerpack/fold-math-with-mathjax.js

@@ -0,0 +1,110 @@
+// HyperMD, copyright (c) by laobubu
+// Distributed under an MIT license: http://laobubu.net/HyperMD/LICENSE
+//
+// POWERPACK for "addon/fold-math"
+//
+// Use MathJax to render TeX formulars.
+//
+// :warning: **Configuration Required**
+//
+// Before loading this module, make sure that you've finished [configuring MathJax](http://docs.mathjax.org/en/latest/configuration.html) like this:
+//
+// ```html
+// <script type="text/x-mathjax-config">
+// MathJax.Hub.Config({
+//     jax: ["input/TeX", "output/HTML-CSS","output/NativeMML","output/SVG"],
+//     extensions: ["MathMenu.js","MathZoom.js", "AssistiveMML.js", "a11y/accessibility-menu.js"],
+//     TeX: {
+//         extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
+//     }
+// });
+// </script>
+// ```
+
+(function (mod){ //[HyperMD] UMD patched!
+  /*commonjs*/  ("object"==typeof exports&&"undefined"!=typeof module) ? mod(null, exports, require("../addon/fold-math"), require("mathjax")) :
+  /*amd*/       ("function"==typeof define&&define.amd) ? define(["require","exports","../addon/fold-math","mathjax"], mod) :
+  /*plain env*/ mod(null, (this.HyperMD_PowerPack = this.HyperMD_PowerPack || {}, this.HyperMD_PowerPack["fold-math-with-mathjax"] = {}), HyperMD.FoldMath);
+})(function (require, exports, fold_math_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var MathJaxRenderer = /** @class */ (function () {
+        function MathJaxRenderer(div, mode) {
+            this.div = div;
+            this.mode = mode;
+            this.onChanged = null;
+            this.jax = null;
+            this._cleared = false;
+            this._renderingExpr = ""; // Currently rendering expr
+            var script = document.createElement("script");
+            script.setAttribute("type", mode ? 'math/tex; mode=' + mode : 'math/tex');
+            div.appendChild(script);
+            this.script = script;
+        }
+        MathJaxRenderer.prototype.clear = function () {
+            var script = this.script;
+            script.innerHTML = '';
+            if (this.jax)
+                this.jax.Remove();
+            this._cleared = true;
+        };
+        MathJaxRenderer.prototype.startRender = function (expr) {
+            if (this._cleared) {
+                return;
+            }
+            if (this._renderingExpr) {
+                // A new rendering job comes, while previous one is still in progress
+                // Do rendering later, in _TypesetDoneCB function
+                this._renderingExpr = expr;
+                return;
+            }
+            this._renderingExpr = expr;
+            var script = this.script;
+            script.innerHTML = expr;
+            if (this.jax) {
+                MathJax.Hub.Queue(["Text", this.jax, expr], ["_TypesetDoneCB", this, expr]);
+            }
+            else {
+                MathJax.Hub.Queue(["Typeset", MathJax.Hub, script], ["_TypesetDoneCB", this, expr]);
+            }
+        };
+        /** Callback for MathJax when typeset is done*/
+        MathJaxRenderer.prototype._TypesetDoneCB = function (finished_expr) {
+            if (this._cleared) {
+                return;
+            }
+            if (!this.jax)
+                this.jax = MathJax.Hub.getJaxFor(this.script);
+            if (this._renderingExpr !== finished_expr) {
+                // Current finished rendering job is out-of-date
+                // re-render with newest Tex expr
+                var expr_new = this._renderingExpr;
+                this._renderingExpr = "";
+                this.startRender(expr_new);
+                return;
+            }
+            // Rendering finished. Nothing wrong
+            this._renderingExpr = "";
+            if (typeof (this.onChanged) === 'function')
+                this.onChanged(finished_expr);
+        };
+        MathJaxRenderer.prototype.isReady = function () {
+            return MathJax.isReady;
+        };
+        return MathJaxRenderer;
+    }());
+    exports.MathJaxRenderer = MathJaxRenderer;
+    if (typeof MathJax !== "object") {
+        // MathJax not exists. Do nothing
+        console.error("[HyperMD] PowerPack fold-math-with-mathjax loaded, but MathJax not found.");
+    }
+    else if (0 == MathJax.Hub.config.jax.length) {
+        // IF NOT FOUND, throw a warning
+        console.error("[HyperMD] Looks like MathJax is not configured.\nPlease do this BEFORE loading MathJax.\nSee http://docs.mathjax.org/en/latest/configuration.html");
+        MathJax.isReady = false;
+    }
+    else {
+        // Use MathJaxRenderer as default MathRenderer
+        fold_math_1.defaultOption.renderer = MathJaxRenderer;
+    }
+});

lib/public/assets/SmartEditor/HyperMD/powerpack/hover-with-marked.js

@@ -0,0 +1,27 @@
+// HyperMD, copyright (c) by laobubu
+// Distributed under an MIT license: http://laobubu.net/HyperMD/LICENSE
+//
+// POWERPACK for "addon/hover"
+//
+// Render tooltip Markdown to HTML, with marked
+//
+
+(function (mod){ //[HyperMD] UMD patched!
+  /*commonjs*/  ("object"==typeof exports&&"undefined"!=typeof module) ? mod(null, exports, require("../addon/hover"), require("marked")) :
+  /*amd*/       ("function"==typeof define&&define.amd) ? define(["require","exports","../addon/hover","marked"], mod) :
+  /*plain env*/ mod(null, (this.HyperMD_PowerPack = this.HyperMD_PowerPack || {}, this.HyperMD_PowerPack["hover-with-marked"] = {}), HyperMD.Hover, marked);
+})(function (require, exports, hover_1, marked) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    if (typeof marked == "function") {
+        // Use marked to render Hover tooltip content
+        hover_1.defaultOption.convertor = function (footnote, text) {
+            if (!text)
+                return null;
+            return marked(text);
+        };
+    }
+    else {
+        console.error("[HyperMD] PowerPack hover-with-marked loaded, but marked not found.");
+    }
+});