Skip to content

Commit 8b6fe75

Browse files
doomsowerdoomsower
committed
Add styles property for easier overriding of styles
1 parent 1fb0134 commit 8b6fe75

File tree

5 files changed

+115
-84
lines changed

5 files changed

+115
-84
lines changed

‎index.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
* Base Markdown component
33
* @author Mient-jan Stelling
44
*/
5-
import React, { Component, PropTypes } from 'react';
5+
import React, { Component } from 'react';
6+
import PropTypes from 'prop-types';
67
import { View } from 'react-native';
78
import { parser, stringToTokens, tokensToAST } from './lib/parser';
89
import defaultRenderFunctions from './lib/defaultRenderFunctions';
@@ -24,6 +25,7 @@ export default class Markdown extends Component {
2425
children: PropTypes.node.isRequired,
2526
renderer: PropTypes.instanceOf(AstRenderer),
2627
plugins: PropTypes.arrayOf(PropTypes.instanceOf(PluginContainer)),
28+
styles: PropTypes.any
2729
};
2830

2931
/**
@@ -32,6 +34,7 @@ export default class Markdown extends Component {
3234
static defaultProps = {
3335
renderer: new AstRenderer(defaultRenderFunctions),
3436
plugins: [],
37+
styles: {},
3538
};
3639

3740
copy = '';
@@ -80,8 +83,8 @@ export default class Markdown extends Component {
8083
*/
8184
render() {
8285
const copy = (this.copy = this.getCopyFromProps());
83-
const { renderer } = this.props;
84-
85-
return parser(copy, renderer, this.md);
86+
const { renderer, styles } = this.props;
87+
const asttree = parser(copy, this.md);
88+
return renderer.render(asttree, styles);
8689
}
8790
}

‎lib/AstRenderer.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ let uuid = new Date().getTime();
77
*/
88
export default class AstRenderer {
99
/**
10-
*
10+
*
1111
* @return {string}
1212
*/
1313
static getUniqueID() {
@@ -48,35 +48,36 @@ export default class AstRenderer {
4848
*
4949
* @param node
5050
* @param parentNodes
51+
* @param styles
5152
* @return {*}
5253
*/
53-
renderNode = (node, parentNodes) => {
54+
renderNode = (node, parentNodes, styles) => {
5455
const renderFunction = this.getRenderFunction(node.type);
5556

56-
const parents = [...parentNodes];
57-
parents.unshift(node);
57+
const parents = [node, ...parentNodes];
5858

5959
if (node.type === 'text') {
60-
return renderFunction(node, [], parentNodes);
60+
return renderFunction(node, [], parentNodes, styles);
6161
}
6262

6363
const children = node.children.map(value => {
64-
return this.renderNode(value, parents);
64+
return this.renderNode(value, parents, styles);
6565
});
6666

67-
return renderFunction(node, children, parentNodes);
67+
return renderFunction(node, children, parentNodes, styles);
6868
};
6969

7070
/**
7171
*
7272
* @param nodes
73+
* @param styles
7374
* @return {*}
7475
*/
75-
render = nodes => {
76+
render = (nodes, styles) => {
7677
const children = nodes.map(value => {
77-
return this.renderNode(value, []);
78+
return this.renderNode(value, [], styles);
7879
});
7980
const renderFunction = this.getRenderFunction('root');
80-
return renderFunction(children);
81+
return renderFunction(children, styles);
8182
};
8283
}

‎lib/defaultRenderFunctions.js‎

Lines changed: 80 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import AstRenderer from './AstRenderer';
77

88
const defaultRenderFunctions = {
99
// when unknown elements are introduced, so it wont break
10-
unknown: (node, children, parents) => {
10+
unknown: (node, children, parents, styles) => {
1111
return (
1212
<View key={AstRenderer.getUniqueID()}>
1313
{children}
@@ -16,122 +16,138 @@ const defaultRenderFunctions = {
1616
},
1717

1818
// `root` is a special case.
19-
root: children =>
20-
<View key={AstRenderer.getUniqueID()}>
19+
root: (children, styles) =>
20+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.view, styles.view]}>
2121
{children}
2222
</View>,
23-
text: (node, children, parents) => {
23+
text: (node, children, parents, styles) => {
2424
return (
25-
<Text key={AstRenderer.getUniqueID()} style={markdownStyles.text}>
25+
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.text, styles.text]}>
2626
{node.content}
2727
</Text>
2828
);
2929
},
30-
span: (node, children, parents) =>
31-
<Text key={AstRenderer.getUniqueID()}>
30+
span: (node, children, parents, styles) =>
31+
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.span, styles.span]}>
3232
{children}
3333
</Text>,
3434

35-
strong: (node, children, parents) => {
35+
strong: (node, children, parents, styles) => {
3636
return (
37-
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.strong]}>
37+
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.strong, styles.strong]}>
3838
{children}
3939
</Text>
4040
);
4141
},
4242

