Skip to main content

​
Overview

The increaseBlockDepth method increases a block’s depth level, effectively indenting it in the editor.

​
Signature

Blocks.increaseBlockDepth(
  editor: YooEditor,
  options?: BlockDepthOptions
): void

​
Parameters

​
editor
YooEditor
required
The editor instance
​
options
BlockDepthOptions
Configuration object

​
Examples

​
Basic Usage

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

// Increase depth of current block
Blocks.increaseBlockDepth(editor);

// Increase depth of specific block by path
Blocks.increaseBlockDepth(editor, { at: 3 });

// Increase depth by block ID
Blocks.increaseBlockDepth(editor, { blockId: 'block-123' });

​
Indent Multiple Blocks

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

​
Use Cases

​
Indent on Tab Key

const handleTabKey = (editor: YooEditor) => {
  Blocks.increaseBlockDepth(editor, {
    at: editor.path.current,
  });
};

​
Indent Selected Blocks

const indentSelected = (editor: YooEditor, selectedBlockIds: string[]) => {
  selectedBlockIds.forEach((blockId) => {
    Blocks.increaseBlockDepth(editor, { blockId });
  });
};

​
Notes

The depth is increased by 1 each time the method is called. There’s no maximum depth limit.
If the block doesn’t exist, the method will silently return without error.
Block depth is used for visual indentation in the editor UI. Higher depth values create more indentation.

​
Type Definition

type BlockDepthOptions = {
  at?: number; // YooptaPathIndex
  blockId?: string;
};

decreaseBlockDepth

Decrease block depth (outdent)

updateBlock

Update block depth manually