Refactor inline editing into shared hook

website/src/features/toolboxes/modules/index.jsx

@@ -4,6 +4,7 @@ import { createPortal } from "react-dom";
 import { CompactDropdown } from "../../../components/CompactDropdown.jsx";
 import { Icon } from "../../../components/Icon.jsx";
 import { useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
+import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
 import { lockBodyScroll } from "../../../utils/bodyScrollLock.js";
 import { CalculatorModule } from "./CalculatorModule.jsx";
 import { ChecklistModule } from "./ChecklistModule.jsx";
@@ -370,26 +371,18 @@ function ModuleShell({ toolbox, module, context, reorder, onRename, onUpdateModu
 }
 
 function EditableModuleTitle({ value, fallback, onSave }) {
+  const inlineEdit = useInlineEdit({
+    value,
+    onCommit: (title) => onSave(title || fallback),
+    blurOnEscape: true
+  });
+
   return (
     <h2
-      className="module-title"
-      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: "module-title",
+        title: "Cliquer pour renommer"
+      })}
     >
       {value}
     </h2>