From ece7232f0dfe256fb875ff1b0502d550482cee7f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 12 Nov 2025 09:37:00 +0000
Subject: [PATCH] =?UTF-8?q?Fix=20CRITIQUE:=20=C3=89criture=20fluide=20dans?=
 =?UTF-8?q?=20les=20notes=20r=C3=A9par=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RichTextEditor.tsx | 6 ++++--
 src/pages/Index.tsx               | 9 ++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/RichTextEditor.tsx b/src/components/RichTextEditor.tsx
index a97e678..0510ba8 100644
--- a/src/components/RichTextEditor.tsx
+++ b/src/components/RichTextEditor.tsx
@@ -29,11 +29,13 @@ export function RichTextEditor({ content, onChange, placeholder }: RichTextEdito
   const editorRef = useRef<HTMLDivElement>(null);
   const [selectedFormat, setSelectedFormat] = useState<string[]>([]);
 
+  // Set initial content only once on mount
   useEffect(() => {
-    if (editorRef.current && editorRef.current.innerHTML !== content) {
+    if (editorRef.current) {
       editorRef.current.innerHTML = content;
     }
-  }, [content]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Empty deps - only run once on mount
 
   const execCommand = (command: string, value?: string) => {
     document.execCommand(command, false, value);
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index c83967f..17af886 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -217,9 +217,9 @@ const Index = () => {
   const handleContentChange = useCallback((content: string) => {
     if (!openNote) return;
 
-    // Update local state immediately for responsiveness
+    // Don't update local state to avoid re-render during typing
+    // Just save to API in background
     const updatedNote = { ...openNote, content };
-    setOpenNote(updatedNote);
 
     // Debounce the API call
     if (saveTimerRef.current) {
@@ -229,11 +229,13 @@ const Index = () => {
     saveTimerRef.current = setTimeout(async () => {
       try {
         await NotesService.updateNote(updatedNote);
+        // Update notes list silently after save
+        setNotes(prev => prev.map(note => note.id === updatedNote.id ? updatedNote : note));
       } catch (error) {
         showError("Erreur lors de la sauvegarde automatique");
       }
     }, 1000); // Save after 1 second of inactivity
-  }, [openNote]);
+  }, [openNote, setNotes]);
 
   // Clean up timer on unmount
   useEffect(() => {
@@ -625,6 +627,7 @@ const Index = () => {
 
                   <TabsContent value="content" className="mt-4">
                     <RichTextEditor
+                      key={openNote.id}
                       content={openNote.content || ""}
                       onChange={handleContentChange}
                     />