From e4212ee6decbb53a62e3d888f8d4c5ca218e508a Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Thu, 14 Dec 2017 16:12:38 -0200 Subject: [PATCH] Better markdown (#139) * Username, room and code markdown * Block code working --- app/containers/message/Markdown.js | 111 ++++++++++++++++++++++++++++- package-lock.json | 15 ++-- package.json | 5 +- 3 files changed, 124 insertions(+), 7 deletions(-) diff --git a/app/containers/message/Markdown.js b/app/containers/message/Markdown.js index 58739eec..bb6ab1e6 100644 --- a/app/containers/message/Markdown.js +++ b/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 }) => ( + + {node.content} + +); + +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: ( + alert('Username')} + > + {node.content} + + ) + } + }) + }, + 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: ( + alert('Room')} + > + {node.content} + + ) + } + }) + }, + 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: { + 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: ( + + ) + } + }) + } +}; + const Markdown = ({ msg }) => { if (!msg) { return null; } msg = emojify(msg, { output: 'unicode' }); - return {msg}; + return ( + {msg} + + ); }; Markdown.propTypes = { msg: PropTypes.string.isRequired }; +BlockCode.propTypes = { + node: PropTypes.object, + state: PropTypes.object +}; + export default Markdown; diff --git a/package-lock.json b/package-lock.json index 0b0350b4..0f03eaf0 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/simple-markdown/-/simple-markdown-0.1.2.tgz", - "integrity": "sha1-PBUQ/kC9nqBncXuKUzyc82MltBM=" + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/simple-markdown/-/simple-markdown-0.3.1.tgz", + "integrity": "sha512-deShqkf7SMufWVbVRrUmUt0vdJ1dVWV4XC1NPzCdymKpVvQyLVz+TjmXXqu6fhmJP9iyw14pksz40jGSLDP5fQ==" }, "simple-plist": { "version": "0.2.1", diff --git a/package.json b/package.json index 5c3429de..e4b9eb2d 100644 --- a/package.json +++ b/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" },