Marks API

Overview

The Marks namespace provides methods for text formatting operations. Marks are Slate text formatting properties like bold, italic, underline, color, and custom formatting.

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

// Use with editor instance
Marks.toggle(editor, { type: 'bold' });
Marks.update(editor, { type: 'color', value: '#ff0000' });

// Check if mark is active
const isBold = Marks.isActive(editor, { type: 'bold' });

Toggle Marks

toggle

Toggle a mark on/off in the current selection or specified blocks.

function toggle(
  editor: YooEditor,
  options: ToggleMarkOptions
): void

options

ToggleMarkOptions

required

Show properties

type

string

required

Mark type (e.g., ‘bold’, ‘italic’, ‘underline’, ‘highlight’)

number | number[]

Block position(s) to toggle mark. If not provided, uses current selection or editor.path.selected

blockId

string | string[]

Block ID(s) to toggle mark

selection

Range

Specific Slate selection range to toggle mark in

Examples

// Toggle bold in current selection
Marks.toggle(editor, { type: 'bold' });

// Toggle italic in specific block
Marks.toggle(editor, {
  type: 'italic',
  at: 0
});

// Toggle underline in multiple blocks
Marks.toggle(editor, {
  type: 'underline',
  at: [0, 1, 2]
});

// Toggle in specific selection
Marks.toggle(editor, {
  type: 'bold',
  selection: {
    anchor: { path: [0, 0], offset: 0 },
    focus: { path: [0, 0], offset: 5 }
  }
});

// Toggle by block IDs
Marks.toggle(editor, {
  type: 'bold',
  blockId: ['block-1', 'block-2']
});

Update Marks

update

Update mark value in the current selection or specified blocks.

function update(
  editor: YooEditor,
  options: UpdateMarkOptions
): void

options

UpdateMarkOptions

required

Show properties

type

string

required

Mark type (e.g., ‘color’, ‘backgroundColor’, ‘fontSize’, ‘highlight’)

value

unknown

required

Mark value (type depends on mark: string for color, number for fontSize, etc.)

number | number[]

Block position(s) to update mark. If not provided, uses current selection or editor.path.selected

blockId

string | string[]

Block ID(s) to update mark

selection

Range

Specific Slate selection range to update mark in

Examples

// Update color in current selection
Marks.update(editor, {
  type: 'color',
  value: '#ff0000'
});

// Update background color in specific selection
Marks.update(editor, {
  type: 'backgroundColor',
  value: '#ffff00',
  selection: {
    anchor: { path: [0, 0], offset: 0 },
    focus: { path: [0, 0], offset: 10 }
  }
});

// Update font size in specific block
Marks.update(editor, {
  type: 'fontSize',
  value: 18,
  at: 0
});

// Update highlight color in multiple blocks
Marks.update(editor, {
  type: 'highlight',
  value: { color: 'yellow', backgroundColor: '#ffff00' },
  at: [0, 1, 2]
});

// Update by block IDs
Marks.update(editor, {
  type: 'color',
  value: '#0000ff',
  blockId: ['block-1', 'block-2', 'block-3']
});

Add & Remove Marks

add

Add a mark to the current selection.

function add(
  editor: YooEditor,
  options: AddMarkOptions
): void

Alias for adding marks. Similar to update but specifically for adding.

Examples

// Add bold mark
Marks.add(editor, { type: 'bold', value: true });

// Add color mark
Marks.add(editor, { type: 'color', value: '#ff0000' });

remove

Remove a mark from the current selection.

function remove(
  editor: YooEditor,
  options: RemoveMarkOptions
): void

options

RemoveMarkOptions

required

Show properties

type

string

required

Mark type to remove

number | number[]

Block position(s)

blockId

string | string[]

Block ID(s)

selection

Range

Specific selection range

Examples

// Remove bold from current selection
Marks.remove(editor, { type: 'bold' });

// Remove color from specific block
Marks.remove(editor, {
  type: 'color',
  at: 0
});

// Remove highlight from selection
Marks.remove(editor, {
  type: 'highlight',
  selection: {
    anchor: { path: [0, 0], offset: 0 },
    focus: { path: [0, 0], offset: 10 }
  }
});

