[Feature Request] Highlight search results

[thequilo]

Describe your feature request

It would be nice to highlight the words that match the query in the search results. For me, it makes it much easier to find the item I am looking for when I see the matched words highlighted.

[GeoffreyChen777]

From the programming implementation aspect, this is difficult

[thequilo]

I can imagine that. How about doing this just for the simple search and add a second pass, after matching, with something along the lines of result.replace(query_word, "<span class=highlight>" + query_word +"</span>")?

[GeoffreyChen777]

Thanks for your suggestion, will consider that

[igoogolx]

We can use https://github.com/kawamataryo/vue-word-highlighter with less code.

[GeoffreyChen777]

@igoogolx that looks pretty good!

Currently, we can get the searing string: https://github.com/Future-Scholars/paperlib/blob/da0f48e65dd3e4144bb6aaa71c2f07726c3b96f0/app/renderer/services/uistate-service.ts#L45 with vue-word-highlighter, it would be easy to implement this feature.

However, we still need to test the rendering performance to make sure it will not slow down the UI if we have numerous papers.

[GeoffreyChen777]

Seems the performance is ok. #528

This will be available with the next version.

[thequilo]

Thanks a lot!