(#14) Enable support for Markdown in Event's description

Author: rexim

package-lock.json

@@ -12,9 +12,11 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@types/markdown-it": "0.0.7",
     "@types/moment": "^2.13.0",
     "@types/moment-timezone": "^0.5.6",
     "browserify": "^16.2.2",
+    "markdown-it": "^8.4.2",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.20",
     "sass": "^1.9.0",

package.json

@@ -33,7 +33,7 @@ export default class CancelledEvent implements UiComponent {
                     {"class": "channel"}
                 ),
                 new html.Div(
-                    new html.InnerHtml(`${this._event.description}`),
+                    new html.Markdown(`${this._event.description}`),
                     {"class": "description markdown"}
                 ),
                 new html.Div(

ts/CancelledEvent.ts

@@ -44,7 +44,7 @@ export default class CurrentEvent implements UiComponent {
                     {"class": "channel"}
                 ),
                 new html.Div(
-                    new html.InnerHtml(`${this._event.description}`),
+                    new html.Markdown(`${this._event.description}`),
                     {"class": "description markdown"}
                 )
             ]),

ts/CurrentEvent.ts

@@ -33,7 +33,7 @@ export default class FutureEvent implements UiComponent {
                     {"class": "channel"}
                 ),
                 new html.Div(
-                    new html.InnerHtml(`${this._event.description}`),
+                    new html.Markdown(`${this._event.description}`),
                     {"class": "description markdown"}
                 )
             ]),

ts/FutureEvent.ts

@@ -33,7 +33,7 @@ export default class PastEvent implements UiComponent {
                     {"class": "channel"}
                 ),
                 new html.Div(
-                    new html.InnerHtml(`${this._event.description}`),
+                    new html.Markdown(`${this._event.description}`),
                     {"class": "description markdown"}
                 )
             ]),

ts/PastEvent.ts

@@ -0,0 +1,17 @@
+import * as MarkdownIt from 'markdown-it';
+import InnerHtml from './InnerHtml';
+import UiComponent from '../UiComponent';
+
+export default class Markdown implements UiComponent {
+    constructor(private _text: string) {
+    }
+
+    appendTo(entry: HTMLElement | null): void {
+        new InnerHtml(
+            new MarkdownIt({
+                html: true,
+                linkify: true
+            }).render(this._text)
+        ).appendTo(entry)
+    }
+}

ts/html/Markdown.ts

@@ -5,3 +5,4 @@ export { default as Href } from './Href';
 export { default as Tag } from './Tag';
 export { default as Text } from './Text';
 export { default as InnerHtml } from './InnerHtml';
+export { default as Markdown } from './Markdown';