Query Marks

isActive

Check if a mark is active in the current selection or specified block.

function isActive(
  editor: YooEditor,
  options: IsMarkActiveOptions
): boolean

options

IsMarkActiveOptions

required

Show properties

type

string

required

Mark type to check

number

Block position to check

blockId

string

Block ID to check

return

boolean

true if mark is active, false otherwise

Examples

// Check if bold is active in current selection
const isBold = Marks.isActive(editor, { type: 'bold' });

// Check if italic is active in specific block
const isItalic = Marks.isActive(editor, {
  type: 'italic',
  at: 0
});

// Check by block ID
const hasColor = Marks.isActive(editor, {
  type: 'color',
  blockId: 'block-123'
});

// Use in UI to show active state
function BoldButton() {
  const isBold = Marks.isActive(editor, { type: 'bold' });
  
  return (
    <button
      className={isBold ? 'active' : ''}
      onClick={() => Marks.toggle(editor, { type: 'bold' })}
    >
      Bold
    </button>
  );
}

getValue

Get the value of a mark from the current selection or specified block.

function getValue(
  editor: YooEditor,
  options: GetMarkValueOptions
): unknown | null

options

GetMarkValueOptions

required

Show properties

type

string

required

Mark type to get value for

number

Block position

blockId

string

Block ID

return

unknown | null

The mark value or null if not found

Examples

// Get color value from current selection
const color = Marks.getValue(editor, { type: 'color' });
console.log(color); // '#ff0000' or null

// Get font size from specific block
const fontSize = Marks.getValue(editor, {
  type: 'fontSize',
  at: 0
});
console.log(fontSize); // 18 or null

// Get highlight value
const highlight = Marks.getValue(editor, { type: 'highlight' });
console.log(highlight); // { color: 'yellow', backgroundColor: '#ffff00' } or null

// Use in color picker
function ColorPicker() {
  const currentColor = Marks.getValue(editor, { type: 'color' }) as string;
  
  return (
    <input
      type="color"
      value={currentColor || '#000000'}
      onChange={(e) => Marks.update(editor, {
        type: 'color',
        value: e.target.value
      })}
    />
  );
}

getAll

Get all marks from the current selection.

function getAll(
  editor: YooEditor,
  options?: GetMarksOptions
): Record<string, unknown> | null

options

GetMarksOptions

Show properties

number

Block position

blockId

string

Block ID

return

Record<string, unknown> | null

Object containing all active marks and their values, or null if none

Examples

// Get all marks from current selection
const marks = Marks.getAll(editor);
console.log(marks);
// {
//   bold: true,
//   italic: true,
//   color: '#ff0000',
//   fontSize: 16
// }

// Get all marks from specific block
const marks = Marks.getAll(editor, { at: 0 });

Clear Marks

clear

Clear all marks from the current selection or specified blocks.

function clear(
  editor: YooEditor,
  options?: ClearMarksOptions
): void

options

ClearMarksOptions

Show properties

number | number[]

Block position(s) to clear marks from

blockId

string | string[]

Block ID(s) to clear marks from

selection

Range

Specific selection range to clear marks from

Examples

// Clear all marks from current selection
Marks.clear(editor);

// Clear marks from specific block
Marks.clear(editor, { at: 0 });

// Clear marks from multiple blocks
Marks.clear(editor, { at: [0, 1, 2] });

// Clear marks from selection
Marks.clear(editor, {
  selection: {
    anchor: { path: [0, 0], offset: 0 },
    focus: { path: [0, 0], offset: 10 }
  }
});

Common Mark Types

Basic Formatting

// Bold
Marks.toggle(editor, { type: 'bold' });

// Italic
Marks.toggle(editor, { type: 'italic' });

// Underline
Marks.toggle(editor, { type: 'underline' });

// Strikethrough
Marks.toggle(editor, { type: 'strike' });

// Code
Marks.toggle(editor, { type: 'code' });

Color & Styling

// Text color
Marks.update(editor, {
  type: 'color',
  value: '#ff0000'
});

