From e9bbe17fa4f1eec94b742d31f1e760423b1635a8 Mon Sep 17 00:00:00 2001
From: Jannis Mattheis <contact@jmattheis.de>
Date: Sat, 30 Mar 2019 11:08:51 +0100
Subject: [PATCH] Allow markdown in messages (#180)

---
 docs/spec.json                      |  4 ++--
 model/message.go                    |  4 ++--
 ui/package-lock.json                | 11 +++++++++++
 ui/package.json                     |  2 ++
 ui/src/message/Message.tsx          | 15 +++++++++++++--
 ui/src/snack/browserNotification.ts |  3 ++-
 6 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/docs/spec.json b/docs/spec.json
index de94c279..16e97576 100644
--- a/docs/spec.json
+++ b/docs/spec.json
@@ -2021,10 +2021,10 @@
           "example": 25
         },
         "message": {
-          "description": "The actual message.",
+          "description": "The message. Markdown (excluding html) is allowed.",
           "type": "string",
           "x-go-name": "Message",
-          "example": "Backup was successfully finished."
+          "example": "**Backup** was successfully finished."
         },
         "priority": {
           "description": "The priority of the message.",
diff --git a/model/message.go b/model/message.go
index 83a73273..93120902 100644
--- a/model/message.go
+++ b/model/message.go
@@ -33,10 +33,10 @@ type MessageExternal struct {
 	// required: true
 	// example: 5
 	ApplicationID uint `json:"appid"`
-	// The actual message.
+	// The message. Markdown (excluding html) is allowed.
 	//
 	// required: true
-	// example: Backup was successfully finished.
+	// example: **Backup** was successfully finished.
 	Message string `form:"message" query:"message" json:"message" binding:"required"`
 	// The title of the message.
 	//
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 9cbe2867..47944da9 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -344,6 +344,12 @@
         "@types/react": "*"
       }
     },
+    "@types/remove-markdown": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@types/remove-markdown/-/remove-markdown-0.1.1.tgz",
+      "integrity": "sha512-SCYOFMHUqyiJU5M0V2gBB6UDdBhPwma34j0vYX0JgWaqp/74ila2Ops1jt5tB/C1UQXVXqK+is61884bITn3LQ==",
+      "dev": true
+    },
     "@types/rimraf": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/rimraf/-/rimraf-2.0.2.tgz",
@@ -11321,6 +11327,11 @@
         "xtend": "^4.0.1"
       }
     },
+    "remove-markdown": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/remove-markdown/-/remove-markdown-0.3.0.tgz",
+      "integrity": "sha1-XktmdJOpNXlyjz1S7MHbnKUF3Jg="
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index e5039870..d4c25e9a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -23,6 +23,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-timeago": "^4.1.9",
+    "remove-markdown": "^0.3.0",
     "typeface-roboto": "0.0.54"
   },
   "scripts": {
@@ -49,6 +50,7 @@
     "@types/react-dom": "^16.0.7",
     "@types/react-infinite": "0.0.33",
     "@types/react-router-dom": "^4.3.0",
+    "@types/remove-markdown": "^0.1.1",
     "@types/rimraf": "^2.0.2",
     "get-port": "^4.0.0",
     "prettier": "^1.14.2",
diff --git a/ui/src/message/Message.tsx b/ui/src/message/Message.tsx
index 0215ade4..cf5defd4 100644
--- a/ui/src/message/Message.tsx
+++ b/ui/src/message/Message.tsx
@@ -7,6 +7,7 @@ import TimeAgo from 'react-timeago';
 import Container from '../common/Container';
 import * as config from '../config';
 import {StyleRulesCallback} from '@material-ui/core/styles/withStyles';
+import ReactMarkdown from 'react-markdown';
 
 const styles: StyleRulesCallback = () => ({
     header: {
@@ -24,6 +25,7 @@ const styles: StyleRulesCallback = () => ({
     },
     messageContentWrapper: {
         width: '100%',
+        maxWidth: 585,
     },
     image: {
         marginRight: 15,
@@ -33,6 +35,15 @@ const styles: StyleRulesCallback = () => ({
     },
     content: {
         whiteSpace: 'pre-wrap',
+        '& p': {
+            margin: 0,
+        },
+        '& a': {
+            color: '#ff7f50',
+        },
+        '& pre': {
+            overflow: 'auto',
+        },
     },
 });
 
@@ -81,8 +92,8 @@ class Message extends React.PureComponent<IProps & WithStyles<typeof styles>> {
                                 <Delete />
                             </IconButton>
                         </div>
-                        <Typography component="p" className={`${classes.content} content`}>
-                            {content}
+                        <Typography component="div" className={`${classes.content} content`}>
+                            <ReactMarkdown source={content} escapeHtml={true} />
                         </Typography>
                     </div>
                 </Container>
diff --git a/ui/src/snack/browserNotification.ts b/ui/src/snack/browserNotification.ts
index 7bdb5b37..0210b3ed 100644
--- a/ui/src/snack/browserNotification.ts
+++ b/ui/src/snack/browserNotification.ts
@@ -1,4 +1,5 @@
 import Notify from 'notifyjs';
+import removeMarkdown from 'remove-markdown';
 
 export function requestPermission() {
     if (Notify.needsPermission && Notify.isSupported()) {
@@ -11,7 +12,7 @@ export function requestPermission() {
 
 export function notifyNewMessage(msg: IMessage) {
     const notify = new Notify(msg.title, {
-        body: msg.message,
+        body: removeMarkdown(msg.message),
         icon: msg.image,
         notifyClick: closeAndFocus,
         notifyShow: closeAfterTimeout,