Skip to content

Commit

Permalink
fix(markdown): fix various markdown issues (#370)
Browse files Browse the repository at this point in the history 
* fix(markdown): Make <th> contents run through defaultRenderer

* fix(markdown): Remove default values and enable pedantic mode

* fix(markdown): Use our own Cell when a <td> contains an <img>

* refactor(md): refactor/squeeze down some code
  • Loading branch information
@machour
machour authored and Houssein Djirdeh committed Sep 28, 2017
1 parent 8d69037 commit 21b6ea6
Showing 1 changed file with 101 additions and 86 deletions.
187 changes: 101 additions & 86 deletions src/components/markdown-htmlview.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,7 @@ marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
pedantic: true,
});

const { height, width } = Dimensions.get('window');
Expand All @@ -102,6 +98,52 @@ const headingRenderer = (node, index, siblings, parent, defaultRenderer) => {
);
};

/* eslint-disable no-shadow */
class CellWithImage extends Cell {
render() {
const { data, width, height, flex, style } = this.props;
let borderWidth = 1;
let borderColor = '#000';

if (this.props.borderStyle && this.props.borderStyle.borderWidth) {
borderWidth = this.props.borderStyle.borderWidth;
}
if (this.props.borderStyle && this.props.borderStyle.borderColor) {
borderColor = this.props.borderStyle.borderColor;
}

return (
<View
style={[
{
alignItems: 'center',
borderTopWidth: borderWidth,
borderRightWidth: borderWidth,
borderColor,
},
styles.cell,
width && { width },
height && { height },
flex && { flex },
!width && !flex && !height && { flex: 1 },
style,
]}
>
{data}
</View>
);
}
}

const cellForNode = node =>
node.children.filter(elem => elem.type === 'tag' && elem.name === 'img')
.length > 0
? CellWithImage
: Cell;

const onlyTagsChildren = node =>
node.children.filter(elem => elem.type === 'tag');

export class MarkdownHtmlView extends Component {
props: {
source: String,
Expand Down Expand Up @@ -155,34 +197,28 @@ export class MarkdownHtmlView extends Component {
/* eslint-disable no-unused-vars */
const onLinkPress = this.props.onLinkPress;
const renderers = {
blockquote: (node, index, siblings, parent, defaultRenderer) => {
return (
<View
key={index}
blockquote: (node, index, siblings, parent, defaultRenderer) =>
<View
key={index}
style={{
paddingHorizontal: 12,
borderLeftWidth: 3,
borderLeftColor: colors.greyMid,
}}
>
<Text
style={{
paddingHorizontal: 12,
borderLeftWidth: 3,
borderLeftColor: colors.greyMid,
color: colors.greyBlue,
...fonts.fontPrimaryLight,
}}
>
<Text
style={{
color: colors.greyBlue,
...fonts.fontPrimaryLight,
}}
>
{defaultRenderer(node.children, parent)}
</Text>
</View>
);
},
pre: (node, index, siblings, parent, defaultRenderer) => {
return (
<View>
{defaultRenderer(node.children, node)}
</View>
);
},
{defaultRenderer(node.children, parent)}
</Text>
</View>,
pre: (node, index, siblings, parent, defaultRenderer) =>
<View>
{defaultRenderer(node.children, node)}
</View>,
code: (node, index, siblings, parent, defaultRenderer) => {
if (parent.name === 'pre') {
return (
Expand All @@ -204,54 +240,37 @@ export class MarkdownHtmlView extends Component {
h4: headingRenderer,
h5: headingRenderer,
h6: headingRenderer,
hr: (node, index, siblings, parent, defaultRenderer) => {
return <View key={index} style={{ ...hrStyle }} />;
},
hr: (node, index, siblings, parent, defaultRenderer) =>
<View key={index} style={{ ...hrStyle }} />,
img: (node, index, siblings, parent, defaultRenderer) => {
const zoom =
parent && parent.type === 'tag' && parent.name === 'td' ? 0.3 : 0.6;

return (
<ImageZoom
key={index}
style={{ width: width * 0.5, height: height * 0.3 }}
style={{ width: width * zoom, height: height * zoom }}
uri={{ uri: node.attribs.src }}
/>
);
},
table: (node, index, siblings, parent, defaultRenderer) => {
return (
<Table key={index} style={{ width: width * 0.8 }}>
{defaultRenderer(
node.children.filter(elem => elem.type === 'tag'),
node
)}
</Table>
);
},
thead: (node, index, siblings, parent, defaultRenderer) => {
return defaultRenderer(
node.children.filter(elem => elem.type === 'tag'),
node
);
},
tbody: (node, index, siblings, parent, defaultRenderer) => {
return defaultRenderer(
node.children.filter(elem => elem.type === 'tag'),
node
);
},
tr: (node, index, siblings, parent, defaultRenderer) => {
return (
<TableWrapper
key={index}
style={{ width: width * 0.8, height: 30, flexDirection: 'row' }}
>
{defaultRenderer(
node.children.filter(elem => elem.type === 'tag'),
node
)}
</TableWrapper>
);
},
table: (node, index, siblings, parent, defaultRenderer) =>
<Table key={index} style={{ width: width * 0.8 }}>
{defaultRenderer(onlyTagsChildren(node), node)}
</Table>,
thead: (node, index, siblings, parent, defaultRenderer) =>
defaultRenderer(onlyTagsChildren(node), node),
tbody: (node, index, siblings, parent, defaultRenderer) =>
defaultRenderer(onlyTagsChildren(node), node),
tr: (node, index, siblings, parent, defaultRenderer) =>
<TableWrapper
key={index}
style={{ width: width * 0.8, flexDirection: 'row' }}
>
{defaultRenderer(onlyTagsChildren(node), node)}
</TableWrapper>,
td: (node, index, siblings, parent, defaultRenderer) => {
const Component = cellForNode(node);
const attribs = node.attribs;
const cellAlign = {
'text-align:right': 'right',
Expand All @@ -267,36 +286,32 @@ export class MarkdownHtmlView extends Component {
}

return (
<Cell
<Component
key={index}
data={defaultRenderer(node.children, node)}
textStyle={styleText}
/>
);
},
th: (node, index, siblings, parent, defaultRenderer) => {
const Component = cellForNode(node);

return (
<Cell
<Component
key={index}
data={node.children[0].data}
data={defaultRenderer(node.children, node)}
textStyle={{ ...fonts.fontPrimarySemiBold, textAlign: 'center' }}
/>
);
},
issue: (node, index, siblings, parent, defaultRenderer) => {
return (
<Text style={styles.strong} onPress={() => onLinkPress(node)}>
#{node.attribs['data-id']}
</Text>
);
},
profile: (node, index, siblings, parent, defaultRenderer) => {
return (
<Text style={styles.strong} onPress={() => onLinkPress(node)}>
{node.children[0].data}
</Text>
);
},
issue: (node, index, siblings, parent, defaultRenderer) =>
<Text style={styles.strong} onPress={() => onLinkPress(node)}>
#{node.attribs['data-id']}
</Text>,
profile: (node, index, siblings, parent, defaultRenderer) =>
<Text style={styles.strong} onPress={() => onLinkPress(node)}>
{node.children[0].data}
</Text>,
};

if (_node.type === 'text') {
Expand Down

0 comments on commit 21b6ea6

Please sign in to comment.