Make your Quill editor collaborative in minutes

import Quill from "quill";import ReactQuill from "react-quill";import QuillCursors from "quill-cursors";import { QuillBinding } from "y-quill";import * as Y from "yjs";import LiveblocksProvider from "@liveblocks/yjs";import { useRoom } from "@/liveblocks.config";import { useCallback, useEffect, useRef, useState } from "react";
Quill.register("modules/cursors", QuillCursors);
// Collaborative text editor with simple rich text, live cursors, and live avatarsexport function CollaborativeEditor() {  const room = useRoom();  const [text, setText] = useState<Y.Text>();  const [provider, setProvider] = useState<any>();
  // Set up Liveblocks Yjs provider  useEffect(() => {    const yDoc = new Y.Doc();    const yText = yDoc.getText("quill");    const yProvider = new LiveblocksProvider(room, yDoc);    setText(yText);    setProvider(yProvider);
    return () => {      yDoc?.destroy();      yProvider?.destroy();    };  }, [room]);
  if (!text || !provider) {    return null;  }
  return <QuillEditor yText={text} provider={provider} />;}
type EditorProps = {  yText: Y.Text;  provider: any;};
function QuillEditor({ yText, provider }: EditorProps) {  const reactQuillRef = useRef<ReactQuill>(null);
  // Set up Yjs and Quill  useEffect(() => {    let quill;    let binding: QuillBinding;
    if (!reactQuillRef.current) {      return;    }
    quill = reactQuillRef.current.getEditor();    binding = new QuillBinding(yText, quill, provider.awareness);    return () => {      binding?.destroy?.();    };  }, [yText, provider]);
  return (    <ReactQuill      placeholder="Start typing here…"      ref={reactQuillRef}      theme="snow"      modules={{        cursors: true,        history: {          // Local undo shouldn't undo changes from remote users          userOnly: true,        },      }}    />  );}