This project is a PoC for adding RTE capabilities to a ProseMirror editor in a React App.
You can test the demo if you want to see it in action.
The client of the project is a simple React app. Everything interesting happens in the Editor component, where a ProseMirror editor is set up and its content is wired to a Yjs document.
Currently, the client is piggybacking on the backend used by the official ProseMirror + Yjs demo, but you can use a local server by simply:
- Changing the WebSocket hostname and port in Editor.tsx to
ws://localhost:1234 - Running a server locally with
HOST=0.0.0.0 PORT=1234 YPERSISTENCE=./dbDir npx y-websocket(you'll need a recent version of Node installed)
Mapping between ProseMirror and Yjs data structures is quite hard and time-consuming. Because of this, the PoC only offers very basic capabilities: no markup, and only one node of text. With some work, though, we're confident that it can be generalized to support more sophisticated use cases.
To update the demo just run npm run deploy -- -m "<SOME COMMIT MESSAGE>" from the client directory.