Ryan/docmost-ryan
1
0
Fork 0
mirror of https://github.com/Shadowfita/docmost.git synced 2025-11-12 07:42:34 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix collab user

Browse Source
This commit is contained in:
Philipinho
2024-04-26 22:59:57 +01:00
parent 4667d81f57
commit 390d58793a
3 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/client/src/features/editor/extensions/extensions.ts
View File

@ -17,6 +17,11 @@ import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
import { HocuspocusProvider } from "@hocuspocus/provider"; import { HocuspocusProvider } from "@hocuspocus/provider";
import { Comment, TrailingNode } from "@docmost/editor-ext"; import { Comment, TrailingNode } from "@docmost/editor-ext";
import GlobalDragHandle from "tiptap-extension-global-drag-handle"; 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 = [ export const mainExtensions = [
StarterKit.configure({ StarterKit.configure({
@ -54,13 +59,17 @@ export const mainExtensions = [
}), }),
] as any; ] 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({ Collaboration.configure({
document: provider.document, document: provider.document,
}), }),
CollaborationCursor.configure({ CollaborationCursor.configure({
provider, provider,
user: {
name: user.name,
color: randomElement(userColors),
},
}), }),
]; ];

13
apps/client/src/features/editor/extensions/utils.ts Normal file
View File

@ -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)];
}

28
apps/client/src/features/editor/page-editor.tsx
View File

@ -22,19 +22,6 @@ import CommentDialog from "@/features/comment/components/comment-dialog";
import EditorSkeleton from "@/features/editor/components/editor-skeleton"; import EditorSkeleton from "@/features/editor/components/editor-skeleton";
import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu"; 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 { interface PageEditorProps {
pageId: string; pageId: string;
editable?: boolean; editable?: boolean;
@ -95,7 +82,10 @@ export default function PageEditor({
}; };
}, [remoteProvider, localProvider]); }, [remoteProvider, localProvider]);
const extensions = [...mainExtensions, ...collabExtensions(remoteProvider)]; const extensions = [
...mainExtensions,
...collabExtensions(remoteProvider, currentUser.user),
];
const editor = useEditor( const editor = useEditor(
{ {
@ -123,16 +113,6 @@ export default function PageEditor({
[pageId, editable, remoteProvider], [pageId, editable, remoteProvider],
); );
useEffect(() => {
if (editor && currentUser.user) {
editor
.chain()
.focus()
.updateUser({ ...currentUser.user, color: getRandomColor() })
.run();
}
}, [editor, currentUser.user]);
const handleActiveCommentEvent = (event) => { const handleActiveCommentEvent = (event) => {
const { commentId } = event.detail; const { commentId } = event.detail;
setActiveCommentId(commentId); setActiveCommentId(commentId);