Refactor inline editing into shared hook

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

@@ -1,6 +1,7 @@
 // Rôle : fournit l'outil calculateur avec résultats enregistrés en arborescence.
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
+import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
 import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
 
 function calculateExpression(expression) {
@@ -243,34 +244,20 @@ function CalculatorEntries({ entries, parentId, getScopedParentId, activeParentI
 }
 
 function EditableCalculatorLabel({ entry, textContent, onRename, onDone }) {
-  const [label, setLabel] = useState(entry.label);
-  const inputRef = useRef(null);
-
-  useLayoutEffect(() => {
-    inputRef.current?.focus();
-  }, [entry.id]);
-
-  function saveLabel() {
-    const cleanLabel = label.trim();
-    if (cleanLabel !== entry.label) onRename(entry.id, cleanLabel);
-    onDone();
-  }
+  const inlineEdit = useInlineEdit({
+    value: entry.label,
+    onCommit: (label) => onRename(entry.id, label),
+    onDone,
+    autoFocus: true,
+    focusKey: entry.id
+  });
 
   return (
     <input
-      ref={inputRef}
-      className="tool-split-entry-label"
-      value={label}
-      onChange={(event) => setLabel(event.target.value)}
-      onBlur={saveLabel}
-      onKeyDown={(event) => {
-        if (event.key === "Enter") event.currentTarget.blur();
-        if (event.key === "Escape") {
-          setLabel(entry.label);
-          onDone();
-        }
-      }}
-      aria-label={`${textContent.renameTitle || "Renommer"} ${entry.label}`}
+      {...inlineEdit.getInputProps({
+        className: "tool-split-entry-label",
+        "aria-label": `${textContent.renameTitle || "Renommer"} ${entry.label}`
+      })}
     />
   );
 }