NodeMover Module

Auto-imported: YES (Always loaded — see table below)

The NodeMoverModule adds a floating toolbar and drag handle to every block element in the editor, enabling users to reorder, duplicate, and delete blocks with a single click.

This module is automatically enabled in every Quill editor instance. To disable it, you must explicitly set active => false in your configuration.

Features

• Drag & Drop: Grab the 6-dot handle to drag any block to a new position.
• Move Up/Down: Click the arrow buttons on the floating toolbar to reorder blocks.
• Duplicate: Create a copy of any block or selection.
• Delete: Remove blocks with a single click.
• Multi-block Selection: Select multiple blocks at once (hold Shift + click or drag-select) to move, duplicate, or delete them together.
• Visual Overlay: A highlighted border appears around the selected block(s).

Configuration

use Ehyiah\QuillJsBundle\DTO\Modules\NodeMoverModule;
use Ehyiah\QuillJsBundle\Form\QuillType;

$builder->add('content', QuillType::class, [
    'modules' => [
        new NodeMoverModule([
            'active' => true,
            'borderColor' => '#007bff',
            'dropIndicatorColor' => '#ff0000',
            'duplicate' => true,
        ]),
    ],
]);

Minimal usage (auto-loaded with defaults):

new NodeMoverModule(),

Configuration Options

Option	Type	Default	Description
active	bool	true	If true, the module is active immediately when the editor loads.
borderColor	string|null	null	Color of the selection overlay border. null = no border without explicit config.
dropIndicatorColor	string	'#ff0000'	Color of the drop indicator line when dragging.
duplicate	bool	true	If true, adds a duplicate button to the floating toolbar.

User Experience

1. Selection: Click any block (paragraph, heading, image, etc.) to select it. A blue overlay border highlights the selection, and the floating toolbar appears to the left.
2. Reorder: Click the ▲ and ▼ buttons to move the selected block up or down.
3. Drag: Grab the 6-dot handle and drag the block to a new position. A red line indicates where the block will land.
4. Duplicate: Click the copy icon to duplicate the selected block.
5. Delete: Click the ✕ button to remove the selected block.

Try it live