Better markdown (#139)

* Username, room and code markdown

* Block code working

app/containers/message/Markdown.js

@@ -1,18 +1,127 @@
 import React from 'react';
+import { Text, Platform } from 'react-native';
 import PropTypes from 'prop-types';
 import EasyMarkdown from 'react-native-easy-markdown'; // eslint-disable-line
+import SimpleMarkdown from 'simple-markdown';
 import { emojify } from 'react-emojione';
 
+const codeStyle = {
+	...Platform.select({
+		ios: { fontFamily: 'Courier New' },
+		android: { fontFamily: 'monospace' }
+	}),
+	backgroundColor: '#f8f8f8',
+	borderColor: '#cccccc',
+	borderWidth: 1,
+	borderRadius: 5,
+	padding: 5
+};
+
+const BlockCode = ({ node, state }) => (
+	<Text
+		key={state.key}
+		style={codeStyle}
+	>
+		{node.content}
+	</Text>
+);
+
+const rules = {
+	username: {
+		order: -1,
+		match: SimpleMarkdown.inlineRegex(/@[0-9a-zA-Z-_.]+/),
+		parse: capture => ({ content: capture[0] }),
+		react: (node, output, state) => ({
+			type: 'custom',
+			key: state.key,
+			props: {
+				children: (
+					<Text
+						key={state.key}
+						style={{ color: '#13679a' }}
+						onPress={() => alert('Username')}
+					>
+						{node.content}
+					</Text>
+				)
+			}
+		})
+	},
+	heading: {
+		order: -2,
+		match: SimpleMarkdown.inlineRegex(/#[0-9a-zA-Z-_.]+/),
+		parse: capture => ({ content: capture[0] }),
+		react: (node, output, state) => ({
+			type: 'custom',
+			key: state.key,
+			props: {
+				children: (
+					<Text
+						key={state.key}
+						style={{ color: '#13679a' }}
+						onPress={() => alert('Room')}
+					>
+						{node.content}
+					</Text>
+				)
+			}
+		})
+	},
+	fence: {
+		order: -5,
+		match: SimpleMarkdown.blockRegex(/^ *(`{3,}|~{3,}) *(\S+)? *\n([\s\S]+?)\s*\1 *(?:\n *)+\n/),
+		parse: capture => ({
+			lang: capture[2] || undefined,
+			content: capture[3]
+		}),
+		react: (node, output, state) => ({
+			type: 'custom',
+			key: state.key,
+			props: {
+				children: (
+					<BlockCode key={state.key} node={node} state={state} />
+				)
+			}
+		})
+	},
+	blockCode: {
+		order: -6,
+		match: SimpleMarkdown.blockRegex(/^(```)\s*([\s\S]*?[^`])\s*\1(?!```)/),
+		parse: capture => ({ content: capture[2] }),
+		react: (node, output, state) => ({
+			type: 'custom',
+			key: state.key,
+			props: {
+				children: (
+					<BlockCode key={state.key} node={node} state={state} />
+				)
+			}
+		})
+	}
+};
+
 const Markdown = ({ msg }) => {
 	if (!msg) {
 		return null;
 	}
 	msg = emojify(msg, { output: 'unicode' });
-	return <EasyMarkdown>{msg}</EasyMarkdown>;
+	return (
+		<EasyMarkdown
+			style={{ marginBottom: 0 }}
+			rules={rules}
+			markdownStyles={{ code: codeStyle }}
+		>{msg}
+		</EasyMarkdown>
+	);
 };
 
 Markdown.propTypes = {
 	msg: PropTypes.string.isRequired
 };
 
+BlockCode.propTypes = {
+	node: PropTypes.object,
+	state: PropTypes.object
+};
+
 export default Markdown;

package-lock.json

@@ -12302,9 +12302,16 @@
       }
     },
     "react-native-easy-markdown": {
-      "version": "git+https://github.com/lappalj4/react-native-easy-markdown.git#4d0db3e62ec8994cf5ab8afa4de7da7e24d16f4a",
+      "version": "git+https://github.com/diegolmello/react-native-easy-markdown.git#ed1afe45f870524f6c23a4ca1df97770f0979c74",
       "requires": {
         "simple-markdown": "0.1.2"
+      },
+      "dependencies": {
+        "simple-markdown": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/simple-markdown/-/simple-markdown-0.1.2.tgz",
+          "integrity": "sha1-PBUQ/kC9nqBncXuKUzyc82MltBM="
+        }
       }
     },
     "react-native-fetch-blob": {
@@ -13501,9 +13508,9 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
     "simple-markdown": {
-      "version": "0.1.2",
+      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/simple-markdown/-/simple-markdown-0.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/simple-markdown/-/simple-markdown-0.3.1.tgz",
-      "integrity": "sha1-PBUQ/kC9nqBncXuKUzyc82MltBM="
+      "integrity": "sha512-deShqkf7SMufWVbVRrUmUt0vdJ1dVWV4XC1NPzCdymKpVvQyLVz+TjmXXqu6fhmJP9iyw14pksz40jGSLDP5fQ=="
     },
     "simple-plist": {
       "version": "0.2.1",

package.json

@@ -21,6 +21,7 @@
     ]
   },
   "dependencies": {
+    "@storybook/react-native": "^3.2.15",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-remove-console": "^6.8.5",
     "babel-polyfill": "^6.26.0",
@@ -33,7 +34,7 @@
     "react-native-action-button": "^2.8.3",
     "react-native-actionsheet": "^2.3.0",
     "react-native-animatable": "^1.2.4",
-    "react-native-easy-markdown": "git+https://github.com/lappalj4/react-native-easy-markdown.git",
+    "react-native-easy-markdown": "git+https://github.com/diegolmello/react-native-easy-markdown.git",
     "react-native-fetch-blob": "^0.10.8",
     "react-native-image-picker": "^0.26.7",
     "react-native-img-cache": "^1.5.2",
@@ -60,7 +61,7 @@
     "redux-saga": "^0.16.0",
     "regenerator-runtime": "^0.11.0",
     "remote-redux-devtools": "^0.5.12",
-    "@storybook/react-native": "^3.2.15",
+    "simple-markdown": "^0.3.1",
     "snyk": "^1.41.1",
     "strip-ansi": "^4.0.0"
   },