Refactor inline editing into shared hook

website/src/features/toolboxes/ToolboxPages.jsx

@@ -5,6 +5,7 @@ import { ImportButton } from "../../components/ImportButton.jsx";
 import { StorageQuota } from "../../components/StorageQuota.jsx";
 import { ToastPositionSwitch } from "../../components/ToastPositionSwitch.jsx";
 import { useGroupedReorder } from "../../hooks/useGroupedReorder.js";
+import { useInlineEdit } from "../../hooks/useInlineEdit.js";
 import { compressImage } from "../../utils/imageCompression.js";
 import { getSetting as dbGetSetting, setSetting as dbSetSetting } from "../../utils/indexedDbStorage.js";
 import { getGameCardCover, ToolboxCard, ToolboxGameIcon, ToolboxIconPicker } from "./ToolboxCard.jsx";
@@ -324,31 +325,18 @@ export function ToolboxDrawer({ gameId, game, siteContent, toolboxes, links, act
 }
 
 function EditableTitle({ value, fallback, onSave, className = "module-title" }) {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (ref.current && document.activeElement !== ref.current) ref.current.textContent = value;
-  }, [value]);
+  const inlineEdit = useInlineEdit({
+    value,
+    onCommit: (title) => onSave(title || fallback),
+    blurOnEscape: true
+  });
+
   return (
     <h1
-      ref={ref}
-      className={className}
-      contentEditable
-      suppressContentEditableWarning
-      spellCheck="false"
-      title="Cliquer pour renommer"
-      onFocus={(event) => { event.currentTarget.dataset.previousTitle = event.currentTarget.textContent.trim(); }}
-      onBlur={(event) => onSave(event.currentTarget.textContent.trim() || fallback)}
-      onKeyDown={(event) => {
-        if (event.key === "Enter") {
-          event.preventDefault();
-          event.currentTarget.blur();
-        }
-        if (event.key === "Escape") {
-          event.preventDefault();
-          event.currentTarget.textContent = event.currentTarget.dataset.previousTitle || value;
-          event.currentTarget.blur();
-        }
-      }}
+      {...inlineEdit.getContentEditableProps({
+        className,
+        title: "Cliquer pour renommer"
+      })}
     >{value}</h1>
   );
 }