Skip to content

Commit 94a4ea5

Browse files
mientjanmientjan
committed
trying to add ability to add block elements to a header. Related to issue #14 
1 parent 7aa9753 commit 94a4ea5

File tree

9 files changed

+220
-119
lines changed

9 files changed

+220
-119
lines changed

‎example/App.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,6 @@ import copyAllCheckboxPlugin from "./src/copyAllCheckboxPlugin";
1515
import pluginRules from "./src/pluginRules";
1616

1717
const rules = {
18-
header1: (node, children, parents, style) => {
19-
return (
20-
<Text key={getUniqueID()} style={{ backgroundColor: "red" }}>
21-
{children}
22-
</Text>
23-
);
24-
},
2518
// added custom block element defined by plugin
2619
block: (node, children, parents, style) => {
2720
return (

‎example/src/copyAllCheckboxPlugin.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const markdownText = `
2-
## Images
2+
## ![loading](https://www.hippomundo.com/images/loading.gif) Images
33
44
![Minion](https://octodex.github.com/images/minion.png)
55
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
@@ -12,4 +12,4 @@ __Advertisement :)__
1212
* [x] checked
1313
`;
1414

15-
export default markdownText;
15+
export default markdownText;

‎example/src/customMarkdownStyle.js

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,34 @@
1-
import { StyleSheet } from 'react-native';
1+
import { StyleSheet } from "react-native";
22

33
/**
44
*
55
*/
66
const customMarkdownStyle = StyleSheet.create({
7-
view: {},
8-
codeBlock: {
9-
fontFamily: 'Courier',
10-
fontWeight: '500',
11-
},
12-
del: {
13-
backgroundColor: '#000000',
14-
},
15-
em: {
16-
fontStyle: 'italic',
17-
},
18-
heading: {},
19-
heading1: {
7+
view: {},
8+
codeBlock: {
9+
fontFamily: "Courier",
10+
fontWeight: "500"
11+
},
12+
del: {
13+
backgroundColor: "#000000"
14+
},
15+
em: {
16+
fontStyle: "italic"
17+
},
2018

21-
backgroundColor: "#FFCC00"
22-
},
23-
text: {fontSize: 20,},
24-
strikethrough: {
25-
textDecorationLine: 'line-through',
26-
color: '#FF0000'
27-
},
28-
a: {
29-
textDecorationLine: 'underline',
30-
color: '#FF0000'
31-
},
32-
u: {
33-
borderColor: '#000000',
34-
borderBottomWidth: 1,
35-
},
19+
text: { fontSize: 20 },
20+
strikethrough: {
21+
textDecorationLine: "line-through",
22+
color: "#FF0000"
23+
},
24+
a: {
25+
textDecorationLine: "underline",
26+
color: "#FF0000"
27+
},
28+
u: {
29+
borderColor: "#000000",
30+
borderBottomWidth: 1
31+
}
3632
});
3733

38-
export default customMarkdownStyle;
34+
export default customMarkdownStyle;

‎example/src/pluginRules.js

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,33 @@
1-
import React from "react"
2-
import { StyleSheet, Text, View, ScrollView, Picker } from 'react-native';
1+
import React from "react";
2+
import { StyleSheet, Text, View, ScrollView, Picker } from "react-native";
33

44
const rules = {
5-
checkbox: (node, children, parents, style) => {
6-
return <View style={{flexDirection: 'row', borderWidth: 1, borderColor: '#000000'}} key={node.key}>
7-
{children}
8-
</View>;
9-
},
10-
checkbox_input: (node, children, parents, style) => {
11-
return <View key={node.key} style={{borderRadius: 20, backgroundColor: 'blue', width: 20, height: 20, marginRight:10}}></View>;
12-
},
13-
label: (node, children, parents, style) => {
14-
return <Text key={node.key}>{children}</Text>;
15-
},
16-
5+
checkbox: (node, children, parents, style) => {
6+
return (
7+
<View
8+
style={{ flexDirection: "row", borderWidth: 1, borderColor: "#000000" }}
9+
key={node.key}
10+
>
11+
{children}
12+
</View>
13+
);
14+
},
15+
checkbox_input: (node, children, parents, style) => {
16+
return (
17+
<View
18+
key={node.key}
19+
style={{
20+
borderRadius: 20,
21+
backgroundColor: "blue",
22+
width: 20,
23+
height: 20,
24+
marginRight: 10
25+
}}
26+
/>
27+
);
28+
},
29+
label: (node, children, parents, style) => {
30+
return <Text key={node.key}>{children}</Text>;
31+
}
1732
};
18-
export default rules;
33+
export default rules;

‎src/lib/ImageComponent.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React, { PureComponent } from "react";
2+
import { Image } from "react-native";
3+
import PropTypes from "prop-types";
4+
import MarkdownIt from "markdown-it";
5+
import PluginContainer from "./plugin/PluginContainer";
6+
import AstRenderer from "./AstRenderer";
7+
8+
export default class ImageComponent extends PureComponent {
9+
static propTypes = {
10+
scaling: PropTypes.oneOf(["strict"]).isRequired,
11+
uri: PropTypes.string.isRequired
12+
};
13+
14+
/**
15+
* Default Props
16+
*/
17+
static defaultProps = {};
18+
19+
ref = null;
20+
21+
constructor(props) {
22+
super(props);
23+
24+
this.state = {};
25+
}
26+
27+
onLoad = () => {
28+
console.log(this.ref);
29+
};
30+
onLoadStart = () => {};
31+
32+
render() {
33+
return (
34+
<Image
35+
ref={ref => (this.ref = ref)}
36+
onLoad={this.onLoad}
37+
onLoadStart={this.onLoadStart}
38+
style={{ width: 50, height: 50 }}
39+
source={{
40+
uri: this.props.uri
41+
}}
42+
/>
43+
);
44+
}
45+
}

‎src/lib/renderRules.js

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import FitImage from "react-native-fit-image";
55
import getUniqueID from "./util/getUniqueID";
66
import openUrl from "./util/openUrl";
77
import hasParents from "./util/hasParents";
8+
import applyStyle from "./util/applyStyle";
9+
import ImageComponent from "./ImageComponent";
810

911
const renderRules = {
1012
// when unknown elements are introduced, so it wont break
@@ -69,34 +71,45 @@ const renderRules = {
6971
);
7072
},
7173

72-
heading1: (node, children, parent, styles) => (
73-
<View key={node.key} style={[styles.heading, styles.heading1]}>
74-
{children}
75-
</View>
76-
),
77-
heading2: (node, children, parent, styles) => (
78-
<View key={node.key} style={[styles.heading, styles.heading2]}>
79-
{children}
80-
</View>
81-
),
74+
heading1: (node, children, parent, styles) => {
75+
return (
76+
<View key={node.key} style={styles.headingContainer}>
77+
{applyStyle(children, [styles.heading, styles.heading1], "Text")}
78+
</View>
79+
);
80+
},
81+
82+
heading2: (node, children, parent, styles) => {
83+
84+
children = applyStyle(children, [styles.heading, styles.heading2], "Text");
85+
86+
console.log(children);
87+
88+
89+
return (
90+
<View key={node.key} style={styles.headingContainer}>
91+
{children}
92+
</View>
93+
);
94+
},
8295
heading3: (node, children, parent, styles) => (
83-
<View key={node.key} style={[styles.heading, styles.heading3]}>
84-
{children}
96+
<View key={node.key} style={styles.headingContainer}>
97+
{applyStyle(children, [styles.heading, styles.heading3], "Text")}
8598
</View>
8699
),
87100
heading4: (node, children, parent, styles) => (
88-
<View key={node.key} style={[styles.heading, styles.heading4]}>
89-
{children}
101+
<View key={node.key} style={styles.headingContainer}>
102+
{applyStyle(children, [styles.heading, styles.heading4], "Text")}
90103
</View>
91104
),
92105
heading5: (node, children, parent, styles) => (
93-
<View key={node.key} style={[styles.heading, styles.heading5]}>
94-
{children}
106+
<View key={node.key} style={styles.headingContainer}>
107+
{applyStyle(children, [styles.heading, styles.heading5], "Text")}
95108
</View>
96109
),
97110
heading6: (node, children, parent, styles) => (
98-
<View key={node.key} style={[styles.heading, styles.heading6]}>
99-
{children}
111+
<View key={node.key} style={styles.headingContainer}>
112+
{applyStyle(children, [styles.heading, styles.heading6], "Text")}
100113
</View>
101114
),
102115

@@ -222,10 +235,10 @@ const renderRules = {
222235
),
223236
image: (node, children, parent, styles) => {
224237
return (
225-
<FitImage
238+
<ImageComponent
226239
key={node.key}
227-
style={{ margin: 1 }}
228-
source={{ uri: node.attributes.src }}
240+
style={styles.image}
241+
uri={node.attributes.src}
229242
/>
230243
);
231244
}

0 commit comments

Comments
 (0)