diff --git a/src/frontend/apps/impress/.env.development b/src/frontend/apps/impress/.env.development index 96383c2e..362bb0f5 100644 --- a/src/frontend/apps/impress/.env.development +++ b/src/frontend/apps/impress/.env.development @@ -1 +1,2 @@ NEXT_PUBLIC_API_URL=http://localhost:8071/api/v1.0/ +NEXT_PUBLIC_SIGNALING_URL=ws://localhost:4444 diff --git a/src/frontend/apps/impress/.env.production b/src/frontend/apps/impress/.env.production index ba16e0cb..7502fb1f 100644 --- a/src/frontend/apps/impress/.env.production +++ b/src/frontend/apps/impress/.env.production @@ -1 +1,2 @@ NEXT_PUBLIC_API_URL=https://desk-staging.beta.numerique.gouv.fr/api/v1.0/ +NEXT_PUBLIC_SIGNALING_URL=ws://localhost:4444 \ No newline at end of file diff --git a/src/frontend/apps/impress/src/custom-next.d.ts b/src/frontend/apps/impress/src/custom-next.d.ts index 5919942a..3e71f784 100644 --- a/src/frontend/apps/impress/src/custom-next.d.ts +++ b/src/frontend/apps/impress/src/custom-next.d.ts @@ -20,5 +20,6 @@ declare module '*.svg?url' { namespace NodeJS { interface ProcessEnv { NEXT_PUBLIC_API_URL?: string; + NEXT_PUBLIC_SIGNALING_URL?: string; } } diff --git a/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx index 781ae58a..422b346a 100644 --- a/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx +++ b/src/frontend/apps/impress/src/features/pads/pad/components/BlockNoteEditor.tsx @@ -1,21 +1,37 @@ import { BlockNoteView, useCreateBlockNote } from '@blocknote/react'; import '@blocknote/react/style.css'; -import React from 'react'; -import { WebrtcProvider } from 'y-webrtc'; -import * as Y from 'yjs'; +import React, { useCallback } from 'react'; -const doc = new Y.Doc(); -const provider = new WebrtcProvider('my-document-id4', doc, { - signaling: ['ws://localhost:4444'], -}); +import { useAuthStore } from '@/core/auth'; + +import { PadStore, usePadStore } from '../store'; +import { Pad } from '../types'; + +interface BlockNoteEditorProps { + pad: Pad; +} + +export const BlockNoteEditor = ({ pad }: BlockNoteEditorProps) => { + const { userData } = useAuthStore(); + const getProvider = useCallback( + (state: PadStore) => { + if (!state.providers[pad.id]) { + return state.createProvider(pad.id); + } + + return state.providers[pad.id]; + }, + [pad.id], + ); + + const provider = usePadStore(getProvider); -export const BlockNoteEditor = () => { const editor = useCreateBlockNote({ collaboration: { provider, - fragment: doc.getXmlFragment('document-store'), + fragment: provider.doc.getXmlFragment('document-store'), user: { - name: 'My Username', + name: userData?.name || userData?.email || 'Anonymous', color: '#ff0000', }, }, diff --git a/src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx b/src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx index 1d877b75..924472c2 100644 --- a/src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx +++ b/src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx @@ -14,7 +14,7 @@ export const PadEditor = ({ pad }: PadEditorProps) => { return ( {pad.name} - + ); }; diff --git a/src/frontend/apps/impress/src/features/pads/pad/store/index.ts b/src/frontend/apps/impress/src/features/pads/pad/store/index.ts new file mode 100644 index 00000000..66f8c556 --- /dev/null +++ b/src/frontend/apps/impress/src/features/pads/pad/store/index.ts @@ -0,0 +1 @@ +export * from './usePadStore'; diff --git a/src/frontend/apps/impress/src/features/pads/pad/store/usePadStore.tsx b/src/frontend/apps/impress/src/features/pads/pad/store/usePadStore.tsx new file mode 100644 index 00000000..ab5f5720 --- /dev/null +++ b/src/frontend/apps/impress/src/features/pads/pad/store/usePadStore.tsx @@ -0,0 +1,34 @@ +import { WebrtcProvider } from 'y-webrtc'; +import * as Y from 'yjs'; +import { create } from 'zustand'; + +import { Pad } from '../types'; + +export interface PadStore { + providers: { [padId: Pad['id']]: WebrtcProvider }; + createProvider: (padId: Pad['id']) => WebrtcProvider; +} + +const initialState = { + providers: {}, +}; + +export const usePadStore = create((set) => ({ + providers: initialState.providers, + createProvider: (padId: string) => { + const provider = new WebrtcProvider(padId, new Y.Doc(), { + signaling: [process.env.NEXT_PUBLIC_SIGNALING_URL || ''], + }); + + set(({ providers }) => { + return { + providers: { + ...providers, + [padId]: provider, + }, + }; + }); + + return provider; + }, +}));