Feat/#199-K: 블럭 추가/삭제에 포커스와 커서 이동 (#235)

* feat: Block 컴포넌트 ref를 Mom에도 전달

- 배열 ref에서 forwardRef 사용하면 타입과 값 할당이 제대로 되지 않는 이슈
- Mom 컴포넌트에서 RefObject 배열을 값으로 가지는 ref 객체를 하나 생성
- Block 컴포넌트에서 props로 전달받은 함수로 각각에서 생성한 ref 객체 등록

* refactor: 반복되는 형 변환 변수로 선언

* feat: 첫번째 블럭 삭제 방지 조건문 추가

- 부작용 방지하기 위해 추가
- 블럭 여러개인 경우에는 삭제 가능하도록 개선

* feat: 블럭 포커스 조정하는 useBlockFocus 훅 추가

* refactor: Mom blockRefs에 blockRef 등록하는 함수 네이밍 수정

* fix: remote 블럭 연산에는 setFocus 일어나지 않도록 수정

Co-authored-by: hodun <[email protected]>

* feat: 블럭 삭제 시 직전 블럭 마지막 위치로 커서 이동

Co-authored-by: hodun <[email protected]>

* refactor: 훅으로 분리되어 있던 블럭 포커스 이동 로직 Mom 컴포넌트로 이동

* feat: TextBlock props로 registerRef 전달

* fix: 블럭 포커스 잡히지 않는 버그 수정

Co-authored-by: hodun <[email protected]>

Author: se030

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

@@ -18,9 +18,17 @@ interface BlockProps {
   onKeyDown: React.KeyboardEventHandler;
   type: BlockType;
   setType: (arg: BlockType) => void;
+  registerRef: (arg: React.RefObject<HTMLElement>) => void;
 }
 
