Introducing ProseMirror Suggestion Mode Posted on March 06, 2025 by Dave Fowler
I've been working a lot with ProseMirror, a very popular editor for the web. For a larger project, I needed a way for AI to make suggestions into a document. I saw on the ProseMirror forums, that this has been a highly requested feature for many years, but no one had really either been able to implement it or just hadn't bothered to open source it. So I decided to develop and release it as a standalone plugin that anyone could use.
Suggestion Mode
I call it ProseMirror Suggestion Mode and it's released on Github under the MIT license. It basically enables a user to leave suggestions in a document, just as you can in Google Docs or Word.
Features
- Toggle suggestion mode on/off
- Highlight suggested text additions in green, deletions in red
- Show suggested deletions as compact red squares that reveal text on hover
- Accept/reject individual suggestions
- Does not conflict with formatting or undo/redo
- Clean, minimal UI
- Text search/replace helpers for AI generated suggestions
Installation & Usage
I'm not going to repeat all of the documentation here, for more instructions on installation and usage, see the Github README.
Next Steps
This took over a week and there's still more to be done. There are a lot of edge cases and a lot of extra functionality that would be wonderful to include. I'd love any feedback on it. If you file an issue or reach out, if you have some contributions, coincidentally enough, another group from Handle with Care, a consulting group that spun out of the NYTimes, has been working on the same thing and just two days after me has released theirs as well. We had a chat today to talk about potentially merging our efforts and making an even better version. They've done a really nice job on a lot of the edge cases and the back end mechanics of the suggestion engine and have many years more experience with ProseMirror so I'm excited to join forces.
The main next things I'd like to do are:
- ensure it works well with undo/redo
- ensure it works well with formatting changes
- potentially split the UI as a separate optional plugin
- combine the accepting/rejecting of adjacent inserts and deletes
Things I Learned
I hadn't really released an open source project in a long time or maybe ever. There are a lot of nuances to it that I hadn't fully appreciated:
- how are versions and release notes done? - I made a /releases markdown file
- what are the coding styles and practices for the community? - this is especially relevant if your project is a plugin for another project. It's hard to do from the outside, but I tried to be as ProseMirror esq as possible.
- clean code especially matters - it's surprising how much extra work it is to make the code clean knowing that others might read it, use it, and ideally help maintain it. That and the amount of work it is to make a library for more than one use case (and unknown use cases) is much harder than the hack shortcuts you can take when you're the only one using your code. I found these forcing functions to be quite nice though and ended up rewriting the code multiple times as I learned more.
- multiple examples are hard to maintain - I started with 3 examples and maintained them through a lot of re-writes. That was a lot of extra maintenece work. I should have started with one (the most complex) example and added more when it was stable.
- npm process - it was suprisingly straight forward to publish a package, especially with AI creating the package.json file for me.
- so much about ProseMirror - though honestly its still a bit of a black box to me.