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.
@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.
Official Documentation
Documentation can be found on the Tiptap website.
License
Tiptap is open sourced software licensed under the MIT license.