Skip to main content

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

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 }} />
}