Notify the client that a draft has been created when a connection is secured

apps/app/src/client/services/side-effects/yjs.ts

@@ -7,7 +7,11 @@ import { useCurrentPageYjsData } from '~/stores/yjs';
 
 export const useCurrentPageYjsDataEffect = (): void => {
   const { data: socket } = useGlobalSocket();
-  const { updateHasRevisionBodyDiff, updateAwarenessStateSize } = useCurrentPageYjsData();
+  const { updateHasDraft, updateHasRevisionBodyDiff, updateAwarenessStateSize } = useCurrentPageYjsData();
+
+  const hasDraftUpdateHandler = useCallback((hasDraft: boolean) => {
+    updateHasDraft(hasDraft);
+  }, [updateHasDraft]);
 
   const hasRevisionBodyDiffUpdateHandler = useCallback((hasRevisionBodyDiff: boolean) => {
     updateHasRevisionBodyDiff(hasRevisionBodyDiff);
@@ -21,13 +25,15 @@ export const useCurrentPageYjsDataEffect = (): void => {
 
     if (socket == null) { return }
 
+    socket.on(SocketEventName.YjsHasDraftUpdated, hasDraftUpdateHandler);
     socket.on(SocketEventName.YjsHasRevisionBodyDiffUpdated, hasRevisionBodyDiffUpdateHandler);
     socket.on(SocketEventName.YjsAwarenessStateSizeUpdated, awarenessStateSizeUpdateHandler);
 
     return () => {
+      socket.off(SocketEventName.YjsHasDraftUpdated);
       socket.off(SocketEventName.YjsHasRevisionBodyDiffUpdated, hasRevisionBodyDiffUpdateHandler);
       socket.off(SocketEventName.YjsAwarenessStateSizeUpdated, awarenessStateSizeUpdateHandler);
     };
 
-  }, [socket, awarenessStateSizeUpdateHandler, hasRevisionBodyDiffUpdateHandler]);
+  }, [socket, awarenessStateSizeUpdateHandler, hasRevisionBodyDiffUpdateHandler, hasDraftUpdateHandler]);
 };

apps/app/src/interfaces/websocket.ts

@@ -50,6 +50,7 @@ export const SocketEventName = {
   PageDeleted: 'page:delete',
 
   // Yjs
+  YjsHasDraftUpdated: 'yjs:has-draft-update',
   YjsAwarenessStateSizeUpdated: 'yjs:awareness-state-size-update',
   YjsHasRevisionBodyDiffUpdated: 'yjs:has-revision-body-diff-update',
 } as const;

apps/app/src/server/service/socket-io.js

@@ -192,6 +192,10 @@ class SocketIoService {
       });
 
       socket.on(GlobalSocketEventName.YDocSync, async({ pageId, initialValue }) => {
+        this.io
+          .in(getRoomNameWithId(RoomPrefix.PAGE, pageId))
+          .emit('hasYjsDraft', true);
+
         try {
           await yjsConnectionManager.handleYDocSync(pageId, initialValue);
         }

apps/app/src/stores/yjs.ts

@@ -10,6 +10,7 @@ import type { CurrentPageYjsData } from '~/interfaces/yjs';
 import { useCurrentPageId } from './page';
 
 type CurrentPageYjsDataUtils = {
+  updateHasDraft(hasYjsDraft: boolean): void
   updateHasRevisionBodyDiff(hasRevisionBodyDiff: boolean): void
   updateAwarenessStateSize(awarenessStateSize: number): void
 }
@@ -17,6 +18,10 @@ type CurrentPageYjsDataUtils = {
 export const useCurrentPageYjsData = (): SWRResponse<CurrentPageYjsData, Error> & CurrentPageYjsDataUtils => {
   const swrResponse = useSWRStatic<CurrentPageYjsData, Error>('currentPageYjsData', undefined);
 
+  const updateHasDraft = useCallback((hasYjsDraft: boolean) => {
+    swrResponse.mutate({ ...swrResponse.data, hasYjsDraft });
+  }, [swrResponse]);
+
   const updateHasRevisionBodyDiff = useCallback((hasRevisionBodyDiff: boolean) => {
     swrResponse.mutate({ ...swrResponse.data, hasRevisionBodyDiff });
   }, [swrResponse]);
@@ -26,7 +31,7 @@ export const useCurrentPageYjsData = (): SWRResponse<CurrentPageYjsData, Error>
   }, [swrResponse]);
 
   return {
-    ...swrResponse, updateHasRevisionBodyDiff, updateAwarenessStateSize,
+    ...swrResponse, updateHasDraft, updateHasRevisionBodyDiff, updateAwarenessStateSize,
   };
 };