How to implement a search and replace plugin?

Since prosemirror doc has its own mechanism to compute text position, I can not use a common string search algorithm to index the target substring.

For example, we have a paragraph, there’re two text nodes inside.

p

   text "cae" [mark: bold] 

   text "eddc"

I want to search “caeed”

But it seems like very difficult to compute the range(start, end) of the found substring

@marjin Thanks for the great work of ProseMirror! Any idea about this question?

Like the above, I’m looking for thoughts on the ‘best’ way to implement find/replace in ProseMirror. Some options I found:

  1. from 2016: GitHub - mattberkowitz/prosemirror-find-replace: Find & Replace plugin for ProseMirror thread: Find and Replace plugin It’s for old standalone prosemirror (vs. current organization as multiple modules). I attempted a quick test anyway, but no luck – perhaps only because the browser uses the same cmd-f (and/or that I’m a new to ProseMirror). I thought it was worth asking here before digging too far. The main code: prosemirror-find-replace/src/index.js at master · mattberkowitz/prosemirror-find-replace · GitHub

  2. ‘port’ from CodeMirror: search/src at main · codemirror/search · GitHub … but no idea if that’s realistic.

  3. ‘port’ from tiptap: tiptap-search-and-replace/src/searchAndReplace.ts at main · sereneinserenade/tiptap-search-and-replace · GitHub which I think is a v2 version by @sereneinserenade of tiptap v1 code

  4. ‘port’ from Wax: wax-prosemirror-services/src/FindAndReplaceService · master · wax / wax-prosemirror · GitLab

Thoughts? Anyone interested in helping out?

Goal: release an MIT licensed version with functionality similar to CodeMirror’s search

(Separate and out of scope, but full disclosure for those who care: we built our own UI around CodeMirror’s search and would do something similar for ProseMirror. Both will be part of one or more commercial desktop apps.)

1 Like

can’t say anything about other three options you listed, but just wanted to say that I’ve used my searchAndReplace port of tiptap v1 in multiple projects successfully. lmk if you run into an issue. I’ll try my best to fix.

Will it work in ProseMirror (without any other parts of tiptap)? Or, if not, how much work to port?

(I know that tiptap is based on ProseMirror but I’m not sure what that implies in practice.)

will it work in prosemirror?

The main part is the code around a prosemirror state Plugin anyways in addProseMirrorPlugins, tiptap part is just maintaining the state of search/replate terms, decorations & such.

I assume one can just extract the plugin, helper functions used in plugin and maintain the state themselves while triggering the correct transactions so plugin state is recalculated when input data changes.

how much work to port

A couple of hours should be enough, although this is a rough estimation since I’m unaware of your app’s other intricacies.

@marijn any suggestions? The core of what we fund or do would be MIT license.

No suggestions. Do you thing. Or if you want to contract me to implement this, write me an email.

Sent!

The new prosemirror-search package now provides some search-related primitives (though not a full UI).

3 Likes

Will there be a UI test page?