From 2a88f50d5e0c1fad39144995563c5a3173a85283 Mon Sep 17 00:00:00 2001
From: Chinonso-Peter <chinonsopeter456@gmail.com>
Date: Mon, 27 Jul 2026 18:02:32 +0100
Subject: [PATCH] Hoist ToolbarButton to module scope in RichContentEditor

ToolbarButton was declared inside the component body, giving it a new
component identity on every re-render and causing all toolbar buttons to
remount on each keystroke. Hoist it to module scope with an extracted
ToolbarButtonProps interface to give it a stable identity.
---
 src/components/editor/RichContentEditor.tsx | 58 +++++++++++----------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/components/editor/RichContentEditor.tsx b/src/components/editor/RichContentEditor.tsx
index 491297fd..b2cd9e19 100644
--- a/src/components/editor/RichContentEditor.tsx
+++ b/src/components/editor/RichContentEditor.tsx
@@ -23,6 +23,36 @@ interface RichContentEditorProps {
   onUpdate?: (content: string) => void;
 }
 
+interface ToolbarButtonProps {
+  onClick: () => void;
+  isActive?: boolean;
+  disabled?: boolean;
+  children: React.ReactNode;
+  title?: string;
+}
+
+const ToolbarButton = ({
+  onClick,
+  isActive = false,
+  disabled = false,
+  children,
+  title,
+}: ToolbarButtonProps) => (
+  <button
+    type="button"
+    onClick={onClick}
+    disabled={disabled}
+    aria-pressed={isActive}
+    aria-label={title}
+    className={`p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
+      isActive ? 'bg-gray-200 dark:bg-gray-600 text-blue-600' : 'text-gray-600 dark:text-gray-300'
+    } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+    title={title}
+  >
+    {children}
+  </button>
+);
+
 export const RichContentEditor: React.FC<RichContentEditorProps> = ({
   initialContent,
   onUpdate,
@@ -43,34 +73,6 @@ export const RichContentEditor: React.FC<RichContentEditorProps> = ({
     return null;
   }
 
-  const ToolbarButton = ({
-    onClick,
-    isActive = false,
-    disabled = false,
-    children,
-    title,
-  }: {
-    onClick: () => void;
-    isActive?: boolean;
-    disabled?: boolean;
-    children: React.ReactNode;
-    title?: string;
-  }) => (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      aria-pressed={isActive}
-      aria-label={title}
-      className={`p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
-        isActive ? 'bg-gray-200 dark:bg-gray-600 text-blue-600' : 'text-gray-600 dark:text-gray-300'
-      } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
-      title={title}
-    >
-      {children}
-    </button>
-  );
-
   return (
     <section
       aria-labelledby={editorTitleId}