chore(react/collections/table): slightly improve editing experience

This commit is contained in:
Elian Doran 2025-09-11 20:32:21 +03:00
parent 228a1ad0da
commit fee822c689
No known key found for this signature in database

View File

@ -375,6 +375,7 @@ function Card({
const { branchIdToEdit } = useContext(BoardViewContext);
const isEditing = branch.branchId === branchIdToEdit;
const colorClass = note.getColorClass() || '';
const editorRef = useRef<HTMLInputElement>(null);
const handleDragStart = useCallback((e: DragEvent) => {
e.dataTransfer!.effectAllowed = 'move';
@ -390,6 +391,10 @@ function Card({
openNoteContextMenu(api, e, note.noteId, branch.branchId, column);
}, [ api, note, branch, column ]);
useEffect(() => {
editorRef.current?.focus();
}, []);
return (
<div
className={`board-note ${colorClass} ${isDragging ? 'dragging' : ''} ${isEditing ? "editing" : ""}`}
@ -403,10 +408,14 @@ function Card({
<>{note.title}</>
) : (
<FormTextBox
inputRef={editorRef}
value={note.title}
onKeyDown={(e) => {
if (e.key === "Enter") {
api.renameCard(note.noteId, e.currentTarget.value);
const newTitle = e.currentTarget.value;
if (newTitle !== note.title) {
api.renameCard(note.noteId, newTitle);
}
api.dismissEditingTitle();
}
@ -414,6 +423,12 @@ function Card({
api.dismissEditingTitle();
}
}}
onBlur={(newTitle) => {
if (newTitle !== note.title) {
api.renameCard(note.noteId, newTitle);
}
api.dismissEditingTitle();
}}
/>
)}
</div>