Fix/#226-K: 블럭 내부 좌우 방향키 커서 핸들러 개선 (#228)

* fix: 좌우 방향키 onKeyDown 핸들러 추가

- 예외 케이스 고려하지 않은 좌우 방향키 onKeyDown 핸들러 추가
- Block에서 기존에 사용하던 onKeyDown도 함께 실행될 수 있도록 함

* feat: 0보다 작은 offset 핸들링

* feat: 현재 노드의 범위를 벗어나는 offset 핸들링

* fix: eventHandler 타입 명시

Author: se030

client/src/components/Mom/Block/index.tsx

@@ -28,10 +28,11 @@ function Block({ id, onKeyDown, index }: BlockProps) {
     remoteDeleteCRDT,
   } = useCRDT();
 
-  const { offsetRef, setOffset, clearOffset, offsetHandlers } = useOffset();
-
   const blockRef = useRef<HTMLParagraphElement>(null);
 
+  const { offsetRef, setOffset, clearOffset, offsetHandlers } =
+    useOffset(blockRef);
+
   // 로컬에서 일어나는 작성 - 삽입과 삭제 연산
   const onInput: React.FormEventHandler = (e) => {
     setOffset();
@@ -159,6 +160,13 @@ function Block({ id, onKeyDown, index }: BlockProps) {
     e.preventDefault();
   };
 
+  const onKeyDownComposite: React.KeyboardEventHandler<HTMLParagraphElement> = (
+    e,
+  ) => {
+    offsetHandlers.onKeyDown(e);
+    onKeyDown(e);
+  };
+
   return (
     <p
       ref={blockRef}
@@ -167,7 +175,7 @@ function Block({ id, onKeyDown, index }: BlockProps) {
       onInput={onInput}
       onCompositionEnd={onCompositionEnd}
       {...offsetHandlers}
-      onKeyDown={onKeyDown}
+      onKeyDown={onKeyDownComposite}
       onPaste={onPaste}
       suppressContentEditableWarning={true}
     >

client/src/hooks/useOffset.tsx

@@ -1,35 +1,66 @@
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 
-export function useOffset() {
+export function useOffset(blockRef: React.RefObject<HTMLParagraphElement>) {
   const offsetRef = useRef<number | null>(null);
 
-  const setOffset = () => {
+  const setOffset = (offset = 0) => {
+    if (!blockRef.current) return;
+
     const selection = window.getSelection();
 
     if (selection?.rangeCount) {
       const range = selection.getRangeAt(0);
 
-      offsetRef.current = range.startOffset;
+      const preCaretRange = range.cloneRange();
+      preCaretRange.selectNodeContents(
+        blockRef.current as HTMLParagraphElement,
+      );
+      preCaretRange.setEnd(range.endContainer, range.endOffset);
+      const maxOffset = preCaretRange.toString().length;
+
+      const nextOffset = range.startOffset + offset;
+
+      offsetRef.current = Math.min(maxOffset, Math.max(0, nextOffset));
     }
   };
 
   const clearOffset = () => {
     offsetRef.current = null;
   };
 
+  // keydown 이벤트는 키 입력의 내용 반영 이전에 발생
+  const onKeyDown: React.KeyboardEventHandler = (e) => {
+    const ARROW_LEFT = 'ArrowLeft';
+    const ARROW_RIGHT = 'ArrowRight';
+
+    switch (e.nativeEvent.key) {
+      case ARROW_LEFT:
+        setOffset(-1);
+        return;
+      case ARROW_RIGHT:
+        setOffset(1);
+        return;
+    }
+  };
+
+  // 위 아래 방향키 이동은 핸들링하지 않음
   const onKeyUp: React.KeyboardEventHandler = (e) => {
-    const arrowKeys = ['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp'];
+    const ARROW_DOWN = 'ArrowDown';
+    const ARROW_UP = 'ArrowUp';
 
-    if (arrowKeys.includes(e.nativeEvent.key)) {
+    if ([ARROW_DOWN, ARROW_UP].includes(e.nativeEvent.key)) {
       setOffset();
     }
   };
 
   const offsetHandlers = {
-    onFocus: setOffset,
-    onClick: setOffset,
+    onFocus:
+      setOffset as unknown as React.FocusEventHandler<HTMLParagraphElement>,
+    onClick:
+      setOffset as unknown as React.MouseEventHandler<HTMLParagraphElement>,
     onBlur: clearOffset,
-    onKeyUp: onKeyUp,
+    onKeyDown,
+    onKeyUp,
   };
 
   return {