Skip to main content

​
Overview

The Paths namespace provides utility methods for working with block paths and orders. It includes methods for getting block order information and checking selection states.
Legacy Compatibility: The Paths API is maintained for backward compatibility. Most methods are aliases for Selection API methods. For new code, consider using the Selection API directly.
import { Paths } from '@yoopta/editor';

// Get current block order
const current = Paths.getBlockOrder(editor);

// Get next/previous block
const next = Paths.getNextBlockOrder(editor, current);
const prev = Paths.getPreviousBlockOrder(editor, current);

​
Block Order

​
getBlockOrder

Get the current block order (position). 
function getBlockOrder(
  editor: YooEditor
): YooptaPath['current']
​
return
number
Current block order from editor.path.current

​
Examples

// Get current block order
const current = Paths.getBlockOrder(editor);
console.log('Current block:', current); // 0

// Same as
const current = editor.path.current;

​
getNextBlockOrder

Get the next block order from a given position. 
function getNextBlockOrder(
  editor: YooEditor,
  currentOrder: number
): number | null
​
currentOrder
number
required
Starting block order
​
return
number | null
Next block order or null if none exists

​
Examples

// Get next block from current
const current = Paths.getBlockOrder(editor);
const next = Paths.getNextBlockOrder(editor, current);

if (next !== null) {
  console.log('Next block:', next);
  editor.focusBlock(editor.getBlock({ at: next })?.id!);
}

// Navigate to next block
function goToNext() {
  const current = Paths.getBlockOrder(editor);
  const next = Paths.getNextBlockOrder(editor, current);
  
  if (next !== null) {
    editor.setPath({ current: next });
  }
}

​
getPreviousBlockOrder

Get the previous block order from a given position. 
function getPreviousBlockOrder(
  editor: YooEditor,
  currentOrder: number
): number | null
​
currentOrder
number
required
Starting block order
​
return
number | null
Previous block order or null if none exists

​
Examples

// Get previous block from current
const current = Paths.getBlockOrder(editor);
const prev = Paths.getPreviousBlockOrder(editor, current);

if (prev !== null) {
  console.log('Previous block:', prev);
}

// Navigate to previous block
function goToPrevious() {
  const current = Paths.getBlockOrder(editor);
  const prev = Paths.getPreviousBlockOrder(editor, current);
  
  if (prev !== null) {
    editor.setPath({ current: prev });
  }
}

​
Selection

​
getSelectedPaths

Get selected block orders. 
function getSelectedPaths(
  editor: YooEditor
): YooptaPath['selected']
​
return
number[] | null
Array of selected block orders or null

​
Examples

// Get selected blocks
const selected = Paths.getSelectedPaths(editor);

if (selected && selected.length > 0) {
  console.log(`${selected.length} blocks selected:`, selected);
  // [0, 1, 2]
}

// Same as
const selected = editor.path.selected;

​
isBlockSelected

Check if a block is selected. 
function isBlockSelected(
  editor: YooEditor,
  options: { at?: number; blockId?: string }
): boolean
​
options
object
required
​
return
boolean
true if block is selected, false otherwise

​
Examples

// Check by order
const isSelected = Paths.isBlockSelected(editor, { at: 0 });

if (isSelected) {
  console.log('Block 0 is selected');
}

// Check by ID
const isSelected = Paths.isBlockSelected(editor, {
  blockId: 'block-123'
});

​
Path Validation

​
isPathEmpty

Check if a path is empty (no text content). 
function isPathEmpty(
  editor: YooEditor,
  options: { at?: number; blockId?: string }
): boolean
​
options
object
required
​
return
boolean
true if block has no text content, false otherwise

​
Examples

// Check if current block is empty
const isEmpty = Paths.isPathEmpty(editor, {
  at: Paths.getBlockOrder(editor)
});

if (isEmpty) {
  console.log('Block is empty');
}

// Check by block ID
const isEmpty = Paths.isPathEmpty(editor, {
  blockId: 'block-123'
});

​
Path Manipulation

​
setPath

Set the editor path (current, selected, selection). 
function setPath(
  editor: YooEditor,
  path: YooptaPath
): void
​
path
YooptaPath
required

