Skip to main content

​
Overview

The focusBlock method focuses a block and optionally sets the cursor position within it.

​
Signature

Blocks.focusBlock(
  editor: YooEditor,
  blockId: string,
  options?: FocusBlockOptions
): void

​
Parameters

​
editor
YooEditor
required
The editor instance
​
blockId
string
required
ID of the block to focus
​
options
FocusBlockOptions
Configuration object for focusing

​
Examples

​
Basic Usage

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

// Focus a block
Blocks.focusBlock(editor, 'block-123');

// Focus with immediate execution
Blocks.focusBlock(editor, 'block-123', {
  waitExecution: false,
});

​
Focus at Specific Position

import { Point, Path } from 'slate';

// Focus at specific point
Blocks.focusBlock(editor, 'block-123', {
  focusAt: { path: [0, 0], offset: 5 },
});

// Focus at path
Blocks.focusBlock(editor, 'block-123', {
  focusAt: [0, 0],
});

​
Focus After Async Operation

const focusAfterInsert = async (editor: YooEditor, blockId: string) => {
  // Insert block
  const newBlockId = Blocks.insertBlock(editor, 'Paragraph');
  
  // Wait a bit for DOM to update, then focus
  Blocks.focusBlock(editor, newBlockId, {
    waitExecution: true,
    waitExecutionMs: 100,
  });
};

​
Use Cases

​
Focus After Insertion

const insertAndFocus = (editor: YooEditor, type: string) => {
  const blockId = Blocks.insertBlock(editor, type, {
    at: editor.path.current,
  });
  
  Blocks.focusBlock(editor, blockId, {
    waitExecution: true,
  });
};

​
Focus Next Block

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

  const allBlocks = Object.values(editor.children);
  const currentIndex = allBlocks.findIndex(b => b.id === currentBlock.id);
  const nextBlock = allBlocks[currentIndex + 1];

  if (nextBlock) {
    Blocks.focusBlock(editor, nextBlock.id);
  }
};

​
Focus at End of Block

import { Editor } from 'slate';

const focusAtEnd = (editor: YooEditor, blockId: string) => {
  const slate = Blocks.getBlockSlate(editor, { id: blockId });
  if (!slate) return;

  const endPoint = Editor.end(slate, []);
  
  Blocks.focusBlock(editor, blockId, {
    focusAt: endPoint,
  });
};

​
Notes

The method automatically updates editor.path.current to the focused block’s order if shouldUpdateBlockPath is true.
If waitExecution is true, the focus operation is delayed, which is useful when the DOM hasn’t fully updated yet (e.g., after inserting a block).
If the block doesn’t exist or the Slate editor isn’t available, the method will silently return without error.
The method uses ReactEditor.focus() internally, which ensures proper focus handling in React applications.

​
Type Definition

type FocusBlockOptions = {
  waitExecution?: boolean;
  waitExecutionMs?: number;
  shouldUpdateBlockPath?: boolean;
  focusAt?: Point | Path;
  slate?: SlateEditor;
};

getBlock

Get block before focusing

getBlockSlate

Get Slate editor for block

insertBlock

Insert and focus block