TextStyle extension

This mark renders a <span> HTML tag and enables you to add a list of styling related attributes, for example font-family, font-size, or color. The extension doesn’t add any styling attribute by default, but other extensions use it as the foundation, for example FontFamily or Color.

Apply font sizes

TextStyle provides the <span> mark, while extensions such as FontSize add specific style attributes. Install the text-style package and include both extensions in an editor with a document schema, such as the one provided by StarterKit:

npm install @tiptap/extension-text-style @tiptap/starter-kit

import { Editor } from '@tiptap/core'
import { TextStyle, FontSize } from '@tiptap/extension-text-style'
import StarterKit from '@tiptap/starter-kit'

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

editor.chain().focus().setFontSize('18px').run()

The command renders the selected text as a span with an inline font-size: 18px style.

Install

npm install @tiptap/extension-text-style

Commands

removeEmptyTextStyle()

Remove <span> tags without an inline style.

editor.command.removeEmptyTextStyle()

Source code

packages/extension-text-style/