gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

chore(react/collections/board): drag interfering with column title editing

Browse Source
This commit is contained in:
Elian Doran 2025-09-13 09:29:29 +03:00
parent dd930261bf
commit 679abc6e3e
No known key found for this signature in database
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/client/src/widgets/collections/board/column.tsx
View File

@ -16,7 +16,8 @@ import { DragData } from "../../note_tree";
interface DragContext {
column: string;
columnIndex: number,
columnItems?: { note: FNote, branch: FBranch }[]
columnItems?: { note: FNote, branch: FBranch }[];
isEditing: boolean;
}
export default function Column({
@ -34,7 +35,7 @@ export default function Column({
const isEditing = (columnNameToEdit === column);
const editorRef = useRef<HTMLInputElement>(null);
const { handleColumnDragStart, handleColumnDragEnd, handleDragOver, handleDragLeave, handleDrop } = useDragging({
column, columnIndex, columnItems
column, columnIndex, columnItems, isEditing
});
const handleEdit = useCallback(() => {
@ -150,18 +151,20 @@ function AddNewItem({ column, api }: { column: string, api: BoardApi }) {
);
}
function useDragging({ column, columnIndex, columnItems }: DragContext) {
function useDragging({ column, columnIndex, columnItems, isEditing }: DragContext) {
const { api, parentNote, draggedColumn, setDraggedColumn, setDropTarget, setDropPosition, dropPosition } = useContext(BoardViewContext);
/** Needed to track if current column is dragged in real-time, since {@link draggedColumn} is populated one render cycle later. */
const isDraggingRef = useRef(false);
const handleColumnDragStart = useCallback((e: DragEvent) => {
if (isEditing) return;
isDraggingRef.current = true;
e.dataTransfer!.effectAllowed = 'move';
e.dataTransfer!.setData('text/plain', column);
setDraggedColumn({ column, index: columnIndex });
e.stopPropagation(); // Prevent card drag from interfering
}, [column, columnIndex, setDraggedColumn]);
}, [column, columnIndex, setDraggedColumn, isEditing]);
const handleColumnDragEnd = useCallback(() => {
isDraggingRef.current = false;
@ -169,7 +172,7 @@ function useDragging({ column, columnIndex, columnItems }: DragContext) {
}, [setDraggedColumn]);
const handleDragOver = useCallback((e: DragEvent) => {
if (draggedColumn || isDraggingRef.current) return; // Don't handle card drops when dragging columns
if (isEditing || draggedColumn || isDraggingRef.current) return; // Don't handle card drops when dragging columns
e.preventDefault();
setDropTarget(column);
@ -192,7 +195,7 @@ function useDragging({ column, columnIndex, columnItems }: DragContext) {
if (!(dropPosition?.column === column && dropPosition.index === newIndex)) {
setDropPosition({ column, index: newIndex });
}
}, [column, setDropTarget, dropPosition, setDropPosition]);
}, [column, setDropTarget, dropPosition, setDropPosition, isEditing]);
const handleDragLeave = useCallback((e: DragEvent) => {
const relatedTarget = e.relatedTarget as HTMLElement;