Skip to main content

​
Overview

The mergeBlock method merges the content of one block into another block, typically the previous one.

​
Signature

Blocks.mergeBlock(editor: YooEditor, options?: MergeBlockOptions): void

​
Parameters

​
editor
YooEditor
required
The editor instance
​
options
MergeBlockOptions
Configuration object for merging

​
Examples

​
Basic Usage

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

// Merge current block into previous (default behavior)
Blocks.mergeBlock(editor);

// Merge specific block into previous
Blocks.mergeBlock(editor, { at: 5 });

// Merge block at index 5 into block at index 3
Blocks.mergeBlock(editor, {
  at: 5,
  targetAt: 3,
});

​
Merge by Block IDs

// Merge block by IDs
Blocks.mergeBlock(editor, {
  blockId: 'source-block-id',
  targetBlockId: 'target-block-id',
});

​
Merge Without Preserving Content

// Merge but don't preserve source content
Blocks.mergeBlock(editor, {
  preserveContent: false,
});

​
Use Cases

​
Merge on Backspace at Start

const handleBackspaceAtStart = (editor: YooEditor) => {
  const currentBlock = Blocks.getBlock(editor, { at: editor.path.current });
  if (!currentBlock) return;

  const slate = Blocks.getBlockSlate(editor, { id: currentBlock.id });
  if (!slate || !slate.selection) return;

  // Check if cursor is at start of block
  const isAtStart = Editor.isStart(slate, slate.selection.anchor, []);
  
  if (isAtStart) {
    Blocks.mergeBlock(editor);
  }
};

​
Merge Multiple Blocks

const mergeMultipleBlocks = (editor: YooEditor, blockIds: string[]) => {
  if (blockIds.length < 2) return;

  const targetBlockId = blockIds[0];
  
  // Merge all other blocks into the first one
  for (let i = 1; i < blockIds.length; i++) {
    Blocks.mergeBlock(editor, {
      blockId: blockIds[i],
      targetBlockId,
      focus: false, // Don't focus during batch merge
    });
  }
  
  // Focus target block at the end
  Blocks.focusBlock(editor, targetBlockId);
};

​
Notes

By default, the method merges the current block into the previous block. The source block is deleted after merging.
If preserveContent is true, text nodes from both blocks are intelligently merged. Adjacent text nodes are combined.
The method automatically positions the cursor at the end of the target block after merging.
Void blocks (blocks that can’t accept content) cannot be merged into. The method will silently return if the target block is void.
The method checks if the target block can accept merge by verifying it’s not a void block type.

​
Type Definition

type MergeBlockOptions = {
  at?: number; // YooptaPathIndex
  blockId?: string;
  targetAt?: number; // YooptaPathIndex
  targetBlockId?: string;
  focus?: boolean;
  preserveContent?: boolean;
};

splitBlock

Split block (opposite of merge)

deleteBlock

Remove block after merge

focusBlock

Focus after merge