gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 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 { interface DragContext {
column: string; column: string;
columnIndex: number, columnIndex: number,
columnItems?: { note: FNote, branch: FBranch }[] columnItems?: { note: FNote, branch: FBranch }[];
isEditing: boolean;
} }
export default function Column({ export default function Column({
@ -34,7 +35,7 @@ export default function Column({
const isEditing = (columnNameToEdit === column); const isEditing = (columnNameToEdit === column);
const editorRef = useRef<HTMLInputElement>(null); const editorRef = useRef<HTMLInputElement>(null);
const { handleColumnDragStart, handleColumnDragEnd, handleDragOver, handleDragLeave, handleDrop } = useDragging({ const { handleColumnDragStart, handleColumnDragEnd, handleDragOver, handleDragLeave, handleDrop } = useDragging({
column, columnIndex, columnItems column, columnIndex, columnItems, isEditing
}); });
const handleEdit = useCallback(() => { 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); 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. */ /** 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 isDraggingRef = useRef(false);
const handleColumnDragStart = useCallback((e: DragEvent) => { const handleColumnDragStart = useCallback((e: DragEvent) => {
if (isEditing) return;
isDraggingRef.current = true; isDraggingRef.current = true;
e.dataTransfer!.effectAllowed = 'move'; e.dataTransfer!.effectAllowed = 'move';
e.dataTransfer!.setData('text/plain', column); e.dataTransfer!.setData('text/plain', column);
setDraggedColumn({ column, index: columnIndex }); setDraggedColumn({ column, index: columnIndex });
e.stopPropagation(); // Prevent card drag from interfering e.stopPropagation(); // Prevent card drag from interfering
}, [column, columnIndex, setDraggedColumn]); }, [column, columnIndex, setDraggedColumn, isEditing]);
const handleColumnDragEnd = useCallback(() => { const handleColumnDragEnd = useCallback(() => {
isDraggingRef.current = false; isDraggingRef.current = false;
@ -169,7 +172,7 @@ function useDragging({ column, columnIndex, columnItems }: DragContext) {
}, [setDraggedColumn]); }, [setDraggedColumn]);
const handleDragOver = useCallback((e: DragEvent) => { 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(); e.preventDefault();
setDropTarget(column); setDropTarget(column);
@ -192,7 +195,7 @@ function useDragging({ column, columnIndex, columnItems }: DragContext) {
if (!(dropPosition?.column === column && dropPosition.index === newIndex)) { if (!(dropPosition?.column === column && dropPosition.index === newIndex)) {
setDropPosition({ column, index: newIndex }); setDropPosition({ column, index: newIndex });
} }
}, [column, setDropTarget, dropPosition, setDropPosition]); }, [column, setDropTarget, dropPosition, setDropPosition, isEditing]);
const handleDragLeave = useCallback((e: DragEvent) => { const handleDragLeave = useCallback((e: DragEvent) => {
const relatedTarget = e.relatedTarget as HTMLElement; const relatedTarget = e.relatedTarget as HTMLElement;