From 521e87a1791a4fb822a45461340a4633c468ffb5 Mon Sep 17 00:00:00 2001 From: Markus Guenther Date: Wed, 12 Apr 2017 01:07:43 +0200 Subject: [PATCH 1/9] [FEATURE] Inherit the style of the parent node --- htmlToElement.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/htmlToElement.js b/htmlToElement.js index 00e8755..bb3e701 100644 --- a/htmlToElement.js +++ b/htmlToElement.js @@ -30,6 +30,11 @@ const Img = props => { }; export default function htmlToElement(rawHtml, opts, done) { + function getInheritedStyles(parent) { + let style = [opts.styles[parent.name] || {}]; + return parent.parent ? style.concat(getInheritedStyles(parent.parent)) : style; + } + function domToElement(dom, parent) { if (!dom) return null; @@ -41,7 +46,7 @@ export default function htmlToElement(rawHtml, opts, done) { if (node.type == 'text') { return ( - + {entities.decodeHTML(node.data)} ); @@ -111,4 +116,3 @@ export default function htmlToElement(rawHtml, opts, done) { parser.write(rawHtml); parser.done(); } - From 73d425667e642a3a71a88c68f7abe5d693083236 Mon Sep 17 00:00:00 2001 From: Markus Guenther Date: Wed, 12 Apr 2017 01:14:17 +0200 Subject: [PATCH 2/9] [TASK] Update the test snapshot --- __tests__/__snapshots__/HTMLView-test.js.snap | 202 ++++++++++++--- .../__snapshots__/Example-test.js.snap | 236 ++++++++++++++---- 2 files changed, 344 insertions(+), 94 deletions(-) diff --git a/__tests__/__snapshots__/HTMLView-test.js.snap b/__tests__/__snapshots__/HTMLView-test.js.snap index b06b35b..f97ccd0 100644 --- a/__tests__/__snapshots__/HTMLView-test.js.snap +++ b/__tests__/__snapshots__/HTMLView-test.js.snap @@ -23,7 +23,11 @@ exports[` can use a custom renderer 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + ] + } > @@ -69,7 +73,11 @@ exports[` should not render extra linebreaks if configured not to 1`] accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + ] + } > @@ -85,10 +93,13 @@ 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 {}, + ] } > Dwayne’s only companion at night was a Labrador retriever named Sparky. @@ -98,7 +109,11 @@ exports[` should not render extra linebreaks if configured not to 1`] accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + ] + } > @@ -113,7 +128,12 @@ exports[` should not render extra linebreaks if configured not to 1`] accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + 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 +148,12 @@ exports[` should not render extra linebreaks if configured not to 1`] accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + 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 +164,11 @@ exports[` should not render extra linebreaks if configured not to 1`] accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + ] + } > @@ -224,10 +253,13 @@ exports[` should render an empty element 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "color": "#007AFF", - "fontWeight": "500", - } + Array [ + Object { + "color": "#007AFF", + "fontWeight": "500", + }, + Object {}, + ] } > &hearts nice job! @@ -258,7 +290,12 @@ exports[` should render ol numbers 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > a @@ -274,7 +311,12 @@ exports[` should render ol numbers 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > b @@ -306,7 +348,11 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + ] + } > @@ -321,7 +367,12 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -337,10 +388,14 @@ 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 {}, + ] } > > Dwayne’s only companion at night was a Labrador retriever named Sparky. @@ -352,7 +407,12 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -367,7 +427,13 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + ] + } > @@ -383,9 +449,14 @@ exports[` should render shoddy html including headings, links, bold, allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontStyle": "italic", - } + Array [ + Object { + "fontStyle": "italic", + }, + 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 +474,17 @@ exports[` should render shoddy html including headings, links, bold, allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontWeight": "500", - } + Array [ + Object { + "fontWeight": "500", + }, + Object { + "fontStyle": "italic", + }, + 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 +500,12 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -436,7 +520,13 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + ] + } > [1] @@ -452,10 +542,15 @@ 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 {}, + ] } > https://code.facebook.com/posts/1505962329687926/flow-a-new-... @@ -465,7 +560,13 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + ] + } > @@ -478,7 +579,12 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -488,7 +594,11 @@ exports[` should render shoddy html including headings, links, bold, accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + ] + } > @@ -542,7 +652,12 @@ exports[` should render ul bullets 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > a @@ -558,7 +673,12 @@ exports[` should render ul bullets 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > b diff --git a/example/__tests__/__snapshots__/Example-test.js.snap b/example/__tests__/__snapshots__/Example-test.js.snap index 776a9c2..4d400bf 100644 --- a/example/__tests__/__snapshots__/Example-test.js.snap +++ b/example/__tests__/__snapshots__/Example-test.js.snap @@ -32,7 +32,11 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + ] + } > @@ -47,7 +51,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -69,9 +78,16 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontStyle": "italic", - } + Array [ + Object { + "fontStyle": "italic", + }, + Object { + "fontWeight": "500", + }, + Object {}, + Object {}, + ] } > > Dwayne’s only companion at night was a Labrador retriever named Sparky. @@ -82,7 +98,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -97,7 +118,13 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + ] + } > @@ -113,9 +140,14 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontStyle": "italic", - } + Array [ + Object { + "fontStyle": "italic", + }, + 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 +165,17 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontWeight": "500", - } + Array [ + Object { + "fontWeight": "500", + }, + Object { + "fontStyle": "italic", + }, + 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 +191,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -166,7 +211,13 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + ] + } > [1] @@ -182,10 +233,15 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "color": "#007AFF", - "fontWeight": "500", - } + Array [ + Object { + "color": "#007AFF", + "fontWeight": "500", + }, + Object {}, + Object {}, + Object {}, + ] } > https://code.facebook.com/posts/1505962329687926/flow-a-new-... @@ -195,7 +251,13 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + Object {}, + ] + } > @@ -208,7 +270,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -233,7 +300,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -250,10 +322,14 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 36, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 36, + "fontWeight": "500", + }, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -265,7 +341,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -281,10 +362,14 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 30, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 30, + "fontWeight": "500", + }, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -296,7 +381,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -312,10 +402,14 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 24, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 24, + "fontWeight": "500", + }, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -327,7 +421,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -343,10 +442,14 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 18, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 18, + "fontWeight": "500", + }, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -358,7 +461,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -374,10 +482,14 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 14, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 14, + "fontWeight": "500", + }, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -389,7 +501,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > @@ -405,10 +522,14 @@ exports[` should render 1`] = ` allowFontScaling={true} ellipsizeMode="tail" style={ - Object { - "fontSize": 12, - "fontWeight": "500", - } + Array [ + Object { + "fontSize": 12, + "fontWeight": "500", + }, + Object {}, + Object {}, + ] } > Dwayne’s only companion at night @@ -418,7 +539,12 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + Object {}, + ] + } > ayyy @@ -446,7 +572,11 @@ exports[` should render 1`] = ` accessible={true} allowFontScaling={true} ellipsizeMode="tail" - style={undefined} + style={ + Array [ + Object {}, + ] + } > From e842532b297406029245ebb5cb599bc3fce6a746 Mon Sep 17 00:00:00 2001 From: Markus Guenther Date: Wed, 12 Apr 2017 01:16:38 +0200 Subject: [PATCH 3/9] [FEATURE] Add css-to-react-native as dependency --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 8a130ed..aeeb9d1 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "url": "git://github.com/jsdf/react-native-htmlview.git" }, "dependencies": { + "css-to-react-native": "^2.0.3", "entities": "^1.1.1", "htmlparser2-without-node-native": "^3.9.0" } From 553ef5c20db7f245a7908cd8295329f7e904d0f2 Mon Sep 17 00:00:00 2001 From: Markus Guenther Date: Wed, 12 Apr 2017 02:44:11 +0200 Subject: [PATCH 4/9] [TASK] Use git version of css-to-react-native --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aeeb9d1..68683d3 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "url": "git://github.com/jsdf/react-native-htmlview.git" }, "dependencies": { - "css-to-react-native": "^2.0.3", + "css-to-react-native": "git+https://github.com/styled-components/css-to-react-native.git", "entities": "^1.1.1", "htmlparser2-without-node-native": "^3.9.0" } From 6a29baadf6bfffc01b0680db04959f7594e6c184 Mon Sep 17 00:00:00 2001 From: Markus Guenther Date: Wed, 12 Apr 2017 03:25:30 +0200 Subject: [PATCH 5/9] [FEATURE] Also render style attribute of the html entity --- htmlToElement.js | 18 ++++++++++++++++-- package.json | 3 ++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/htmlToElement.js b/htmlToElement.js index bb3e701..27aa044 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'; @@ -31,7 +32,20 @@ const Img = props => { export default function htmlToElement(rawHtml, opts, done) { function getInheritedStyles(parent) { - let style = [opts.styles[parent.name] || {}]; + 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) {} + + const style = [opts.styles[parent.name] || {}, inlineStyle]; return parent.parent ? style.concat(getInheritedStyles(parent.parent)) : style; } diff --git a/package.json b/package.json index 68683d3..d787d2a 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "dependencies": { "css-to-react-native": "git+https://github.com/styled-components/css-to-react-native.git", "entities": "^1.1.1", - "htmlparser2-without-node-native": "^3.9.0" + "htmlparser2-without-node-native": "^3.9.0", + "lodash": "^4.17.4" } } From eb0bc0528e604c9010dabb0e08ab26539d3de053 Mon Sep 17 00:00:00 2001 From: Markus Guenther Date: Wed, 12 Apr 2017 03:31:24 +0200 Subject: [PATCH 6/9] [TASK] Fix CGL issues --- htmlToElement.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/htmlToElement.js b/htmlToElement.js index 27aa044..dec0959 100644 --- a/htmlToElement.js +++ b/htmlToElement.js @@ -5,7 +5,7 @@ import { import htmlparser from 'htmlparser2-without-node-native'; import entities from 'entities'; import AutoSizedImage from './AutoSizedImage'; -import _ from 'lodash/' +import _ from 'lodash/'; import transform from 'css-to-react-native'; const LINE_BREAK = '\n'; @@ -39,11 +39,13 @@ export default function htmlToElement(rawHtml, opts, done) { inlineStyleRules = _.unescape(styleString).split(';').filter(String), inlineStyles = inlineStyleRules.map(function(rule) { return rule.trim().split(':'); - }) + }); - inlineStyle = transform(inlineStyles, ['fontFamily']) + inlineStyle = transform(inlineStyles, ['fontFamily']); } - } catch (error) {} + } catch (error) { + //console.error(error) + } const style = [opts.styles[parent.name] || {}, inlineStyle]; return parent.parent ? style.concat(getInheritedStyles(parent.parent)) : style; From 783ac523e4a7139b35a8dcc922f5befd75f7a2ad Mon Sep 17 00:00:00 2001 From: Markus Guenther Date: Wed, 12 Apr 2017 04:01:32 +0200 Subject: [PATCH 7/9] [BUGIX] Fix tests and import of css-to-react-native --- HTMLView.js | 2 + __tests__/__snapshots__/HTMLView-test.js.snap | 55 +++++++++++++++ example/__tests__/Example-test.js | 1 + .../__snapshots__/Example-test.js.snap | 68 +++++++++++++++++++ package.json | 2 +- yarn.lock | 18 ++++- 6 files changed, 144 insertions(+), 2 deletions(-) diff --git a/HTMLView.js b/HTMLView.js index 834cd39..f4ada0b 100644 --- a/HTMLView.js +++ b/HTMLView.js @@ -1,4 +1,6 @@ import React, {Component, PropTypes} from 'react'; +import _ from 'lodash/'; +import transform from 'css-to-react-native'; import htmlToElement from './htmlToElement'; import { Linking, diff --git a/__tests__/__snapshots__/HTMLView-test.js.snap b/__tests__/__snapshots__/HTMLView-test.js.snap index f97ccd0..c733459 100644 --- a/__tests__/__snapshots__/HTMLView-test.js.snap +++ b/__tests__/__snapshots__/HTMLView-test.js.snap @@ -26,6 +26,7 @@ exports[` can use a custom renderer 1`] = ` style={ Array [ Object {}, + Object {}, ] } > @@ -76,6 +77,7 @@ exports[` should not render extra linebreaks if configured not to 1`] style={ Array [ Object {}, + Object {}, ] } > @@ -99,6 +101,8 @@ exports[` should not render extra linebreaks if configured not to 1`] "fontWeight": "500", }, Object {}, + Object {}, + Object {}, ] } > @@ -112,6 +116,7 @@ exports[` should not render extra linebreaks if configured not to 1`] style={ Array [ Object {}, + Object {}, ] } > @@ -132,6 +137,8 @@ exports[` should not render extra linebreaks if configured not to 1`] Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -152,6 +159,8 @@ exports[` should not render extra linebreaks if configured not to 1`] Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -167,6 +176,7 @@ exports[` should not render extra linebreaks if configured not to 1`] style={ Array [ Object {}, + Object {}, ] } > @@ -259,6 +269,8 @@ exports[` should render an empty element 1`] = ` "fontWeight": "500", }, Object {}, + Object {}, + Object {}, ] } > @@ -294,6 +306,8 @@ exports[` should render ol numbers 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -315,6 +329,8 @@ exports[` should render ol numbers 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -351,6 +367,7 @@ exports[` should render shoddy html including headings, links, bold, style={ Array [ Object {}, + Object {}, ] } > @@ -371,6 +388,8 @@ exports[` should render shoddy html including headings, links, bold, Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -395,6 +414,9 @@ exports[` should render shoddy html including headings, links, bold, }, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -411,6 +433,8 @@ exports[` should render shoddy html including headings, links, bold, Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -432,6 +456,9 @@ exports[` should render shoddy html including headings, links, bold, Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -456,6 +483,10 @@ exports[` should render shoddy html including headings, links, bold, Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -478,12 +509,17 @@ exports[` should render shoddy html including headings, links, bold, Object { "fontWeight": "500", }, + Object {}, Object { "fontStyle": "italic", }, Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -504,6 +540,8 @@ exports[` should render shoddy html including headings, links, bold, Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -525,6 +563,9 @@ exports[` should render shoddy html including headings, links, bold, Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -550,6 +591,10 @@ exports[` should render shoddy html including headings, links, bold, Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -565,6 +610,9 @@ exports[` should render shoddy html including headings, links, bold, Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -583,6 +631,8 @@ exports[` should render shoddy html including headings, links, bold, Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -597,6 +647,7 @@ exports[` should render shoddy html including headings, links, bold, style={ Array [ Object {}, + Object {}, ] } > @@ -656,6 +707,8 @@ exports[` should render ul bullets 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -677,6 +730,8 @@ exports[` should render ul bullets 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > 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 4d400bf..9064c67 100644 --- a/example/__tests__/__snapshots__/Example-test.js.snap +++ b/example/__tests__/__snapshots__/Example-test.js.snap @@ -35,6 +35,7 @@ exports[` should render 1`] = ` style={ Array [ Object {}, + Object {}, ] } > @@ -55,6 +56,8 @@ exports[` should render 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -82,11 +85,15 @@ exports[` should render 1`] = ` Object { "fontStyle": "italic", }, + Object {}, Object { "fontWeight": "500", }, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -102,6 +109,8 @@ exports[` should render 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -123,6 +132,9 @@ exports[` should render 1`] = ` Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -147,6 +159,10 @@ exports[` should render 1`] = ` Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -169,12 +185,17 @@ exports[` should render 1`] = ` Object { "fontWeight": "500", }, + Object {}, Object { "fontStyle": "italic", }, Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -195,6 +216,8 @@ exports[` should render 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -216,6 +239,9 @@ exports[` should render 1`] = ` Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -241,6 +267,10 @@ exports[` should render 1`] = ` Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -256,6 +286,9 @@ exports[` should render 1`] = ` Object {}, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -274,6 +307,8 @@ exports[` should render 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -304,6 +339,8 @@ exports[` should render 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -329,6 +366,9 @@ exports[` should render 1`] = ` }, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -345,6 +385,8 @@ exports[` should render 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -369,6 +411,9 @@ exports[` should render 1`] = ` }, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -385,6 +430,8 @@ exports[` should render 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -409,6 +456,9 @@ exports[` should render 1`] = ` }, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -425,6 +475,8 @@ exports[` should render 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -449,6 +501,9 @@ exports[` should render 1`] = ` }, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -465,6 +520,8 @@ exports[` should render 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -489,6 +546,9 @@ exports[` should render 1`] = ` }, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -505,6 +565,8 @@ exports[` should render 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -529,6 +591,9 @@ exports[` should render 1`] = ` }, Object {}, Object {}, + Object {}, + Object {}, + Object {}, ] } > @@ -543,6 +608,8 @@ exports[` should render 1`] = ` Array [ Object {}, Object {}, + Object {}, + Object {}, ] } > @@ -575,6 +642,7 @@ exports[` should render 1`] = ` style={ Array [ Object {}, + Object {}, ] } > diff --git a/package.json b/package.json index d787d2a..ebb6fba 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "url": "git://github.com/jsdf/react-native-htmlview.git" }, "dependencies": { - "css-to-react-native": "git+https://github.com/styled-components/css-to-react-native.git", + "css-to-react-native": "^2.0", "entities": "^1.1.1", "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" From b5e06b54839b6592e6a8ef0f4cd5f957bf14450c Mon Sep 17 00:00:00 2001 From: Markus Guenther Date: Wed, 12 Apr 2017 04:04:37 +0200 Subject: [PATCH 8/9] [TASK] Remove unused imports --- HTMLView.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/HTMLView.js b/HTMLView.js index f4ada0b..834cd39 100644 --- a/HTMLView.js +++ b/HTMLView.js @@ -1,6 +1,4 @@ import React, {Component, PropTypes} from 'react'; -import _ from 'lodash/'; -import transform from 'css-to-react-native'; import htmlToElement from './htmlToElement'; import { Linking, From d8c08881663ee88e6a4c8b527bba1229140ace20 Mon Sep 17 00:00:00 2001 From: Markus Guenther Date: Wed, 12 Apr 2017 13:31:46 +0200 Subject: [PATCH 9/9] [FEATURE] Add whitelist and blacklist for inline style properties --- HTMLView.js | 6 ++ __tests__/__snapshots__/HTMLView-test.js.snap | 46 +++++----- .../__snapshots__/Example-test.js.snap | 86 +++++++++---------- htmlToElement.js | 19 +++- 4 files changed, 87 insertions(+), 70 deletions(-) diff --git a/HTMLView.js b/HTMLView.js index 834cd39..329253f 100644 --- a/HTMLView.js +++ b/HTMLView.js @@ -62,6 +62,8 @@ class HtmlView extends Component { linkHandler: this.props.onLinkPress, styles: Object.assign({}, baseStyles, this.props.stylesheet), customRenderer: this.props.renderNode, + inlineStyleWhitelist: this.props.inlineStyleWhitelist, + inlineStyleBlacklist: this.props.inlineStyleBlacklist }; htmlToElement(value, opts, (err, element) => { @@ -91,12 +93,16 @@ HtmlView.propTypes = { onLinkPress: PropTypes.func, onError: PropTypes.func, renderNode: PropTypes.func, + inlineStyleWhitelist: PropTypes.array, + inlineStyleBlacklist: PropTypes.array, }; HtmlView.defaultProps = { addLineBreaks: true, onLinkPress: url => Linking.openURL(url), onError: console.error.bind(console), + inlineStyleWhitelist: [], + inlineStyleBlacklist: [], }; export default HtmlView; diff --git a/__tests__/__snapshots__/HTMLView-test.js.snap b/__tests__/__snapshots__/HTMLView-test.js.snap index c733459..ac49fb7 100644 --- a/__tests__/__snapshots__/HTMLView-test.js.snap +++ b/__tests__/__snapshots__/HTMLView-test.js.snap @@ -96,13 +96,13 @@ exports[` should not render extra linebreaks if configured not to 1`] ellipsizeMode="tail" style={ Array [ + Object {}, + Object {}, + Object {}, Object { "fontSize": 30, "fontWeight": "500", }, - Object {}, - Object {}, - Object {}, ] } > @@ -264,13 +264,13 @@ exports[` should render an empty element 1`] = ` ellipsizeMode="tail" style={ Array [ + Object {}, + Object {}, + Object {}, Object { "color": "#007AFF", "fontWeight": "500", }, - Object {}, - Object {}, - Object {}, ] } > @@ -408,15 +408,15 @@ exports[` should render shoddy html including headings, links, bold, ellipsizeMode="tail" style={ Array [ - Object { - "fontSize": 30, - "fontWeight": "500", - }, Object {}, Object {}, Object {}, Object {}, Object {}, + Object { + "fontSize": 30, + "fontWeight": "500", + }, ] } > @@ -477,9 +477,6 @@ exports[` should render shoddy html including headings, links, bold, ellipsizeMode="tail" style={ Array [ - Object { - "fontStyle": "italic", - }, Object {}, Object {}, Object {}, @@ -487,6 +484,9 @@ exports[` should render shoddy html including headings, links, bold, Object {}, Object {}, Object {}, + Object { + "fontStyle": "italic", + }, ] } > @@ -506,20 +506,20 @@ exports[` should render shoddy html including headings, links, bold, ellipsizeMode="tail" style={ Array [ - Object { - "fontWeight": "500", - }, Object {}, - Object { - "fontStyle": "italic", - }, Object {}, Object {}, Object {}, Object {}, Object {}, Object {}, + Object { + "fontStyle": "italic", + }, Object {}, + Object { + "fontWeight": "500", + }, ] } > @@ -584,10 +584,6 @@ exports[` should render shoddy html including headings, links, bold, ellipsizeMode="tail" style={ Array [ - Object { - "color": "#007AFF", - "fontWeight": "500", - }, Object {}, Object {}, Object {}, @@ -595,6 +591,10 @@ exports[` should render shoddy html including headings, links, bold, Object {}, Object {}, Object {}, + Object { + "color": "#007AFF", + "fontWeight": "500", + }, ] } > diff --git a/example/__tests__/__snapshots__/Example-test.js.snap b/example/__tests__/__snapshots__/Example-test.js.snap index 9064c67..e8abe7d 100644 --- a/example/__tests__/__snapshots__/Example-test.js.snap +++ b/example/__tests__/__snapshots__/Example-test.js.snap @@ -82,18 +82,18 @@ exports[` should render 1`] = ` ellipsizeMode="tail" style={ Array [ - Object { - "fontStyle": "italic", - }, Object {}, - Object { - "fontWeight": "500", - }, Object {}, Object {}, Object {}, Object {}, + Object { + "fontWeight": "500", + }, Object {}, + Object { + "fontStyle": "italic", + }, ] } > @@ -153,9 +153,6 @@ exports[` should render 1`] = ` ellipsizeMode="tail" style={ Array [ - Object { - "fontStyle": "italic", - }, Object {}, Object {}, Object {}, @@ -163,6 +160,9 @@ exports[` should render 1`] = ` Object {}, Object {}, Object {}, + Object { + "fontStyle": "italic", + }, ] } > @@ -182,20 +182,20 @@ exports[` should render 1`] = ` ellipsizeMode="tail" style={ Array [ - Object { - "fontWeight": "500", - }, Object {}, - Object { - "fontStyle": "italic", - }, Object {}, Object {}, Object {}, Object {}, Object {}, Object {}, + Object { + "fontStyle": "italic", + }, Object {}, + Object { + "fontWeight": "500", + }, ] } > @@ -260,10 +260,6 @@ exports[` should render 1`] = ` ellipsizeMode="tail" style={ Array [ - Object { - "color": "#007AFF", - "fontWeight": "500", - }, Object {}, Object {}, Object {}, @@ -271,6 +267,10 @@ exports[` should render 1`] = ` Object {}, Object {}, Object {}, + Object { + "color": "#007AFF", + "fontWeight": "500", + }, ] } > @@ -360,15 +360,15 @@ exports[` should render 1`] = ` ellipsizeMode="tail" style={ Array [ - Object { - "fontSize": 36, - "fontWeight": "500", - }, Object {}, Object {}, Object {}, Object {}, Object {}, + Object { + "fontSize": 36, + "fontWeight": "500", + }, ] } > @@ -405,15 +405,15 @@ exports[` should render 1`] = ` ellipsizeMode="tail" style={ Array [ - Object { - "fontSize": 30, - "fontWeight": "500", - }, Object {}, Object {}, Object {}, Object {}, Object {}, + Object { + "fontSize": 30, + "fontWeight": "500", + }, ] } > @@ -450,15 +450,15 @@ exports[` should render 1`] = ` ellipsizeMode="tail" style={ Array [ - Object { - "fontSize": 24, - "fontWeight": "500", - }, Object {}, Object {}, Object {}, Object {}, Object {}, + Object { + "fontSize": 24, + "fontWeight": "500", + }, ] } > @@ -495,15 +495,15 @@ exports[` should render 1`] = ` ellipsizeMode="tail" style={ Array [ - Object { - "fontSize": 18, - "fontWeight": "500", - }, Object {}, Object {}, Object {}, Object {}, Object {}, + Object { + "fontSize": 18, + "fontWeight": "500", + }, ] } > @@ -540,15 +540,15 @@ exports[` should render 1`] = ` ellipsizeMode="tail" style={ Array [ - Object { - "fontSize": 14, - "fontWeight": "500", - }, Object {}, Object {}, Object {}, Object {}, Object {}, + Object { + "fontSize": 14, + "fontWeight": "500", + }, ] } > @@ -585,15 +585,15 @@ exports[` should render 1`] = ` ellipsizeMode="tail" style={ Array [ - Object { - "fontSize": 12, - "fontWeight": "500", - }, Object {}, Object {}, Object {}, Object {}, Object {}, + Object { + "fontSize": 12, + "fontWeight": "500", + }, ] } > diff --git a/htmlToElement.js b/htmlToElement.js index dec0959..a249eaa 100644 --- a/htmlToElement.js +++ b/htmlToElement.js @@ -38,17 +38,27 @@ export default function htmlToElement(rawHtml, opts, done) { const styleString = parent.attribs.style.trim(), inlineStyleRules = _.unescape(styleString).split(';').filter(String), inlineStyles = inlineStyleRules.map(function(rule) { - return rule.trim().split(':'); + const ruleSet = rule.trim().split(':'), + propertyName = ruleSet[0]; + if (opts.inlineStyleBlacklist.length > 0 && opts.inlineStyleBlacklist.includes(propertyName)) { + return null; + } + + if (opts.inlineStyleWhitelist.length <= 0 || opts.inlineStyleWhitelist.includes(propertyName)) { + return ruleSet; + } else { + return null; + } }); - inlineStyle = transform(inlineStyles, ['fontFamily']); + inlineStyle = transform(inlineStyles, opts.inlineStyleBlacklist); } } catch (error) { //console.error(error) } - const style = [opts.styles[parent.name] || {}, inlineStyle]; - return parent.parent ? style.concat(getInheritedStyles(parent.parent)) : style; + const style = [inlineStyle, opts.styles[parent.name] || {}]; + return parent.parent ? _.concat(getInheritedStyles(parent.parent), style) : style; } function domToElement(dom, parent) { @@ -61,6 +71,7 @@ export default function htmlToElement(rawHtml, opts, done) { } if (node.type == 'text') { + const inlineStyle = parent ? getInheritedStyles(parent) : null; return ( {entities.decodeHTML(node.data)}