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}`
+      })}
     />
   );
 }

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
+      })}
     />
   );
 }

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"
+      })}
     />
   );
 }

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

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
 import { InlineNotice } from "../../../components/AppOverlays.jsx";
 import { applyGroupedReorderOperation, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
+import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
 
 const TASK_TYPES = ["daily", "weekly", "unique"];
 const WEEK_DAYS = [
@@ -770,13 +771,10 @@ function TaskPlannerItem({
   onSetTaskCategory,
   children
 }) {
-  const [titleDraft, setTitleDraft] = useState(task.title);
-  const [descriptionDraft, setDescriptionDraft] = useState(task.description);
   const parentTask = parentId ? getTaskById(tasks, parentId) : null;
   const inheritedCategory = parentTask ? getEffectiveTaskCategory(parentTask, tasks, parentMap) : "";
   const categoryValue = parentTask ? inheritedCategory : task.category || "";
   const categoryEditable = !parentTask;
-  const [categoryDraft, setCategoryDraft] = useState(categoryValue);
   const relations = data.relations.filter((relation) => relation.fromTaskId === task.id);
   const missingPrerequisites = relations.filter((relation) => relation.prerequisite && !tasks.find((item) => item.id === relation.toTaskId)?.checked);
   const relationTargets = tasks.filter((item) => item.id !== task.id && !relations.some((relation) => relation.toTaskId === item.id));
@@ -789,6 +787,22 @@ function TaskPlannerItem({
     reorder.isItemDropTarget(task.id) ? "is-drop-target" : "",
     reorder.getDropPlacement("item", task.id) === "after" ? "drop-after" : ""
   ].filter(Boolean).join(" ");
+  const titleEdit = useInlineEdit({
+    value: task.title,
+    transform: (draft) => String(draft || "").trim() || task.title,
+    onCommit: (title) => onUpdateTask(task.id, (current) => ({ ...current, title }))
+  });
+  const categoryEdit = useInlineEdit({
+    value: categoryValue,
+    onCommit: (category) => {
+      if (categoryEditable) onSetTaskCategory(task.id, category);
+    }
+  });
+  const descriptionEdit = useInlineEdit({
+    value: task.description,
+    onCommit: (description) => onUpdateTask(task.id, (current) => ({ ...current, description })),
+    commitOnEnter: false
+  });
 
   function updateChecked(event) {
     const checked = event.target.checked;
@@ -800,34 +814,6 @@ function TaskPlannerItem({
     }));
   }
 
-  useEffect(() => {
-    setCategoryDraft(categoryValue);
-  }, [categoryValue, task.id]);
-
-  useEffect(() => {
-    setTitleDraft(task.title);
-  }, [task.id, task.title]);
-
-  useEffect(() => {
-    setDescriptionDraft(task.description);
-  }, [task.description, task.id]);
-
-  function commitTitleDraft() {
-    const title = titleDraft.trim() || task.title;
-    if (title !== task.title) onUpdateTask(task.id, (current) => ({ ...current, title }));
-    else if (titleDraft !== title) setTitleDraft(title);
-  }
-
-  function commitDescriptionDraft() {
-    const description = descriptionDraft.trim();
-    if (description !== task.description) onUpdateTask(task.id, (current) => ({ ...current, description }));
-    else if (descriptionDraft !== description) setDescriptionDraft(description);
-  }
-
-  function commitCategoryDraft() {
-    if (categoryEditable && categoryDraft.trim() !== (task.category || "")) onSetTaskCategory(task.id, categoryDraft);
-  }
-
   return (
     <li className={className} {...reorder.getItemProps({ itemId: task.id, groupId: getTaskCategoryDataset(task, tasks, parentMap), parentId })}>
       <div className="task-planner-line">
@@ -847,14 +833,10 @@ function TaskPlannerItem({
           aria-label={`${task.checked ? textContent.uncheckTitle || "Marquer non effectué" : textContent.checkTitle || "Marquer effectué"} ${task.title}`}
         />
         <input
-          className="tool-split-entry-label task-planner-title-input"
-          value={titleDraft}
-          onChange={(event) => setTitleDraft(event.target.value)}
-          onBlur={commitTitleDraft}
-          onKeyDown={(event) => {
-            if (event.key === "Enter") event.currentTarget.blur();
-          }}
-          aria-label={textContent.titleLabel || "Titre"}
+          {...titleEdit.getInputProps({
+            className: "tool-split-entry-label task-planner-title-input",
+            "aria-label": textContent.titleLabel || "Titre"
+          })}
         />
         <select
           className="task-planner-type-select"
@@ -906,26 +888,21 @@ function TaskPlannerItem({
           <label className={`task-planner-category-field ${categoryEditable ? "" : "is-disabled"}`}>
             <span>{textContent.categoryLabel || "Catégorie"}</span>
             <input
-              value={categoryDraft}
-              onChange={(event) => setCategoryDraft(event.target.value)}
-              onBlur={commitCategoryDraft}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") event.currentTarget.blur();
-              }}
-              disabled={!categoryEditable}
-              placeholder={textContent.categoryPlaceholder || "Nom de catégorie"}
-              aria-label={`${textContent.categoryLabel || "Catégorie"} ${task.title}`}
+              {...categoryEdit.getInputProps({
+                disabled: !categoryEditable,
+                placeholder: textContent.categoryPlaceholder || "Nom de catégorie",
+                "aria-label": `${textContent.categoryLabel || "Catégorie"} ${task.title}`
+              })}
             />
           </label>
           <label className="task-planner-description-field">
             <span>{textContent.descriptionLabel || "Description"}</span>
             <textarea
-              className="task-planner-description"
-              value={descriptionDraft}
-              onChange={(event) => setDescriptionDraft(event.target.value)}
-              onBlur={commitDescriptionDraft}
-              placeholder={textContent.descriptionPlaceholder || "Description"}
-              aria-label={`${textContent.descriptionLabel || "Description"} ${task.title}`}
+              {...descriptionEdit.getInputProps({
+                className: "task-planner-description",
+                placeholder: textContent.descriptionPlaceholder || "Description",
+                "aria-label": `${textContent.descriptionLabel || "Description"} ${task.title}`
+              })}
             />
           </label>
         </div>

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

@@ -2,6 +2,7 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "../../../components/Icon.jsx";
 import { Tabs } from "../../../components/Tabs.jsx";
+import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
 import { moveItem, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
 import {
   formatDuration,
@@ -581,36 +582,23 @@ function CountdownList({ countdowns, nowMs, textContent, reorder, reorderEnabled
 }
 
 function EditableTimerLabel({ value, placeholder, ariaLabel, children, onRename, onDone }) {
-  const [label, setLabel] = useState(value);
-  const inputRef = useRef(null);
-
-  useLayoutEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  function saveLabel() {
-    onRename(label);
-    onDone();
-  }
+  const inlineEdit = useInlineEdit({
+    value,
+    onCommit: onRename,
+    onDone,
+    autoFocus: true,
+    commitUnchanged: true
+  });
 
   return (
     <>
       <span className="tool-split-entry-value timer-entry-value is-readonly">{children}</span>
       <input
-        ref={inputRef}
-        className="tool-split-entry-label timer-lap-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(value);
-            onDone();
-          }
-        }}
-        placeholder={placeholder}
-        aria-label={ariaLabel}
+        {...inlineEdit.getInputProps({
+          className: "tool-split-entry-label timer-lap-label",
+          placeholder,
+          "aria-label": ariaLabel
+        })}
       />
     </>
   );

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>