Skip to main content

​
Overview

The moveBlock method reorders blocks by moving a block from its current position to a new position.

​
Signature

Blocks.moveBlock(
  editor: YooEditor,
  draggedBlockId: string,
  newPath: number
): void

​
Parameters

​
editor
YooEditor
required
The editor instance
​
draggedBlockId
string
required
ID of the block to move
​
newPath
number
required
New position (order) for the block

​
Examples

​
Basic Usage

import { Blocks } from '@yoopta/editor';

// Move block to position 5
Blocks.moveBlock(editor, 'block-123', 5);

// Move block to beginning
Blocks.moveBlock(editor, 'block-123', 0);

// Move block to end
const lastPosition = Object.keys(editor.children).length - 1;
Blocks.moveBlock(editor, 'block-123', lastPosition);

​
Move Block Up

const moveBlockUp = (editor: YooEditor, blockId: string) => {
  const block = Blocks.getBlock(editor, { id: blockId });
  if (!block) return;

  const newPosition = Math.max(0, block.meta.order - 1);
  Blocks.moveBlock(editor, blockId, newPosition);
};

​
Move Block Down

const moveBlockDown = (editor: YooEditor, blockId: string) => {
  const block = Blocks.getBlock(editor, { id: blockId });
  if (!block) return;

  const maxPosition = Object.keys(editor.children).length - 1;
  const newPosition = Math.min(maxPosition, block.meta.order + 1);
  Blocks.moveBlock(editor, blockId, newPosition);
};

​
Use Cases

​
Drag and Drop Implementation

const handleDragEnd = (
  editor: YooEditor,
  draggedBlockId: string,
  targetIndex: number
) => {
  Blocks.moveBlock(editor, draggedBlockId, targetIndex);
  
  // Update editor path to new position
  editor.setPath({ current: targetIndex });
};

​
Reorder Blocks

const reorderBlocks = (editor: YooEditor, blockIds: string[]) => {
  blockIds.forEach((blockId, index) => {
    Blocks.moveBlock(editor, blockId, index);
  });
};

​
Notes

The method automatically updates the editor’s current path to the new position after moving.
If the block doesn’t exist or the target position is invalid, the method will silently return without making changes.
Moving a block will affect the order of other blocks. Make sure the new position is valid within the editor’s block range.
The method swaps the positions of the dragged block and the block currently at the target position.

​
Type Definition

// No separate type, uses:
// draggedBlockId: string
// newPath: number (YooptaPathIndex)

getBlock

Get block before moving

focusBlock

Focus block after moving