{"action":"created","issue":{"url":"https://api.github.com/repos/archriss/react-native-render-html/issues/118","repository_url":"https://api.github.com/repos/archriss/react-native-render-html","labels_url":"https://api.github.com/repos/archriss/react-native-render-html/issues/118/labels{/name}","comments_url":"https://api.github.com/repos/archriss/react-native-render-html/issues/118/comments","events_url":"https://api.github.com/repos/archriss/react-native-render-html/issues/118/events","html_url":"https://github.com/archriss/react-native-render-html/issues/118","id":303912388,"number":118,"title":"Whitespace handling differs from HTML significantly (no collapsing, newlines ignored)","user":{"login":"fvsch","id":243601,"avatar_url":"https://avatars3.githubusercontent.com/u/243601?v=4","gravatar_id":"","url":"https://api.github.com/users/fvsch","html_url":"https://github.com/fvsch","followers_url":"https://api.github.com/users/fvsch/followers","following_url":"https://api.github.com/users/fvsch/following{/other_user}","gists_url":"https://api.github.com/users/fvsch/gists{/gist_id}","starred_url":"https://api.github.com/users/fvsch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fvsch/subscriptions","organizations_url":"https://api.github.com/users/fvsch/orgs","repos_url":"https://api.github.com/users/fvsch/repos","events_url":"https://api.github.com/users/fvsch/events{/privacy}","received_events_url":"https://api.github.com/users/fvsch/received_events","type":"User","site_admin":false},"labels":[{"id":490889434,"url":"https://api.github.com/repos/archriss/react-native-render-html/labels/enhancement","name":"enhancement","color":"84b6eb","default":true},{"id":490889435,"url":"https://api.github.com/repos/archriss/react-native-render-html/labels/help%20wanted","name":"help wanted","color":"128A0C","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-03-09T17:07:35Z","updated_at":"2018-03-13T14:28:13Z","closed_at":null,"author_association":"NONE","body":"### Is this a bug report or a feature request?\r\n\r\nBug report. Though fixing this might change the behavior of this lib too much for users, so the solutions are probably to write documentation and/or provide an opt-in fix.\r\n\r\n### Have you read [the guidelines](https://github.com/archriss/react-native-render-html/blob/master/CONTRIBUTING.md) regarding bug report?\r\n\r\nYes.\r\n\r\n### Have you read [the documentation](https://github.com/archriss/react-native-render-html/blob/master/README.md) in its entirety?\r\n\r\nYes.\r\n\r\n### Have you made sure that your issue hasn't already been reported/solved?\r\n\r\nYes, to the best of my abilities. :)\r\n\r\n### Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?\r\n\r\nBoth platforms.\r\n\r\n### Is the bug reproductible in a production environment (not a debug one)?\r\n\r\nSorry, have not tried yet in a production build. I expect the same result though.\r\n\r\n### Have you been able to reproduce the bug in [the provided example](https://github.com/archriss/react-native-render-html/tree/master/Demo)?\r\n\r\nHave not tried, but the issue has a really simple setup so it shouldn’t differ.\r\n\r\n### Environment\r\n\r\nEnvironment:\r\n- React: 16.0.0\r\n- React native: 0.51.0\r\n- react-native-render-html: 3.9.0\r\n\r\nTarget Platform:\r\n- Android (7.0)\r\n- iOS (11.2)\r\n\r\n### Steps to Reproduce\r\n\r\nRender this JSX:\r\n\r\n```jsx\r\n<HTML html={'  <div>  foo\\n\\nbar  baz  </div>  <div>zzz</div>  '} />\r\n```\r\n\r\n### Expected Behavior\r\n\r\nI expected react-native-render-html to handle whitespace collapsing similarly to what HTML does. Replacing a rendered space character (U+0020 SPACE) with `•`, that would be:\r\n\r\n```\r\nfoo•bar•baz\r\nzzz\r\n```\r\n\r\n### Actual Behavior\r\n\r\nreact-native-render-html (3.9.0 and master) renders:\r\n\r\n```\r\n••foobar••baz\r\nzzz\r\n```\r\n\r\nWhat seems to work:\r\n\r\n1. Removing spaces outside of block tags if they only contain whitespaces\r\n2. Removing whitespace at the end of a block tag's content\r\n\r\nWhat seems broken:\r\n\r\n1. Removing whitespace at the *beginning* of a block tag's content\r\n2. Collapsing multiple spaces (and other whitespace characters) to a single rendered space, in the middle of text content\r\n3. Collapsing newlines to a single space character, in the middle of text content (newlines seem to be removed altogether)\r\n\r\nI suspect this lib is limited by React Native’s Text component and errs on the side of not manipulating text too much, only removing newlines?\r\n\r\nIf that is the case, I can think of two possible improvements:\r\n\r\n1. Document this behavior and how HTML strings containing a lot of whitespace (which is common with some sources or JS editors) can show extra spaces before or between words.\r\n2. If it makes sense, maybe provide an option for performing more HTML collapsing?\r\n\r\nI’m going to implement some fixes on our side using simple regexps on our HTML. I can post what I come up with here if that’s useful. Or maybe I should do it in alterData for more fine-grained control?\r\n"},"comment":{"url":"https://api.github.com/repos/archriss/react-native-render-html/issues/comments/372684375","html_url":"https://github.com/archriss/react-native-render-html/issues/118#issuecomment-372684375","issue_url":"https://api.github.com/repos/archriss/react-native-render-html/issues/118","id":372684375,"user":{"login":"fvsch","id":243601,"avatar_url":"https://avatars3.githubusercontent.com/u/243601?v=4","gravatar_id":"","url":"https://api.github.com/users/fvsch","html_url":"https://github.com/fvsch","followers_url":"https://api.github.com/users/fvsch/followers","following_url":"https://api.github.com/users/fvsch/following{/other_user}","gists_url":"https://api.github.com/users/fvsch/gists{/gist_id}","starred_url":"https://api.github.com/users/fvsch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fvsch/subscriptions","organizations_url":"https://api.github.com/users/fvsch/orgs","repos_url":"https://api.github.com/users/fvsch/repos","events_url":"https://api.github.com/users/fvsch/events{/privacy}","received_events_url":"https://api.github.com/users/fvsch/received_events","type":"User","site_admin":false},"created_at":"2018-03-13T14:28:13Z","updated_at":"2018-03-13T14:28:13Z","author_association":"NONE","body":"My current solution uses this module:\r\nhttps://gist.github.com/fvsch/d66282c34d48c86ec90bf5acbbff03f4\r\n\r\nWhich I’m using in alterData in this way:\r\n\r\n```js\r\n<HTML html={content} alterData={node => {\r\n  const newData = collapseText(node)\r\n  // return undefined to skip changing node text\r\n  return newData !== node.data ? newData : undefined\r\n}} />\r\n```\r\n\r\nOf course it cannot fix the two issues highlighted in the previous comment."}}
{"actor":{"display_login":"fvsch"}}