Content search highlighting

[elzody]

💬 Summary

Part of #5816
This PR implements search highlighting in Text. It is mainly a TipTap extension which subscribes to an event emitted with a search query, and will add highlighting styles to the editor document if matches to the search query are found.

How to test this PR

From the browser console, emit an event with the event bus:

_nc_event_bus.emit('text:editor:search', { query: 'Test' })

Replace 'Test' with the string you want to search for.

Screenshot

📝 TODO

• search highlighting

☑️ Checklist

• Tests
• Formatting + Linting
• Signed-off commits

[juliusknorr]

For easier testing just paste this in the js console:

_nc_event_bus.emit('text:editor:search', { query: 'Test' })

[juliusknorr]

Some odd behaviour seems that the search is reset when a sync request comes in, that would still be good to fix, otherwise this looks really good 👍

[elzody]

Some odd behaviour seems that the search is reset when a sync request comes in...

Interestingly, it doesn't happen for me in Collectives, but when I test it by making a plain markdown document in Files and doing a search, it does this. Will look into it further.

UPDATE: I think I fixed it :D

@juliushaertl

[max-nextcloud]

How would i clear the highlight now?

[elzody]

@max-nextcloud Sending an empty string as a search query should clear the highlighting.

This PR is mostly to get the foundation of the search highlighting into Text, and other apps can then use it in their own way and provide the user with a way to clear the highlighting, and it will then just send an empty search query to Text to clear the highlighting

I am also open to other suggestions on how to clear the highlighting if an empty search query doesn't make sense for it

[max-nextcloud]

One tweak still. Approving anyway so you can move on.

[max-nextcloud]

I think you can just return oldState the previous value here. The doc did not change and the query also stayed the same.

That way you also don't need the query variable and can just use newQuery.

[max-nextcloud]

Oh... the way this is defined in prosemirror is slightly confusing as oldState contains the entire state. I think you will need to use all four args of the function so you can reuse the previous value of this plugins state:

apply(tr, value, oldState, newState) {
	...
	if (tr.docChanged || (newQuery !== oldQuery)) {
		...
	} else {
		return value // same as before
	}

[elzody]

So, I think you mean something like this?

apply(tr, value, oldState, newState) {
    const { query: oldQuery } = searchQueryPluginKey.getState(oldState)
    const { query: newQuery } = searchQueryPluginKey.getState(newState)

    if (tr.docChanged || (newQuery !== oldQuery)) {
        const searchResults = runSearch(tr.doc, newQuery)
        return highlightResults(tr.doc, searchResults)
    } else {
        return value
    }
},

It was indeed kind of confusing, I thought it the value parameter there was something I could use, but the docs did not really elaborate on it, so originally I operated on the oldState to be safe. But this would make more sense.