// Background color
Marks.update(editor, {
  type: 'backgroundColor',
  value: '#ffff00'
});

// Highlight
Marks.update(editor, {
  type: 'highlight',
  value: { color: 'red', backgroundColor: '#ffcccc' }
});

// Font size
Marks.update(editor, {
  type: 'fontSize',
  value: 18
});

function Toolbar() {
  const isBold = Marks.isActive(editor, { type: 'bold' });
  const isItalic = Marks.isActive(editor, { type: 'italic' });
  const currentColor = Marks.getValue(editor, { type: 'color' }) as string;
  
  return (
    <div>
      <button
        className={isBold ? 'active' : ''}
        onClick={() => Marks.toggle(editor, { type: 'bold' })}
      >
        Bold
      </button>
      
      <button
        className={isItalic ? 'active' : ''}
        onClick={() => Marks.toggle(editor, { type: 'italic' })}
      >
        Italic
      </button>
      
      <input
        type="color"
        value={currentColor || '#000000'}
        onChange={(e) => Marks.update(editor, {
          type: 'color',
          value: e.target.value
        })}
      />
      
      <button onClick={() => Marks.clear(editor)}>
        Clear Formatting
      </button>
    </div>
  );
}

Multi-Block Formatting

// Format multiple selected blocks
const selectedBlocks = editor.path.selected; // [0, 1, 2]

// Toggle bold in all selected blocks
Marks.toggle(editor, {
  type: 'bold',
  at: selectedBlocks
});

// Update color in all selected blocks
Marks.update(editor, {
  type: 'color',
  value: '#0000ff',
  at: selectedBlocks
});

Type Definitions

type ToggleMarkOptions = {
  type: string;
  at?: number | number[];
  blockId?: string | string[];
  selection?: Range;
};

type UpdateMarkOptions = {
  type: string;
  value: unknown;
  at?: number | number[];
  blockId?: string | string[];
  selection?: Range;
};

type IsMarkActiveOptions = {
  type: string;
  at?: number;
  blockId?: string;
};

type GetMarkValueOptions = {
  type: string;
  at?: number;
  blockId?: string;
};

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

type Point = {
  path: number[];
  offset: number;
};

Best Practices

Selection vs Block Targeting

Use selection parameter when you need precise control over a Slate range
Use at or blockId when formatting entire blocks or multiple blocks
Omit both to use the current text selection (most common for user interactions)

Mark ValuesMark values can be any type:

Boolean for simple marks: { bold: true }
String for colors: { color: '#ff0000' }
Number for sizes: { fontSize: 18 }
Object for complex marks: { highlight: { color: 'red', backgroundColor: '#ffcccc' } }

Editor API

Namespace APIs

Types

Hooks

Parsers

Overview

Toggle Marks

toggle

Examples

Update Marks

update

Examples

Add & Remove Marks

add

Examples

remove

Examples

Query Marks

isActive

Examples

getValue

Examples

getAll

Examples

Clear Marks

clear

Examples

Common Mark Types

Basic Formatting

Color & Styling

Multi-Block Formatting

Type Definitions

Best Practices

Build docs developers (and LLMs) love

Editor API

Namespace APIs

Types

Hooks

Parsers

​Overview

​Toggle Marks

​toggle

​Examples

​Update Marks

​update

​Examples

​Add & Remove Marks

​add

​Examples

​remove

​Examples

​Query Marks

​isActive

​Examples

​getValue

​Examples

​getAll

​Examples

​Clear Marks

​clear

​Examples

​Common Mark Types

​Basic Formatting

​Color & Styling

​Toolbar Integration

​Multi-Block Formatting

​Type Definitions

​Best Practices

Build docs developers (and LLMs) love

Overview

Toggle Marks

toggle

Examples

Update Marks

update

Examples

Add & Remove Marks

add

Examples

remove

Examples

Query Marks

isActive

Examples

getValue

Examples

getAll

Examples

Clear Marks

clear

Examples

Common Mark Types

Basic Formatting

Color & Styling

Toolbar Integration

Multi-Block Formatting

Type Definitions

Best Practices