TextStyle

Add inline styling to text with the TextStyle mark.

The TextStyle extension provides a foundation for applying inline styles to text. It’s required by other extensions like Color, FontFamily, and FontSize. This extension renders as a <span> element with inline styles.

Installation

npm

npm install @tiptap/extension-text-style

Usage

import { Editor } from '@tiptap/core'
import TextStyle from '@tiptap/extension-text-style'

const editor = new Editor({
  extensions: [
    TextStyle,
  ],
})

Configuration Options

HTMLAttributes · Record<string, any> · default: "{}"

HTML attributes to add to the span element.

TextStyle.configure({
  HTMLAttributes: {
    class: 'my-text-style',
  },
})

mergeNestedSpanStyles · boolean · default: "true"

When enabled, merges the styles of nested spans into the child span during HTML parsing. This prioritizes the style of the child span and is used when parsing content created in other editors.

TextStyle.configure({
  mergeNestedSpanStyles: false,
})

Commands

toggleTextStyle(attributes?)

Toggle a text style with the specified attributes.

editor.commands.toggleTextStyle({ fontWeight: 'bold' })

removeEmptyTextStyle()

Remove spans without inline style attributes.

editor.commands.removeEmptyTextStyle()

Usage with Other Extensions

The TextStyle extension is typically used as a foundation for other styling extensions:

import { Editor } from '@tiptap/core'
import TextStyle from '@tiptap/extension-text-style'
import { Color } from '@tiptap/extension-color'
import { FontFamily } from '@tiptap/extension-font-family'

const editor = new Editor({
  extensions: [
    TextStyle,
    Color,
    FontFamily,
  ],
})

// These extensions rely on TextStyle
editor.commands.setColor('#ff0000')
editor.commands.setFontFamily('Comic Sans MS')

Technical Details

• Priority: 101 (higher than most other marks to ensure proper style application)
• HTML Element: Renders as <span> with inline styles
• Parsing: Only parses <span> elements that have a style attribute
• Nested Spans: By default, merges styles from nested spans up to 20 levels deep

Source Code

View the source code on GitHub:

• packages/extension-text-style