chore(react/collections/board): use custom type for dragging cards

This commit is contained in:
Elian Doran
2025-09-13 09:41:54 +03:00
parent 87648f340b
commit b934b2b6ca
2 changed files with 7 additions and 3 deletions

View File

@@ -7,6 +7,8 @@ import { ContextMenuEvent } from "../../../menus/context_menu";
import { openNoteContextMenu } from "./context_menu"; import { openNoteContextMenu } from "./context_menu";
import { t } from "../../../services/i18n"; import { t } from "../../../services/i18n";
export const CARD_CLIPBOARD_TYPE = "trilium/board-card";
export interface CardDragData { export interface CardDragData {
noteId: string; noteId: string;
branchId: string; branchId: string;
@@ -39,7 +41,7 @@ export default function Card({
const handleDragStart = useCallback((e: DragEvent) => { const handleDragStart = useCallback((e: DragEvent) => {
e.dataTransfer!.effectAllowed = 'move'; e.dataTransfer!.effectAllowed = 'move';
const data: CardDragData = { noteId: note.noteId, branchId: branch.branchId, fromColumn: column, index }; const data: CardDragData = { noteId: note.noteId, branchId: branch.branchId, fromColumn: column, index };
e.dataTransfer!.setData('text/plain', JSON.stringify(data)); e.dataTransfer!.setData(CARD_CLIPBOARD_TYPE, JSON.stringify(data));
}, [note.noteId, branch.branchId, column, index]); }, [note.noteId, branch.branchId, column, index]);
const handleContextMenu = useCallback((e: ContextMenuEvent) => { const handleContextMenu = useCallback((e: ContextMenuEvent) => {

View File

@@ -8,7 +8,7 @@ import { ContextMenuEvent } from "../../../menus/context_menu";
import Icon from "../../react/Icon"; import Icon from "../../react/Icon";
import { t } from "../../../services/i18n"; import { t } from "../../../services/i18n";
import BoardApi from "./api"; import BoardApi from "./api";
import Card, { CardDragData } from "./card"; import Card, { CARD_CLIPBOARD_TYPE, CardDragData } from "./card";
import { JSX } from "preact/jsx-runtime"; import { JSX } from "preact/jsx-runtime";
import froca from "../../../services/froca"; import froca from "../../../services/froca";
import { DragData } from "../../note_tree"; import { DragData } from "../../note_tree";
@@ -173,6 +173,8 @@ function useDragging({ column, columnIndex, columnItems, isEditing }: DragContex
const handleDragOver = useCallback((e: DragEvent) => { const handleDragOver = useCallback((e: DragEvent) => {
if (isEditing || 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
if (!e.dataTransfer?.types.includes(CARD_CLIPBOARD_TYPE)) return;
e.preventDefault(); e.preventDefault();
setDropTarget(column); setDropTarget(column);
@@ -213,7 +215,7 @@ function useDragging({ column, columnIndex, columnItems, isEditing }: DragContex
setDropTarget(null); setDropTarget(null);
setDropPosition(null); setDropPosition(null);
const data = e.dataTransfer?.getData("text"); const data = e.dataTransfer?.getData(CARD_CLIPBOARD_TYPE);
if (!data) return; if (!data) return;
let draggedCard: CardDragData | DragData[]; let draggedCard: CardDragData | DragData[];