Selection API - Yoopta Editor

Overview

The Selection namespace provides methods for managing both block-level selection (which blocks are selected) and Slate-level selection (text selection within blocks).

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

// Block-level selection
const currentBlock = Selection.getCurrent(editor);
Selection.setCurrent(editor, { at: 0 });

// Slate selection
const selection = Selection.getSlateSelection(editor);
const range = Selection.getRange(editor, { blockId: 'block-1' });

Block-Level Selection

getCurrent

Get the current block order (position).

function getCurrent(
  editor: YooEditor,
  options?: GetCurrentOptions
): YooptaPathIndex

options

GetCurrentOptions

Show properties

number

Specific block order to return. If provided, returns this value

return

number

Current block order (position)

Examples

// Get current block order
const current = Selection.getCurrent(editor);
console.log(current); // 0

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

setCurrent

Set the current block order (position).

function setCurrent(
  editor: YooEditor,
  options: SetCurrentOptions
): void

options

SetCurrentOptions

required

Show properties

number

required

Block order to set as current

source

string

Source of the change (e.g., ‘keyboard’, ‘mouse’, ‘api’)

Examples

// Set current block to order 0
Selection.setCurrent(editor, { at: 0 });

// Set with source tracking
Selection.setCurrent(editor, {
  at: 1,
  source: 'keyboard'
});

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

getSelected

Get selected block orders or check if a specific block is selected.

function getSelected(
  editor: YooEditor,
  options?: GetSelectedOptions
): number[] | null | boolean

options

GetSelectedOptions

Show properties

number

Check if specific block order is selected. If provided, returns boolean

return

number[] | null | boolean

Without at: array of selected block orders or null
With at: boolean indicating if that block is selected

Examples

// Get all selected block orders
const selected = Selection.getSelected(editor);
console.log(selected); // [0, 1, 2] or null

// Check if specific block is selected
const isSelected = Selection.getSelected(editor, { at: 0 });
console.log(isSelected); // true or false

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

setSelected

Set selected blocks.

function setSelected(
  editor: YooEditor,
  options: SetSelectedOptions
): void

options

SetSelectedOptions

required

Show properties

selected

number[] | null

required

Array of block orders to select, or null to clear selection

Examples

// Select multiple blocks
Selection.setSelected(editor, { selected: [0, 1, 2] });

// Clear selection
Selection.setSelected(editor, { selected: null });

// Same as
editor.setPath({ selected: [0, 1, 2] });

isBlockSelected

Check if a block is selected.

function isBlockSelected(
  editor: YooEditor,
  options: IsBlockSelectedOptions
): boolean

options

IsBlockSelectedOptions

required

Show properties

number

Block order to check

blockId

string

Block ID to check

return

boolean

true if block is selected, false otherwise

Examples

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

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

getNext

Get the next block order.

function getNext(
  editor: YooEditor,
  options?: GetNextBlockOptions
): number | null

options

GetNextBlockOptions

Show properties

number

Starting block order. Defaults to current

return

number | null

Next block order or null if none

Examples

// Get next block from current
const next = Selection.getNext(editor);

// Get next block from specific position
const next = Selection.getNext(editor, { at: 0 });

if (next !== null) {
  Selection.setCurrent(editor, { at: next });
}

getPrevious

Get the previous block order.

function getPrevious(
  editor: YooEditor,
  options?: GetNextBlockOptions
): number | null

Parameters are the same as getNext.

Examples

// Get previous block from current
const prev = Selection.getPrevious(editor);

// Get previous block from specific position
const prev = Selection.getPrevious(editor, { at: 5 });

isEmpty

Check if there’s no block selection.

function isEmpty(
  editor: YooEditor
): boolean

return

boolean

true if no blocks are selected, false otherwise

Examples

// Check if selection is empty
const isEmpty = Selection.isEmpty(editor);

if (isEmpty) {
  console.log('No blocks selected');
}

Slate Selection (Text Selection)

getSlateSelection

Get Slate selection (Range) from a block.

function getSlateSelection(
  editor: YooEditor,
  options?: GetSlateSelectionOptions
): Range | null

options

GetSlateSelectionOptions

Show properties

number

Block order

blockId

string

Block ID

return

Range | null

Slate selection range or null if none

Examples

