An experimental implementation of how to take Facebook's open source Draft.js rich text editor and enable real-time coauthoring using the Fluid Framework.
To run this follow the steps below:
- Run
npm installfrom the draft-js folder root - Run
npm run startto start both the client and server - Navigate to
http://localhost:8080in a browser tab - Copy full URL, including hash id, to a new tab for collaboration
Draft.js uses the following distributed data structures:
- SharedDirectory - root
- SharedString - storing Draft.js text
- SharedMap - storing user presence
npm run buildRuns tsc and webpack and outputs the results in ./dist.
npm run startRuns both start:client and start:server.
npm run start:allUses webpack-dev-server to start a local webserver that will host your webpack file.
Once you run start you can navigate to http://localhost:8080 in any browser window to use your fluid example.
The Tinylicious Fluid server must be running. See
start:serverbelow.
npm run start:serverStarts an instance of the Tinylicious Fluid server running locally at http://localhost:3000.
Tinylicious only needs to be running once on a machine and can support multiple examples.
npm run start:testUses webpack-dev-server to start a local webserver that will host your webpack file.
Once you run start:test you can navigate to http://localhost:8080 in any browser window to test your fluid example.
start:test uses a Fluid server with storage to local tab session storage and launches two instances side by side. It does not require Tinylicious.
This is primarily used for testing scenarios.
npm run testRuns end to end test using Jest and Puppeteer.
npm run test:reportRuns npm run test with additional properties that will report success/failure to a file in ./nyc/*. This is used for CI validation.
Compiles the TypeScript code. Output is written to the ./dist folder.
Compiles and webpacks the TypeScript code. Output is written to the ./dist folder.