Quill

FireSync can bind to the Quill editor to create a collaborative rich-text editor with just a few lines of code.

Example

Live Example

This rich text editor below is a Quill instance connected to FireSync. Open this page in another browser to see the collaboration in action, or share this URL with someone else.

Code Example

React

import { FireSync } from '@firesync/client'
import ReactQuill from 'react-quill'
import QuillCursors from 'quill-cursors'
import { QuillBinding } from 'y-quill'
import 'react-quill/dist/quill.snow.css'

Quill.register('modules/cursors', QuillCursors)

const firesync = new FireSync({
  // A JWT access token signed by your backend
  token: '<your-token>',
  // Your FireSync Cloud project name
  projectName: 'acme-dev',
  // Or if running FireSync yourself locally:
  // baseUrl: 'http://localhost:5000',

})

function CollaborativeQuillEditor() {
  const quillRef = useRef<ReactQuill | null>(null)

  // Doc key to sync with FireSync
  const docKey = 'quill-example'

  useEffect(() => {
    // Subscribe to the document. Any local updates to this doc
    // will be sent to the server, and any updates from
    // other users will also get synced to this doc
    const doc = firesync.subscribeYDoc(docKey)

    // Get a shared Awareness instance for syncing online status and cursor
    // positions between users.
    const awareness = firesync.subscribeAwareness(docKey)

    // Bind the doc and awareness to the Quill editor
    const quill = quillRef.current.editor
    const binding = new QuillBinding(doc.getText('t'), quill, awareness)

    // Tidy up everything on unmount
    return () => {
      firesync.unsubscribe(docKey)
      binding.destroy()
    }
  }, [])

  return <ReactQuill theme="snow" ref={quillRef} modules={{ cursors: true }} />
}