Skip to content

Latest commit

 

History

History
 
 

prosemirror

README.md

@fluid-example/prosemirror

An experimental implementation of how to take the open source ProseMirror rich text editor and enable real-time coauthoring using the Fluid Framework.

Getting Started

You can run this example using the following steps:

  1. Enable corepack by running corepack enable.
  2. Run pnpm install and pnpm run build:fast --nolint from the FluidFramework root 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
  3. Run pnpm start from this directory and open http://localhost:8080 in a web browser to see the app running.

Data model

ProseMirror uses the following distributed data structures:

  • SharedDirectory - root
  • SharedString - storing ProseMirror text

Known Issues

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.

Contribution Guidelines

There are many ways to contribute to Fluid.

Detailed instructions for working in the repo can be found in the Wiki.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services. Use of these trademarks or logos must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.

Help

Not finding what you're looking for in this README? Check out fluidframework.com.

Still not finding what you're looking for? Please file an issue.

Thank you!

Trademark

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services.

Use of these trademarks or logos must follow Microsoft's Trademark & Brand Guidelines.

Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.