Skip to content

Commit 0c8549d

Browse files
authored
add font style for android (#31)
* add font style for android * add background color for codeBlock
1 parent 8eaefad commit 0c8549d

File tree

3 files changed

+244
-245
lines changed

3 files changed

+244
-245
lines changed

index.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { Component } from 'react';
2-
import { View, ViewPropTypes } from 'react-native';
3-
import { merge, isEqual, isArray } from 'lodash';
1+
import React, {Component} from 'react';
2+
import {View, ViewPropTypes} from 'react-native';
3+
import {merge, isEqual, isArray} from 'lodash';
44
import PropTypes from 'prop-types';
55
import SimpleMarkdown from 'simple-markdown';
66
import styles from './styles';
@@ -28,7 +28,7 @@ class Markdown extends Component {
2828
rules = merge({}, SimpleMarkdown.defaultRules, rules, opts.rules);
2929

3030
const parser = SimpleMarkdown.parserFor(rules);
31-
this.parse = function(source) {
31+
this.parse = function (source) {
3232
const blockSource = source + '\n\n';
3333
return parser(blockSource, {inline: false});
3434
};
@@ -46,13 +46,13 @@ class Markdown extends Component {
4646
}
4747

4848
render() {
49-
const child = isArray(this.props.children)
50-
? this.props.children.join('')
51-
: this.props.children;
49+
const child = isArray(this.props.children)
50+
? this.props.children.join('')
51+
: this.props.children;
5252

5353
const tree = this.parse(child);
5454

55-
return <View style={[styles.view, this.props.styles.view]}>{ this.renderer(tree) }</View>
55+
return <View style={[styles.view, this.props.styles.view]}>{this.renderer(tree)}</View>
5656
}
5757
}
5858

rules.js

Lines changed: 58 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,38 @@ import {
99
import Lightbox from 'react-native-lightbox';
1010

1111
import SimpleMarkdown from 'simple-markdown';
12-
import { map, includes, head, noop, some, size } from 'lodash';
12+
import {map, includes, head, noop, some, size} from 'lodash';
1313

14-
module.exports = function(styles, opts = {}) {
14+
module.exports = function (styles, opts = {}) {
1515
const enableLightBox = opts.enableLightBox || false;
1616
const navigator = opts.navigator;
1717

1818
const LINK_INSIDE = '(?:\\[[^\\]]*\\]|[^\\]]|\\](?=[^\\[]*\\]))*';
1919
const LINK_HREF_AND_TITLE =
20-
"\\s*<?([^\\s]*?)>?(?:\\s+['\"]([\\s\\S]*?)['\"])?\\s*";
21-
var pressHandler = function(target) {
20+
"\\s*<?([^\\s]*?)>?(?:\\s+['\"]([\\s\\S]*?)['\"])?\\s*";
21+
var pressHandler = function (target) {
2222
if (opts.onLink) {
23-
opts.onLink(target).catch(function(error) {
23+
opts.onLink(target).catch(function (error) {
2424
console.log('There has been a problem with this action. ' + error.message);
25-
throw error;
26-
});
25+
throw error;
26+
});
2727
}
2828
};
29-
var parseInline = function(parse, content, state) {
29+
var parseInline = function (parse, content, state) {
3030
var isCurrentlyInline = state.inline || false;
3131
state.inline = true;
3232
var result = parse(content, state);
3333
state.inline = isCurrentlyInline;
3434
return result;
3535
};
36-
var parseCaptureInline = function(capture, parse, state) {
36+
var parseCaptureInline = function (capture, parse, state) {
3737
return {
3838
content: parseInline(parse, capture[2], state)
3939
};
4040
};
4141
return {
4242
autolink: {
43-
react: function(node, output, {...state}) {
43+
react: function (node, output, {...state}) {
4444
state.withinText = true;
4545
const _pressHandler = () => {
4646
pressHandler(node.target);
@@ -53,11 +53,11 @@ module.exports = function(styles, opts = {}) {
5353
},
5454
},
5555
blockQuote: {
56-
react: function(node, output, {...state}) {
56+
react: function (node, output, {...state}) {
5757
state.withinQuote = true;
58-
58+
5959
const img = React.createElement(View, {
60-
key: state.key-state.key,
60+
key: state.key - state.key,
6161
style: [styles.blockQuoteSectionBar, styles.blockQuoteBar],
6262
});
6363

@@ -71,19 +71,19 @@ module.exports = function(styles, opts = {}) {
7171
key: state.key,
7272
style: [styles.blockQuoteSection, styles.blockQuoteText],
7373
}, [img, blockQuote]);
74-
74+
7575
},
7676
},
7777
br: {
78-
react: function(node, output, {...state}) {
78+
react: function (node, output, {...state}) {
7979
return React.createElement(Text, {
8080
key: state.key,
8181
style: styles.br,
8282
}, '\n\n');
8383
},
8484
},
8585
codeBlock: {
86-
react: function(node, output, {...state}) {
86+
react: function (node, output, {...state}) {
8787
state.withinText = true;
8888
return React.createElement(Text, {
8989
key: state.key,
@@ -92,7 +92,7 @@ module.exports = function(styles, opts = {}) {
9292
},
9393
},
9494
del: {
95-
react: function(node, output, {...state}) {
95+
react: function (node, output, {...state}) {
9696
state.withinText = true;
9797
return React.createElement(Text, {
9898
key: state.key,
@@ -101,7 +101,7 @@ module.exports = function(styles, opts = {}) {
101101
},
102102
},
103103
em: {
104-
react: function(node, output, {...state}) {
104+
react: function (node, output, {...state}) {
105105
state.withinText = true;
106106
state.style = {
107107
...(state.style || {}),
@@ -115,7 +115,7 @@ module.exports = function(styles, opts = {}) {
115115
},
116116
heading: {
117117
match: SimpleMarkdown.blockRegex(/^ *(#{1,6}) *([^\n]+?) *#* *(?:\n *)+/),
118-
react: function(node, output, {...state}) {
118+
react: function (node, output, {...state}) {
119119
// const newState = {...state};
120120
state.withinText = true;
121121
state.withinHeading = true;
@@ -133,18 +133,18 @@ module.exports = function(styles, opts = {}) {
133133
},
134134
},
135135
hr: {
136-
react: function(node, output, {...state}) {
137-
return React.createElement(View, { key: state.key, style: styles.hr });
136+
react: function (node, output, {...state}) {
137+
return React.createElement(View, {key: state.key, style: styles.hr});
138138
},
139139
},
140140
image: {
141-
react: function(node, output, {...state}) {
141+
react: function (node, output, {...state}) {
142142
var imageParam = opts.imageParam ? opts.imageParam : '';
143143
var target = node.target + imageParam;
144144
var image = React.createElement(Image, {
145145
key: state.key,
146146
// resizeMode: 'contain',
147-
source: { uri: target },
147+
source: {uri: target},
148148
style: styles.image,
149149
});
150150
if (enableLightBox) {
@@ -161,7 +161,7 @@ module.exports = function(styles, opts = {}) {
161161
},
162162
inlineCode: {
163163
parse: parseCaptureInline,
164-
react: function(node, output, {...state}) {
164+
react: function (node, output, {...state}) {
165165
state.withinText = true;
166166
return React.createElement(Text, {
167167
key: state.key,
@@ -171,9 +171,9 @@ module.exports = function(styles, opts = {}) {
171171
},
172172
link: {
173173
match: SimpleMarkdown.inlineRegex(new RegExp(
174-
'^\\[(' + LINK_INSIDE + ')\\]\\(' + LINK_HREF_AND_TITLE + '\\)'
174+
'^\\[(' + LINK_INSIDE + ')\\]\\(' + LINK_HREF_AND_TITLE + '\\)'
175175
)),
176-
react: function(node, output, {...state}) {
176+
react: function (node, output, {...state}) {
177177
state.withinLink = true;
178178
const _pressHandler = () => {
179179
pressHandler(node.target);
@@ -188,31 +188,31 @@ module.exports = function(styles, opts = {}) {
188188
},
189189
},
190190
list: {
191-
react: function(node, output, {...state}) {
191+
react: function (node, output, {...state}) {
192192
var numberIndex = 1;
193-
var items = map(node.items, function(item, i) {
193+
var items = map(node.items, function (item, i) {
194194
var bullet;
195195
if (node.ordered) {
196-
bullet = React.createElement(Text, { key: 0, style: styles.listItemNumber }, (numberIndex) + '. ');
196+
bullet = React.createElement(Text, {key: 0, style: styles.listItemNumber}, (numberIndex) + '. ');
197197
}
198198
else {
199-
bullet = React.createElement(Text, { key: 0, style: styles.listItemBullet }, '\u2022 ');
199+
bullet = React.createElement(Text, {key: 0, style: styles.listItemBullet}, '\u2022 ');
200200
}
201201

202-
if(item.length > 1) {
203-
if(item[1].type == 'list') {
202+
if (item.length > 1) {
203+
if (item[1].type == 'list') {
204204
state.withinList = true;
205205
}
206206
}
207207

208-
208+
209209

210210
var content = output(item, state);
211211
var listItem;
212212
if (includes(['text', 'paragraph', 'strong'], (head(item) || {}).type) && state.withinList == false) {
213213
state.withinList = true;
214214
listItem = React.createElement(Text, {
215-
style: [styles.listItemText, { marginBottom: 0 }],
215+
style: [styles.listItemText, {marginBottom: 0}],
216216
key: 1,
217217
}, content);
218218
} else {
@@ -230,19 +230,19 @@ module.exports = function(styles, opts = {}) {
230230
}, [bullet, listItem]);
231231
});
232232

233-
return React.createElement(View, { key: state.key, style: styles.list }, items);
233+
return React.createElement(View, {key: state.key, style: styles.list}, items);
234234
},
235235
},
236236
sublist: {
237-
react: function(node, output, {...state}) {
237+
react: function (node, output, {...state}) {
238238

239-
var items = map(node.items, function(item, i) {
239+
var items = map(node.items, function (item, i) {
240240
var bullet;
241241
if (node.ordered) {
242-
bullet = React.createElement(Text, { key: 0, style: styles.listItemNumber }, (i + 1) + '. ');
242+
bullet = React.createElement(Text, {key: 0, style: styles.listItemNumber}, (i + 1) + '. ');
243243
}
244244
else {
245-
bullet = React.createElement(Text, { key: 0, style: styles.listItemBullet }, '\u2022 ');
245+
bullet = React.createElement(Text, {key: 0, style: styles.listItemBullet}, '\u2022 ');
246246
}
247247

248248
var content = output(item, state);
@@ -266,11 +266,11 @@ module.exports = function(styles, opts = {}) {
266266
}, [bullet, listItem]);
267267
});
268268

269-
return React.createElement(View, { key: state.key, style: styles.sublist }, items);
269+
return React.createElement(View, {key: state.key, style: styles.sublist}, items);
270270
},
271271
},
272272
mailto: {
273-
react: function(node, output, {...state}) {
273+
react: function (node, output, {...state}) {
274274
state.withinText = true;
275275
return React.createElement(Text, {
276276
key: state.key,
@@ -280,15 +280,15 @@ module.exports = function(styles, opts = {}) {
280280
},
281281
},
282282
newline: {
283-
react: function(node, output, {...state}) {
283+
react: function (node, output, {...state}) {
284284
return React.createElement(Text, {
285285
key: state.key,
286286
style: styles.newline,
287287
}, '\n');
288288
},
289289
},
290290
paragraph: {
291-
react: function(node, output, {...state}) {
291+
react: function (node, output, {...state}) {
292292
let paragraphStyle = styles.paragraph;
293293
// Allow image to drop in next line within the paragraph
294294
if (some(node.content, {type: 'image'})) {
@@ -299,7 +299,7 @@ module.exports = function(styles, opts = {}) {
299299
}, output(node.content, state));
300300
state.withinParagraphWithImage = false;
301301
return paragraph;
302-
} else if (size(node.content) < 3 && some(node.content, {type: 'strong'})){
302+
} else if (size(node.content) < 3 && some(node.content, {type: 'strong'})) {
303303
// align to center for Strong only content
304304
// require a check of content array size below 3,
305305
// as parse will include additional space as `text`
@@ -315,7 +315,7 @@ module.exports = function(styles, opts = {}) {
315315
},
316316
},
317317
strong: {
318-
react: function(node, output, {...state}) {
318+
react: function (node, output, {...state}) {
319319
state.withinText = true;
320320
state.style = {
321321
...(state.style || {}),
@@ -328,18 +328,18 @@ module.exports = function(styles, opts = {}) {
328328
},
329329
},
330330
table: {
331-
react: function(node, output, {...state}) {
332-
var headers = map(node.header, function(content, i) {
331+
react: function (node, output, {...state}) {
332+
var headers = map(node.header, function (content, i) {
333333
return React.createElement(Text, {
334334
key: i,
335335
style: styles.tableHeaderCell,
336336
}, output(content, state));
337337
});
338338

339-
var header = React.createElement(View, { key: -1, style: styles.tableHeader }, headers);
339+
var header = React.createElement(View, {key: -1, style: styles.tableHeader}, headers);
340340

341-
var rows = map(node.cells, function(row, r) {
342-
var cells = map(row, function(content, c) {
341+
var rows = map(node.cells, function (row, r) {
342+
var cells = map(row, function (content, c) {
343343
return React.createElement(View, {
344344
key: c,
345345
style: styles.tableRowCell,
@@ -349,35 +349,35 @@ module.exports = function(styles, opts = {}) {
349349
if (node.cells.length - 1 == r) {
350350
rowStyles.push(styles.tableRowLast);
351351
}
352-
return React.createElement(View, { key: r, style: rowStyles }, cells);
352+
return React.createElement(View, {key: r, style: rowStyles}, cells);
353353
});
354354

355-
return React.createElement(View, { key: state.key, style: styles.table }, [ header, rows ]);
355+
return React.createElement(View, {key: state.key, style: styles.table}, [header, rows]);
356356
},
357357
},
358358
text: {
359-
react: function(node, output, {...state}) {
359+
react: function (node, output, {...state}) {
360360
let textStyle = {
361361
...styles.text,
362362
...(state.style || {})
363363
};
364-
364+
365365
if (state.withinLink) {
366366
textStyle = [styles.text, styles.autolink];
367367
}
368368

369-
if(state.withinQuote) {
369+
if (state.withinQuote) {
370370
textStyle = [styles.text, styles.blockQuoteText];
371371
}
372-
372+
373373
return React.createElement(Text, {
374374
key: state.key,
375375
style: textStyle,
376376
}, node.content);
377377
},
378378
},
379379
u: { // u will to the same as strong, to avoid the View nested inside text problem
380-
react: function(node, output, {...state}) {
380+
react: function (node, output, {...state}) {
381381
state.withinText = true;
382382
state.style = {
383383
...(state.style || {}),
@@ -390,7 +390,7 @@ module.exports = function(styles, opts = {}) {
390390
},
391391
},
392392
url: {
393-
react: function(node, output, {...state}) {
393+
react: function (node, output, {...state}) {
394394
state.withinText = true;
395395
const _pressHandler = () => {
396396
pressHandler(node.target);

0 commit comments

Comments
 (0)