tessl/npm-udecode--plate-dnd

React drag and drop plugin for Plate rich-text editor enabling block rearrangement and file drops

—

Pending

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-udecode--plate-dnd
Author: tessl

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.

Capabilities

DndPlugin

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

/**
 * Main drag-and-drop plugin for Plate editor
 * Provides block-level drag-and-drop functionality with configurable options
 */
export const DndPlugin: PlatePlugin<DndConfig>;

Usage Examples:

import { DndPlugin } from "@udecode/plate-dnd";
import { createPlateEditor } from "@udecode/plate/react";

// Basic usage
const editor = createPlateEditor({
  plugins: [DndPlugin]
});

// With configuration
const editor = createPlateEditor({
  plugins: [
    DndPlugin.configure({
      options: {
        enableScroller: true,
        scrollerProps: {
          height: 120,
          strengthMultiplier: 30
        },
        onDropFiles: ({ id, dragItem, editor, target }) => {
          // Handle file drops
          const files = Array.from(dragItem.files);
          files.forEach(file => {
            if (file.type.startsWith('image/')) {
              // Insert image block
              editor.tf.insertNodes({
                type: 'image',
                url: URL.createObjectURL(file),
                children: [{ text: '' }]
              }, { at: target });
            }
          });
        }
      }
    })
  ]
});

DndConfig

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

/**
 * Configuration options for the DndPlugin
 */
export type DndConfig = PluginConfig<
  'dnd',
  {
    /** ID of the currently dragging element */
    draggingId?: string | null;
    /** Current drop target information */
    dropTarget?: {
      id: string | null;
      line: DropLineDirection;
    };
    /** Whether to enable auto-scrolling during drag operations */
    enableScroller?: boolean;
    /** Whether a drag operation is currently active */
    isDragging?: boolean;
    /** Configuration props for the scroller component */
    scrollerProps?: Partial<ScrollerProps>;
    /** Callback for handling file drop operations */
    onDropFiles?: (props: {
      id: string;
      dragItem: FileDragItemNode;
      editor: PlateEditor;
      monitor: DropTargetMonitor<DragItemNode, unknown>;
      nodeRef: any;
      target?: Path;
    }) => void;
  }
>;

Drag Item Constants

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

/**
 * Default drag item type identifier for block elements
 */
export const DRAG_ITEM_BLOCK = 'block';

Plugin Event Handlers

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

onDragStart: Sets dragging state and data transfer properties
onDragEnd: Cleans up dragging state
onDrop: Handles block selection after drop operations

Configuration Examples:

// Enable auto-scrolling with custom settings
DndPlugin.configure({
  options: {
    enableScroller: true,
    scrollerProps: {
      height: 100,
      strengthMultiplier: 25,
      minStrength: 0.1
    }
  }
})

// Handle file drops for media insertion
DndPlugin.configure({
  options: {
    onDropFiles: ({ id, dragItem, editor, target }) => {
      const files = Array.from(dragItem.files);
      
      files.forEach(file => {
        if (file.type.startsWith('image/')) {
          // Insert image block
          editor.tf.insertNodes({
            type: 'image',
            url: URL.createObjectURL(file),
            children: [{ text: '' }]
          }, { at: target });
        } else if (file.type.startsWith('video/')) {
          // Insert video block
          editor.tf.insertNodes({
            type: 'video',
            url: URL.createObjectURL(file),
            children: [{ text: '' }]
          }, { at: target });
        }
      });
    }
  }
})

Types

export interface ScrollerProps {
  containerRef?: React.RefObject<any>;
  enabled?: boolean;
  height?: number;
  minStrength?: number;
  scrollAreaProps?: React.HTMLAttributes<HTMLDivElement>;
  strengthMultiplier?: number;
  zIndex?: number;
}

export interface FileDragItemNode {
  dataTransfer: DataTransfer[];
  files: FileList;
  items: DataTransferItemList;
}

export type DropLineDirection = '' | 'bottom' | 'left' | 'right' | 'top';

Install with Tessl CLI

npx tessl i tessl/npm-udecode--plate-dnd

docs

auto-scrolling.md

component-utilities.md

drag-drop-hooks.md

editor-transforms.md

index.md

plugin-configuration.md

utility-functions.md

tile.json

tessl/npm-udecode--plate-dnd