feat: submit own style index on realtime user state set

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

backend/src/realtime/realtime-note/realtime-user-status-adapter.spec.ts

@@ -77,7 +77,12 @@ describe('realtime user status adapter', () => {
 
     const expectedMessage1: Message<MessageType.REALTIME_USER_STATE_SET> = {
       type: MessageType.REALTIME_USER_STATE_SET,
-      payload: [
+      payload: {
+        ownUser: {
+          styleIndex: 0,
+          displayName: username1,
+        },
+        users: [
           {
             active: true,
             cursor: {
@@ -99,6 +104,7 @@ describe('realtime user status adapter', () => {
             displayName: username3,
           },
         ],
+      },
     };
     expect(sendMessage1Spy).toHaveBeenNthCalledWith(1, expectedMessage1);
     expect(sendMessage2Spy).toHaveBeenCalledTimes(0);
@@ -125,7 +131,12 @@ describe('realtime user status adapter', () => {
 
     const expectedMessage2: Message<MessageType.REALTIME_USER_STATE_SET> = {
       type: MessageType.REALTIME_USER_STATE_SET,
-      payload: [
+      payload: {
+        ownUser: {
+          styleIndex: 1,
+          displayName: username2,
+        },
+        users: [
           {
             active: true,
             cursor: {
@@ -147,11 +158,17 @@ describe('realtime user status adapter', () => {
             displayName: username3,
           },
         ],
+      },
     };
 
     const expectedMessage3: Message<MessageType.REALTIME_USER_STATE_SET> = {
       type: MessageType.REALTIME_USER_STATE_SET,
-      payload: [
+      payload: {
+        ownUser: {
+          styleIndex: 2,
+          displayName: username3,
+        },
+        users: [
           {
             active: true,
             cursor: {
@@ -173,6 +190,7 @@ describe('realtime user status adapter', () => {
             displayName: username2,
           },
         ],
+      },
     };
 
     expect(sendMessage1Spy).toHaveBeenCalledTimes(0);
@@ -191,7 +209,12 @@ describe('realtime user status adapter', () => {
 
     const expectedMessage1: Message<MessageType.REALTIME_USER_STATE_SET> = {
       type: MessageType.REALTIME_USER_STATE_SET,
-      payload: [
+      payload: {
+        ownUser: {
+          styleIndex: 0,
+          displayName: username1,
+        },
+        users: [
           {
             active: true,
             cursor: {
@@ -203,11 +226,17 @@ describe('realtime user status adapter', () => {
             displayName: username3,
           },
         ],
+      },
     };
 
     const expectedMessage3: Message<MessageType.REALTIME_USER_STATE_SET> = {
       type: MessageType.REALTIME_USER_STATE_SET,
-      payload: [
+      payload: {
+        ownUser: {
+          styleIndex: 2,
+          displayName: username3,
+        },
+        users: [
           {
             active: true,
             cursor: {
@@ -219,6 +248,7 @@ describe('realtime user status adapter', () => {
             displayName: username1,
           },
         ],
+      },
     };
 
     expect(sendMessage1Spy).toHaveBeenNthCalledWith(1, expectedMessage1);

backend/src/realtime/realtime-note/realtime-user-status-adapter.ts

@@ -94,13 +94,21 @@ export class RealtimeUserStatusAdapter {
   }
 
   private sendCompleteStateToClient(client: RealtimeConnection): void {
-    const payload = this.collectAllConnectionsExcept(client).map(
+    const realtimeUsers = this.collectAllConnectionsExcept(client).map(
       (client) => client.getRealtimeUserStateAdapter().realtimeUser,
     );
 
     client.getTransporter().sendMessage({
       type: MessageType.REALTIME_USER_STATE_SET,
-      payload,
+      payload: {
+        users: realtimeUsers,
+        ownUser: {
+          displayName:
+            client.getRealtimeUserStateAdapter().realtimeUser.displayName,
+          styleIndex:
+            client.getRealtimeUserStateAdapter().realtimeUser.styleIndex,
+        },
+      },
     });
   }
 

commons/src/message-transporters/message.ts

@@ -22,7 +22,13 @@ export enum MessageType {
 export interface MessagePayloads {
   [MessageType.NOTE_CONTENT_STATE_REQUEST]: number[]
   [MessageType.NOTE_CONTENT_UPDATE]: number[]
-  [MessageType.REALTIME_USER_STATE_SET]: RealtimeUser[]
+  [MessageType.REALTIME_USER_STATE_SET]: {
+    users: RealtimeUser[]
+    ownUser: {
+      displayName: string
+      styleIndex: number
+    }
+  }
   [MessageType.REALTIME_USER_SINGLE_UPDATE]: RemoteCursor
 }
 

frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/receive-remote-cursor-view-plugin.ts

@@ -20,7 +20,7 @@ export class ReceiveRemoteCursorViewPlugin implements PluginValue {
     this.listener = messageTransporter.on(
       MessageType.REALTIME_USER_STATE_SET,
       ({ payload }) => {
-        const cursors: RemoteCursor[] = payload.map((user) => ({
+        const cursors: RemoteCursor[] = payload.users.map((user) => ({
           from: user.cursor.from,
           to: user.cursor.to,
           displayName: user.displayName,

frontend/src/components/editor-page/editor-pane/hooks/yjs/use-receive-realtime-users.ts

@@ -21,7 +21,12 @@ export const useReceiveRealtimeUsers = (messageTransporter: MessageTransporter):
   useEffect(() => {
     const listener = messageTransporter.on(
       MessageType.REALTIME_USER_STATE_SET,
-      (payload) => setRealtimeUsers(payload.payload),
+      (message) =>
+        setRealtimeUsers(
+          message.payload.users,
+          message.payload.ownUser.styleIndex,
+          message.payload.ownUser.displayName
+        ),
       { objectify: true }
     ) as Listener
 

frontend/src/redux/realtime/methods.ts

@@ -11,10 +11,14 @@ import type { RealtimeUser } from '@hedgedoc/commons'
 /**
  * Dispatches an event to add a user
  */
-export const setRealtimeUsers = (users: RealtimeUser[]): void => {
+export const setRealtimeUsers = (users: RealtimeUser[], ownStyleIndex: number, ownDisplayName: string): void => {
   const action: SetRealtimeUsersAction = {
     type: RealtimeStatusActionType.SET_REALTIME_USERS,
-    users
+    users,
+    ownUser: {
+      styleIndex: ownStyleIndex,
+      displayName: ownDisplayName
+    }
   }
   store.dispatch(action)
 }

frontend/src/redux/realtime/reducers.ts

@@ -10,7 +10,11 @@ import type { Reducer } from 'redux'
 const initialState: RealtimeStatus = {
   isSynced: false,
   isConnected: false,
-  onlineUsers: []
+  onlineUsers: [],
+  ownUser: {
+    displayName: '',
+    styleIndex: 0
+  }
 }
 
 /**
@@ -28,7 +32,8 @@ export const RealtimeStatusReducer: Reducer<RealtimeStatus, RealtimeStatusAction
     case RealtimeStatusActionType.SET_REALTIME_USERS:
       return {
         ...state,
-        onlineUsers: action.users
+        onlineUsers: action.users,
+        ownUser: action.ownUser
       }
     case RealtimeStatusActionType.SET_REALTIME_CONNECTION_STATUS:
       return {

frontend/src/redux/realtime/types.ts

@@ -16,6 +16,10 @@ export enum RealtimeStatusActionType {
 export interface SetRealtimeUsersAction extends Action<RealtimeStatusActionType> {
   type: RealtimeStatusActionType.SET_REALTIME_USERS
   users: RealtimeUser[]
+  ownUser: {
+    styleIndex: number
+    displayName: string
+  }
 }
 
 export interface SetRealtimeConnectionStatusAction extends Action<RealtimeStatusActionType> {
@@ -36,6 +40,10 @@ export interface RealtimeStatus {
   onlineUsers: RealtimeUser[]
   isConnected: boolean
   isSynced: boolean
+  ownUser: {
+    displayName: string
+    styleIndex: number
+  }
 }
 
 export type RealtimeStatusActions =