From 390d58793aca95e86ac545a4af0d4490045a10fb Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Fri, 26 Apr 2024 22:59:57 +0100
Subject: [PATCH] fix collab user

---
 .../features/editor/extensions/extensions.ts  | 13 +++++++--
 .../src/features/editor/extensions/utils.ts   | 13 +++++++++
 .../src/features/editor/page-editor.tsx       | 28 +++----------------
 3 files changed, 28 insertions(+), 26 deletions(-)
 create mode 100644 apps/client/src/features/editor/extensions/utils.ts

diff --git a/apps/client/src/features/editor/extensions/extensions.ts b/apps/client/src/features/editor/extensions/extensions.ts
index 80c4ef48..6ba1df29 100644
--- a/apps/client/src/features/editor/extensions/extensions.ts
+++ b/apps/client/src/features/editor/extensions/extensions.ts
@@ -17,6 +17,11 @@ import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { Comment, TrailingNode } from "@docmost/editor-ext";
 import GlobalDragHandle from "tiptap-extension-global-drag-handle";
+import {
+  randomElement,
+  userColors,
+} from "@/features/editor/extensions/utils.ts";
+import { IUser } from "@/features/user/types/user.types.ts";
 
 export const mainExtensions = [
   StarterKit.configure({
@@ -54,13 +59,17 @@ export const mainExtensions = [
   }),
 ] as any;
 
-type CollabExtensions = (provider: HocuspocusProvider) => any[];
+type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
 
-export const collabExtensions: CollabExtensions = (provider) => [
+export const collabExtensions: CollabExtensions = (provider, user) => [
   Collaboration.configure({
     document: provider.document,
   }),
   CollaborationCursor.configure({
     provider,
+    user: {
+      name: user.name,
+      color: randomElement(userColors),
+    },
   }),
 ];
diff --git a/apps/client/src/features/editor/extensions/utils.ts b/apps/client/src/features/editor/extensions/utils.ts
new file mode 100644
index 00000000..a18fbb18
--- /dev/null
+++ b/apps/client/src/features/editor/extensions/utils.ts
@@ -0,0 +1,13 @@
+export const userColors = [
+  "#958DF1",
+  "#F98181",
+  "#FBBC88",
+  "#FAF594",
+  "#70CFF8",
+  "#94FADB",
+  "#B9F18D",
+];
+
+export function randomElement(array: Array<any>) {
+  return array[Math.floor(Math.random() * array.length)];
+}
diff --git a/apps/client/src/features/editor/page-editor.tsx b/apps/client/src/features/editor/page-editor.tsx
index 161eb7ab..64abeeee 100644
--- a/apps/client/src/features/editor/page-editor.tsx
+++ b/apps/client/src/features/editor/page-editor.tsx
@@ -22,19 +22,6 @@ import CommentDialog from "@/features/comment/components/comment-dialog";
 import EditorSkeleton from "@/features/editor/components/editor-skeleton";
 import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
 
-const colors = [
-  "#958DF1",
-  "#F98181",
-  "#FBBC88",
-  "#FAF594",
-  "#70CFF8",
-  "#94FADB",
-  "#B9F18D",
-];
-const getRandomElement = (list) =>
-  list[Math.floor(Math.random() * list.length)];
-const getRandomColor = () => getRandomElement(colors);
-
 interface PageEditorProps {
   pageId: string;
   editable?: boolean;
@@ -95,7 +82,10 @@ export default function PageEditor({
     };
   }, [remoteProvider, localProvider]);
 
-  const extensions = [...mainExtensions, ...collabExtensions(remoteProvider)];
+  const extensions = [
+    ...mainExtensions,
+    ...collabExtensions(remoteProvider, currentUser.user),
+  ];
 
   const editor = useEditor(
     {
@@ -123,16 +113,6 @@ export default function PageEditor({
     [pageId, editable, remoteProvider],
   );
 
-  useEffect(() => {
-    if (editor && currentUser.user) {
-      editor
-        .chain()
-        .focus()
-        .updateUser({ ...currentUser.user, color: getRandomColor() })
-        .run();
-    }
-  }, [editor, currentUser.user]);
-
   const handleActiveCommentEvent = (event) => {
     const { commentId } = event.detail;
     setActiveCommentId(commentId);