Better markdown (#139)
* Username, room and code markdown * Block code working
This commit is contained in:
Diego Mello
Guilherme Gazzo
parent
7ea98f1337
commit
e4212ee6de
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue