Trigger soket.emit when a draft is created

apps/app/src/components/Navbar/PageEditorModeManager.tsx

@@ -1,6 +1,7 @@
-import React, { type ReactNode, useCallback } from 'react';
+import React, { type ReactNode, useCallback, useEffect } from 'react';
 
 import { Origin } from '@growi/core';
+import { useGlobalSocket } from '@growi/core/dist/swr';
 import { useTranslation } from 'next-i18next';
 
 
@@ -65,7 +66,8 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
   const { data: isNotFound } = useIsNotFound();
   const { mutate: mutateEditorMode } = useEditorMode();
   const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
-  const { data: hasYjsDraft } = useHasYjsDraft();
+  const { data: hasYjsDraft, mutate: mutateHasYjsDraft } = useHasYjsDraft();
+  const { data: socket } = useGlobalSocket();
 
   const { isCreating, createAndTransit } = useCreatePageAndTransit();
 
@@ -86,6 +88,22 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
     }
   }, [createAndTransit, isNotFound, mutateEditorMode, path, t]);
 
+  useEffect(() => {
+
+    if (socket == null) { return }
+
+    const yjsDraftUpdateHandler = (hasYjsDraft: boolean) => {
+      mutateHasYjsDraft(hasYjsDraft);
+    };
+
+    socket.on('yjsDraft:update', yjsDraftUpdateHandler);
+
+    return () => {
+      socket.off('yjsDraft:update', yjsDraftUpdateHandler);
+    };
+
+  }, [mutateHasYjsDraft, socket]);
+
   const _isBtnDisabled = isCreating || isBtnDisabled;
 
   return (

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

@@ -160,7 +160,7 @@ class SocketIoService {
     this.io.on('connection', (socket) => {
       socket.on(GlobalSocketEventName.YDocSync, async({ pageId, initialValue }) => {
         try {
-          await yjsConnectionManager.handleYDocSync(pageId, initialValue);
+          await yjsConnectionManager.handleYDocSync(pageId, initialValue, socket);
         }
         catch (error) {
           logger.warn(error.message);

apps/app/src/server/service/yjs-connection-manager.ts

@@ -1,9 +1,10 @@
-import type { Server } from 'socket.io';
+import type { Server, Socket } from 'socket.io';
 import { MongodbPersistence } from 'y-mongodb-provider';
 import { YSocketIO } from 'y-socket.io/dist/server';
 import * as Y from 'yjs';
 
 import { getMongoUri } from '../util/mongoose-utils';
+import { RoomPrefix, getRoomNameWithId } from '../util/socket-io-helpers';
 
 const MONGODB_PERSISTENCE_COLLECTION_NAME = 'yjs-writings';
 const MONGODB_PERSISTENCE_FLUSH_SIZE = 100;
@@ -39,7 +40,7 @@ class YjsConnectionManager {
     return this.instance;
   }
 
-  public async handleYDocSync(pageId: string, initialValue: string): Promise<void> {
+  public async handleYDocSync(pageId: string, initialValue: string, socket: Socket): Promise<void> {
     const currentYdoc = this.getCurrentYdoc(pageId);
     if (currentYdoc == null) {
       return;
@@ -73,6 +74,12 @@ class YjsConnectionManager {
       await this.mdb.flushDocument(pageId);
     });
 
+    currentYdoc.once('update', async() => {
+      socket
+        .in(getRoomNameWithId(RoomPrefix.PAGE, pageId))
+        .emit('yjsDraft:update', true);
+    });
+
     persistedYdoc.destroy();
   }