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) => + 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 (
@@ -79,7 +79,7 @@ function Title(): JSX.Element { contentEditable suppressContentEditableWarning css={titleCss()} - onInput={handleChange} + onBlur={handleChange} > {selectedPage.title}