T

mydraft-cc · Sep 28, 2023 · 73c188a · 73c188a
1 parent c80dd68
commit 73c188a
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 146 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
+    "@hocuspocus/provider": "^2.5.0",
     "@marker.io/browser": "^0.18.0",
     "@reduxjs/toolkit": "^1.7.1",
     "@svgdotjs/svg.js": "^3.1.1",
@@ -31,8 +32,9 @@
     "redux-thunk": "2.4.1",
     "reselect": "4.1.5",
     "tslib": "2.3.1",
+    "y-protocols": "^1.0.6",
     "y-webrtc": "^10.2.5",
-    "yjs-redux": "^0.7.0"
+    "yjs-redux": "^0.9.0"
   },
   "scripts": {
     "start": "node --max_old_space_size=6096 node_modules/webpack/bin/webpack.js serve --config config/webpack.config.js --port 3002 --hot --server-type https --server-options-pfx dev/squidex-dev.pfx --server-options-passphrase password",

diff --git a/src/style/_common.scss b/src/style/_common.scss
@@ -113,6 +113,10 @@ ul {
 .share {
     padding: 10px;
 
+    &.ant-menu {
+        line-height: 1rem;
+    }
+
     .ant-input-group {
         display: flex;
         line-height: 1rem;

diff --git a/src/wireframes/api/index.ts b/src/wireframes/api/index.ts
@@ -5,28 +5,8 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
 */
 
-import { ClientToken } from '@y-sweet/sdk';
-
 const API_URL = process.env.NODE_ENV === 'test_development' ? 'http://localhost:4000' : 'https://api.mydraft.cc';
 
-export async function postCollaborationToken(id: string) {
-    const response = await fetch(`${API_URL}/session/${id}`, {
-        method: 'POST',
-        headers: {
-            ContentType: 'text/json',
-        },
-        body: JSON.stringify({}),
-    });
-
-    if (!response.ok) {
-        throw Error('Failed to fetch token');
-    }
-
-    const stored = await response.json();
-
-    return stored as ClientToken;
-}
-
 export async function getDiagram(readToken: string) {
     const response = await fetch(`${API_URL}/${readToken}`);
 

diff --git a/src/wireframes/collaboration/components/Provider.tsx b/src/wireframes/collaboration/components/Provider.tsx
@@ -5,12 +5,11 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
 */
 
-import { createYjsProvider } from '@y-sweet/client';
+import { TiptapCollabProvider } from '@hocuspocus/provider';
 import * as React from 'react';
 import * as Y from 'yjs';
 import { useYjsReduxBinder } from 'yjs-redux';
 import { useAsyncEffect } from '@app/core';
-import { postCollaborationToken } from '@app/wireframes/api';
 import { useStore } from '@app/wireframes/model';
 import { CollaborationContext, CollaborationState } from './../hooks';
 
@@ -21,51 +20,39 @@ export const CollaborationProvider = (props: { children: React.ReactNode }) => {
     const editorId = editor.id;
 
     useAsyncEffect(async cancellation => {
-        const clientDoc = new Y.Doc();
-        const clientToken = await postCollaborationToken(editorId);
-
-        if (cancellation?.isCancelled) {
-            return undefined;
-        }
-
-        const provider = createYjsProvider(clientDoc, clientToken, {
-            disableBc: true,
-        });
+        const provider = new TiptapCollabProvider({ appId: '7ME5ZQMY', name: editorId });
 
         provider.connect();
 
         await new Promise(resolve => {
             const handler = () => {
-                if (provider.wsconnected) {
+                if (!provider.hasUnsyncedChanges && provider.isConnected) {
                     resolve(true);
                 }
             };
 
-            provider.on('status', handler);
+            provider.on('unsyncedChanges', handler);
         });
 
         if (cancellation?.isCancelled) {
             return undefined;
         }
 
-        const unbind = binder.connectSlice(clientDoc, 'editor',
-            root => {
-                setState(state => ({
-                    ...state,
-                    undoManager: new Y.UndoManager(root),
-                }));
-            },
-        );
+        const synchronizer = binder.connectSlice(provider.document, 'editor');
 
-        setState({ document: clientDoc, provider });
+        synchronizer.on('connected', ({ root }) => {
+            setState(state => ({
+                ...state,
+                undoManager: new Y.UndoManager(root),
+            }));
+        });
 
-        return () => {
-            clientDoc.destroy();
+        setState({ document: provider.document, provider });
 
+        return () => {
+            synchronizer.destroy();
             provider.disconnect();
             provider.destroy();
-
-            unbind();
         };
     }, [editorId, binder]);
 

diff --git a/src/wireframes/collaboration/hooks.ts b/src/wireframes/collaboration/hooks.ts
@@ -15,7 +15,7 @@ export interface CollaborationState {
     document?: Y.Doc;
 
     // The actual provider.
-    provider?: { awareness: awarenessProtocol.Awareness; destroy: () => void };
+    provider?: { awareness: awarenessProtocol.Awareness | null; destroy: () => void };
 
     // The undo managher
     undoManager?: Y.UndoManager;
@@ -59,24 +59,18 @@ export const useUndoManager = () => {
 };
 
 export function usePresence(): Record<string, User> {
-    const provider = React.useContext(CollaborationContext).provider;
+    const awareness = React.useContext(CollaborationContext).provider?.awareness;
     const [presence, setPresence] = React.useState<Record<string, User>>({});
 
     React.useEffect(() => {
-        if (!provider?.awareness) {
+        if (!awareness) {
             return () => {};
         }
 
-        const roomName = provider['roomName'];
-
-        if (roomName) {
-            console.log(`Connecting presence to room name '${roomName}'.`);
-        }
-
         const handler = () => {
             const map: Record<string, User> = {};
 
-            provider.awareness.getStates().forEach(state => {
+            awareness.getStates().forEach(state => {
                 if (Object.keys(state).length > 0) {
                     const user = state as User;
 
@@ -87,13 +81,13 @@ export function usePresence(): Record<string, User> {
             setPresence(map);
         };
 
-        provider.awareness.on('change', handler);
-        provider.awareness.setLocalState(user);
+        awareness.on('change', handler);
+        awareness.setLocalState(user);
 
         return () => {
-            provider.awareness.off('change', handler);
+            awareness.off('change', handler);
         };
-    }, [provider]);
+    }, [awareness]);
 
     return presence;
 }