Spaces:
Sleeping
Sleeping
File size: 2,094 Bytes
6127734 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
'use client';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { useLiveblocksExtension, FloatingToolbar } from '@liveblocks/react-tiptap';
import { useEffect, useRef } from 'react';
interface Props {
roomId: string;
initialContent?: string;
}
export function CollaborativeEditor({ roomId, initialContent }: Props) {
const liveblocks = useLiveblocksExtension();
const hasSetContent = useRef(false);
const editor = useEditor({
extensions: [
liveblocks,
StarterKit.configure({
history: false,
}),
],
immediatelyRender: false,
editorProps: {
attributes: {
class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto focus:outline-none min-h-[400px] p-4 border-none outline-none',
},
},
});
// Effect to set initial content when AI generates new content
useEffect(() => {
if (editor && initialContent && !hasSetContent.current) {
// Small delay to ensure Liveblocks is fully initialized
const timer = setTimeout(() => {
// Always set the content when new content is generated
editor.commands.setContent(initialContent);
hasSetContent.current = true;
}, 200);
return () => clearTimeout(timer);
}
}, [editor, initialContent]);
// Reset flag when initialContent changes (new AI generation)
useEffect(() => {
if (initialContent && initialContent.trim()) {
hasSetContent.current = false;
}
}, [initialContent]);
return (
<div className="w-full">
<div className="border rounded-lg bg-white min-h-[400px] relative">
{!initialContent && !editor?.getHTML() && (
<div className="absolute inset-0 flex items-center justify-center text-gray-500 pointer-events-none">
<p>Generate content above to start collaborating...</p>
</div>
)}
<EditorContent
editor={editor}
className="min-h-[400px] p-4"
/>
<FloatingToolbar editor={editor} />
</div>
</div>
);
}
|