// Get selection from current block
const selection = Selection.getSlateSelection(editor);

// Get selection from specific block
const selection = Selection.getSlateSelection(editor, { at: 0 });

// Get selection by block ID
const selection = Selection.getSlateSelection(editor, {
  blockId: 'block-123'
});

if (selection) {
  console.log('Anchor:', selection.anchor);
  console.log('Focus:', selection.focus);
}

setSlateSelection

Set Slate selection in a block.

function setSlateSelection(
  editor: YooEditor,
  options: SetSlateSelectionOptions
): void

options

SetSlateSelectionOptions

required

Show properties

selection

Range

required

Slate selection range to set

number

Block order

blockId

string

Block ID

Examples

// Set selection in current block
Selection.setSlateSelection(editor, {
  selection: {
    anchor: { path: [0, 0], offset: 0 },
    focus: { path: [0, 0], offset: 5 }
  }
});

// Set selection in specific block
Selection.setSlateSelection(editor, {
  blockId: 'block-123',
  selection: {
    anchor: { path: [0, 0], offset: 0 },
    focus: { path: [0, 0], offset: 10 }
  }
});

getRange

Get Slate range from a block.

function getRange(
  editor: YooEditor,
  options?: GetRangeOptions
): Range | null

Alias for getSlateSelection.

isExpanded

Check if Slate selection is expanded (has text selected).

function isExpanded(
  editor: YooEditor,
  options?: GetSlateSelectionOptions
): boolean

options

GetSlateSelectionOptions

Same as getSlateSelection

return

boolean

true if selection is expanded, false otherwise

Examples

// Check if current selection is expanded
const isExpanded = Selection.isExpanded(editor);

if (isExpanded) {
  console.log('Text is selected');
} else {
  console.log('Cursor is at a point');
}

// Check specific block
const isExpanded = Selection.isExpanded(editor, { at: 0 });

isCollapsed

Check if Slate selection is collapsed (cursor at a point).

function isCollapsed(
  editor: YooEditor,
  options?: GetSlateSelectionOptions
): boolean

Opposite of isExpanded.

Examples

// Check if cursor is at a point
const isCollapsed = Selection.isCollapsed(editor);

if (isCollapsed) {
  console.log('Cursor at point');
}

Point Operations

getAnchor

Get anchor point of Slate selection.

function getAnchor(
  editor: YooEditor,
  options?: GetPointOptions
): Point | null

options

GetPointOptions

Show properties

number

Block order

blockId

string

Block ID

return

Point | null

Anchor point or null

Examples

// Get anchor from current selection
const anchor = Selection.getAnchor(editor);

if (anchor) {
  console.log('Path:', anchor.path);
  console.log('Offset:', anchor.offset);
}

getFocus

Get focus point of Slate selection.

function getFocus(
  editor: YooEditor,
  options?: GetPointOptions
): Point | null

Same parameters as getAnchor.

Examples

// Get focus from current selection
const focus = Selection.getFocus(editor);

getStart

Get start point of Slate selection (beginning of selection).

function getStart(
  editor: YooEditor,
  options?: GetPointOptions
): Point | null

Examples

// Get start point
const start = Selection.getStart(editor);

getEnd

Get end point of Slate selection.

function getEnd(
  editor: YooEditor,
  options?: GetPointOptions
): Point | null

Examples

// Get end point
const end = Selection.getEnd(editor);

getFirstPoint

Get first point in a block.

function getFirstPoint(
  editor: YooEditor,
  options?: GetPointOptions
): Point | null

Examples

// Get first point in current block
const firstPoint = Selection.getFirstPoint(editor);

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

// Use to move cursor to start
if (firstPoint) {
  Selection.setSlateSelection(editor, {
    selection: {
      anchor: firstPoint,
      focus: firstPoint
    }
  });
}

getLastPoint

Get last point in a block.

function getLastPoint(
  editor: YooEditor,
  options?: GetPointOptions
): Point | null

Examples

// Get last point in current block
const lastPoint = Selection.getLastPoint(editor);

// Use to move cursor to end
if (lastPoint) {
  Selection.setSlateSelection(editor, {
    selection: {
      anchor: lastPoint,
      focus: lastPoint
    }
  });
}

DOM Operations

toDOMRange

Convert Slate selection to DOM Range.

