Introduce Multi-User Undo/Redo for Collaborative Editing (#563)

Undo and redo operations are now recorded based on local edits
and reconciled against remote changes, allowing text updates
to be safely reverted and consistently reapplied
in collaborative editing sessions.

Author: JOOHOJANG

frontend/src/components/editor/Editor.tsx

@@ -83,7 +83,7 @@ function Editor(props: EditorProps) {
 			extensions: [
 				configStore.codeKey === CodeKeyType.VIM ? vim() : [],
 				keymap.of(setKeymapConfig()),
-				basicSetup({ highlightSelectionMatches: false }),
+				basicSetup({ highlightSelectionMatches: false, history: false }),
 				markdown(),
 				themeMode === "light" ? xcodeLight : xcodeDark,
 				EditorView.theme({ "&": { width: "100%" } }),

frontend/src/hooks/useFormatUtils.ts

@@ -20,7 +20,7 @@ export enum FormatType {
 }
 
 export const useFormatUtils = () => {
-	const { cmView } = useSelector(selectEditor);
+	const { cmView, doc } = useSelector(selectEditor);
 
 	const getFormatMarker = useCallback((formatType: FormatType) => {
 		switch (formatType) {
@@ -109,15 +109,34 @@ export const useFormatUtils = () => {
 		[getFormatMarker, getFormatMarkerLength]
 	);
 
+	const handleYorkieUndo = useCallback(() => {
+		if (doc?.history.canUndo()) {
+			doc.history.undo();
+		}
+
+		return true;
+	}, [doc]);
+
+	const handleYorkieRedo = useCallback(() => {
+		if (doc?.history.canRedo()) {
+			doc.history.redo();
+		}
+
+		return true;
+	}, [doc]);
+
 	const setKeymapConfig = useCallback(
 		() => [
 			indentWithTab,
 			{ key: "Mod-b", run: applyFormat(FormatType.BOLD) },
 			{ key: "Mod-i", run: applyFormat(FormatType.ITALIC) },
 			{ key: "Mod-e", run: applyFormat(FormatType.CODE) },
 			{ key: "Mod-Shift-x", run: applyFormat(FormatType.STRIKETHROUGH) },
+			{ key: "Mod-z", run: handleYorkieUndo, preventDefault: true },
+			{ key: "Mod-y", run: handleYorkieRedo, preventDefault: true },
+			{ key: "Mod-Shift-z", run: handleYorkieRedo, preventDefault: true },
 		],
-		[applyFormat]
+		[applyFormat, handleYorkieUndo, handleYorkieRedo]
 	);
 
 	const toggleButtonChangeHandler = useCallback(
@@ -165,5 +184,7 @@ export const useFormatUtils = () => {
 		setKeymapConfig,
 		toggleButtonChangeHandler,
 		checkAndAddFormat,
+		handleYorkieUndo,
+		handleYorkieRedo,
 	};
 };

frontend/src/utils/yorkie/yorkieSync.ts

@@ -77,8 +77,14 @@ class YorkieSyncPluginValue implements cmView.PluginValue {
 		});
 
 		this._doc.subscribe((event) => {
-			if (event.type !== "remote-change") return;
+			if (
+				event.type !== "remote-change" &&
+				!(event.type === "local-change" && event.source === "undoredo")
+			) {
+				return;
+			}
 
+			const isUndoRedo = event.type === "local-change" && event.source === "undoredo";
 			const { operations } = event.value;
 
 			// Check if content itself is replaced
@@ -106,11 +112,25 @@ class YorkieSyncPluginValue implements cmView.PluginValue {
 							insert: op.value!.content,
 						},
 					];
-
-					view.dispatch({
+					const transactionSpec: cmState.TransactionSpec = {
 						changes,
 						annotations: [cmState.Transaction.remote.of(true)],
-					});
+					};
+
+					if (isUndoRedo) {
+						const newPos = op.from + (op.value?.content?.length || 0);
+						const docLength =
+							view.state.doc.length +
+							((op.value?.content?.length || 0) - (op.to - op.from));
+						const boundedPos = Math.min(Math.max(0, newPos), docLength);
+
+						transactionSpec.selection = {
+							anchor: boundedPos,
+							head: boundedPos,
+						};
+					}
+
+					view.dispatch(transactionSpec);
 				}
 			});
 		});