upstream/upstream-hocuspocus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapshot of https://github.com/ueberdosis/hocuspocus.git @ cf3cfa355b4d3bb61c6b6c80071f71783e32470e (2026-09-15)
Some checks failed
build / lint (22) (push) Failing after 17s
Details
build / test (22) (push) Failing after 8s
Details
build / lint (23) (push) Failing after 2s
Details
build / build (22) (push) Has been skipped
Details
build / build (23) (push) Has been skipped
Details
build / test (23) (push) Failing after 4s
Details
docsearch / docsearch (push) Failing after 1s
Details

Browse Source
This commit is contained in:
upstream-mirror
2026-09-15 17:21:35 +05:00
commit e0c588ca1c
265 changed files with 55259 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
playground/frontend/app/react-provider/[slug]/CollaborationStatus.tsx Normal file
View File

@@ -0,0 +1,155 @@
"use client";
import {
useHocuspocusConnectionStatus,
useHocuspocusEvent,
useHocuspocusProvider,
useHocuspocusSyncStatus,
} from "@hocuspocus/provider-react";
import { useState } from "react";
const CollaborationStatus = () => {
const provider = useHocuspocusProvider();
const connectionStatus = useHocuspocusConnectionStatus();
const syncStatus = useHocuspocusSyncStatus();
const [unsyncedChanges, setUnsyncedChanges] = useState(0);
// Using the useHocuspocusEvent hook instead of manual provider.on/off
useHocuspocusEvent("unsyncedChanges", (data) => {
setUnsyncedChanges(data.number);
});
const getStatusColor = (status: string) => {
switch (status) {
case "connected":
return "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400";
case "connecting":
return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400";
case "disconnected":
return "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400";
default:
return "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-400";
}
};
const UNSYNCED_THRESHOLD = 10;
return (
<div className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 p-6">
{/* Alert banner when unsynced changes grow — indicates connection issues */}
{unsyncedChanges >= UNSYNCED_THRESHOLD && (
<div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center space-x-3">
<div className="w-5 h-5 shrink-0 text-red-600 dark:text-red-400">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
/>
</svg>
</div>
<div>
<p className="text-sm font-medium text-red-800 dark:text-red-200">
Connection issue detected
</p>
<p className="text-xs text-red-600 dark:text-red-400">
{unsyncedChanges} changes are waiting to sync. Your edits are
saved locally but not yet on the server.
</p>
</div>
</div>
)}
{/* Status indicators */}
<div className="flex items-center justify-between mb-6">
<h3 className="text-lg font-semibold text-slate-900 dark:text-white">
Connection Status
</h3>
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
<div
className={`w-3 h-3 rounded-full ${connectionStatus === "connected" ? "bg-green-500" : connectionStatus === "connecting" ? "bg-yellow-500" : "bg-red-500"}`}
/>
<span
className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(connectionStatus)}`}
>
{connectionStatus}
</span>
</div>
<div className="flex items-center space-x-2">
<div
className={`w-3 h-3 rounded-full ${syncStatus === "synced" ? "bg-green-500" : "bg-orange-500 animate-pulse"}`}
/>
<span
className={`px-2 py-1 rounded-full text-xs font-medium ${syncStatus === "synced" ? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400" : "bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400"}`}
>
{syncStatus}
</span>
</div>
<div className="flex items-center space-x-2">
<div
className={`w-3 h-3 rounded-full ${unsyncedChanges >= UNSYNCED_THRESHOLD ? "bg-red-500 animate-pulse" : "bg-orange-500 animate-pulse"}`}
/>
<span
className={`px-2 py-1 rounded-full text-xs font-medium ${unsyncedChanges >= UNSYNCED_THRESHOLD ? "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400" : "bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400"}`}
>
{unsyncedChanges} unsynced
</span>
</div>
</div>
</div>
{/* Control buttons */}
<div className="grid grid-cols-2 gap-6">
<div className="space-y-3">
<h4 className="text-sm font-medium text-slate-700 dark:text-slate-300">
WebSocket Controls
</h4>
<div className="flex space-x-2">
<button
className="flex-1 px-3 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() =>
provider.configuration.websocketProvider.disconnect()
}
disabled={connectionStatus === "disconnected"}
>
Disconnect
</button>
<button
className="flex-1 px-3 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() =>
provider.configuration.websocketProvider.connect()
}
disabled={connectionStatus === "connected"}
>
Connect
</button>
</div>
</div>
<div className="space-y-3">
<h4 className="text-sm font-medium text-slate-700 dark:text-slate-300">
Provider Controls
</h4>
<div className="flex space-x-2">
<button
className="flex-1 px-3 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() => provider.detach()}
>
Detach
</button>
<button
className="flex-1 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() => provider.attach()}
>
Attach
</button>
</div>
</div>
</div>
</div>
);
};
export default CollaborationStatus;