diff --git a/__tests__/__snapshots__/HTMLView-test.js.snap b/__tests__/__snapshots__/HTMLView-test.js.snap index b06b35b..c733459 100644 --- a/__tests__/__snapshots__/HTMLView-test.js.snap +++ b/__tests__/__snapshots__/HTMLView-test.js.snap @@ -23,7 +23,12 @@ exports[` can use a custom renderer 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -69,7 +74,12 @@ exports[` should not render extra linebreaks if configured not to 1`] accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -85,10 +95,15 @@ exports[` should not render extra linebreaks if configured not to 1`] allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 30, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 30, + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night was a Labrador retriever named Sparky. @@ -98,7 +113,12 @@ exports[` should not render extra linebreaks if configured not to 1`] accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -113,7 +133,14 @@ exports[` should not render extra linebreaks if configured not to 1`] accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was. @@ -128,7 +155,14 @@ exports[` should not render extra linebreaks if configured not to 1`] accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill. @@ -139,7 +173,12 @@ exports[` should not render extra linebreaks if configured not to 1`] accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -224,10 +263,15 @@ exports[` should render an empty element 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "color": "#007AFF", - "fontWeight": "500", - } + Array [ + Object { + "color": "#007AFF", + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + ] } > &hearts nice job! @@ -258,7 +302,14 @@ exports[` should render ol numbers 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > a @@ -274,7 +325,14 @@ exports[` should render ol numbers 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > b @@ -306,7 +364,12 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -321,7 +384,14 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -337,10 +407,17 @@ exports[` should render shoddy html including headings, links, bold, allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 30, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 30, + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > > Dwayne’s only companion at night was a Labrador retriever named Sparky. @@ -352,7 +429,14 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -367,7 +451,16 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -383,9 +476,18 @@ exports[` should render shoddy html including headings, links, bold, allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontStyle": "italic", - } + Array [ + Object { + "fontStyle": "italic", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was. @@ -403,9 +505,22 @@ exports[` should render shoddy html including headings, links, bold, allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontWeight": "500", - } + Array [ + Object { + "fontWeight": "500", + }, + Object {}, + Object { + "fontStyle": "italic", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > The undippable flag was a beauty, and the anthem and the vacant motto might not have mattered much, if it weren’t for this: a lot of citizens were so ignored and cheated and insulted that they thought they might be in the wrong country, or even on the wrong planet, that some terrible mistake had been made. @@ -421,7 +536,14 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -436,7 +558,16 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > [1] @@ -452,10 +583,19 @@ exports[` should render shoddy html including headings, links, bold, allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "color": "#007AFF", - "fontWeight": "500", - } + Array [ + Object { + "color": "#007AFF", + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > https://code.facebook.com/posts/1505962329687926/flow-a-new-... @@ -465,7 +605,16 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -478,7 +627,14 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -488,7 +644,12 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -542,7 +703,14 @@ exports[` should render ul bullets 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > a @@ -558,7 +726,14 @@ exports[` should render ul bullets 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > b diff --git a/example/__tests__/Example-test.js b/example/__tests__/Example-test.js index 2997763..acff13e 100644 --- a/example/__tests__/Example-test.js +++ b/example/__tests__/Example-test.js @@ -4,6 +4,7 @@ import renderer from 'react-test-renderer'; import Example from '../Example'; + describe('', () => { it('should render', () => { expect( diff --git a/example/__tests__/__snapshots__/Example-test.js.snap b/example/__tests__/__snapshots__/Example-test.js.snap index 776a9c2..9064c67 100644 --- a/example/__tests__/__snapshots__/Example-test.js.snap +++ b/example/__tests__/__snapshots__/Example-test.js.snap @@ -32,7 +32,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -47,7 +52,14 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -69,9 +81,20 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontStyle": "italic", - } + Array [ + Object { + "fontStyle": "italic", + }, + Object {}, + Object { + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > > Dwayne’s only companion at night was a Labrador retriever named Sparky. @@ -82,7 +105,14 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -97,7 +127,16 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -113,9 +152,18 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontStyle": "italic", - } + Array [ + Object { + "fontStyle": "italic", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was. @@ -133,9 +181,22 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontWeight": "500", - } + Array [ + Object { + "fontWeight": "500", + }, + Object {}, + Object { + "fontStyle": "italic", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > The undippable flag was a beauty, and the anthem and the vacant motto might not have mattered much, if it weren’t for this: a lot of citizens were so ignored and cheated and insulted that they thought they might be in the wrong country, or even on the wrong planet, that some terrible mistake had been made. @@ -151,7 +212,14 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -166,7 +234,16 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > [1] @@ -182,10 +259,19 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "color": "#007AFF", - "fontWeight": "500", - } + Array [ + Object { + "color": "#007AFF", + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > https://code.facebook.com/posts/1505962329687926/flow-a-new-... @@ -195,7 +281,16 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -208,7 +303,14 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -233,7 +335,14 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -250,10 +359,17 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 36, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 36, + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -265,7 +381,14 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -281,10 +404,17 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 30, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 30, + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -296,7 +426,14 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -312,10 +449,17 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 24, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 24, + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -327,7 +471,14 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -343,10 +494,17 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 18, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 18, + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -358,7 +516,14 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -374,10 +539,17 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 14, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 14, + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -389,7 +561,14 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > @@ -405,10 +584,17 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 12, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 12, + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -418,7 +604,14 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + Object {}, + ] + } > ayyy @@ -446,7 +639,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > diff --git a/htmlToElement.js b/htmlToElement.js index 00e8755..dec0959 100644 --- a/htmlToElement.js +++ b/htmlToElement.js @@ -4,8 +4,9 @@ import { } from 'react-native'; import htmlparser from 'htmlparser2-without-node-native'; import entities from 'entities'; - import AutoSizedImage from './AutoSizedImage'; +import _ from 'lodash/'; +import transform from 'css-to-react-native'; const LINE_BREAK = '\n'; const PARAGRAPH_BREAK = '\n\n'; @@ -30,6 +31,26 @@ const Img = props => { }; export default function htmlToElement(rawHtml, opts, done) { + function getInheritedStyles(parent) { + let inlineStyle = {}; + try { + if (parent.attribs && parent.attribs.hasOwnProperty('style')) { + const styleString = parent.attribs.style.trim(), + inlineStyleRules = _.unescape(styleString).split(';').filter(String), + inlineStyles = inlineStyleRules.map(function(rule) { + return rule.trim().split(':'); + }); + + inlineStyle = transform(inlineStyles, ['fontFamily']); + } + } catch (error) { + //console.error(error) + } + + const style = [opts.styles[parent.name] || {}, inlineStyle]; + return parent.parent ? style.concat(getInheritedStyles(parent.parent)) : style; + } + function domToElement(dom, parent) { if (!dom) return null; @@ -41,7 +62,7 @@ export default function htmlToElement(rawHtml, opts, done) { if (node.type == 'text') { return ( - + {entities.decodeHTML(node.data)} ); @@ -111,4 +132,3 @@ export default function htmlToElement(rawHtml, opts, done) { parser.write(rawHtml); parser.done(); } - diff --git a/package.json b/package.json index 8a130ed..ebb6fba 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,9 @@ "url": "git://github.com/jsdf/react-native-htmlview.git" }, "dependencies": { + "css-to-react-native": "^2.0", "entities": "^1.1.1", - "htmlparser2-without-node-native": "^3.9.0" + "htmlparser2-without-node-native": "^3.9.0", + "lodash": "^4.17.4" } } diff --git a/yarn.lock b/yarn.lock index e195fd0..6b41af3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1285,6 +1285,18 @@ csrf@~3.0.0: tsscmp "1.0.5" uid-safe "2.1.4" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + +css-to-react-native@^2.0: + version "2.0.3" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.3.tgz#7d3a11409ac283acef447a13d3bbd09980c68a4f" + dependencies: + css-color-keywords "^1.0.0" + fbjs "^0.8.5" + postcss-value-parser "^3.3.0" + cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0": version "0.3.2" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b" @@ -2949,7 +2961,7 @@ lodash@^3.5.0: version "3.10.1" resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" -lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1: +lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -3361,6 +3373,10 @@ pluralize@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45" +postcss-value-parser@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15" + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"