♻️(frontend) replace y-webrtc by @hocuspocus

y-webrtc had some issues, users had difficulties
to connect with each others.
We replace it by @hocuspocus/provider.

Author: AntoLC

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 ({

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

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

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"
   },

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}`;

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;
   }

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(),

src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx

@@ -1,21 +1,21 @@
 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;
 }
 
 export interface UseDocStore {
   docsStore: {
     [storeId: string]: DocStore;
   };
-  createProvider: (storeId: string, initialDoc: Base64) => WebrtcProvider;
+  createProvider: (storeId: string, initialDoc: Base64) => HocuspocusProvider;
   setStore: (storeId: string, props: Partial<DocStore>) => void;
 }
 
@@ -30,9 +30,10 @@ export const useDocStore = create<UseDocStore>((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 });

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({