Page Search #382
Description
We will use the actual rendered DOM to implement search, instead of relying on slate's tree or anything like that. This let's us incorporate more into the search results that just the document, like titles of documents and similar.
We can use existing libraries like https://github.com/padolsey/findAndReplaceDOMText for inspiration, but I believe we must build our own solution that also integrates with highlighting the results on the page.
The algorithm will accept a root node as input, allowing us to limit which subtrees are taken into account when searching (since we don't want text in buttons or similar showing up in the search) it will also accept a search term of course. Since we will most likely use regexes for this anyway, we can allow search terms to be regexes too (like vscode allows too for example)
UI
The UI portion of this pitch will implement a floating search box, similar in style to notion desktop, or firefox, or chrome. This maintains the established UI pattern on search-on-page.
Search results will be highlighted in light yellow.
Context
There are possible page search APIs exposed by the webview components, but the returned data is rather unusable. (of macOS it only returns a bool indicating if something was found) see this PR for more info.
Technical Tasks
- Search UI popup
- Next match button
- Prev match button
- Cmd+F shortcut
- text highlighting
- RegExp input