| import { useState } from "react"; | |
| import { useCollaborativeEditor } from "@/hooks/useCollaborativeEditor"; | |
| import { EditorContent } from "@tiptap/react"; | |
| import { EditorToolbar } from "./EditorToolbar"; | |
| interface CollaborativeAuthoringStudioProps { | |
| docId: string; | |
| } | |
| export function CollaborativeAuthoringStudio({ docId }: CollaborativeAuthoringStudioProps) { | |
| const { editor, connected, synced, peers, editorMode, setEditorMode, undo, redo } = | |
| useCollaborativeEditor(docId); | |
| const [reviewMode, setReviewMode] = useState<"editing" | "suggesting">("editing"); | |
| return ( | |
| <div className="space-y-4"> | |
| <div className="flex items-center justify-between gap-3 text-sm text-gray-500"> | |
| <span>{connected ? "Connected" : "Offline"}</span> | |
| <span>{synced ? "Synced" : "Syncing..."}</span> | |
| <span>{peers.length} peers</span> | |
| </div> | |
| <EditorToolbar editor={editor} onUndo={undo} onRedo={redo} reviewMode={reviewMode} /> | |
| <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 min-h-[320px]"> | |
| {editor ? <EditorContent editor={editor} /> : <div className="text-sm text-gray-500">Loading editor…</div>} | |
| </div> | |
| <div className="flex gap-2 text-xs"> | |
| <button onClick={() => setEditorMode("rich_text")} className="px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-700"> | |
| Writing | |
| </button> | |
| <button onClick={() => setEditorMode("latex")} className="px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-700"> | |
| Review | |
| </button> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| export default CollaborativeAuthoringStudio; | |
Xet Storage Details
- Size:
- 1.65 kB
- Xet hash:
- 30ff5bafd2922320b3a9c3d02b90ad8f27ab2412253bf7e06a697520cf68c5ac
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.