Make clicking user profiles scroll the view to their respective sections

yorkie-team · Aug 24, 2024 · d357462 · d357462
1 parent 351e784
commit d357462
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 16 deletions.
diff --git a/frontend/src/components/editor/Editor.tsx b/frontend/src/components/editor/Editor.tsx
@@ -1,21 +1,20 @@
-import { useCallback, useEffect, useState } from "react";
-import { EditorState } from "@codemirror/state";
-import { EditorView, basicSetup } from "codemirror";
 import { markdown } from "@codemirror/lang-markdown";
-import { useDispatch, useSelector } from "react-redux";
-import { selectEditor, setCmView } from "../../store/editorSlice";
-import { yorkieCodeMirror } from "../../utils/yorkie";
-import { xcodeLight, xcodeDark } from "@uiw/codemirror-theme-xcode";
-import { useCurrentTheme } from "../../hooks/useCurrentTheme";
+import { EditorState } from "@codemirror/state";
 import { keymap, ViewUpdate } from "@codemirror/view";
-import { intelligencePivot } from "../../utils/intelligence/intelligencePivot";
-import { imageUploader } from "../../utils/imageUploader";
-import { useCreateUploadUrlMutation, useUploadFileMutation } from "../../hooks/api/file";
-import { selectWorkspace } from "../../store/workspaceSlice";
+import { xcodeDark, xcodeLight } from "@uiw/codemirror-theme-xcode";
+import { basicSetup, EditorView } from "codemirror";
+import { useCallback, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { ScrollSyncPane } from "react-scroll-sync";
+import { useCreateUploadUrlMutation, useUploadFileMutation } from "../../hooks/api/file";
+import { useCurrentTheme } from "../../hooks/useCurrentTheme";
+import { FormatType, ToolBarState, useFormatUtils } from "../../hooks/useFormatUtils";
+import { selectEditor, setCmView } from "../../store/editorSlice";
 import { selectSetting } from "../../store/settingSlice";
-import { ToolBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils";
-
+import { selectWorkspace } from "../../store/workspaceSlice";
+import { imageUploader } from "../../utils/imageUploader";
+import { intelligencePivot } from "../../utils/intelligence/intelligencePivot";
+import { yorkieCodeMirror } from "../../utils/yorkie";
 import ToolBar from "./ToolBar";
 
 function Editor() {

diff --git a/frontend/src/components/headers/UserPresenceList.tsx b/frontend/src/components/headers/UserPresenceList.tsx
@@ -9,8 +9,11 @@ import {
 	Tooltip,
 	Typography,
 } from "@mui/material";
+import { EditorView } from "codemirror";
 import { useState } from "react";
+import { useSelector } from "react-redux";
 import { Presence } from "../../hooks/useUserPresence";
+import { selectEditor } from "../../store/editorSlice";
 
 interface UserPresenceListProps {
 	presenceList: Presence[];
@@ -20,6 +23,7 @@ function UserPresenceList(props: UserPresenceListProps) {
 	const { presenceList } = props;
 	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 	const popoverOpen = Boolean(anchorEl);
+	const editorStore = useSelector(selectEditor);
 
 	const handleOpenPopover = (event: React.MouseEvent<HTMLElement>) => {
 		setAnchorEl(event.currentTarget);
@@ -29,13 +33,22 @@ function UserPresenceList(props: UserPresenceListProps) {
 		setAnchorEl(null);
 	};
 
+	const handleScrollToUserLocation = (presence: Presence) => {
+		const cursor = presence.presence.cursor;
+		editorStore.cmView?.dispatch({
+			effects: EditorView.scrollIntoView(cursor[0], {
+				y: "center",
+			}),
+		});
+	};
+
 	const MAX_VISIBLE_AVATARS = 4;
 	const hiddenAvatars = presenceList.slice(MAX_VISIBLE_AVATARS);
 
 	const renderAvatar = (presence: Presence) => (
 		<Tooltip key={presence.clientID} title={presence.presence.name}>
 			<Avatar
-				onClick={() => console.log("presence: ", presence)}
+				onClick={() => handleScrollToUserLocation(presence)}
 				alt={presence.presence.name}
 				sx={{ bgcolor: presence.presence.color }}
 			>
@@ -66,7 +79,11 @@ function UserPresenceList(props: UserPresenceListProps) {
 				<Paper sx={{ padding: 2 }}>
 					<Typography variant="subtitle2">Additional Users</Typography>
 					{hiddenAvatars.map((presence) => (
-						<ListItem key={presence.clientID} sx={{ paddingY: 1 }}>
+						<ListItem
+							key={presence.clientID}
+							sx={{ paddingY: 1 }}
+							onClick={() => handleScrollToUserLocation(presence)}
+						>
 							<ListItemAvatar>
 								<Avatar
 									sx={{

diff --git a/frontend/src/hooks/useUserPresence.ts b/frontend/src/hooks/useUserPresence.ts
@@ -21,6 +21,10 @@ export const useUserPresence = (doc: CodePairDocType | null) => {
 		setPresenceList(doc.getPresences());
 
 		const unsubscribe = doc.subscribe("others", (event) => {
+			if (event.type === "presence-changed") {
+				setPresenceList(doc.getPresences() ?? []);
+			}
+
 			if (event.type === "watched") {
 				setPresenceList(doc.getPresences() ?? []);
 			}

diff --git a/frontend/src/utils/yorkie/remoteSelection.ts b/frontend/src/utils/yorkie/remoteSelection.ts
@@ -151,10 +151,12 @@ export class YorkieRemoteSelectionsPluginValue {
 
 			if (sel && root.content) {
 				const selection = root.content.indexRangeToPosRange([sel.anchor, sel.head]);
+				const cursor = root.content.posRangeToIndexRange(selection);
 
 				if (!_.isEqual(selection, presence.get("selection"))) {
 					presence.set({
 						selection,
+						cursor,
 					});
 				}
 			} else if (presence.get("selection")) {

diff --git a/frontend/src/utils/yorkie/yorkieSync.ts b/frontend/src/utils/yorkie/yorkieSync.ts
@@ -10,6 +10,7 @@ export type YorkieCodeMirrorPresenceType = {
 	color: string;
 	name: string;
 	selection: yorkie.TextPosStructRange | null;
+	cursor: [number, number];
 };
 
 export class YorkieSyncConfig<