Skip to main content

​
Overview

The decreaseBlockDepth method decreases a block’s depth level, effectively outdenting it in the editor.

​
Signature

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

​
Parameters

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

​
Examples

​
Basic Usage

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

// Decrease depth of current block
Blocks.decreaseBlockDepth(editor);

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

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

​
Outdent Multiple Blocks

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

​
Use Cases

​
Outdent on Shift+Tab

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

​
Reset Block Depth

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

  // Decrease until depth is 0
  while (block.meta.depth > 0) {
    Blocks.decreaseBlockDepth(editor, { blockId });
    const updatedBlock = Blocks.getBlock(editor, { id: blockId });
    if (!updatedBlock || updatedBlock.meta.depth === block.meta.depth) {
      break; // Prevent infinite loop
    }
    block.meta.depth = updatedBlock.meta.depth;
  }
};

​
Notes

The depth is decreased by 1 each time the method is called. The minimum depth is 0 (cannot go negative).
If the block doesn’t exist, the method will silently return without error.
Block depth is used for visual indentation in the editor UI. Depth 0 means no indentation.

​
Type Definition

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

increaseBlockDepth

Increase block depth (indent)

updateBlock

Update block depth manually