Refactor inline editing into shared hook

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

@@ -1,6 +1,7 @@
 // Rôle : fournit l'outil tableau avec cellules libres et formules simples.
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
+import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
 import { cellAddress, columnIndexToName, evaluateTable, parseCellAddress } from "./tableFormulaEngine.js";
 
 const DEFAULT_ROWS = 10;
@@ -597,46 +598,23 @@ function TableRow({ rowIndex, columns, cells, evaluatedCells, editingCell, highl
 }
 
 function HeaderLabelInput({ className, value, fallback, onSave, ...props }) {
-  const [draft, setDraft] = useState(value);
-  const [focused, setFocused] = useState(false);
-  const skipSaveRef = useRef(false);
-
-  useEffect(() => {
-    if (!focused) setDraft(value);
-  }, [focused, value]);
-
-  function saveDraft() {
-    setFocused(false);
-    if (skipSaveRef.current) {
-      skipSaveRef.current = false;
-      setDraft(value);
-      return;
-    }
-    onSave(draft);
-  }
+  const inlineEdit = useInlineEdit({
+    value,
+    onCommit: onSave,
+    transform: (draft) => String(draft || ""),
+    blurOnEscape: true
+  });
 
   return (
     <input
-      {...props}
-      className={className}
-      value={focused ? draft : value}
-      onFocus={(event) => {
-        setFocused(true);
-        setDraft(value);
-        if (value === fallback) window.requestAnimationFrame(() => event.target.select());
-      }}
-      onChange={(event) => setDraft(event.target.value)}
-      onBlur={saveDraft}
-      onKeyDown={(event) => {
-        if (event.key === "Enter") event.currentTarget.blur();
-        if (event.key === "Escape") {
-          skipSaveRef.current = true;
-          setDraft(value);
-          setFocused(false);
-          event.currentTarget.blur();
-        }
-      }}
-      spellCheck="false"
+      {...inlineEdit.getInputProps({
+        ...props,
+        className,
+        onFocus: (event) => {
+          if (value === fallback) window.requestAnimationFrame(() => event.target.select());
+        },
+        spellCheck: "false"
+      })}
     />
   );
 }