Color extension

This extension enables you to set the font color in the editor. It uses the TextStyle mark, which renders a <span> tag (and only that). The font color is applied as inline style then, for example <span style="color: #958DF1">.

Install

npm install @tiptap/extension-text-style

This extension requires the TextStyle mark.

import { Editor } from '@tiptap/core' import { TextStyle, Color } from '@tiptap/extension-text-style'  new Editor({  extensions: [TextStyle, Color], })

This extension is installed by default with the TextStyleKit extension, so you don’t need to install it separately.

import { Editor } from '@tiptap/core' import { TextStyleKit } from '@tiptap/extension-text-style'  new Editor({  extensions: [TextStyleKit], })

Settings

types

A list of marks to which the color attribute should be applied to.

Default: ['textStyle']

Color.configure({  types: ['textStyle'], })

Commands

setColor()

Applies the given font color as inline style.

editor.commands.setColor('#ff0000')

unsetColor()

Removes any font color.

editor.commands.unsetColor()

Source code

packages/extension-text-style/src/color/

Minimal Install

import { Editor } from '@tiptap/core' import { Color } from '@tiptap/extension-text-style/color'  new Editor({  extensions: [Color], })