Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
58d21d4
Don't wrap text unexpectedly for block items
zivester Dec 4, 2018
52a63e0
1.2.0-fix.0
zivester Dec 4, 2018
ecdb1dd
remove classProperties that don't work with create-react-app
zivester Dec 4, 2018
951e048
1.2.0-fix.1
zivester Dec 4, 2018
4e877af
babel build
zivester Dec 4, 2018
499a70a
1.2.0-fix.2
zivester Dec 4, 2018
e7e54eb
missing entry
zivester Dec 4, 2018
f7d0bc0
1.2.0-fix.3
zivester Dec 4, 2018
b03ccd0
apply style to text in renderBlock
zivester Dec 4, 2018
15ebf6a
1.2.0-fix.4
zivester Dec 4, 2018
77499da
make textAlign work by wrapping
zivester Dec 4, 2018
b213707
1.2.0-fix.5
zivester Dec 4, 2018
f69f067
remove styling on block
zivester Jan 14, 2019
de32194
1.2.0-fix.6
zivester Jan 14, 2019
3077a91
bring back isTextOnly to fix block quotes
zivester Jan 14, 2019
b493143
1.2.0-fix.7
zivester Jan 14, 2019
eb68c64
bring back correct text wrapping
zivester Jan 14, 2019
32e56b3
1.2.0-fix.8
zivester Jan 14, 2019
e7cf39d
flexShrink listItem
zivester Jan 15, 2019
e1b198c
1.2.0-fix.9
zivester Jan 15, 2019
51c6373
log isTextOnly
zivester Jan 16, 2019
169290e
1.2.0-fix.10
zivester Jan 16, 2019
da66174
more logging
zivester Jan 16, 2019
66f1e46
1.2.0-fix.11
zivester Jan 16, 2019
e7a1b80
Revert "bring back isTextOnly to fix block quotes"
zivester Jan 16, 2019
42c5630
1.2.0-fix.12
zivester Jan 16, 2019
5fb552b
wrap text blocks in Text, not View
zivester Jan 17, 2019
81cfcc8
1.2.0-fix.13
zivester Jan 17, 2019
309feb8
better isTextOnly check
zivester Jan 17, 2019
5217d48
1.2.0-fix.14
zivester Jan 17, 2019
14cb233
fix wrapping on list items with text only
zivester Jan 17, 2019
878edd7
1.2.0-fix.15
zivester Jan 17, 2019
6f7b6ba
use SafeWrapper for renderLink
zivester Jan 22, 2019
98b8ea8
1.2.0-fix.16
zivester Jan 22, 2019
4f7e81d
v1.3.0
zivester Feb 19, 2019
eb9259b
Fix unexpected default style mutation
guavadevelopment Jul 2, 2019
40da078
simple-markdown@0.4.4
zivester Aug 19, 2019
c0a8365
1.4.0
zivester Aug 19, 2019
6dd23cc
Merge pull request #2 from guavadevelopment/master
zivester Aug 19, 2019
844fe13
1.4.1
zivester Aug 19, 2019
61c193c
update README change log
zivester Aug 21, 2019
a19393a
Add typescript definitions (#4)
JasperH8g Sep 25, 2019
5717102
1.5.0
zivester Sep 25, 2019
9ee2f64
update README
zivester Sep 25, 2019
dcc7679
2.0.0
Feb 26, 2020
81e8116
Add support for code markdown, add optional custom renderer functions
Feb 26, 2020
a52524e
Updated simple-markdown version to 0.7.2 to fix vulnerabilities
vjain143 Jul 14, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["react-native"]
}
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules
.DS_Store
/lib
2 changes: 2 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
.DS_Store
101 changes: 82 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,30 +63,77 @@ render() {
| `style` | Style for the ```<Markdown/>``` component | object | {} |
| `renderImage` | Custom renderer for images | function | none |
| `renderLink` | Custom renderer for links | function | none |
| `renderListBullet` | Custom rendered for list bullets | function | none |
| `renderListBullet` | Custom renderer for list bullets | function | none |
| `renderLine` | Custom renderer for Line | function | none |
| `renderList` | Custom renderer for list | function | none |
| `renderListItem` | Custom renderer for list item | function | none |
| `renderBlockQuote` | Custom renderer for Block Quote | function | none |
| `renderBlockText` | Custom renderer for Block Text | function | none |
| `renderBlock` | Custom renderer for Block | function | none |
| `renderText` | Custom renderer for various types of text | function | none |

If you need more control over how some of the components are rendered, you may provide the custom renderers outlined above like so:
If you need more control over how some of the components are rendered, you may provide the custom renderers outlined above like so.

Beware, these functions are experimental in nature and may not work well for all use cases. These are barebones functions that give you the needed information from markdown and allow you to choose what to render.

In all cases, the 'children' argument refers to markdown nodes that have already been converted to JSX.Elements through the default or custom renderers.

If using custom renders, no style logic is applied. You may opt in to any custom renderers by passing functions that match the below signatures, and it not present, `<Markdown>` will refer to your custom/default styles and the default legacy implementation.

```
renderImage(src, alt, title) {
return(
<MyImageComponent source={{uri: src}}/>
);
}
renderImage(src, alt, title, key)

renderLink(href, title, children, key)

// `ordered: true` signifies this is the bullet point of a list ordered by index
renderListBullet(ordered, index)

// Responsible for the containing List element, children are the elements that represent the list items
renderList(ordered, children, key)

// Line break custom renderer
renderLine(key)

renderLink(href, title, children) {
return(
<MyTouchableThing onPress={() => console.log("Opening link: " + href)}>
{children}
</MyTouchableThing>
);
// example usage
renderListItem(index, ordered, children, key) {
if (!ordered) {
return <ListItem.Bullet key={key}>{ children }</ListItem.Bullet>;
} else {
return <ListItem.Numbered number={index + 1} key={key}>{ children }</ListItem.Numbered>
}
}

renderListBullet(ordered, index) {
return(
<View style={{width: 20, height: 20, backgroundColor: 'red}}/>
);
renderText(textType, children: React.Element | React.ReactElement[], , key) {
// Possible textTypes: h1, h2, h3, h4, h5, h6, strong, del, em, u
switch (textType) {
case 'h1'
case 'h2'
case 'h3'
case 'h4'
case 'h5'
case 'h6':
return <MyHeader>{children}</MyHeader>
case 'strong':
return <MyHighlightedText>{children}</MyHighlightedText>
case 'del':
return <MyStrikethrough>{children}</MyStrikethrough>
case 'em':
return <MyEm>{children}</MyEm>
case 'u:
return <MyUnderline>{children}</MyUnderline>
default:
return <Text style={myTextStyle}>{children}</Text>
}
}

// Responsible for rendering the block container as well as the children
renderBlockQuote(children, key)

// Responsible for rendering the block container as well as the children
renderBlock(children, key)

// Responsible for any block that will only contain text elements below
renderBlockText(children, key)
```

Notice the `children` parameter passed to `renderLink`, which contains whatever children would otherwise be rendered within the link. In the default implementation, those children will be rendered within a `<TouchableOpacity/>` but this gives you the possibility to provide your own touchable component.
Expand Down Expand Up @@ -114,7 +161,7 @@ You can supply the component with your own ```markdownStyles``` prop to override
| imageWrapper | `<View/>` | Wrapper around images, for easier layouting |
| image | `<Image/>` | Image component |

See [default styles](https://github.com/lappalj4/react-native-easy-markdown/blob/master/styles.js) for reference.
See [default styles](https://github.com/TitanInvest/react-native-easy-markdown/blob/master/styles.js) for reference.

# Caveats

Expand All @@ -123,6 +170,22 @@ See [default styles](https://github.com/lappalj4/react-native-easy-markdown/blob

# Change Log

**2.0.0**
* Add ability to pass custom renderers for various markdown components.

**1.5.0**
* Add typescript definitions

**1.4.1**
* Fix an unexpected mutation of default styles when specifying `markdownStyles`

**1.4.0**
* Update simple-markdown dependency to `0.4.4` for XSS vulnerability

**1.3.0**
* Fix text wrapping unexpectedly
* Bring back Utils.isTextOnly to prevent Views nested in Texts
* New maintainer: TitanInvest

**1.2.0**
* Fixed crash on RN > 0.55 (#17)
Expand Down Expand Up @@ -178,7 +241,7 @@ Possible features to implement:

# License (MIT)

Copyright 2017 Juuso Lappalainen
Copyright 2019 Juuso Lappalainen, Zach Ivester

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

Expand Down
52 changes: 31 additions & 21 deletions Utils.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,34 @@
class Utils {

// Was causing crashes with RN > 0.55, removed for now.
//
// static isTextOnly(nodes) {
// if (nodes.length) {
// for (let i = 0; i < nodes.length; i++) {
// if (nodes[i] &&
// nodes[i].hasOwnProperty('type') &&
// nodes[i].type.hasOwnProperty('displayName')) {
// if (nodes[i].type.displayName !== 'Text') {
// return false;
// }
// }
const Utils = {
isTextOnly(nodes) {
try {
if (nodes.length) {
for (let i = 0; i < nodes.length; i++) {
if (nodes[i] &&
typeof nodes[i].hasOwnProperty === 'function' &&
nodes[i].hasOwnProperty('type') &&
typeof nodes[i].type.hasOwnProperty === 'function' &&
(
nodes[i].type.hasOwnProperty('displayName') ||
nodes[i].type.hasOwnProperty('name')
)
) {
if (nodes[i].type.displayName !== 'Text' && nodes[i].type.name !== 'Text') {
return false;
}
} else {
return false;
}
}
}
} catch(e) {
return false;
}

// }
// }
// return true;
// }
// It's a miracle, I guess we're text only
return true;
},

static concatStyles(extras, newStyle) {
concatStyles: function concatStyles(extras, newStyle) {
let newExtras;
if (extras) {
newExtras = JSON.parse(JSON.stringify(extras));
Expand All @@ -34,9 +44,9 @@ class Utils {
};
}
return newExtras;
}
},

static logDebug(nodeTree, level = 0) {
logDebug: function logDebug(nodeTree, level = 0) {
for (let i = 0; i < nodeTree.length; i++) {
const node = nodeTree[i];

Expand Down
2 changes: 2 additions & 0 deletions entry.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
module.exports = require('./lib/index.js');

Loading