feat: markdown support added

package.json

@@ -28,6 +28,7 @@
     "@svgr/webpack": "^5.1.0",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
+    "@types/showdown": "^1.9.3",
     "@types/styled-components": "^4.4.2",
     "@types/twemoji": "^12.1.0",
     "@types/uuid": "^3.4.7",
@@ -66,6 +67,7 @@
     "react-apollo": "^3.1.3",
     "react-dom": "^16.12.0",
     "react-feather": "^2.0.3",
+    "showdown": "^1.9.1",
     "styled-components": "^5.0.0",
     "uuid": "^3.4.0"
   },

src/Chat/components/Emojify.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { parse } from 'twemoji'
 import styled from 'styled-components'
 
-const Twemoji = styled.span`
+export const WithTwemoji = styled.span`
 	img.emoji {
 		height: 1em;
 		width: 1em;
@@ -11,13 +11,16 @@ const Twemoji = styled.span`
 	}
 `
 
+export const convert = (text: string) =>
+	parse(text, {
+		folder: 'svg',
+		ext: '.svg',
+	})
+
 export const emojify = (text: string) => (
-	<Twemoji
+	<WithTwemoji
 		dangerouslySetInnerHTML={{
-			__html: parse(text, {
-				folder: 'svg',
-				ext: '.svg',
-			}),
+			__html: convert(text),
 		}}
 	/>
 )

src/Chat/components/Markdownify.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { Converter } from 'showdown'
+import { convert, WithTwemoji } from './Emojify'
+import styled from 'styled-components'
+
+// See https://github.com/showdownjs/showdown#valid-options
+const converter = new Converter({
+	simplifiedAutoLink: true,
+	excludeTrailingPunctuationFromURLs: true,
+	strikethrough: true,
+	ghCodeBlocks: false,
+	simpleLineBreaks: true,
+	openLinksInNewWindow: true,
+})
+
+const FromMarkdown = styled(WithTwemoji)`
+	p {
+		padding: 0.5rem;
+		margin: 0;
+	}
+	code {
+		color: inherit;
+		padding: 0.15rem;
+		border-radius: 4px;
+		font-weight: bold;
+		text-shadow: 1px 1px 2px #000000dd;
+	}
+	img {
+		max-width: 100%;
+	}
+`
+
+export const markdownify = (text: string) => (
+	<FromMarkdown
+		dangerouslySetInnerHTML={{
+			__html: converter.makeHtml(convert(text)),
+		}}
+	/>
+)