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

playground/frontend/app/articles/[slug]/CollaborativeEditor.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import { Collaboration } from "@tiptap/extension-collaboration";
+import { CollaborationCaret } from "@tiptap/extension-collaboration-caret";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+import * as Y from "yjs";
+
+const initialContent = [
+	1, 3, 223, 175, 255, 141, 2, 0, 7, 1, 7, 100, 101, 102, 97, 117, 108, 116, 3,
+	9, 112, 97, 114, 97, 103, 114, 97, 112, 104, 7, 0, 223, 175, 255, 141, 2, 0,
+	6, 4, 0, 223, 175, 255, 141, 2, 1, 17, 72, 101, 108, 108, 111, 32, 87, 111,
+	114, 108, 100, 33, 32, 240, 159, 140, 142, 0,
+];
+
+const CollaborativeEditor = (props: {
+	slug: string;
+	provider: HocuspocusProvider;
+}) => {
+	/**
+	 * if you want to load initial content to the editor, the safest way to do so is by applying an initial Yjs update.
+	 * Yjs updates can safely be applied multiple times, while using `setContent` or similar Tiptap commands may result in
+	 * duplicate content in the Tiptap editor.
+	 *
+	 * The easiest way to generate the Yjs update (`initialContent` above) is to do something like
+	 *
+	 * ```
+	 * console.log(Y.encodeStateAsUpdate(provider.props.document).toString())
+	 * ```
+	 *
+	 * after you have filled the editor with the desired content.
+	 */
+	Y.applyUpdate(props.provider.document, Uint8Array.from(initialContent));
+
+	const editor = useEditor(
+		{
+			extensions: [
+				// make sure to turn off the undo-redo extension when using collaboration
+				StarterKit.configure({
+          undoRedo: false,
+        }),
+				Collaboration.configure({
+					document: props.provider.document,
+				}),
+				CollaborationCaret.configure({
+					provider: props.provider,
+				}),
+			],
+			// immediatelyRender needs to be `false` when using SSR
+			immediatelyRender: false,
+			editorProps: {
+				attributes: {
+					class:
+						"prose prose-lg max-w-none focus:outline-none min-h-[500px] p-8 bg-white/50 dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm",
+				},
+			},
+		},
+		[props.provider.document],
+	);
+
+	return <EditorContent editor={editor} />;
+};
+
+export default CollaborativeEditor;