search

meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.45k stars 585 forks source link

Weird Rendering when text copied from Wikipedia . #335

Closed Krypternite closed 3 years ago

Krypternite commented 4 years ago

Is this a bug report or a feature request?

Bug

Have you read the guidelines regarding bug report?

yes

Have you read the documentation in its entirety?

Yes

Have you made sure that your issue hasn't already been reported/solved?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Exists on both platforms

Is the bug reproductible in a production environment (not a debug one)?

yes

Have you been able to reproduce the bug in the provided example?

yes

Environment

Environment: React native: 0.61 react-native-render-html: 4.2.0

Target Platform: Android ( > 9.0) iOS ( > 12.0)

Steps to Reproduce

Provide the following html as the init html to the component. 

<p style="-webkit-text-size-adjust: auto; margin: 0.5em 0px; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: sans-serif; font-size: 15px;"><b>Wikipedia</b>&nbsp;(<span class="rt-commentedText nowrap" style="white-space: nowrap;"><span class="IPA nopopups noexcerpt"><a href="https://en.wikipedia.org/wiki/Help:IPA/English" title="Help:IPA/English" style="color: rgb(11, 0, 128); background-image: none; text-decoration: none !important;">/<span style="border-bottom-width: 1px; border-bottom-style: dotted;"><span title="/ˌ/: secondary stress follows">ˌ</span><span title="'w' in 'wind'">w</span><span title="/ɪ/: 'i' in 'kit'">ɪ</span><span title="'k' in 'kind'">k</span><span title="/ɪ/: 'i' in 'kit'">ɪ</span><span title="/ˈ/: primary stress follows">ˈ</span><span title="'p' in 'pie'">p</span><span title="/iː/: 'ee' in 'fleece'">iː</span><span title="'d' in 'dye'">d</span><span title="/i/: 'y' in 'happy'">i</span><span title="/ə/: 'a' in 'about'">ə</span></span>/</a></span>&nbsp;<span class="nowrap" style="font-size: 13px;">(<span class="unicode haudio"><span class="fn"><span style="margin-right: 0.25em;"><a href="https://en.wikipedia.org/wiki/File:En-uk-Wikipedia.ogg" title="About this sound" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;"><img alt="About this sound" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/11px-Loudspeaker.svg.png" decoding="async" width="11" height="11" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/17px-Loudspeaker.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/22px-Loudspeaker.svg.png 2x" data-file-width="20" data-file-height="20" style="border: 0px; vertical-align: middle; margin: 0px;"></a></span><a href="https://upload.wikimedia.org/wikipedia/commons/c/c5/En-uk-Wikipedia.ogg" class="internal" title="En-uk-Wikipedia.ogg" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">listen</a></span></span>)</span></span>&nbsp;<a href="https://en.wikipedia.org/wiki/Help:Pronunciation_respelling_key" title="Help:Pronunciation respelling key" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;"><i title="English pronunciation respelling">wik-ih-<span style="font-size: 13px;">PEE</span>-dee-ə</i></a>&nbsp;or&nbsp;<span class="rt-commentedText nowrap" style="white-space: nowrap;"><span class="IPA nopopups noexcerpt"><a href="https://en.wikipedia.org/wiki/Help:IPA/English" title="Help:IPA/English" style="color: rgb(11, 0, 128); background-image: none; text-decoration: none !important;">/<span style="border-bottom-width: 1px; border-bottom-style: dotted;"><span title="/ˌ/: secondary stress follows">ˌ</span><span title="'w' in 'wind'">w</span><span title="/ɪ/: 'i' in 'kit'">ɪ</span><span title="'k' in 'kind'">k</span><span title="/i/: 'y' in 'happy'">i</span><span title="/ˈ/: primary stress follows">ˈ</span><span title="'p' in 'pie'">p</span><span title="/iː/: 'ee' in 'fleece'">iː</span><span title="'d' in 'dye'">d</span><span title="/i/: 'y' in 'happy'">i</span><span title="/ə/: 'a' in 'about'">ə</span></span>/</a></span>&nbsp;<span class="nowrap" style="font-size: 13px;">(<span class="unicode haudio"><span class="fn"><span style="margin-right: 0.25em;"><a href="https://en.wikipedia.org/wiki/File:En-us-Wikipedia.ogg" title="About this sound" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;"><img alt="About this sound" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/11px-Loudspeaker.svg.png" decoding="async" width="11" height="11" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/17px-Loudspeaker.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/22px-Loudspeaker.svg.png 2x" data-file-width="20" data-file-height="20" style="border: 0px; vertical-align: middle; margin: 0px;"></a></span><a href="https://upload.wikimedia.org/wikipedia/commons/2/2e/En-us-Wikipedia.ogg" class="internal" title="En-us-Wikipedia.ogg" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">listen</a></span></span>)</span></span>&nbsp;<a href="https://en.wikipedia.org/wiki/Help:Pronunciation_respelling_key" title="Help:Pronunciation respelling key" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;"><i title="English pronunciation respelling">wik-ee-<span style="font-size: 13px;">PEE</span>-dee-ə</i></a>) is a multilingual&nbsp;<a href="https://en.wikipedia.org/wiki/Online_encyclopedia" title="Online encyclopedia" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">online encyclopedia</a>&nbsp;created and maintained as an&nbsp;<a href="https://en.wikipedia.org/wiki/Open_collaboration" title="Open collaboration" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">open collaboration</a>&nbsp;project<sup id="cite_ref-McNeil2011_6-0" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-McNeil2011-6" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[4]</a></sup>&nbsp;by a&nbsp;<a href="https://en.wikipedia.org/wiki/Wikipedians" class="mw-redirect" title="Wikipedians" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">community of volunteer editors</a>&nbsp;using a&nbsp;<a href="https://en.wikipedia.org/wiki/Wiki" title="Wiki" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">wiki</a>-based editing system.<sup id="cite_ref-Poe2006_7-0" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-Poe2006-7" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[5]</a></sup>&nbsp;It is the largest and most popular general reference work on the&nbsp;<a href="https://en.wikipedia.org/wiki/World_Wide_Web" title="World Wide Web" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">World Wide Web</a>,<sup id="cite_ref-Tancer_8-0" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-Tancer-8" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[6]</a></sup><sup id="cite_ref-Woodson_9-0" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-Woodson-9" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[7]</a></sup><sup id="cite_ref-10" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-10" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[8]</a></sup>&nbsp;and is one of the most popular websites ranked by&nbsp;<a href="https://en.wikipedia.org/wiki/Alexa_Internet" title="Alexa Internet" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">Alexa</a>&nbsp;as of January 2020.<sup id="cite_ref-Alexa_siteinfo_11-0" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-Alexa_siteinfo-11" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[9]</a></sup>&nbsp;It features exclusively&nbsp;<a href="https://en.wikipedia.org/wiki/Free_content" title="Free content" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">free content</a>&nbsp;and no commercial&nbsp;<a href="https://en.wikipedia.org/wiki/Advertising" title="Advertising" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">ads</a>, and is owned and supported by the&nbsp;<a href="https://en.wikipedia.org/wiki/Wikimedia_Foundation" title="Wikimedia Foundation" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">Wikimedia Foundation</a>, a&nbsp;<a href="https://en.wikipedia.org/wiki/501(c)(3)_organization" title="501(c)(3) organization" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">non-profit organization</a>&nbsp;funded primarily through&nbsp;<a href="https://en.wikipedia.org/wiki/Donation" title="Donation" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">donations</a>.<sup id="cite_ref-12" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-12" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[10]</a></sup><sup id="cite_ref-13" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-13" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[11]</a></sup><sup id="cite_ref-14" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-14" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[12]</a></sup><sup id="cite_ref-15" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-15" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[13]</a></sup></p>
<p style="-webkit-text-size-adjust: auto; margin: 0.5em 0px; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: sans-serif; font-size: 15px;">Wikipedia was launched on January 15, 2001, by&nbsp;<a href="https://en.wikipedia.org/wiki/Jimmy_Wales" title="Jimmy Wales" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">Jimmy Wales</a>&nbsp;and&nbsp;<a href="https://en.wikipedia.org/wiki/Larry_Sanger" title="Larry Sanger" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">Larry Sanger</a>.<sup id="cite_ref-16" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-16" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[14]</a></sup>Sanger coined its name,<sup id="cite_ref-MiliardWho_17-0" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-MiliardWho-17" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[15]</a></sup><sup id="cite_ref-J_Sidener_18-0" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-J_Sidener-18" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[16]</a></sup>&nbsp;as a&nbsp;<a href="https://en.wikipedia.org/wiki/Portmanteau" title="Portmanteau" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">portmanteau</a>&nbsp;of "<a href="https://en.wiktionary.org/wiki/wiki#Hawaiian" class="extiw" title="wikt:wiki" style="text-decoration: none; color: rgb(102, 51, 102); background-image: none;">wiki</a>" (the&nbsp;<a href="https://en.wikipedia.org/wiki/Hawaiian_language" title="Hawaiian language" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">Hawaiian</a>&nbsp;word for "quick"<sup id="cite_ref-19" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-19" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[17]</a></sup>) and "encyclopedia". Initially an English-language encyclopedia, versions of Wikipedia in other languages were quickly developed. With at least&nbsp;<a href="https://en.wikipedia.org/wiki/Special:Statistics" title="Special:Statistics" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">5,997,956 articles</a>,<sup id="cite_ref-20" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-20" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[note 3]</a></sup>&nbsp;the&nbsp;<a href="https://en.wikipedia.org/wiki/English_Wikipedia" title="English Wikipedia" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">English Wikipedia</a>&nbsp;is the largest of the more than 290 Wikipedia encyclopedias. Overall, Wikipedia comprises more than 40 million articles in 301 different languages<sup id="cite_ref-CBS_21-0" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-CBS-21" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[18]</a></sup>&nbsp;and by February 2014 it had reached 18 billion page views and nearly 500 million unique visitors per month.<sup id="cite_ref-small_screen_22-0" class="reference" style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-size: 11.199999809265137px;"><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-small_screen-22" style="text-decoration: none; color: rgb(11, 0, 128); background-image: none;">[19]</a></sup></p>

Actual Behavior

(Write what happened. Add screencasts/screenshots!)

image

Copying and pasting the html from first two paragraphs of https://en.wikipedia.org/wiki/Wikipedia causes the weird rendering. I am not able to figure what is the issue. Maybe there are specials characters in the text but I am not able to figure out.

Please help. Thanks

jsamr commented 4 years ago

@Krypternite We are in the process of cleaning the issue tracker to make it manageable. Do you still have the problem?

jsamr commented 3 years ago

I am closing due to inactivity.