@tiptap/extension-text-style

What is @tiptap/extension-text-style?

@tiptap/extension-text-style is an extension for the Tiptap editor that allows you to apply various text styles to your content. It provides a flexible way to add custom styles to text, such as color, background color, font size, and more.

What are @tiptap/extension-text-style's main functionalities?

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();

Other packages similar to @tiptap/extension-text-style

draft-js

Draft.js is a rich text editor framework for React. It provides a set of tools to create and manage text styles, including color, font size, and background color. Compared to @tiptap/extension-text-style, Draft.js offers a more comprehensive set of features for building rich text editors but requires more setup and configuration.

quill

Quill is a powerful, free, open-source WYSIWYG editor built for the modern web. It offers a wide range of text styling options, including color, background color, and font size. Quill is more feature-rich out of the box compared to @tiptap/extension-text-style, but it may be less flexible for custom extensions.

slate

Slate is a completely customizable framework for building rich text editors. It allows you to define your own text styles and behaviors. While Slate offers more flexibility and control compared to @tiptap/extension-text-style, it also requires a deeper understanding of its API and more effort to implement custom styles.

README

@tiptap/extension-text-style

Introduction

tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Offical Documentation

Documentation can be found on the tiptap website.

License

tiptap is open sourced software licensed under the MIT license.