43-
s: (node, children, parents) => {
43+
s: (node, children, parents, styles) => {
4444
return (
45-
<Text style={markdownStyles.strikethrough}>
45+
<Text style={[markdownStyles.strikethrough, styles.strikethrough]}>
4646
{children}
4747
</Text>
4848
);
4949
},
50-
a: (node, children, parents) => {
50+
a: (node, children, parents, styles) => {
5151
return (
52-
<Text style={markdownStyles.a} onPress={() => AstRenderer.openUrl(node.attributes.href)}>
52+
<Text style={[markdownStyles.a, styles.a]} onPress={() => AstRenderer.openUrl(node.attributes.href)}>
5353
{children}
5454
</Text>
5555
);
5656
},
57-
em: (node, children, parents) => {
57+
em: (node, children, parents, styles) => {
5858
return (
59-
<Text key={AstRenderer.getUniqueID()} style={markdownStyles.em}>
59+
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.em, styles.em]}>
6060
{children}
6161
</Text>
6262
);
6363
},
6464

65-
h1: (node, children, parents) =>
66-
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.heading, markdownStyles.heading1]}>
65+
h1: (node, children, parents, styles) =>
66+
<Text
67+
key={AstRenderer.getUniqueID()}
68+
style={[markdownStyles.heading, styles.heading, markdownStyles.heading1, styles.heading1]}>
6769
{children}
6870
</Text>,
69-
h2: (node, children, parents) =>
70-
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.heading, markdownStyles.heading2]}>
71+
h2: (node, children, parents, styles) =>
72+
<Text
73+
key={AstRenderer.getUniqueID()}
74+
style={[markdownStyles.heading, styles.heading, markdownStyles.heading2, styles.heading2]}
75+
>
7176
{children}
7277
</Text>,
73-
h3: (node, children, parents) =>
74-
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.heading, markdownStyles.heading3]}>
78+
h3: (node, children, parents, styles) =>
79+
<Text
80+
key={AstRenderer.getUniqueID()}
81+
style={[markdownStyles.heading, styles.heading, markdownStyles.heading3, styles.heading3]}
82+
>
7583
{children}
7684
</Text>,
77-
h4: (node, children, parents) =>
78-
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.heading, markdownStyles.heading4]}>
85+
h4: (node, children, parents, styles) =>
86+
<Text
87+
key={AstRenderer.getUniqueID()}
88+
style={[markdownStyles.heading, styles.heading, markdownStyles.heading4, styles.heading4]}
89+
>
7990
{children}
8091
</Text>,
81-
h5: (node, children, parents) =>
82-
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.heading, markdownStyles.heading5]}>
92+
h5: (node, children, parents, styles) =>
93+
<Text
94+
key={AstRenderer.getUniqueID()}
95+
style={[markdownStyles.heading, styles.heading, markdownStyles.heading5, styles.heading5]}>
8396
{children}
8497
</Text>,
85-
h6: (node, children, parents) =>
86-
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.heading, markdownStyles.heading6]}>
98+
h6: (node, children, parents, styles) =>
99+
<Text
100+
key={AstRenderer.getUniqueID()}
101+
style={[markdownStyles.heading, styles.heading, markdownStyles.heading6, styles.heading6]}
102+
>
87103
{children}
88104
</Text>,
89105

90-
p: (node, children, parents) =>
91-
<View key={AstRenderer.getUniqueID()} style={markdownStyles.paragraph}>
106+
p: (node, children, parents, styles) =>
107+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.paragraph, styles.paragraph]}>
92108
{children}
93109
</View>,
94110

