From 0464c931425c9c8e842c9ce8503487920ca3e598 Mon Sep 17 00:00:00 2001
From: domino8788 <domino8788@naver.com>
Date: Sun, 20 Dec 2020 23:06:30 +0900
Subject: [PATCH] =?UTF-8?q?[#153]=20feat:=20title=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EA=B0=B1=EC=8B=A0=20=EC=A3=BC=EA=B8=B0=EB=A5=BC=20?=
 =?UTF-8?q?onBlur=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/molecules/Title/Title.tsx  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/molecules/Title/Title.tsx b/frontend/src/components/molecules/Title/Title.tsx
index edb7245..9382250 100644
--- a/frontend/src/components/molecules/Title/Title.tsx
+++ b/frontend/src/components/molecules/Title/Title.tsx
@@ -50,26 +50,26 @@ const titleCss = () => css`
 function Title(): JSX.Element {
   const [selectedPage, setSelectedPage] = useRecoilState(pageState);
   const setPages = useSetRecoilState(pagesState);
-  const [, { setCaretOffset }] = useManager(selectedPage.rootId);
-  const updateSelectedPage = useRef(
-    debounce(async (page: Page) => {
-      const { page: updatedPage } = await updatePage(page);
-      const updatedPages = await refreshPages();
-      const { focusOffset } = window.getSelection();
-      setTimeout(() => setCaretOffset(focusOffset));
-      titleRef.current.blur();
+  const updateSelectedPage = async (page: Page) => {
+    const { page: updatedPage } = await updatePage(page);
+    const updatedPages = await refreshPages();
+
+    setSelectedPage(updatedPage);
+    setPages(updatedPages);
+  };
 
-      setSelectedPage(updatedPage);
-      setPages(updatedPages);
-    }, 300),
-  ).current;
   const titleRef = useRef(null);
 
-  const handleChange = async (event: ChangeEvent<HTMLDivElement>) =>
+  const handleChange = async () => {
+    const sel = window.getSelection();
+    const text = (sel.focusNode as any).length
+      ? sel.focusNode.textContent
+      : sel.focusNode.parentElement.innerText;
     updateSelectedPage({
       ...selectedPage,
-      title: event.currentTarget.textContent,
+      title: text,
     });
+  };
 
   return (
     <div css={wrapperCss()}>
@@ -79,7 +79,7 @@ function Title(): JSX.Element {
         contentEditable
         suppressContentEditableWarning
         css={titleCss()}
-        onInput={handleChange}
+        onBlur={handleChange}
       >
         {selectedPage.title}
       </div>