Refactor inline editing into shared hook

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