Example code for Prose Mirror search?

1

I am trying to integrate the Prose Mirror search code into my editor, but I’m having a bit of a tough time, could use a bit of guidance.

I am currently adding the search plugin (with no parameters) in my plugins array when I create my view (adding search() in the plugin array). I assume that adds it with no active search parameter, which is what I would want initially.

Then, in my js code I am calling the setSearchState function with a very simple SearchQuery initialization and attempting to dispatch the transaction:

setSearchState(view.state.tr, new SearchQuery({search: searchString}));
view.dispatch(view.state.tr);

Both the setSearchState function and the SearchQuery object are imported from the search module, the view is my editor’s view that is shown on screen and the searchString is what I am looking to find.

What might I be missing or doing wrong?

2

I have no idea how the prosemirror-search module works, but you can’t use view.state.tr directly. Every time you do, you instantiate a new transaction. Reuse the same transaction:

const tr = view.state.tr

setSearchState(tr, new SearchQuery({ search }))

view.dispatch(tr)
3

Teemu, thanks for that. It works now (yeay!).

One more quick search question…

If I want to limit the search results to a specific type of node (i.e. only in bullet lists), do I have to modify the search js (or ts) code to add targeted code to limit the findNext code, or should I be somehow adding a function to the SearchQuery filer parameter. I want my users to be able to optionally specify the types of nodes that should be searched. That function (which I am not setting now) seems to be the only variable that can check a result to see if it is valid.

4

You probably have to extend SearchQuery or customize it directly, I don’t see that the API supports node/context-matching.

5

One final question: When I call the findNext or findPrev, my editor is not scrolling to the found item. I do have a popup find box in its own div (which is getting the focus), do I have to focus the editor before executing the find or prev to have it scroll into view? Note that the desired search item is being set as active properly, but just no scrolling to the element.

6

Okay, I sorted that out by focusing on the ProseMirror div.

7

Final question for now: What is the best way to clear the search results when I close the Find box? I tried setting the search to an empty string, but if there was an active search selected, it selects the entire paragraph where the result was located, not exactly the best result. I guess the active search result item shoudl probably just be what is selected, not the enclosing paragraph.

8

Are you sure that setting the query changed the selection? It shouldn’t do that, and I don’t really see a way in which it can be doing that.

9

Not 100% sure, Marijn, since I use a popup box for the find text entry, with the focus not always on the editor. I will investigate further, although I get that it might not make real world sense.

I am wondering, however, if there is an easy way to do a findFirst that resets to show the first match, not the next. When I do a setSearchState, it creates the decorations but it seems I have to then call findNext to actually highlight the first match found. If I go to the find box and hit enter again, it just goes to the next match, but that often doesn’t make logical sense. The example is that I have a “match whole words’“ icon in my find popup, which when clicked re-runs the setSearchState with the proper boolean flag, but it does not find the first match, it finds the next match after whatever match was previously active.