​
Examples

// Set current block
Paths.setPath(editor, {
  current: 0,
  selected: editor.path.selected,
  selection: editor.path.selection,
  source: 'api'
});

// Set current and selected
Paths.setPath(editor, {
  current: 0,
  selected: [0, 1, 2],
  selection: null,
  source: 'keyboard'
});

// Same as
editor.setPath({ current: 0 });

​
Point Utilities

​
getLastNodePoint

Get the last point (end position) in a Slate editor. 
function getLastNodePoint(
  slate: SlateEditor
): Point
​
slate
SlateEditor
required
Slate editor instance
​
return
Point
Last point in the Slate editor

​
Examples

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

// Get last point in block
const slate = Blocks.getBlockSlate(editor, { at: 0 });

if (slate) {
  const lastPoint = Paths.getLastNodePoint(slate);
  console.log('Last point:', lastPoint);
  // { path: [0, 2], offset: 15 }
  
  // Use to focus at end of block
  editor.focusBlock('block-123', { focusAt: lastPoint });
}

​
getFirstNodePoint

Get the first point (start position) in a Slate editor. 
function getFirstNodePoint(
  editor: YooEditor,
  options?: GetPointOptions
): Point | null
Alias for Selection.getFirstPoint.

​
Examples

// Get first point in current block
const firstPoint = Paths.getFirstNodePoint(editor);

// Get first point in specific block
const firstPoint = Paths.getFirstNodePoint(editor, { at: 0 });

if (firstPoint) {
  console.log('First point:', firstPoint);
  // { path: [0, 0], offset: 0 }
}

​
Type Definitions

type YooptaPath = {
  current: number;           // Current block order
  selected: number[] | null; // Selected block orders
  selection: Range | null;   // Current Slate selection
  source: string | null;     // Source of change
};

type Point = {
  path: number[];      // Slate path: [0, 1, 2]
  offset: number;      // Character offset
};

type Range = {
  anchor: Point;
  focus: Point;
};

​
Migration Guide

The Paths API is maintained for backward compatibility. New code should use the Selection API for better clarity and consistency.
// Old (Paths API)
const current = Paths.getBlockOrder(editor);
const next = Paths.getNextBlockOrder(editor, current);
const selected = Paths.getSelectedPaths(editor);

// New (Selection API)
const current = Selection.getCurrent(editor);
const next = Selection.getNext(editor, { at: current });
const selected = Selection.getSelected(editor);

// Old
const isSelected = Paths.isBlockSelected(editor, { at: 0 });

// New
const isSelected = Selection.isBlockSelected(editor, { at: 0 });

// Old
const firstPoint = Paths.getFirstNodePoint(editor);

// New
const firstPoint = Selection.getFirstPoint(editor);

​
Common Patterns

​
Block Navigation

// Navigate forward
function navigateNext() {
  const current = Paths.getBlockOrder(editor);
  const next = Paths.getNextBlockOrder(editor, current);
  
  if (next !== null) {
    Paths.setPath(editor, {
      current: next,
      selected: null,
      selection: null,
      source: 'keyboard'
    });
    
    const block = editor.getBlock({ at: next });
    if (block) {
      editor.focusBlock(block.id);
    }
  }
}

// Navigate backward
function navigatePrevious() {
  const current = Paths.getBlockOrder(editor);
  const prev = Paths.getPreviousBlockOrder(editor, current);
  
  if (prev !== null) {
    Paths.setPath(editor, {
      current: prev,
      selected: null,
      selection: null,
      source: 'keyboard'
    });
  }
}

​
Multi-Block Operations

// Process all selected blocks
const selected = Paths.getSelectedPaths(editor);

if (selected && selected.length > 0) {
  selected.forEach((order) => {
    const block = editor.getBlock({ at: order });
    if (block) {
      console.log(`Block ${order}: ${block.type}`);
    }
  });
}

​
Focus at End of Block

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

function focusAtEnd(blockId: string) {
  const slate = Blocks.getBlockSlate(editor, { id: blockId });
  
  if (slate) {
    const lastPoint = Paths.getLastNodePoint(slate);
    editor.focusBlock(blockId, { focusAt: lastPoint });
  }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us