How the heck do I use this with React?

1

How have others integrated this with React? Ive searched the forums and there are so many different solutions. Some very outdated, some just seem like snippets of code.

Is there a ready to use repo with the best practices for integrating this with React?

For me, I am looking to the following features, rich text editor + image upload with FileStack or Imagekit.

I can’t imagine I am the only one here using this with React :open_mouth:

1 Like
2

Well mister what you are asking isn’t really trivial. I did my best as I just posted in my example GitHub - TeemuKoivisto/prosemirror-react-typescript-example: Minimal boilerplate to start a project with ProseMirror, React, TypeScript but it is not easy nor something you can just do with a wave of hand. Probably you should use a framework unless you really want to dive deep with PM + React plumbing. PM is not maybe the most beginner-friendly rich-text editing framework to pick.

1 Like
3

I have created a library called bangle.dev which aims to add minimum wrapper around PM to work with React. You can find an introductory post Bangle.dev: higher level Prosemirror components.

4

We adopted remirror.io for this, and are really happy with it. Very well architectured.

5

With React, I’ve found getting started is easy but extending it is hard. For example, you can just allow prosemirror-view and prosemirror-state to mount itself and handle all the rich text editing, and then extract the document state when persistence is needed.

One pain point that I haven’t figured out is using prosemirror with React and server-side rendering (e.g. nextjs). And that’s because without react custom node views, prosemirror-view depends on document existing to be able to create elements.

Between those three libraries, is there one with a minimal demo with server-side rendering? I’ve tried looking into remirror before since it does have an SSR extension, but adopting it seems like learning another separate library on top of prosemirror.

6

I’m using PM with SSR (Next.js) which works, at least for me, without any special work. But to be honest I’m not actually server-side rendering the editor HTML, just mounting the editor normally and setting the state in useEffect before painting so for the user the experience is the same. I wrote about this in my very long thread and came to a conclusion that it’s probably not very useful to SSR the editor doc as it’s a big hassle for not that big of a performance bonus and I don’t think you need it for SEO purposes.

Also I would mention TipTap as one option as they are planning to support React in their next major release alongside rewriting everything in TS. Our Plan for tiptap 2 – überdosis and tiptap v2 · Issue #547 · ueberdosis/tiptap · GitHub

7

We started with the CZI React-based ProseMirror as a base to build our LICIT editor. The base code is React, but we also create Angular components that consume the React based editor. Perhaps you can explore the source to get some ideas.

8

Hi @viperfx ! I’ve had a great experience with use-prosemirror. As it is a very minimal integration and idiomatic for React functional components.

Basic example: use-prosemirror Basic example - CodeSandbox

And the author is a brilliant engineer and helped me with many topics.

See these threads:

3 Likes
9

I saw your code, great integration between react and prosemirror. use initialProps to construct a new EditorView and update with props by editorView.updayeProps().

10

Anyone used NY Times react-prosemirror? (Announcing React ProseMirror / GitHub - react-prosemirror)

I tried it very briefly and it seem to be quite bare-bones (in the sense that there’s no out-of-the-box basic component) I didn’t even manage to enter new-lines using their example in the Readme.

11

It should work, but you make the component yourself. It does export a ProseMirror component that takes most of the same props as ProseMirror View itself, but needs to be given a mount point. There’s an example in the docstring on that component:

 function MyProseMirrorField() {
   const [mount, setMount] = useState(null);

   return (
     <ProseMirror mount={mount}>
       <div ref={setMount} />
     </ProseMirror>
   );
 }

However, the node view support should be considered very experimental and we’re working on overhauling the rendering of this library to maybe not even use prosemirror-view. We’ve found that it’s possible to write React components for Node Views but not for simple elements like <p> and we’d like to make that possible, so we’re working through some overhauls in the pull requests.

Please keep in mind the library is pre-1.0, but for the simple example above of just mounting a ProseMirror view in a component, it should work for you.

1 Like