diff --git a/apps/web/src/routes/_app/notes.tsx b/apps/web/src/routes/_app/notes.tsx index 6ca0239..8b83731 100644 --- a/apps/web/src/routes/_app/notes.tsx +++ b/apps/web/src/routes/_app/notes.tsx @@ -49,7 +49,7 @@ const NoteEditor = memo(function NoteEditor({ initialContent, onSave, placeholde ); }); -// Separate component for title input - completely uncontrolled to prevent focus stealing +// Completely uncontrolled title input - uses ref to avoid any re-render const NoteTitleInput = memo(function NoteTitleInput({ noteId, initialTitle }: { noteId: string; initialTitle: string }) { const inputRef = useRef(null); const queryClient = useQueryClient(); @@ -58,16 +58,14 @@ const NoteTitleInput = memo(function NoteTitleInput({ noteId, initialTitle }: { if (inputRef.current) { inputRef.current.value = initialTitle; } - }, [noteId]); + }, [initialTitle, noteId]); const handleBlur = () => { - if (inputRef.current && noteId) { - const newTitle = inputRef.current.value; - if (newTitle !== initialTitle) { - api.patch("/notes/" + noteId, { title: newTitle }).then(() => { - queryClient.invalidateQueries({ queryKey: ["notes"] }); - }); - } + const newTitle = inputRef.current?.value || ""; + if (newTitle !== initialTitle) { + api.patch("/notes/" + noteId, { title: newTitle }).then(() => { + queryClient.invalidateQueries({ queryKey: ["notes"] }); + }); } }; @@ -85,6 +83,9 @@ function NotesPage() { const queryClient = useQueryClient(); const [search, setSearch] = useState(""); const [selectedNote, setSelectedNote] = useState(null); + const [editorContent, setEditorContent] = useState(""); + const saveTimerRef = useRef | null>(null); + const selectedNoteRef = useRef(null); const [showBacklinks, setShowBacklinks] = useState(false); const [showVersions, setShowVersions] = useState(false); @@ -102,6 +103,8 @@ function NotesPage() { onSuccess: (note) => { queryClient.invalidateQueries({ queryKey: ["notes"] }); setSelectedNote(note); + selectedNoteRef.current = note; + setEditorContent(""); }, }); @@ -122,13 +125,27 @@ function NotesPage() { try { const detail = await api.get("/notes/" + note.id); setSelectedNote(detail); + selectedNoteRef.current = detail; + setEditorContent(detail.content || ""); } catch { setSelectedNote(note); + selectedNoteRef.current = note; + setEditorContent(note.content || ""); } setShowBacklinks(false); setShowVersions(false); }; + const handleContentChange = useCallback((html: string) => { + if (saveTimerRef.current) clearTimeout(saveTimerRef.current); + saveTimerRef.current = setTimeout(() => { + const note = selectedNoteRef.current; + if (note) { + updateMutation.mutate({ id: note.id, data: { content: html } }); + } + }, 500); + }, [updateMutation]); + return (
{/* Left pane - note list */} @@ -179,7 +196,7 @@ function NotesPage() { {selectedNote ? ( <>
- +
- { if (selectedNote) { updateMutation.mutate({ id: selectedNote.id, data: { content: html } }); } }} /> +
{/* Backlinks section */} {showBacklinks && selectedNote.backlinks && selectedNote.backlinks.length > 0 && (