0
# Plugin Configuration
1

2
The DndPlugin is the core plugin that integrates drag-and-drop functionality into Plate editors. It provides configurable options for customizing drag-and-drop behavior, file handling, and auto-scrolling features.
3

4
## Capabilities
5

6
### DndPlugin
7

8
The main plugin instance that integrates with Plate's plugin system to provide drag-and-drop functionality.
9

10
```typescript { .api }
11
/**
12
 * Main drag-and-drop plugin for Plate editor
13
 * Provides block-level drag-and-drop functionality with configurable options
14
 */
15
export const DndPlugin: PlatePlugin<DndConfig>;
16
```
17

18
**Usage Examples:**
19

20
```typescript
21
import { DndPlugin } from "@udecode/plate-dnd";
22
import { createPlateEditor } from "@udecode/plate/react";
23

24
// Basic usage
25
const editor = createPlateEditor({
26
  plugins: [DndPlugin]
27
});
28

29
// With configuration
30
const editor = createPlateEditor({
31
  plugins: [
32
    DndPlugin.configure({
33
      options: {
34
        enableScroller: true,
35
        scrollerProps: {
36
          height: 120,
37
          strengthMultiplier: 30
38
        },
39
        onDropFiles: ({ id, dragItem, editor, target }) => {
40
          // Handle file drops
41
          const files = Array.from(dragItem.files);
42
          files.forEach(file => {
43
            if (file.type.startsWith('image/')) {
44
              // Insert image block
45
              editor.tf.insertNodes({
46
                type: 'image',
47
                url: URL.createObjectURL(file),
48
                children: [{ text: '' }]
49
              }, { at: target });
50
            }
51
          });
52
        }
53
      }
54
    })
55
  ]
56
});
57
```
58

59
### DndConfig
60

61
Configuration interface for the DndPlugin with options for customizing drag-and-drop behavior.
62

63
```typescript { .api }
64
/**
65
 * Configuration options for the DndPlugin
66
 */
67
export type DndConfig = PluginConfig<
68
  'dnd',
69
  {
70
    /** ID of the currently dragging element */
71
    draggingId?: string | null;
72
    /** Current drop target information */
73
    dropTarget?: {
74
      id: string | null;
75
      line: DropLineDirection;
76
    };
77
    /** Whether to enable auto-scrolling during drag operations */
78
    enableScroller?: boolean;
79
    /** Whether a drag operation is currently active */
80
    isDragging?: boolean;
81
    /** Configuration props for the scroller component */
82
    scrollerProps?: Partial<ScrollerProps>;
83
    /** Callback for handling file drop operations */
84
    onDropFiles?: (props: {
85
      id: string;
86
      dragItem: FileDragItemNode;
87
      editor: PlateEditor;
88
      monitor: DropTargetMonitor<DragItemNode, unknown>;
89
      nodeRef: any;
90
      target?: Path;
91
    }) => void;
92
  }
93
>;
94
```
95

96
### Drag Item Constants
97

98
Constant identifiers used for drag item types in the drag-and-drop system.
99

100
```typescript { .api }
101
/**
102
 * Default drag item type identifier for block elements
103
 */
104
export const DRAG_ITEM_BLOCK = 'block';
105
```
106

107
### Plugin Event Handlers
108

109
The DndPlugin includes built-in event handlers for drag operations:
110

111
- **onDragStart**: Sets dragging state and data transfer properties
112
- **onDragEnd**: Cleans up dragging state
113
- **onDrop**: Handles block selection after drop operations
114

115
**Configuration Examples:**
116

117
```typescript
118
// Enable auto-scrolling with custom settings
119
DndPlugin.configure({
120
  options: {
121
    enableScroller: true,
122
    scrollerProps: {
123
      height: 100,
124
      strengthMultiplier: 25,
125
      minStrength: 0.1
126
    }
127
  }
128
})
129

130
// Handle file drops for media insertion
131
DndPlugin.configure({
132
  options: {
133
    onDropFiles: ({ id, dragItem, editor, target }) => {
134
      const files = Array.from(dragItem.files);
135
      
136
      files.forEach(file => {
137
        if (file.type.startsWith('image/')) {
138
          // Insert image block
139
          editor.tf.insertNodes({
140
            type: 'image',
141
            url: URL.createObjectURL(file),
142
            children: [{ text: '' }]
143
          }, { at: target });
144
        } else if (file.type.startsWith('video/')) {
145
          // Insert video block
146
          editor.tf.insertNodes({
147
            type: 'video',
148
            url: URL.createObjectURL(file),
149
            children: [{ text: '' }]
150
          }, { at: target });
151
        }
152
      });
153
    }
154
  }
155
})
156
```
157

158
## Types
159

160
```typescript { .api }
161
export interface ScrollerProps {
162
  containerRef?: React.RefObject<any>;
163
  enabled?: boolean;
164
  height?: number;
165
  minStrength?: number;
166
  scrollAreaProps?: React.HTMLAttributes<HTMLDivElement>;
167
  strengthMultiplier?: number;
168
  zIndex?: number;
169
}
170

171
export interface FileDragItemNode {
172
  dataTransfer: DataTransfer[];
173
  files: FileList;
174
  items: DataTransferItemList;
175
}
176

177
export type DropLineDirection = '' | 'bottom' | 'left' | 'right' | 'top';
178
```