Skip to main content
The Text Color extension adds support for customizing text color with commands for adding and removing color.

​
Installation

npm install @prosekit/extensions

​
Usage

Add the text color extension to your editor: 
import { defineTextColor } from '@prosekit/extensions/text-color'
import { createEditor } from '@prosekit/core'

const editor = createEditor({
  extensions: [
    // ... other extensions
    defineTextColor(),
  ],
})

​
API Reference

​
defineTextColor()

Defines the textColor mark and commands for adding and removing text color. Returns: TextColorExtension

​
Commands

​
addTextColor

Applies a text color to the current selection or at the cursor position. 
editor.commands.addTextColor({ color: '#ff0000' })
Parameters:
  • attrs: TextColorAttrs - Object with a color property
    • color: string - Any valid CSS color value (hex, rgb, rgba, color name, etc.)

​
removeTextColor

Removes text color formatting from the current selection. 
editor.commands.removeTextColor()

​
TypeScript Types

​
TextColorAttrs

Attributes for the textColor mark. 
interface TextColorAttrs {
  color: string
}

​
HTML Output

Text color is rendered as <span> elements with both inline styles and data attributes: 
<span style="color: #ff0000;" data-text-color="#ff0000">Colored text</span>

​
Parsing

The extension recognizes elements with:
  • style="color: [value]" attribute
  • data-text-color="[value]" attribute (takes priority)
The extension uses data-text-color attribute to preserve exact color values, avoiding browser conversion of hex colors to rgba format.
Colors set to "inherit" are ignored during parsing.

​
Example: Color Picker Integration

Here’s an example of integrating a color picker: 
import { defineTextColor } from '@prosekit/extensions/text-color'
import { createEditor } from '@prosekit/core'

const editor = createEditor({
  extensions: [defineTextColor()],
})

// Apply color from a color picker
function handleColorChange(color: string) {
  editor.commands.addTextColor({ color })
}

// Remove color
function handleColorRemove() {
  editor.commands.removeTextColor()
}

​
Supported Color Formats

The extension accepts any valid CSS color value:
  • Hex: #ff0000, #f00
  • RGB: rgb(255, 0, 0)
  • RGBA: rgba(255, 0, 0, 0.5)
  • HSL: hsl(0, 100%, 50%)
  • Named colors: red, blue, etc.

​
Advanced Configuration

If you need more control, you can use the individual components: 
import { 
  defineTextColorSpec,
  defineTextColorCommands,
  addTextColor,
  removeTextColor
} from '@prosekit/extensions/text-color'

const editor = createEditor({
  extensions: [
    defineTextColorSpec(),      // Just the mark definition
    defineTextColorCommands(),  // Just the commands
  ],
})

// Use the command functions directly
addTextColor({ color: '#00ff00' })(editor.state, editor.dispatch)