@tiptap/extension-text-style

Apply Text Color

This feature allows you to apply a specific color to the text. The code sample demonstrates how to configure the TextStyle extension and apply a red color to the text.

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

const editor = new Editor({
  extensions: [
    TextStyle.configure({ types: ['textStyle'] }),
  ],
  content: '<p>Hello World!</p>',
});

// Apply text color
editor.chain().focus().setTextStyle({ color: '#ff0000' }).run();

Apply Background Color

This feature allows you to apply a background color to the text. The code sample demonstrates how to configure the TextStyle extension and apply a green background color to the text.

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

const editor = new Editor({
  extensions: [
    TextStyle.configure({ types: ['textStyle'] }),
  ],
  content: '<p>Hello World!</p>',
});

// Apply background color
editor.chain().focus().setTextStyle({ backgroundColor: '#00ff00' }).run();

Apply Font Size

This feature allows you to apply a specific font size to the text. The code sample demonstrates how to configure the TextStyle extension and apply a font size of 24px to the text.

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

const editor = new Editor({
  extensions: [
    TextStyle.configure({ types: ['textStyle'] }),
  ],
  content: '<p>Hello World!</p>',
});

// Apply font size
editor.chain().focus().setTextStyle({ fontSize: '24px' }).run();