fix: Current user presence in documents is incorrect (#8593)

* fix: Own presence in documents is not correct

* docs

app/scenes/Document/components/MultiplayerEditor.tsx

@@ -99,7 +99,11 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
     });
 
     provider.on("awarenessChange", (event: AwarenessChangeEvent) => {
-      presence.updateFromAwarenessChangeEvent(documentId, event);
+      presence.updateFromAwarenessChangeEvent(
+        documentId,
+        provider.awareness.clientID,
+        event
+      );
 
       event.states.forEach(({ user, scrollY }) => {
         if (user) {

app/stores/DocumentPresenceStore.ts

@@ -14,17 +14,16 @@ export default class PresenceStore {
   @observable
   data: Map<string, DocumentPresence> = new Map();
 
-  timeouts: Map<string, ReturnType<typeof setTimeout>> = new Map();
-
-  offlineTimeout = 30000;
-
-  private rootStore: RootStore;
-
   constructor(rootStore: RootStore) {
     this.rootStore = rootStore;
   }
 
-  // called when a user leaves the document
+  /**
+   * Removes a user from the presence store
+   *
+   * @param documentId ID of the document to remove the user from
+   * @param userId ID of the user to remove
+   */
   @action
   public leave(documentId: string, userId: string) {
     const existing = this.data.get(documentId);
@@ -34,8 +33,16 @@ export default class PresenceStore {
     }
   }
 
+  /**
+   * Updates the presence store based on an awareness event from YJS
+   *
+   * @param documentId ID of the document the event is for
+   * @param clientId ID of the client the event is for
+   * @param event The awareness event
+   */
   public updateFromAwarenessChangeEvent(
     documentId: string,
+    clientId: number,
     event: AwarenessChangeEvent
   ) {
     const presence = this.data.get(documentId);
@@ -45,7 +52,13 @@ export default class PresenceStore {
 
     event.states.forEach((state) => {
       const { user, cursor } = state;
-      if (user && this.rootStore.auth.currentUserId !== user.id) {
+
+      // To avoid loops we only want to update the presence for the current user
+      // if it is also the current client.
+      const isCurrentUser = this.rootStore.auth.currentUserId === user?.id;
+      const isCurrentClient = clientId === state.clientId;
+
+      if (user && (!isCurrentUser || !isCurrentClient)) {
         this.update(documentId, user.id, !!cursor);
         existingUserIds = existingUserIds.filter((id) => id !== user.id);
       }
@@ -56,6 +69,14 @@ export default class PresenceStore {
     });
   }
 
+  /**
+   * Updates the presence store to indicate that a user is present in a document
+   * and then removes the user after a timeout of inactivity.
+   *
+   * @param documentId ID of the document to update
+   * @param userId ID of the user to update
+   * @param isEditing Whether the user is "editing" the document
+   */
   public touch(documentId: string, userId: string, isEditing: boolean) {
     const id = `${documentId}-${userId}`;
     let timeout = this.timeouts.get(id);
@@ -73,6 +94,13 @@ export default class PresenceStore {
     this.timeouts.set(id, timeout);
   }
 
+  /**
+   * Updates the presence store to indicate that a user is present in a document.
+   *
+   * @param documentId ID of the document to update
+   * @param userId ID of the user to update
+   * @param isEditing Whether the user is "editing" the document
+   */
   @action
   private update(documentId: string, userId: string, isEditing: boolean) {
     const presence = this.data.get(documentId) || new Map();
@@ -95,4 +123,10 @@ export default class PresenceStore {
   public clear() {
     this.data.clear();
   }
+
+  private timeouts: Map<string, ReturnType<typeof setTimeout>> = new Map();
+
+  private offlineTimeout = 30000;
+
+  private rootStore: RootStore;
 }

app/types.ts

@@ -206,8 +206,31 @@ export type WebsocketEvent =
   | WebsocketEntitiesEvent
   | WebsocketCommentReactionEvent;
 
+type CursorPosition = {
+  type: {
+    client: number;
+    clock: number;
+  };
+  tname: string | null;
+  item: {
+    client: number;
+    clock: number;
+  };
+  assoc: number;
+};
+
+type Cursor = {
+  anchor: CursorPosition;
+  head: CursorPosition;
+};
+
 export type AwarenessChangeEvent = {
-  states: { user?: { id: string }; cursor: any; scrollY: number | undefined }[];
+  states: {
+    clientId: number;
+    user?: { id: string };
+    cursor: Cursor;
+    scrollY: number | undefined;
+  }[];
 };
 
 export const EmptySelectValue = "__empty__";