An experimental implementation of how to take the open source ProseMirror rich text editor and enable real-time coauthoring using the Fluid Framework.
You can run this example using the following steps:
- Run
npm installandnpm run build:fast -- --nolintfrom theFluidFrameworkroot directory.- For an even faster build, you can add the package name to the build command, like this:
npm run build:fast -- --nolint @fluid-example/prosemirror
- For an even faster build, you can add the package name to the build command, like this:
- Run
npm run startfrom this directory (examples/data-objects/prosemirror) and open http://localhost:8080 in a web browser to see the app running.
ProseMirror uses the following distributed data structures:
- SharedDirectory - root
- SharedString - storing ProseMirror text
This implementation stores the HTML output of the ProseMirror editor onto the SharedString. While this enables collaboration it does not provide for a complete editor. Because rich editing features (ex. bold/italic) are stored as HTML tags along with the text this can cause conflicts with multiple users applying conflicting styles resulting in lost opening/closure tags.
A more complete solution would use the SharedString property bag to apply styles across text ranges. This allows for styles to be merged in a more deterministic way.