Skip to content

Latest commit

 

History

History
 
 

webflow

README.md

@fluid-example/webflow

WebFlow is an experimental collaborative rich text editor built on top of the Fluid SharedString distributed data structure.

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/webflow
  3. Run pnpm start from this directory and open http://localhost:8080 in a web browser to see the app running.

Data Objects

There are three primary data objects:

  • The FlowDocument - encapsulates the SharedString and exposes APIs convenient for editing.
  • The Editor - renders the editing surface and updates the FlowDocument in response to user input.
  • The Host - creates a FlowDocument and attaches an Editor.

Examples

To host an instance of the Editor, your Fluid object will need to create an instance of a FlowDocument. In the Host example, this is done in host/host.ts:

const docP = this.createAndAttachDataStore<FlowDocument>(this.docId, FlowDocument.type);

On subsequent loads, you'll want to open the same flow document:

const docP = this.requestFluidObject<FlowDocument>(this.docId);

When the document resolves, pass it to a new Editor instance, along with the HTML DOM node you want the Editor to attach itself to (see 'host/host.ts'):

const editor = new Editor(await docP, root, htmlFormatter);

host/host.ts also demonstrates how to connect an application's UI (e.g., toolbar) to editor functionality.

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 opencode@microsoft.com 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.