chore: dev collab mode

package.json

@@ -20,6 +20,7 @@
     "dev": "pnpm --prefix packages/superdoc run dev",
     "dev:superdoc": "pnpm --prefix packages/superdoc run dev",
     "dev:super-editor": "pnpm --prefix packages/super-editor run dev",
+    "dev:collab": "pnpm --prefix packages/superdoc run dev:collab",
     "build:superdoc": "pnpm --prefix packages/superdoc run build",
     "build:super-editor": "pnpm --prefix packages/super-editor run build",
     "build": "pnpm run clean:packages && pnpm --prefix packages/super-editor run types:build && pnpm run build:superdoc && pnpm run type-check",

packages/superdoc/package.json

@@ -60,6 +60,8 @@
   "module": "./dist/superdoc.es.js",
   "scripts": {
     "dev": "vite",
+    "dev:collab": "concurrently -k -n VITE,COLLAB -c cyan,green \"vite\" \"node src/dev/collab-server.js\"",
+    "collab-server": "node src/dev/collab-server.js",
     "build": "pnpm --prefix ../super-editor run types:build && vite build && pnpm run build:umd",
     "postbuild": "node ./scripts/ensure-types.cjs",
     "build:es": "pnpm --prefix ../super-editor run types:build && vite build && node ./scripts/ensure-types.cjs",
@@ -90,8 +92,10 @@
   },
   "devDependencies": {
     "@hocuspocus/provider": "catalog:",
+    "@hocuspocus/server": "catalog:",
     "@superdoc/common": "workspace:*",
     "@superdoc/super-editor": "workspace:*",
+    "concurrently": "catalog:",
     "@vitejs/plugin-vue": "catalog:",
     "@vue/test-utils": "catalog:",
     "jszip": "catalog:",

packages/superdoc/src/dev/collab-server.js

@@ -0,0 +1,16 @@
+import { Hocuspocus } from '@hocuspocus/server';
+
+const PORT = 3050;
+
+const server = new Hocuspocus({
+  port: PORT,
+  async onConnect({ documentName }) {
+    console.log(`[collab] Connected: ${documentName}`);
+  },
+  async onDisconnect({ documentName }) {
+    console.log(`[collab] Disconnected: ${documentName}`);
+  },
+});
+
+server.listen();
+console.log(`[collab] Hocuspocus server running on ws://localhost:${PORT}`);

packages/superdoc/src/dev/components/SuperdocDev.vue

@@ -16,6 +16,8 @@ import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.mjs';
 import { getWorkerSrcFromCDN } from '../../components/PdfViewer/pdf/pdf-adapter.js';
 import SidebarSearch from './sidebar/SidebarSearch.vue';
 import SidebarFieldAnnotations from './sidebar/SidebarFieldAnnotations.vue';
+import { HocuspocusProvider } from '@hocuspocus/provider';
+import * as Y from 'yjs';
 
 // note:
 // Or set worker globally outside the component.
@@ -41,6 +43,12 @@ const testUserName = urlParams.get('name') || `SuperDoc ${Math.floor(1000 + Math
 const userRole = urlParams.get('role') || 'editor';
 const useLayoutEngine = ref(urlParams.get('layout') !== '0');
 const useWebLayout = ref(urlParams.get('view') === 'web');
+const useCollaboration = urlParams.get('collab') === '1';
+
+// Collaboration state
+const ydocRef = shallowRef(null);
+const providerRef = shallowRef(null);
+const collabReady = ref(false);
 const superdocLogo = SuperdocLogo;
 const uploadedFileName = ref('');
 const uploadDisplayName = computed(() => uploadedFileName.value || 'No file chosen');
@@ -329,12 +337,16 @@ const init = async () => {
       },
       // 'hrbr-fields': {},
 
-      // To test this dev env with collaboration you must run a local collaboration server here.
-      // collaboration: {
-      //   url: `ws://localhost:3050/docs/${testDocumentId}`,
-      //   token: 'token',
-      //   providerType: 'hocuspocus',
-      // },
+      // Collaboration - enabled via ?collab=1 URL param
+      // Run `pnpm run collab-server` first, then open http://localhost:5173?collab=1
+      ...(useCollaboration && ydocRef.value && providerRef.value
+        ? {
+            collaboration: {
+              ydoc: ydocRef.value,
+              provider: providerRef.value,
+            },
+          }
+        : {}),
       ai: {
         // Provide your Harbour API key here for direct endpoint access
         // apiKey: 'test',
@@ -485,6 +497,34 @@ const toggleCommentsPanel = () => {
 };
 
 onMounted(async () => {
+  // Initialize collaboration if enabled via ?collab=1
+  if (useCollaboration) {
+    const ydoc = new Y.Doc();
+    const provider = new HocuspocusProvider({
+      url: 'ws://localhost:3050',
+      name: 'superdoc-dev-room',
+      document: ydoc,
+    });
+
+    ydocRef.value = ydoc;
+    providerRef.value = provider;
+
+    // Wait for sync before loading document
+    await new Promise((resolve) => {
+      provider.on('synced', () => {
+        collabReady.value = true;
+        resolve();
+      });
+      // Fallback timeout in case sync doesn't fire
+      setTimeout(() => {
+        collabReady.value = true;
+        resolve();
+      }, 3000);
+    });
+
+    console.log('[collab] Provider synced, initializing SuperDoc');
+  }
+
   const blankFile = await getFileObject(BlankDOCX, 'test.docx', DOCX);
   handleNewFile(blankFile);
 });
@@ -494,6 +534,13 @@ onBeforeUnmount(() => {
   superdoc.value?.destroy?.();
   superdoc.value = null;
   activeEditor.value = null;
+
+  // Cleanup collaboration provider
+  if (providerRef.value) {
+    providerRef.value.destroy();
+    providerRef.value = null;
+  }
+  ydocRef.value = null;
 });
 
 const toggleLayoutEngine = () => {
@@ -590,6 +637,7 @@ if (scrollTestMode.value) {
               <span class="badge">Layout Engine: {{ useLayoutEngine && !useWebLayout ? 'ON' : 'OFF' }}</span>
               <span v-if="useWebLayout" class="badge">Web Layout: ON</span>
               <span v-if="scrollTestMode" class="badge badge--warning">Scroll Test: ON</span>
+              <span v-if="useCollaboration" class="badge badge--collab">Collab: ON</span>
             </div>
             <h2 class="dev-app__title">SuperDoc Dev</h2>
             <div class="dev-app__header-layout-toggle">
@@ -935,6 +983,11 @@ if (scrollTestMode.value) {
   color: #fcd34d;
 }
 
+.badge--collab {
+  background: rgba(34, 197, 94, 0.2);
+  color: #86efac;
+}
+
 .dev-app__upload-block {
   display: flex;
   flex-direction: column;

pnpm-workspace.yaml

@@ -12,6 +12,7 @@ catalog:
   '@floating-ui/dom': ^1.7.0
   '@fontsource/inter': ^5.2.8
   '@hocuspocus/provider': ^2.13.6
+  '@hocuspocus/server': ^2.13.6
   '@linear/sdk': ^53.0.0
   '@playwright/test': ^1.57.0
   '@semantic-release/changelog': ^6.0.3