Skip to content

Commit faca6e1

Browse files
john-ghatasmvegter
john-ghatas
authored and
mvegter
committed
feat(markdown): Added the HyperMD lib locally and added a Markdown box instead of a generic textarea to the create screen
1 parent cf5d375 commit faca6e1

39 files changed

Lines changed: 1660 additions & 50 deletions

‎.eslintrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
],
1414
"ignorePatterns": [
1515
"node_modules/",
16-
"database/data/"
16+
"database/data/",
17+
"lib/public/assets/"
1718
],
1819
"rules": {
1920
"array-bracket-newline": [

‎.nycrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
"lib/main.js",
88
"lib/database/migrations/*.js",
99
"lib/database/seeders/*.js",
10+
"lib/public/assets/**/*.js",
11+
"lib/public/assets/**/*.css",
1012
"test/**/*.js"
1113
]
1214
}

‎lib/public/Model.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,12 @@ import Tags from './views/Tags/Tags.js';
2828
export default class Model extends Observable {
2929
/**
3030
* Load all sub-models and bind event handlers
31+
* @param {Object} HyperMD The hyperMD object passed from HTML code
3132
*/
32-
constructor() {
33+
constructor(HyperMD) {
3334
super();
35+
// Bind HyperMD
36+
this.HyperMD = HyperMD;
3437

3538
this.session = sessionService.get();
3639
this.session.personid = parseInt(this.session.personid, 10);
@@ -66,6 +69,7 @@ export default class Model extends Observable {
6669
this.logs.fetchOneLog(this.router.params.id);
6770
break;
6871
case 'create-log-entry':
72+
this.logs.setMarkdownBox('text', { location: 'logs', name: 'setText' });
6973
break;
7074
case 'tag':
7175
if (this.router.params.panel) {

‎lib/public/assets/SmartEditor/HyperMD/index.js‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@charset "UTF-8";
2+
.CodeMirror .hmd-fold-math, .CodeMirror pre.HyperMD-table-row .cm-hmd-table-sep {
3+
display: inline-block;
4+
vertical-align: middle;
5+
}
6+
7+
.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 {
8+
display: inline;
9+
font-size: 1px !important;
10+
letter-spacing: -1ch;
11+
font-family: monospace;
12+
color: transparent;
13+
}
14+
15+
.CodeMirror {
16+
/* adding some CodeMirror-not-implemented styles' default style */
17+
/* tooltip for addon/hover */
18+
/* gutter for addon/click */
19+
/* addon/fold */
20+
/* addon/table-align */
21+
/* addon/fold-math */
22+
/* addon/fold-emoji */
23+
}
24+
.CodeMirror .cm-inline-code,
25+
.CodeMirror .cm-math {
26+
color: #900;
27+
}
28+
.CodeMirror div.HyperMD-hover > .HyperMD-hover-content {
29+
background-color: #fff;
30+
color: #000;
31+
border: 1px solid #000;
32+
padding: 0.5em;
33+
}
34+
.CodeMirror div.HyperMD-hover > .HyperMD-hover-content p {
35+
margin: 0.2em 0;
36+
}
37+
.CodeMirror .HyperMD-goback {
38+
width: 1px;
39+
}
40+
.CodeMirror div.HyperMD-goback-button {
41+
background-color: #ddd;
42+
color: #333;
43+
text-align: center;
44+
cursor: pointer;
45+
}
46+
.CodeMirror .hmd-link-icon:after {
47+
content: "🔗»";
48+
color: #009;
49+
text-shadow: 0 0 2px #69F;
50+
}
51+
.CodeMirror pre.HyperMD-table-row {
52+
white-space: pre;
53+
}
54+
.CodeMirror pre.HyperMD-table-row .hmd-table-column,
55+
.CodeMirror pre.HyperMD-table-row .hmd-table-column-content {
56+
display: inline-block;
57+
}
58+
.CodeMirror pre.HyperMD-table-row .hmd-table-column-left {
59+
text-align: left;
60+
}
61+
.CodeMirror pre.HyperMD-table-row .hmd-table-column-center {
62+
text-align: center;
63+
}
64+
.CodeMirror pre.HyperMD-table-row .hmd-table-column-right {
65+
text-align: right;
66+
}
67+
.CodeMirror .hmd-fold-math.hmd-fold-math.math-2 {
68+
width: 100%;
69+
}
70+
.CodeMirror img.hmd-emoji {
71+
height: 1.2em;
72+
vertical-align: middle;
73+
}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// HyperMD, copyright (c) by laobubu
2+
// Distributed under an MIT license: http://laobubu.net/HyperMD/LICENSE
3+
//
4+
// POWERPACK for "addon/fold-emoji"
5+
//
6+
// Use EmojiOne to lookup emojis and render emoji `:smile:` :smile:
7+
//
8+
// :warning: **License**:
9+
//
10+
// Please follow https://www.emojione.com/licenses/free if you use this powerpack.
11+
// 使用前请注意阅读 EmojiOne 使用许可
12+
//
13+
14+
(function (mod){ //[HyperMD] UMD patched!
15+
/*commonjs*/ ("object"==typeof exports&&"undefined"!=typeof module) ? mod(null, exports, require("emojione"), require("../addon/fold-emoji"), require("emojione/extras/css/emojione.min.css")) :
16+
/*amd*/ ("function"==typeof define&&define.amd) ? define(["require","exports","emojione","../addon/fold-emoji","emojione/extras/css/emojione.min.css"], mod) :
17+
/*plain env*/ mod(null, (this.HyperMD_PowerPack = this.HyperMD_PowerPack || {}, this.HyperMD_PowerPack["fold-emoji-with-emojione"] = {}), emojione, HyperMD.FoldEmoji);
18+
})(function (require, exports, _emojione_module, fold_emoji_1) {
19+
"use strict";
20+
Object.defineProperty(exports, "__esModule", { value: true });
21+
/** emojione doesn't have AMD declaration. load it from browser if needed */
22+
var emojione = _emojione_module || this['emojione'] || window['emojione'];
23+
exports.emojioneChecker = function (text) { return emojione.shortnameToUnicode(text) != text; };
24+
exports.emojioneRenderer = function (text) {
25+
var html = emojione.shortnameToImage(text);
26+
if (!/^<img /i.test(html))
27+
return null;
28+
var attr = /([\w-]+)="(.+?)"/g;
29+
var ans = document.createElement("img");
30+
var t;
31+
while (t = attr.exec(html))
32+
ans.setAttribute(t[1], t[2]);
33+
return ans;
34+
};
35+
// Update default EmojiChecker and EmojiRenderer
36+
if (emojione) {
37+
fold_emoji_1.defaultOption.emojiChecker = exports.emojioneChecker;
38+
fold_emoji_1.defaultOption.emojiRenderer = exports.emojioneRenderer;
39+
}
40+
else {
41+
console.error("[HyperMD] PowerPack fold-emoji-with-emojione loaded, but emojione not found.");
42+
}
43+
});

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
// HyperMD, copyright (c) by laobubu
2+
// Distributed under an MIT license: http://laobubu.net/HyperMD/LICENSE
3+
//
4+
// POWERPACK for "addon/fold-math"
5+
//
6+
// Use MathJax to render TeX formulars.
7+
//
8+
// :warning: **Configuration Required**
9+
//
10+
// Before loading this module, make sure that you've finished [configuring MathJax](http://docs.mathjax.org/en/latest/configuration.html) like this:
11+
//
12+
// ```html
13+
// <script type="text/x-mathjax-config">
14+
// MathJax.Hub.Config({
15+
// jax: ["input/TeX", "output/HTML-CSS","output/NativeMML","output/SVG"],
16+
// extensions: ["MathMenu.js","MathZoom.js", "AssistiveMML.js", "a11y/accessibility-menu.js"],
17+
// TeX: {
18+
// extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
19+
// }
20+
// });
21+
// </script>
22+
// ```
23+
24+
(function (mod){ //[HyperMD] UMD patched!
25+
/*commonjs*/ ("object"==typeof exports&&"undefined"!=typeof module) ? mod(null, exports, require("../addon/fold-math"), require("mathjax")) :
26+
/*amd*/ ("function"==typeof define&&define.amd) ? define(["require","exports","../addon/fold-math","mathjax"], mod) :
27+
/*plain env*/ mod(null, (this.HyperMD_PowerPack = this.HyperMD_PowerPack || {}, this.HyperMD_PowerPack["fold-math-with-mathjax"] = {}), HyperMD.FoldMath);
28+
})(function (require, exports, fold_math_1) {
29+
"use strict";
30+
Object.defineProperty(exports, "__esModule", { value: true });
31+
var MathJaxRenderer = /** @class */ (function () {
32+
function MathJaxRenderer(div, mode) {
33+
this.div = div;
34+
this.mode = mode;
35+
this.onChanged = null;
36+
this.jax = null;
37+
this._cleared = false;
38+
this._renderingExpr = ""; // Currently rendering expr
39+
var script = document.createElement("script");
40+
script.setAttribute("type", mode ? 'math/tex; mode=' + mode : 'math/tex');
41+
div.appendChild(script);
42+
this.script = script;
43+
}
44+
MathJaxRenderer.prototype.clear = function () {
45+
var script = this.script;
46+
script.innerHTML = '';
47+
if (this.jax)
48+
this.jax.Remove();
49+
this._cleared = true;
50+
};
51+
MathJaxRenderer.prototype.startRender = function (expr) {
52+
if (this._cleared) {
53+
return;
54+
}
55+
if (this._renderingExpr) {
56+
// A new rendering job comes, while previous one is still in progress
57+
// Do rendering later, in _TypesetDoneCB function
58+
this._renderingExpr = expr;
59+
return;
60+
}
61+
this._renderingExpr = expr;
62+
var script = this.script;
63+
script.innerHTML = expr;
64+
if (this.jax) {
65+
MathJax.Hub.Queue(["Text", this.jax, expr], ["_TypesetDoneCB", this, expr]);
66+
}
67+
else {
68+
MathJax.Hub.Queue(["Typeset", MathJax.Hub, script], ["_TypesetDoneCB", this, expr]);
69+
}
70+
};
71+
/** Callback for MathJax when typeset is done*/
72+
MathJaxRenderer.prototype._TypesetDoneCB = function (finished_expr) {
73+
if (this._cleared) {
74+
return;
75+
}
76+
if (!this.jax)
77+
this.jax = MathJax.Hub.getJaxFor(this.script);
78+
if (this._renderingExpr !== finished_expr) {
79+
// Current finished rendering job is out-of-date
80+
// re-render with newest Tex expr
81+
var expr_new = this._renderingExpr;
82+
this._renderingExpr = "";
83+
this.startRender(expr_new);
84+
return;
85+
}
86+
// Rendering finished. Nothing wrong
87+
this._renderingExpr = "";
88+
if (typeof (this.onChanged) === 'function')
89+
this.onChanged(finished_expr);
90+
};
91+
MathJaxRenderer.prototype.isReady = function () {
92+
return MathJax.isReady;
93+
};
94+
return MathJaxRenderer;
95+
}());
96+
exports.MathJaxRenderer = MathJaxRenderer;
97+
if (typeof MathJax !== "object") {
98+
// MathJax not exists. Do nothing
99+
console.error("[HyperMD] PowerPack fold-math-with-mathjax loaded, but MathJax not found.");
100+
}
101+
else if (0 == MathJax.Hub.config.jax.length) {
102+
// IF NOT FOUND, throw a warning
103+
console.error("[HyperMD] Looks like MathJax is not configured.\nPlease do this BEFORE loading MathJax.\nSee http://docs.mathjax.org/en/latest/configuration.html");
104+
MathJax.isReady = false;
105+
}
106+
else {
107+
// Use MathJaxRenderer as default MathRenderer
108+
fold_math_1.defaultOption.renderer = MathJaxRenderer;
109+
}
110+
});

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// HyperMD, copyright (c) by laobubu
2+
// Distributed under an MIT license: http://laobubu.net/HyperMD/LICENSE
3+
//
4+
// POWERPACK for "addon/hover"
5+
//
6+
// Render tooltip Markdown to HTML, with marked
7+
//
8+
9+
(function (mod){ //[HyperMD] UMD patched!
10+
/*commonjs*/ ("object"==typeof exports&&"undefined"!=typeof module) ? mod(null, exports, require("../addon/hover"), require("marked")) :
11+
/*amd*/ ("function"==typeof define&&define.amd) ? define(["require","exports","../addon/hover","marked"], mod) :
12+
/*plain env*/ mod(null, (this.HyperMD_PowerPack = this.HyperMD_PowerPack || {}, this.HyperMD_PowerPack["hover-with-marked"] = {}), HyperMD.Hover, marked);
13+
})(function (require, exports, hover_1, marked) {
14+
"use strict";
15+
Object.defineProperty(exports, "__esModule", { value: true });
16+
if (typeof marked == "function") {
17+
// Use marked to render Hover tooltip content
18+
hover_1.defaultOption.convertor = function (footnote, text) {
19+
if (!text)
20+
return null;
21+
return marked(text);
22+
};
23+
}
24+
else {
25+
console.error("[HyperMD] PowerPack hover-with-marked loaded, but marked not found.");
26+
}
27+
});

0 commit comments

Comments
 (0)