function toDOMRange(
  editor: YooEditor,
  options: ToDOMRangeOptions
): DOMRange | null

options

ToDOMRangeOptions

required

Show properties

selection

Range

required

Slate selection to convert

number

Block order

blockId

string

Block ID

return

DOMRange | null

DOM Range object or null

Examples

// Convert current selection to DOM range
const selection = Selection.getSlateSelection(editor);

if (selection) {
  const domRange = Selection.toDOMRange(editor, {
    selection
  });
  
  if (domRange) {
    // Use DOM range for operations
    const rect = domRange.getBoundingClientRect();
    console.log('Selection position:', rect);
  }
}

Type Definitions

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

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

type YooptaPathIndex = number;

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
};

Common Patterns

Navigate Between Blocks

// Move to next block
const next = Selection.getNext(editor);
if (next !== null) {
  Selection.setCurrent(editor, { at: next });
  editor.focusBlock(editor.getBlock({ at: next })?.id!);
}

// Move to previous block
const prev = Selection.getPrevious(editor);
if (prev !== null) {
  Selection.setCurrent(editor, { at: prev });
}

Select Text Range

// Select first 10 characters
Selection.setSlateSelection(editor, {
  selection: {
    anchor: { path: [0, 0], offset: 0 },
    focus: { path: [0, 0], offset: 10 }
  }
});

// Select entire block
const firstPoint = Selection.getFirstPoint(editor);
const lastPoint = Selection.getLastPoint(editor);

if (firstPoint && lastPoint) {
  Selection.setSlateSelection(editor, {
    selection: {
      anchor: firstPoint,
      focus: lastPoint
    }
  });
}

Multi-Block Selection

// Select blocks 0, 1, 2
Selection.setSelected(editor, { selected: [0, 1, 2] });

// Check if blocks are selected
const selected = Selection.getSelected(editor);
if (selected && selected.length > 0) {
  console.log(`${selected.length} blocks selected`);
  
  // Apply formatting to all selected blocks
  Marks.toggle(editor, {
    type: 'bold',
    at: selected
  });
}

Cursor Position

// Move cursor to start of block
const firstPoint = Selection.getFirstPoint(editor, { at: 0 });
if (firstPoint) {
  Selection.setSlateSelection(editor, {
    at: 0,
    selection: {
      anchor: firstPoint,
      focus: firstPoint
    }
  });
}

// Move cursor to end of block
const lastPoint = Selection.getLastPoint(editor, { at: 0 });
if (lastPoint) {
  Selection.setSlateSelection(editor, {
    at: 0,
    selection: {
      anchor: lastPoint,
      focus: lastPoint
    }
  });
}

Editor API

Namespace APIs

Types

Hooks

Parsers

​Overview

​Block-Level Selection

​getCurrent

​Examples

​setCurrent

​Examples

​getSelected

​Examples

​setSelected

​Examples

​isBlockSelected

​Examples

​getNext

​Examples

​getPrevious

​Examples

​isEmpty

​Examples

​Slate Selection (Text Selection)

​getSlateSelection

​Examples

​setSlateSelection

​Examples

​getRange

​isExpanded

​Examples

​isCollapsed

​Examples

​Point Operations

​getAnchor

​Examples

​getFocus

​Examples

​getStart

​Examples

​getEnd

​Examples

​getFirstPoint

​Examples

​getLastPoint

​Examples

​DOM Operations

​toDOMRange

​Examples

​Type Definitions

​Common Patterns

​Navigate Between Blocks

​Select Text Range

​Multi-Block Selection

​Cursor Position

Build docs developers (and LLMs) love

Overview

Block-Level Selection

getCurrent

Examples

setCurrent

Examples

getSelected

Examples

setSelected

Examples

isBlockSelected

Examples

getNext

Examples

getPrevious

Examples

isEmpty

Examples

Slate Selection (Text Selection)

getSlateSelection

Examples

setSlateSelection

Examples

getRange

isExpanded

Examples

isCollapsed

Examples

Point Operations

getAnchor

Examples

getFocus

Examples

getStart

Examples

getEnd

Examples

getFirstPoint

Examples

getLastPoint

Examples

DOM Operations

toDOMRange

Examples

Type Definitions

Common Patterns

Navigate Between Blocks

Select Text Range

Multi-Block Selection

Cursor Position