feat(reverseHighlight/reverseSnippet): Implements reverseHighlight and reverseSnippet

[shortcuts]

This implements reverseHighlight and reverseSnippet.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a88b614:

Sandbox	Source
InstantSearch.js	Configuration

[shortcuts]

I ran into a problem with reverseHighlighting and non alphanumeric characters where I didn't find which logic to follow. I expose below the 3 method I came across so I can get your thoughts on that.

Could you please let me know what you think/which way is the best for you?

Sorry for the low quality post

1. The actual behavior that autocomplete follows, which leaves any non alphanumeric character bold.
   

2. The sibling behavior, where the non alphanumeric character will take the highlighted value of the previous and next element if they match, reverse it if they don't.
   

3. The highlight behavior, where it just escape any non alphanumeric characters like the current highlight method.
   

cc @algolia/instantsearch-for-websites

[Haroenv]

Thanks for trying out all those options @shortcuts, I'm a fan of the method #2's output, and I think it would be better for highlight itself too.

[francoischalifour]

@shortcuts The "sibling behavior" version is interesting. The only place I find it a bit weird is:

(Model)

[...] where the last ) is bold. It makes me wonder is never highlighting non-alphanumeric characters would make sense.

Have you seen this sibling pattern anywhere else?

[shortcuts]

@francoischalifour I've never seen this pattern used before and this behavior is the only reason why I'm not sure about using it.

I could think of a workaround for the parenthesis where if something inside is highlighted, we remove the highlight on the opening/closing one, but that would leave some characters bold

Before	After
(ModelExample)	(ModelExample)

The thing is that it would add even more computation on top of what's already done

[Haroenv]

I think the sibling behaviour in that case is actually correct, since you are matching on the rest of the sentence, including that closing parenthesis. I think (ModelExample) looks more "pay attention from here onwards", while (ModelExample) looks like "pay only attention to 'lExample'", which will be odd if there's other highlighted text after this word.

Google's autocomplete seems to try following a sibling behaviour, although it often sees separators as typos and won't highlight the match

[shortcuts]

You're right, they are also doing it.

I didn't find a good "long sentence in parentheses" to do more tests but that's already a good point.

[francoischalifour]

Looks good—great job!

Since the bundlesize integration is disabled right now, what's the bundle size increase of this feature?

[shortcuts]

Here's what I got for the bundle size

 FAIL  ./dist/instantsearch.production.min.js: 65.29KB > maxSize 65.25KB (gzip)
 PASS  ./dist/instantsearch.development.js: 151.83KB < maxSize 160KB (gzip)

[francoischalifour]

You can increase it to 65.5KB then.

[Haroenv]

looks good!