Instantsearch.js: Highlighter doesn't parse html entities

[zackify]

Bug: What is the current behavior?

Currently, snippets and highlights are rendering like:

<span class="ais-Highlight"><span class="ais-Highlight__nonHighlighted">&amp;nbsp;&amp;nbsp;fadsfasfasd</span></span>

Bug: What is the expected behavior?

For the highlighter to parse htmlentities, at least ignore them or something. Doing a dangerouslySetInnerHTML is how the output should look.

What project are you opening an issue for?

• react-instantsearch

What is the version you are using? Always use the latest one before opening a bug issue.
3.2.1

[zackify]

Any updates?

[Haroenv]

Not yet, this week was very busy. We will make sure this issue gets resolved asap.

[Haroenv]

Could you add a fiddle with data that causes this issue? That way it's easier to replicate

[Haroenv]

I think we will go with not supporting this use case. We don't want to use dangerouslySetInnerhtml for its obvious XSS problems. This means that we can't support html entities in strings.

See https://codepen.io/anon/pen/PpQbbX. There are three ways to make a no break space to show up, we use the first one, since we don't control the string.

However you can change your source text to be highlighted to not have html entities, but rather unicode escape codes.

// your current text
const String = () => <div>{'ok&nbsp;works'}</div>;
ReactDOM.render(<String />, document.getElementById('string'));

// same text, but with unicode
const Unicode = () => <div>{'ok\u00A0works'}</div>;
ReactDOM.render(<Unicode />, document.getElementById('unicode'));

// if you'd write it straight in jsx (no string) it can
// work, but we can't do that
const Naked = () => <div>ok&nbsp;works</div>;
ReactDOM.render(<Naked />, document.getElementById('naked'));

I'm sorry that this is the case, but adding html entity escaping or rendering is nontrivial.

See also https://github.com/facebook/jsx/issues/4

Have a nice day!