apply fb

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -53,6 +53,7 @@ import {
   EditorMode,
   useEditorMode, useSelectedGrant,
 } from '~/stores/ui';
+import { useEditingUsers } from '~/stores/use-editing-users';
 import { useNextThemes } from '~/stores/use-next-themes';
 import loggerFactory from '~/utils/logger';
 
@@ -117,6 +118,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const { mutate: mutateRemoteRevisionLastUpdatedAt } = useRemoteRevisionLastUpdatedAt();
   const { mutate: mutateRemoteRevisionLastUpdateUser } = useRemoteRevisionLastUpdateUser();
   const { data: user } = useCurrentUser();
+  const { onEditorsUpdated } = useEditingUsers();
 
   const { data: socket } = useGlobalSocket();
 
@@ -447,6 +449,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
             pageId={pageId ?? undefined}
             initialValue={initialValue}
             onOpenEditor={markdown => setMarkdownToPreview(markdown)}
+            onEditorsUpdated={onEditorsUpdated}
             editorTheme={editorSettings?.theme}
             editorKeymap={editorSettings?.keymapMode}
           />

apps/app/src/components/PageHeader/PageHeader.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 
 import { DevidedPagePath } from '@growi/core/dist/models';
-import { useEditingUsers } from '@growi/core/dist/swr';
 
 import { useSWRxCurrentPage } from '~/stores/page';
+import { useEditingUsers } from '~/stores/use-editing-users';
 
 import { EditingUserList } from './EditingUserList';
 import { PagePathHeader } from './PagePathHeader';
@@ -15,7 +15,7 @@ const moduleClass = styles['page-header'] ?? '';
 
 export const PageHeader: FC = () => {
   const { data: currentPage } = useSWRxCurrentPage();
-  const { data: EditingUsers } = useEditingUsers();
+  const { data: editingUsers } = useEditingUsers();
 
   if (currentPage == null) {
     return <></>;
@@ -34,8 +34,8 @@ export const PageHeader: FC = () => {
           currentPage={currentPage}
         />
         <EditingUserList
-          className={`z-2 ${dPagePath.isRoot ? '' : 'col mt-2'}`}
-          userList={EditingUsers?.userList ?? []}
+          className={`${dPagePath.isRoot ? 'mt-1' : 'col mt-2'}`}
+          userList={editingUsers?.userList ?? []}
         />
       </div>
     </div>

apps/app/src/pages/[[...path]].page.tsx

@@ -328,8 +328,7 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
         <title>{title}</title>
       </Head>
       <div className="dynamic-layout-root justify-content-between">
-        {/* z-1 for UserList */}
-        <nav className="sticky-top z-1">
+        <nav className="sticky-top">
           <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />
         </nav>
 

apps/app/src/pages/trash.page.tsx

@@ -69,8 +69,7 @@ const TrashPage: NextPageWithLayout<CommonProps> = (props: Props) => {
         <title>{title}</title>
       </Head>
       <div className="dynamic-layout-root">
-        {/* z-1 for UserList */}
-        <nav className="sticky-top z-1">
+        <nav className="sticky-top">
           TODO: implement navigation for /trash
         </nav>
 

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -22,6 +22,7 @@ type Props = CodeMirrorEditorProps & {
   pageId?: string,
   initialValue?: string,
   onOpenEditor?: (markdown: string) => void,
+  onEditorsUpdated?: (userList: IUserHasId[]) => void,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
@@ -29,12 +30,12 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
     acceptedUploadFileType,
     indentSize, user, pageId, initialValue,
     editorTheme, editorKeymap,
-    onSave, onChange, onUpload, onScroll, onOpenEditor,
+    onSave, onChange, onUpload, onScroll, onOpenEditor, onEditorsUpdated,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 
-  useCollaborativeEditorMode(user, pageId, initialValue, onOpenEditor, codeMirrorEditor);
+  useCollaborativeEditorMode(user, pageId, initialValue, onOpenEditor, onEditorsUpdated, codeMirrorEditor);
 
   // setup additional extensions
   useEffect(() => {

packages/editor/src/stores/use-collaborative-editor-mode.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { GlobalSocketEventName, type IUserHasId } from '@growi/core/dist/interfaces';
-import { useGlobalSocket, GLOBAL_SOCKET_NS, useEditingUsers } from '@growi/core/dist/swr';
+import { useGlobalSocket, GLOBAL_SOCKET_NS } from '@growi/core/dist/swr';
 // see: https://github.com/yjs/y-codemirror.next#example
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -24,6 +24,7 @@ export const useCollaborativeEditorMode = (
     pageId?: string,
     initialValue?: string,
     onOpenEditor?: (markdown: string) => void,
+    onEditorsUpdated?: (userList: IUserHasId[]) => void,
     codeMirrorEditor?: UseCodeMirrorEditor,
 ): void => {
   const [ydoc, setYdoc] = useState<Y.Doc | null>(null);
@@ -31,7 +32,6 @@ export const useCollaborativeEditorMode = (
   const [isInit, setIsInit] = useState(false);
   const [cPageId, setCPageId] = useState(pageId);
 
-  const { onEditorsUpdated } = useEditingUsers();
   const { data: socket } = useGlobalSocket();
 
   const cleanupYDocAndProvider = () => {
@@ -53,7 +53,7 @@ export const useCollaborativeEditorMode = (
     setCPageId(pageId);
 
     // reset editors
-    onEditorsUpdated([]);
+    onEditorsUpdated?.([]);
   };
 
   const setupYDoc = () => {
@@ -71,7 +71,7 @@ export const useCollaborativeEditorMode = (
   };
 
   const setupProvider = () => {
-    if (provider != null || ydoc == null || socket == null) {
+    if (provider != null || ydoc == null || socket == null || onEditorsUpdated == null) {
       return;
     }
 
@@ -94,6 +94,8 @@ export const useCollaborativeEditorMode = (
     socketIOProvider.on('sync', (isSync: boolean) => {
       if (isSync) {
         socket.emit(GlobalSocketEventName.YDocSync, { pageId, initialValue });
+        const userList: IUserHasId[] = Array.from(socketIOProvider.awareness.states.values(), value => value.user.user && value.user.user);
+        onEditorsUpdated(userList);
       }
     });