From 9bf703c78aa956f6e0062ccd95318afbee5ae9ae Mon Sep 17 00:00:00 2001
From: domino8788 <domino8788@naver.com>
Date: Thu, 17 Dec 2020 20:08:21 +0900
Subject: [PATCH] =?UTF-8?q?[#134]=20fix:=20focus=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/atoms/BlockContent/BlockContent.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/atoms/BlockContent/BlockContent.tsx b/frontend/src/components/atoms/BlockContent/BlockContent.tsx
index cdf4567..b683d66 100644
--- a/frontend/src/components/atoms/BlockContent/BlockContent.tsx
+++ b/frontend/src/components/atoms/BlockContent/BlockContent.tsx
@@ -77,13 +77,14 @@ function BlockContent(blockDTO: Block) {
   const listCnt = useRef(1);
   const [Dispatcher] = useCommand();
   const [
-    { blockIndex, prevSiblings },
+    { blockIndex, prevSiblings, blockMap },
     {
       commitTransaction,
       startTransaction,
       setBlock,
       setCaretOffset,
       deleteBlock,
+      setFocus,
     },
   ] = useManager(blockDTO.id);
   const draggingBlock = useRecoilValue(draggingBlockState);
@@ -125,14 +126,15 @@ function BlockContent(blockDTO: Block) {
     startTransaction();
     setBlock(blockDTO.id, { value, type: type || blockDTO.type });
     contentEditableRef.current.blur();
-    setTimeout(() =>
-      setCaretOffset(caretOffset === -1 ? focusOffset : caretOffset),
-    );
+    setImmediate(() => {
+      setCaretOffset(caretOffset === -1 ? focusOffset : caretOffset);
+      setFocus(blockDTO);
+    });
     commitTransaction();
   };
 
   const handleValue = () => {
-    const content = contentEditableRef.current.textContent;
+    const content = contentEditableRef.current?.textContent ?? '';
 
     let nowLetterIdx = window.getSelection().focusOffset;
     if (!nowLetterIdx) nowLetterIdx += 1;
@@ -175,7 +177,7 @@ function BlockContent(blockDTO: Block) {
     }
     handleBlock(content);
   };
-  const updateValue = useRef(debounce(handleValue, 300)).current;
+  const updateValue = debounce(handleValue, 30);
 
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     const { focusNode, focusOffset } = window.getSelection();