Make your Tiptap editor collaborative in minutes

import { useEditor, EditorContent } from '@tiptap/react'import StarterKit from '@tiptap/starter-kit'import Collaboration from '@tiptap/extension-collaboration'import CollaborationCursor from '@tiptap/extension-collaboration-cursor'import * as Y from 'yjs'import LiveblocksProvider from "@liveblocks/yjs";
type EditorProps = {  doc: Y.Doc,  provider: any;}
function Editor() {  const room = useRoom();  const [doc, setDoc] = useState<Y.Doc>();  const [provider, setProvider] = useState<any>();
  // Set up Liveblocks Yjs provider  useEffect(() => {    const yDoc = new Y.Doc();    const yProvider = new LiveblocksProvider(room, yDoc);    setDoc(yDoc);    setProvider(yProvider);
    return () => {      yDoc?.destroy();      yProvider?.destroy();    };  }, [room]);
  if (!doc || !provider) {    return null;  }
  return <TiptapEditor doc={doc} provider={provider} />;}