Mark Commands

Commands for manipulating marks in ProseKit

Overview

Mark commands allow you to add, remove, and toggle inline formatting (like bold, italic, links, etc.) in your ProseKit editor.

addMark()

Adds a mark with the given attributes to the current selection or specified range.

Function Signature

function addMark(options: AddMarkOptions): Command

Parameters

options · AddMarkOptions · required

options.type · string | MarkType · required

The type of the mark to add. Can be a string name or a MarkType instance.

options.attrs · Attrs | null

The attributes of the mark to add

options.from · number

The start position in the document. Defaults to the start of the current selection.

options.to · number

The end position in the document. Defaults to the end of the current selection.

Return Value

command · Command

A ProseMirror command that returns true if the mark was successfully added, false otherwise.

Examples

Add Bold Mark to Selection

import { addMark } from 'prosekit/core'

const command = addMark({ type: 'bold' })
editor.exec(command)

Add Link Mark with Attributes

import { addMark } from 'prosekit/core'

const command = addMark({
  type: 'link',
  attrs: { href: 'https://example.com' }
})
editor.exec(command)

Add Mark to Custom Range

import { addMark } from 'prosekit/core'

// Add bold to characters 10-20
const command = addMark({
  type: 'bold',
  from: 10,
  to: 20
})
editor.exec(command)

removeMark()

Removes a mark from the current selection or specified range.

Function Signature

function removeMark(options: RemoveMarkOptions): Command

Parameters

options · RemoveMarkOptions · required

options.type · string | MarkType · required

The type of the mark to remove

options.attrs · Attrs | null

If provided, only remove marks with precisely these attributes. Otherwise, remove all marks of the given type.

options.from · number

The start position in the document. Defaults to the start of the current selection.

options.to · number

The end position in the document. Defaults to the end of the current selection.

Return Value

command · Command

A ProseMirror command that returns true if the mark was successfully removed, false otherwise.

Examples

Remove Bold Mark

import { removeMark } from 'prosekit/core'

const command = removeMark({ type: 'bold' })
editor.exec(command)

Remove Specific Link

import { removeMark } from 'prosekit/core'

// Only remove links to example.com
const command = removeMark({
  type: 'link',
  attrs: { href: 'https://example.com' }
})
editor.exec(command)

Remove All Links

import { removeMark } from 'prosekit/core'

// Remove all links regardless of href
const command = removeMark({ type: 'link' })
editor.exec(command)

toggleMark()

Toggles a mark - adds it if not present, removes it if present.

Function Signature

function toggleMark(options: ToggleMarkOptions): Command

Parameters

options · ToggleMarkOptions · required

options.type · string | MarkType · required

The mark type to toggle

options.attrs · Attrs | null

The optional attributes to set on the mark

options.removeWhenPresent · boolean · default: "false"

Controls behavior when part of the selection has the mark and part doesn’t:

• true: remove the mark
• false: add the mark

options.enterInlineAtoms · boolean · default: "true"

Whether the command should act on the content of inline nodes marked as atoms that are completely covered by the selection

Return Value

command · Command

A ProseMirror command that returns true if the mark was successfully toggled, false otherwise.

Examples

Toggle Bold

import { toggleMark } from 'prosekit/core'

const command = toggleMark({ type: 'bold' })
editor.exec(command)

Toggle with Attributes

import { toggleMark } from 'prosekit/core'

// Toggle highlight with yellow color
const command = toggleMark({
  type: 'highlight',
  attrs: { color: 'yellow' }
})
editor.exec(command)

Custom Toggle Behavior

import { toggleMark } from 'prosekit/core'

// When partially selected, remove instead of add
const command = toggleMark({
  type: 'bold',
  removeWhenPresent: true
})
editor.exec(command)

expandMark()

Expands the current selection to include the full range of a mark.

Function Signature

function expandMark(options: ExpandMarkOptions): Command

Parameters

options · ExpandMarkOptions · required

options.type · string | MarkType · required

The type of mark to expand to

Return Value

command · Command

A ProseMirror command that returns true if the selection was successfully expanded, false otherwise.

Example

import { expandMark } from 'prosekit/core'

// Expand selection to cover the entire link
const command = expandMark({ type: 'link' })
editor.exec(command)

unsetMark()

Removes stored marks from the selection. This affects what marks will be applied to newly typed text.

Function Signature

function unsetMark(options: UnsetMarkOptions): Command

Parameters

options · UnsetMarkOptions · required

options.type · string | MarkType · required

The type of mark to unset

Return Value

command · Command

A ProseMirror command that returns true if the mark was successfully unset, false otherwise.

Example

import { unsetMark } from 'prosekit/core'

// Stop applying bold to newly typed text
const command = unsetMark({ type: 'bold' })
editor.exec(command)

Usage with Editor Commands

When you define marks in your extension, ProseKit automatically generates command actions on the editor:

import { createEditor, union } from 'prosekit/core'
import { defineBold, defineItalic, defineLink } from 'prosekit/extensions/mark'

const editor = createEditor({
  extension: union([
    defineBold(),
    defineItalic(),
    defineLink()
  ])
})

// Use generated command actions
editor.commands.toggleBold?.()
editor.commands.toggleItalic?.()
editor.commands.addLink?.({ href: 'https://example.com' })

// Check if command can execute
if (editor.commands.toggleBold?.canExec()) {
  console.log('Can toggle bold')
}

Common Patterns

Creating a Toolbar Button

import { toggleMark } from 'prosekit/core'

function BoldButton({ editor }) {
  const handleClick = () => {
    const command = toggleMark({ type: 'bold' })
    editor.exec(command)
  }
  
  const isActive = editor.marks.bold.isActive()
  
  return (
    <button 
      onClick={handleClick}
      className={isActive ? 'active' : ''}
    >
      Bold
    </button>
  )
}

Keyboard Shortcut Handler

import { defineKeymap } from 'prosekit/core'
import { toggleMark } from 'prosekit/core'

const keymap = defineKeymap({
  'Mod-b': () => toggleMark({ type: 'bold' }),
  'Mod-i': () => toggleMark({ type: 'italic' }),
  'Mod-u': () => toggleMark({ type: 'underline' })
})

Conditional Mark Application

import { addMark, removeMark } from 'prosekit/core'

function applyHighlight(editor, color: string) {
  // Remove any existing highlight first
  const removeCmd = removeMark({ type: 'highlight' })
  editor.exec(removeCmd)
  
  // Add new highlight with color
  const addCmd = addMark({
    type: 'highlight',
    attrs: { color }
  })
  editor.exec(addCmd)
}

See Also

• Node Commands - Commands for manipulating block nodes
• Selection Commands - Commands for manipulating selections
• defineMarkSpec - Define custom marks