feat: render Markdown in notification messages

sourcegraph · Oct 29, 2018 · f96ed8d · f96ed8d
1 parent 63f76c5
commit f96ed8d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
     "@slimsag/react-shortcuts": "^1.2.0",
     "bootstrap": "^4.1.3",
     "lodash-es": "^4.17.10",
+    "marked": "^0.5.1",
     "react": "^16.4.2",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
@@ -79,6 +80,7 @@
     "@sourcegraph/tslint-config": "^12.0.0",
     "@sqs/jsonc-parser": "^1.0.3",
     "@types/lodash-es": "^4.17.1",
+    "@types/marked": "^0.4.2",
     "@types/mocha": "^5.2.5",
     "@types/node": "^10.9.4",
     "@types/react": "^16.4.13",

diff --git a/src/app/notifications/NotificationItem.css b/src/app/notifications/NotificationItem.css
@@ -6,7 +6,10 @@
 
 .notification-item__content {
     flex: 1;
-    display: flex;
+}
+
+.notification-item__content > :last-child {
+    margin-bottom: 0;
 }
 
 .notification-item__close {

diff --git a/src/app/notifications/NotificationItem.tsx b/src/app/notifications/NotificationItem.tsx
@@ -1,4 +1,4 @@
-import { upperFirst } from 'lodash-es'
+import marked from 'marked'
 import * as React from 'react'
 import { MessageType } from 'sourcegraph/module/protocol'
 import { isErrorLike } from '../../errors'
@@ -15,18 +15,21 @@ interface Props {
  */
 export class NotificationItem extends React.PureComponent<Props> {
     public render(): JSX.Element | null {
+        const markdownHTML = marked(
+            isErrorLike(this.props.notification.message)
+                ? this.props.notification.message.message
+                : this.props.notification.message,
+            { gfm: true, breaks: true, sanitize: true }
+        )
         return (
             <div
                 className={`notification-item alert alert-${alertClass(this.props.notification.type)} p-0 ${this.props
                     .className || ''}`}
             >
-                <div className="notification-item__content py-2 pl-2 pr-0">
-                    {upperFirst(
-                        isErrorLike(this.props.notification.message)
-                            ? this.props.notification.message.message
-                            : this.props.notification.message
-                    )}
-                </div>
+                <div
+                    className="notification-item__content py-2 pl-2 pr-0"
+                    dangerouslySetInnerHTML={{ __html: markdownHTML }}
+                />
                 <button
                     type="button"
                     className="notification-item__close p-2"

diff --git a/yarn.lock b/yarn.lock
@@ -396,6 +396,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.116.tgz#5ccf215653e3e8c786a58390751033a9adca0eb9"
   integrity sha512-lRnAtKnxMXcYYXqOiotTmJd74uawNWuPnsnPrrO7HiFuE3npE2iQhfABatbYDyxTNqZNuXzcKGhw37R7RjBFLg==
 
+"@types/marked@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.4.2.tgz#64a89e53ea37f61cc0f3ee1732c555c2dbf6452f"
+  integrity sha512-cDB930/7MbzaGF6U3IwSQp6XBru8xWajF5PV2YZZeV8DyiliTuld11afVztGI9+yJZ29il5E+NpGA6ooV/Cjkg==
+
 "@types/mocha@^5.2.5":
   version "5.2.5"
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.5.tgz#8a4accfc403c124a0bafe8a9fc61a05ec1032073"
@@ -3506,6 +3511,11 @@ marked@^0.5.0:
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.5.0.tgz#9e590bad31584a48ff405b33ab1c0dd25172288e"
   integrity sha512-UhjmkCWKu1SS/BIePL2a59BMJ7V42EYtTfksodPRXzPEGEph3Inp5dylseqt+KbU9Jglsx8xcMKmlumfJMBXAA==
 
+marked@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.5.1.tgz#062f43b88b02ee80901e8e8d8e6a620ddb3aa752"
+  integrity sha512-iUkBZegCZou4AdwbKTwSW/lNDcz5OuRSl3qdcl31Ia0B2QPG0Jn+tKblh/9/eP9/6+4h27vpoh8wel/vQOV0vw==
+
 md5-hex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/md5-hex/-/md5-hex-2.0.0.tgz#d0588e9f1c74954492ecd24ac0ac6ce997d92e33"