search

bvaughn / react-highlight-words

React component to highlight words within a larger body of text
https://bvaughn.github.io/react-highlight-words/
MIT License
2.16k stars 170 forks source link

Adjacent active chunks are handled as a single chunk #68

Open grigasp opened 5 years ago

grigasp commented 5 years ago

See this example: https://codesandbox.io/s/7j2njo9l2q. 

searchWords={["e"]}
textToHighlight="sleep"
activeIndex={0}

highlights both ee instead of just the first e. With activeIndex={1} nothing gets highlighted.

bvaughn commented 5 years ago

Interesting. Looks like this is due to the [highlight-words-core combineChunks method joining the adjacent chunks before returning them.

I haven't thought about this code in a long time, but my initial thoughts are that the easiest way to fix this would probably be to tell highlight-words-core not to combine chunks if an activeIndex value is provided. Probably the easiest way to do that is to just pass a no-op findChunks param to highlight-words-core.

Interested in contributing a PR that does something like this?

bigappleinsider commented 5 years ago

Here's a demo of the issue:

https://codesandbox.io/s/14nx7w1404