-function TextBlock({ id, index, onKeyDown, type, setType }: BlockProps) {
+function TextBlock({
+  id,
+  index,
+  onKeyDown,
+  type,
+  setType,
+  registerRef,
+}: BlockProps) {
   const { momSocket: socket } = useSocketContext();
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
@@ -74,7 +82,6 @@ function TextBlock({ id, index, onKeyDown, type, setType }: BlockProps) {
     if (!blockRef.current) return;
 
     blockRef.current.innerText = readCRDT();
-    blockRef.current.contentEditable = 'true';
   };
 
   const onInsert = (op: RemoteInsertOperation) => {
@@ -103,6 +110,8 @@ function TextBlock({ id, index, onKeyDown, type, setType }: BlockProps) {
 
   // crdt의 초기화와 소켓을 통해 전달받는 리모트 연산 처리
   useEffect(() => {
+    registerRef(blockRef);
+
     socket.emit(SOCKET_MESSAGE.BLOCK.INIT, id);
 
     ee.on(`${SOCKET_MESSAGE.BLOCK.INIT}-${id}`, onInitialize);
@@ -217,6 +226,7 @@ function TextBlock({ id, index, onKeyDown, type, setType }: BlockProps) {
           'data-id': id,
           'date-index': index,
           ...commonHandlers,
+          contentEditable: true,
           suppressContentEditableWarning: true,
         },
         readCRDT(),

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

@@ -18,9 +18,10 @@ interface BlockProps {
   id: string;
   index: number;
   onKeyDown: React.KeyboardEventHandler;
+  registerRef: (arg: React.RefObject<HTMLElement>) => void;
 }
 
-function Block({ id, index, onKeyDown }: BlockProps) {
+function Block({ id, index, onKeyDown, registerRef }: BlockProps) {
   const { momSocket: socket } = useSocketContext();
 
   const [type, setType] = useState<BlockType>();
@@ -60,6 +61,7 @@ function Block({ id, index, onKeyDown }: BlockProps) {
           onKeyDown={onKeyDown}
           type={type}
           setType={setBlockType}
+          registerRef={registerRef}
         />
       );
     default:

client/src/components/Mom/index.tsx

@@ -44,17 +44,52 @@ function Mom() {
 
   const [blocks, setBlocks] = useState<string[]>([]);
 
+  const blockRefs = useRef<React.RefObject<HTMLElement>[]>([]);
+  const focusIndex = useRef<number>();
+
+  const updateBlockFocus = (idx: number | undefined) => {
+    focusIndex.current = idx;
+  };
+
+  const setBlockFocus = () => {
+    if (!blockRefs.current || focusIndex.current === undefined) return;
+
+    const idx = focusIndex.current;
+
+    const targetBlock = blockRefs.current[idx];
+
+    if (!targetBlock || !targetBlock.current) return;
+
+    targetBlock.current.focus();
+  };
+
+  const setCaretToEnd = () => {
+    const selection = getSelection();
+
+    if (!selection) return;
+
+    const range = selection.getRangeAt(0);
+
+    if (!range) return;
+
+    range.selectNodeContents(range.startContainer);
+    range.collapse();
+  };
+
   const onKeyDown: React.KeyboardEventHandler = (e) => {
     const target = e.target as HTMLParagraphElement;
 
-    const { index } = target.dataset;
+    const { index: indexString } = target.dataset;
+    const index = Number(indexString);
 
     if (e.key === 'Enter') {
       e.preventDefault();
 
       const blockId = uuid();
 
-      const remoteInsertion = localInsertCRDT(Number(index), blockId);
+      const remoteInsertion = localInsertCRDT(index, blockId);
+
+      updateBlockFocus(index + 1);
 
       socket.emit(SOCKET_MESSAGE.MOM.INSERT_BLOCK, blockId, remoteInsertion);
       return;
@@ -67,7 +102,15 @@ function Mom() {
 
       e.preventDefault();
 
-      const remoteDeletion = localDeleteCRDT(Number(index));
+      if (index === 0) return;
+
+      const remoteDeletion = localDeleteCRDT(index);
+
+      updateBlockFocus(index - 1);
+
+      setBlocks(spreadCRDT());
+      setBlockFocus();
+      setCaretToEnd();
 
       socket.emit(SOCKET_MESSAGE.MOM.DELETE_BLOCK, id, remoteDeletion);
     }
@@ -76,6 +119,10 @@ function Mom() {
   const initialOption: Option[] = [{ id: 1, text: '', count: 0 }];
   const [options, setOptions] = useState<Option[]>(initialOption);
 
+  useEffect(() => {
+    setBlockFocus();
+  }, [blocks]);
+
   useEffect(() => {
     if (!selectedMom) return;
 
@@ -92,15 +139,21 @@ function Mom() {
       titleRef.current.innerText = title;
     });
 
-    socket.on(SOCKET_MESSAGE.MOM.UPDATED, () => setBlocks(spreadCRDT()));
+    socket.on(SOCKET_MESSAGE.MOM.UPDATED, () => {
+      setBlocks(spreadCRDT());
+    });
 
     socket.on(SOCKET_MESSAGE.MOM.INSERT_BLOCK, (op) => {
       remoteInsertCRDT(op);
+
+      updateBlockFocus(undefined);
       setBlocks(spreadCRDT());
     });
 
     socket.on(SOCKET_MESSAGE.MOM.DELETE_BLOCK, (op) => {
       remoteDeleteCRDT(op);
+
+      updateBlockFocus(undefined);
       setBlocks(spreadCRDT());
     });
 
@@ -162,7 +215,15 @@ function Mom() {
 
         <div className={style['mom-body']}>
           {blocks.map((id, index) => (
-            <Block key={id} id={id} index={index} onKeyDown={onKeyDown} />
+            <Block
+              key={id}
+              id={id}
+              index={index}
+              onKeyDown={onKeyDown}
+              registerRef={(ref: React.RefObject<HTMLElement>) => {
+                blockRefs.current[index] = ref;
+              }}
+            />
           ))}
         </div>
         {/* TODO: 임시로 놓은 투표 블록임 */}

server/socket/mom.ts

@@ -83,7 +83,6 @@ async function momSocketServer(io: Server) {
 
       await crdtManager.onDeleteBlock(momId, blockId, op);
 
-      socket.emit(SOCKET_MESSAGE.MOM.UPDATED);
       socket.to(momId).emit(SOCKET_MESSAGE.MOM.DELETE_BLOCK, op);
     });