@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.