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:
- Enable corepack by running
corepack enable. - Run
pnpm installandpnpm run build:fast --nolintfrom theFluidFrameworkroot directory.- For an even faster build, you can add the package name to the build command, like this:
pnpm 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
pnpm startfrom this directory 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.