snapshot of https://github.com/ueberdosis/hocuspocus.git @ cf3cfa355b4d3bb61c6b6c80071f71783e32470e (2026-09-15)

playground/frontend/app/articles/layout.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { HocuspocusProviderWebsocket } from "@hocuspocus/provider";
+// import {
+// 	TiptapCollabProvider,
+// 	TiptapCollabProviderWebsocket,
+// } from "@tiptap-cloud/provider";
+import { useEffect, useState } from "react";
+import { SocketContext1 } from "@/app/SocketContext1";
+import { SocketContext2 } from "@/app/SocketContext2";
+
+export default function Layout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	const [socket1, setSocket1] = useState<HocuspocusProviderWebsocket | null>(
+		null,
+	);
+	const [socket2, setSocket2] = useState<HocuspocusProviderWebsocket | null>(
+		null,
+	);
+
+	useEffect(() => {
+		const newlyCreatedSocket1 = new HocuspocusProviderWebsocket({
+			url: "ws://localhost:8000",
+		});
+		const newlyCreatedSocket2 = new HocuspocusProviderWebsocket({
+			url: "ws://localhost:8000",
+		});
+		// const newlyCreatedSocket = new TiptapCollabProviderWebsocket({
+		// 	appId: "",
+		// });
+
+		setSocket1(newlyCreatedSocket1);
+		setSocket2(newlyCreatedSocket2);
+
+		return () => {
+			newlyCreatedSocket1?.destroy();
+			newlyCreatedSocket2?.destroy();
+		};
+	}, []);
+
+	if (socket1 && socket2) {
+		return (
+			<>
+				<SocketContext1 value={socket1}>
+					<SocketContext2 value={socket2}>{children}</SocketContext2>
+				</SocketContext1>
+			</>
+		);
+	}
+}