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;
+ },
+}));