Apply Vim keybindings for Yorkie undo/redo (#569)

Author: hackerwins

frontend/src/components/editor/Editor.tsx

@@ -40,7 +40,7 @@ function Editor(props: EditorProps) {
 	const workspaceStore = useSelector(selectWorkspace);
 	const { mutateAsync: createUploadUrl } = useCreateUploadUrlMutation();
 	const { mutateAsync: uploadFile } = useUploadFileMutation();
-	const { applyFormat, setKeymapConfig } = useFormatUtils();
+	const { applyFormat, setKeymapConfig, setupVimKeybindings } = useFormatUtils();
 	const { toolBarState, setToolBarState, updateFormatBar } = useToolBar();
 
 	const {
@@ -78,6 +78,11 @@ function Editor(props: EditorProps) {
 			return `${import.meta.env.VITE_API_ADDR}/files/${uploadUrlData.fileKey}`;
 		};
 
+		// Setup vim keybindings when vim mode is activated
+		if (configStore.codeKey === CodeKeyType.VIM) {
+			setupVimKeybindings();
+		}
+
 		const state = EditorState.create({
 			doc: editorStore.doc.getRoot().content?.toString() ?? "",
 			extensions: [
@@ -122,6 +127,7 @@ function Editor(props: EditorProps) {
 		applyFormat,
 		updateFormatBar,
 		setKeymapConfig,
+		setupVimKeybindings,
 	]);
 
 	return (

frontend/src/hooks/useFormatUtils.ts

@@ -5,6 +5,7 @@ import { indentWithTab } from "@codemirror/commands";
 import { Dispatch, SetStateAction } from "react";
 import { useSelector } from "react-redux";
 import { selectEditor } from "../store/editorSlice";
+import { Vim } from "@replit/codemirror-vim";
 
 export interface ToolBarState {
 	show: boolean;
@@ -125,6 +126,25 @@ export const useFormatUtils = () => {
 		return true;
 	}, [doc]);
 
+	// Setup Vim keybindings to use Yorkie undo/redo
+	const setupVimKeybindings = useCallback(() => {
+		// Map 'u' key in vim mode to Yorkie undo
+		Vim.defineAction("yorkieUndo", () => {
+			handleYorkieUndo();
+		});
+
+		// Map redo command in vim mode to Yorkie redo
+		Vim.defineAction("yorkieRedo", () => {
+			handleYorkieRedo();
+		});
+
+		// Map 'u' key to Yorkie undo action
+		Vim.mapCommand("u", "action", "yorkieUndo", {}, { context: "normal" });
+
+		// Map 'Ctrl-r' key to Yorkie redo action
+		Vim.mapCommand("<C-r>", "action", "yorkieRedo", {}, { context: "normal" });
+	}, [handleYorkieUndo, handleYorkieRedo]);
+
 	const setKeymapConfig = useCallback(
 		() => [
 			indentWithTab,
@@ -186,5 +206,6 @@ export const useFormatUtils = () => {
 		checkAndAddFormat,
 		handleYorkieUndo,
 		handleYorkieRedo,
+		setupVimKeybindings,
 	};
 };