feat: submit own style index on realtime user state set

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

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 =