Refactor inline editing into shared hook

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

@@ -1,6 +1,7 @@
 // Rôle : fournit l'outil Combos avec palettes d'inputs et rendu visuel par périphérique.
 import { useEffect, useMemo, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
+import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
 import {
   applyGroupedReorderOperation,
   getGroupedEntries,
@@ -240,32 +241,19 @@ function ComboSequence({ inputs, device, emptyLabel, activeStepIndex = -1, onSel
 }
 
 function InlineTextInput({ value, onCommit, className, ariaLabel, placeholder = "" }) {
-  const [draft, setDraft] = useState(value);
-
-  useEffect(() => {
-    setDraft(value);
-  }, [value]);
-
-  function commit() {
-    const cleanDraft = draft.trim();
-    if (cleanDraft !== value) onCommit(cleanDraft);
-  }
+  const inlineEdit = useInlineEdit({
+    value,
+    onCommit,
+    blurOnEscape: true
+  });
 
   return (
     <input
-      className={className}
-      value={draft}
-      placeholder={placeholder}
-      onChange={(event) => setDraft(event.target.value)}
-      onBlur={commit}
-      onKeyDown={(event) => {
-        if (event.key === "Enter") event.currentTarget.blur();
-        if (event.key === "Escape") {
-          setDraft(value);
-          event.currentTarget.blur();
-        }
-      }}
-      aria-label={ariaLabel}
+      {...inlineEdit.getInputProps({
+        className,
+        placeholder,
+        "aria-label": ariaLabel
+      })}
     />
   );
 }