Use-prosemirror

Hi everyone,

I’d like to share a React wrapper for ProseMirror that I extracted from my project. It is not yet published to NPM, but is probably like 50 LOC. I have yet to use it in production, but it’s been working for me in development.

Any feedback would be greatly appreciated.

Thank you!

2 Likes

Specifically I am wondering whether this line is problematic. In addition to state, it sets all the editor view props on every render. Some of them involve binding and unbinding dom event handlers. I’ve not seen any issues, and nothing came up when I profiled it in Google Chrome. But I didn’t do very thorough testing, and as I mentioned above, I haven’t had users use this in production.

It’s really elegant. I’m not sure on the performance for setProps. If you notice it causes issues, you can always wrap it in a useEffect later.

Thanks a lot. That is great to hear.

I published the package and setProps has been replaced with update, which is what that call should have been in the first place (setProps just updates any newly passed in the props, whereas update replaces all props, which is what you’d expect in React).

I also added the ability to manually handle transactions with dispatchTransaction, just like in regular ProseMirror, and onChange is now just a convenience method you can use if you don’t need to manually handle transactions.

Just wanted to say thanks for publishing this. I used it as my first attempt in getting prosemirror working inside a React app, and it worked great. No surprises, and I can follow the code to see what’s going on :slight_smile:

I really appreciate small and self-contained libraries like this. Many thanks again.

Thanks a lot. That is so great to hear! Please post any issues you encounter on the issue tracker.

1 Like