80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
|
|
import Editor from "../components/Editor/Editor.tsx";
|
|
import Navbar from "../components/Navbar.tsx";
|
|
import UserList from "../components/Presence/UserList.tsx";
|
|
import ShareModal from "../components/Share/ShareModal.tsx";
|
|
import VersionHistoryPanel from "../components/VersionHistory/VersionHistoryPanel.tsx";
|
|
import { useYjsDocument } from "../hooks/useYjsDocument.ts";
|
|
import { Eye } from "lucide-react";
|
|
|
|
const EditorPage = () => {
|
|
const { id } = useParams<{ id: string }>();
|
|
const [searchParams] = useSearchParams();
|
|
const navigate = useNavigate();
|
|
const shareToken = searchParams.get('share') || undefined;
|
|
const { providers, synced, permission, role } = useYjsDocument(id!, shareToken);
|
|
const [showShareModal, setShowShareModal] = useState(false);
|
|
const [showVersionHistory, setShowVersionHistory] = useState(false);
|
|
|
|
if (!providers) {
|
|
return <div className="loading">Connecting...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="editor-page">
|
|
<Navbar />
|
|
<div className="page-header">
|
|
<button onClick={() => navigate("/")}>← Back to Home</button>
|
|
<div className="header-actions">
|
|
{permission !== "edit" && permission !== null && (
|
|
<div className="view-only-badge">
|
|
<Eye className="view-only-icon" />
|
|
<span>View only</span>
|
|
</div>
|
|
)}
|
|
{!shareToken && (
|
|
<button className="share-btn" onClick={() => setShowShareModal(true)}>
|
|
Share
|
|
</button>
|
|
)}
|
|
{!shareToken && (
|
|
<button className="history-btn" onClick={() => setShowVersionHistory(true)}>
|
|
History
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="page-content">
|
|
<div className="main-area">
|
|
<Editor providers={providers} permission={permission} />
|
|
</div>
|
|
<div className="sidebar">
|
|
<UserList awareness={providers.awareness} />
|
|
</div>
|
|
</div>
|
|
|
|
{showShareModal && (
|
|
<ShareModal
|
|
documentId={id!}
|
|
onClose={() => setShowShareModal(false)}
|
|
currentPermission={permission || undefined}
|
|
currentRole={role || undefined}
|
|
/>
|
|
)}
|
|
|
|
{showVersionHistory && (
|
|
<VersionHistoryPanel
|
|
documentId={id!}
|
|
ydoc={providers.ydoc}
|
|
canEdit={permission === "edit"}
|
|
onClose={() => setShowVersionHistory(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditorPage;
|