95-
blockquote: (node, children, parents) =>
96-
<View key={AstRenderer.getUniqueID()} style={markdownStyles.blockquote}>
111+
blockquote: (node, children, parents, styles) =>
112+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.blockquote, styles.blockquote]}>
97113
{children}
98114
</View>,
99-
code: (node, children, parents) =>
100-
<View key={AstRenderer.getUniqueID()} style={markdownStyles.code}>
115+
code: (node, children, parents, styles) =>
116+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.code, styles.code]}>
101117
{children}
102118
</View>,
103-
pre: (node, children, parents) =>
104-
<View key={AstRenderer.getUniqueID()} style={markdownStyles.pre}>
119+
pre: (node, children, parents, styles) =>
120+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.pre, styles.pre]}>
105121
{children}
106122
</View>,
107-
ul: (node, children, parents) => {
123+
ul: (node, children, parents, styles) => {
108124
return (
109125
<View
110126
key={AstRenderer.getUniqueID()}
111-
style={[markdownStyles.list, markdownStyles.listUnordered]}
127+
style={[markdownStyles.list, styles.list, markdownStyles.listUnordered, styles.listUnordered]}
112128
>
113129
{children}
114130
</View>
115131
);
116132
},
117-
ol: (node, children, parents) => {
133+
ol: (node, children, parents, styles) => {
118134
return (
119135
<View
120136
key={AstRenderer.getUniqueID()}
121-
style={[markdownStyles.list, markdownStyles.listOrdered]}
137+
style={[markdownStyles.list, styles.list, markdownStyles.listOrdered, styles.listOrdered]}
122138
>
123139
{children}
124140
</View>
125141
);
126142
},
127-
li: (node, children, parents) => {
143+
li: (node, children, parents, styles) => {
128144
if (AstRenderer.hasParents(parents, 'ul')) {
129145
return (
130-
<View key={AstRenderer.getUniqueID()} style={markdownStyles.listUnorderedItem}>
131-
<Text style={{ marginLeft: -10, marginRight: 10, lineHeight: 40 }}>
146+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.listUnorderedItem, styles.listUnorderedItem]}>
147+
<Text style={[markdownStyles.listUnorderedDot, styles.listUnorderedDot]}>
132148
{'\u00B7'}
133149
</Text>
134-
<View style={[markdownStyles.listItem]}>
150+
<View style={[markdownStyles.listItem, styles.listItem]}>
135151
{children}
136152
</View>
137153
</View>
@@ -140,64 +156,64 @@ const defaultRenderFunctions = {
140156

141157
if (AstRenderer.hasParents(parents, 'ol')) {
142158
return (
143-
<View key={AstRenderer.getUniqueID()} style={markdownStyles.listOrderedItem}>
144-
<Text style={{ width: 20, lineHeight: 40 }}>
159+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.listOrderedItem, styles.listOrderedItem]}>
160+
<Text style={[markdownStyles.listOrderedIndex, styles.listOrderedIndex]}>
145161
{node.index + 1}
146162
</Text>
147-
<View style={[markdownStyles.listItem]}>
163+
<View style={[markdownStyles.listItem, styles.listItem]}>
148164
{children}
149165
</View>
150166
</View>
151167
);
152168
}
153169

154170
return (
155-
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.listItem]}>
171+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.listItem, styles.listItem]}>
156172
{children}
157173
</View>
158174
);
159175
},
160-
table: (node, children, parents) =>
161-
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.table]}>
176+
table: (node, children, parents, styles) =>
177+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.table, styles.table]}>
162178
{children}
163179
</View>,
164-
thead: (node, children, parents) =>
165-
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.tableHeader]}>
180+
thead: (node, children, parents, styles) =>
181+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.tableHeader, styles.tableHeader]}>
166182
{children}
167183
</View>,
168-
tbody: (node, children, parents) =>
169-
<View key={AstRenderer.getUniqueID()}>
184+
tbody: (node, children, parents, styles) =>
185+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.tableBody, styles.tableBody]}>
170186
{children}
171187
</View>,
172-
th: (node, children, parents) => {
188+
th: (node, children, parents, styles) => {
173189
return (
174-
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.tableHeaderCell]}>
190+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.tableHeaderCell, styles.tableHeaderCell]}>
175191
{children}
176192
</View>
177193
);
178194
},
179-
tr: (node, children, parents) => {
195+
tr: (node, children, parents, styles) => {
180196
return (
181-
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.tableRow]}>
197+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.tableRow, styles.tableRow]}>
182198
{children}
183199
</View>
184200
);
185201
},
186-
td: (node, children, parents) => {
202+
td: (node, children, parents, styles) => {
187203
return (
188-
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.tableRowCell]}>
204+
<View key={AstRenderer.getUniqueID()} style={[markdownStyles.tableRowCell, styles.tableRowCell]}>
189205
{children}
190206
</View>
191207
);
192208
},
193-
hr: (node, children, parents) => {
194-
return <View key={AstRenderer.getUniqueID()} style={[markdownStyles.hr]} />;
209+
hr: (node, children, parents, styles) => {
210+
return <View key={AstRenderer.getUniqueID()} style={[markdownStyles.hr, styles.hr]} />;
195211
},
196-
br: (node, children, parents) =>
197-
<Text key={AstRenderer.getUniqueID()}>
212+
br: (node, children, parents, styles) =>
213+
<Text key={AstRenderer.getUniqueID()} style={[markdownStyles.br, styles.br]} >
198214
{'\n'}
199215
</Text>,
200-
img: (node, children, parents) => {
216+
img: (node, children, parents, styles) => {
201217
return <FitImage key={AstRenderer.getUniqueID()} source={{ uri: node.attributes.src }} />;
202218
},
203219
};

‎lib/parser.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,15 +92,12 @@ function stringToTokens(source, md) {
9292
/**
9393
*
9494
* @param {string} source
95-
* @param {AstRenderer} [renderer]
9695
* @param {AstRenderer} [markdownIt]
9796
* @return {View}
9897
*/
99-
function parser(source, renderer, markdownIt = md) {
98+
function parser(source, markdownIt = md) {
10099
const tokens = stringToTokens(source, markdownIt);
101-
const asttree = tokensToAST(tokens);
102-
103-
return <View>{renderer.render(asttree)}</View>;
100+
return tokensToAST(tokens);
104101
}
105102

106103
export {

0 commit comments

Comments
 (0)