From 1139c0abeaddc813f1457402a0864e31c340748c Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 4 Sep 2024 15:26:45 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20replace=20y-webr?= =?UTF-8?q?tc=20by=20@hocuspocus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit y-webrtc had some issues, users had difficulties to connect with each others. We replace it by @hocuspocus/provider. --- .../e2e/__tests__/app-impress/doc-editor.spec.ts | 9 ++------- src/frontend/apps/impress/.env | 2 +- src/frontend/apps/impress/.env.development | 2 +- src/frontend/apps/impress/package.json | 2 +- src/frontend/apps/impress/src/core/conf.ts | 4 ++-- src/frontend/apps/impress/src/custom-next.d.ts | 2 +- .../doc-editor/components/BlockNoteEditor.tsx | 10 +++++----- .../docs/doc-editor/stores/useDocStore.tsx | 15 ++++++++------- .../doc-versioning/components/ModalVersion.tsx | 8 ++++---- 9 files changed, 25 insertions(+), 29 deletions(-) diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts index 458ea2ec..966947c2 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts @@ -9,7 +9,7 @@ test.beforeEach(async ({ page }) => { }); test.describe('Doc Editor', () => { - test('checks the Doc is connected to the webrtc server', async ({ + test('checks the Doc is connected to the provider server', async ({ page, browserName, }) => { @@ -29,12 +29,7 @@ test.describe('Doc Editor', () => { await page.locator('.ProseMirror.bn-editor').fill('Hello World'); const framesent = await framesentPromise; - const payload = JSON.parse(framesent.payload as string) as { - type: string; - }; - - const typeCases = ['publish', 'subscribe', 'unsubscribe', 'ping']; - expect(typeCases.includes(payload.type)).toBeTruthy(); + expect(framesent.payload).not.toBeNull(); }); test('markdown button converts from markdown to the editor syntax json', async ({ diff --git a/src/frontend/apps/impress/.env b/src/frontend/apps/impress/.env index 9e631e42..41724eaa 100644 --- a/src/frontend/apps/impress/.env +++ b/src/frontend/apps/impress/.env @@ -1,4 +1,4 @@ NEXT_PUBLIC_API_ORIGIN= +NEXT_PUBLIC_Y_PROVIDER_URL= NEXT_PUBLIC_MEDIA_URL= -NEXT_PUBLIC_SIGNALING_URL= NEXT_PUBLIC_THEME=dsfr \ No newline at end of file diff --git a/src/frontend/apps/impress/.env.development b/src/frontend/apps/impress/.env.development index 2186bc15..a9d0f3d9 100644 --- a/src/frontend/apps/impress/.env.development +++ b/src/frontend/apps/impress/.env.development @@ -1,4 +1,4 @@ NEXT_PUBLIC_API_ORIGIN=http://localhost:8071 -NEXT_PUBLIC_SIGNALING_URL=ws://localhost:4444 +NEXT_PUBLIC_Y_PROVIDER_URL=ws://localhost:4444 NEXT_PUBLIC_MEDIA_URL=http://localhost:8083 NEXT_PUBLIC_SW_DEACTIVATED=true diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json index 968b8c92..43808466 100644 --- a/src/frontend/apps/impress/package.json +++ b/src/frontend/apps/impress/package.json @@ -19,6 +19,7 @@ "@blocknote/mantine": "*", "@blocknote/react": "*", "@gouvfr-lasuite/integration": "1.0.2", + "@hocuspocus/provider": "2.13.5", "@openfun/cunningham-react": "2.9.4", "@tanstack/react-query": "5.53.2", "i18next": "23.14.0", @@ -32,7 +33,6 @@ "react-i18next": "15.0.1", "react-select": "5.8.0", "styled-components": "6.1.13", - "y-webrtc": "10.3.0", "yjs": "*", "zustand": "4.5.5" }, diff --git a/src/frontend/apps/impress/src/core/conf.ts b/src/frontend/apps/impress/src/core/conf.ts index ba79a144..0c8bccd0 100644 --- a/src/frontend/apps/impress/src/core/conf.ts +++ b/src/frontend/apps/impress/src/core/conf.ts @@ -9,9 +9,9 @@ export const backendUrl = () => export const baseApiUrl = (apiVersion: string = '1.0') => `${backendUrl()}/api/v${apiVersion}/`; -export const signalingUrl = (docId: string) => { +export const providerUrl = (docId: string) => { const base = - process.env.NEXT_PUBLIC_SIGNALING_URL || + process.env.NEXT_PUBLIC_Y_PROVIDER_URL || (typeof window !== 'undefined' ? `wss://${window.location.host}/ws` : ''); return `${base}/${docId}`; diff --git a/src/frontend/apps/impress/src/custom-next.d.ts b/src/frontend/apps/impress/src/custom-next.d.ts index 064d02bc..ff3906c6 100644 --- a/src/frontend/apps/impress/src/custom-next.d.ts +++ b/src/frontend/apps/impress/src/custom-next.d.ts @@ -21,7 +21,7 @@ namespace NodeJS { interface ProcessEnv { NEXT_PUBLIC_API_ORIGIN?: string; NEXT_PUBLIC_MEDIA_URL?: string; - NEXT_PUBLIC_SIGNALING_URL?: string; + NEXT_PUBLIC_Y_PROVIDER_URL?: string; NEXT_PUBLIC_SW_DEACTIVATED?: string; NEXT_PUBLIC_THEME?: string; } diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx index 59843ed4..3d228a77 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx @@ -2,8 +2,8 @@ import { BlockNoteEditor as BlockNoteEditorCore } from '@blocknote/core'; import '@blocknote/core/fonts/inter.css'; import { BlockNoteView } from '@blocknote/mantine'; import '@blocknote/mantine/style.css'; +import { HocuspocusProvider } from '@hocuspocus/provider'; import React, { useCallback, useEffect, useMemo } from 'react'; -import { WebrtcProvider } from 'y-webrtc'; import { Box, TextErrors } from '@/components'; import { mediaUrl } from '@/core'; @@ -44,7 +44,7 @@ export const BlockNoteEditor = ({ doc, version }: BlockNoteEditorProps) => { const provider = docsStore?.[storeId]?.provider; useEffect(() => { - if (!provider || provider.doc.guid !== storeId) { + if (!provider || provider.document.guid !== storeId) { createProvider(storeId, initialContent); } }, [createProvider, initialContent, provider, storeId]); @@ -58,7 +58,7 @@ export const BlockNoteEditor = ({ doc, version }: BlockNoteEditorProps) => { interface BlockNoteContentProps { doc: Doc; - provider: WebrtcProvider; + provider: HocuspocusProvider; storeId: string; } @@ -71,7 +71,7 @@ export const BlockNoteContent = ({ const { userData } = useAuthStore(); const { setStore, docsStore } = useDocStore(); const canSave = doc.abilities.partial_update && !isVersion; - useSaveDoc(doc.id, provider.doc, canSave); + useSaveDoc(doc.id, provider.document, canSave); const storedEditor = docsStore?.[storeId]?.editor; const { mutateAsync: createDocAttachment, @@ -102,7 +102,7 @@ export const BlockNoteContent = ({ return BlockNoteEditorCore.create({ collaboration: { provider, - fragment: provider.doc.getXmlFragment('document-store'), + fragment: provider.document.getXmlFragment('document-store'), user: { name: userData?.email || 'Anonymous', color: randomColor(), diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx index db877db8..ceffcf5f 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx @@ -1,13 +1,13 @@ import { BlockNoteEditor } from '@blocknote/core'; -import { WebrtcProvider } from 'y-webrtc'; +import { HocuspocusProvider } from '@hocuspocus/provider'; import * as Y from 'yjs'; import { create } from 'zustand'; -import { signalingUrl } from '@/core'; +import { providerUrl } from '@/core'; import { Base64 } from '@/features/docs/doc-management'; interface DocStore { - provider: WebrtcProvider; + provider: HocuspocusProvider; editor?: BlockNoteEditor; } @@ -15,7 +15,7 @@ export interface UseDocStore { docsStore: { [storeId: string]: DocStore; }; - createProvider: (storeId: string, initialDoc: Base64) => WebrtcProvider; + createProvider: (storeId: string, initialDoc: Base64) => HocuspocusProvider; setStore: (storeId: string, props: Partial) => void; } @@ -30,9 +30,10 @@ export const useDocStore = create((set, get) => ({ Y.applyUpdate(doc, Buffer.from(initialDoc, 'base64')); } - const provider = new WebrtcProvider(storeId, doc, { - signaling: [signalingUrl(storeId)], - maxConns: 5, + const provider = new HocuspocusProvider({ + url: providerUrl(storeId), + name: storeId, + document: doc, }); get().setStore(storeId, { provider }); diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx index 4240bfda..a07e8850 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx @@ -51,9 +51,9 @@ export const ModalVersion = ({ }); revertUpdate( - docsStore[docId].provider.doc, - docsStore[docId].provider.doc, - docsStore[versionId].provider.doc, + docsStore[docId].provider.document, + docsStore[docId].provider.document, + docsStore[versionId].provider.document, ); onDisplaySuccess(); @@ -83,7 +83,7 @@ export const ModalVersion = ({ fullWidth onClick={() => { const newDoc = toBase64( - Y.encodeStateAsUpdate(docsStore?.[versionId]?.provider.doc), + Y.encodeStateAsUpdate(docsStore?.[versionId]?.provider.document), ); updateDoc({