text icon indicating copy to clipboard operation
text copied to clipboard

Content search highlighting

Open elzody opened this issue 1 year ago • 0 comments

💬 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

In order to test this PR, I recommend using this branch of Collectives, and inside of the filterString watcher in PageList.vue you can emit the text:editor:search event and give it the query to search. For example:

watch: {
  filterString() {
    // ...

    emit('text:editor:search', {
      query: this.filterString,
    })
  }
}

You of course need to import the @nextcloud/event-bus for this to work.

Screenshot

image

📝 TODO

  • [x] search highlighting
  • [ ] jump to previous/next search

☑️ Checklist

  • [x] Tests
  • [x] Formatting + Linting
  • [x] Signed-off commits

elzody avatar May 20 '24 19:05 elzody