@tiptap/extension-color

What is @tiptap/extension-color?

@tiptap/extension-color is an extension for the Tiptap editor that allows users to apply color to text. It provides a straightforward way to add color functionality to your Tiptap editor setup, enabling users to change the text color through a user-friendly interface.

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

Add Color to Text

This feature allows you to add color to text within the Tiptap editor. The code sample demonstrates how to configure the Color extension and apply a red color to the text.

import { Color } from '@tiptap/extension-color';
import { Editor } from '@tiptap/core';

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

editor.chain().focus().setColor('#ff0000').run();

Remove Color from Text

This feature allows you to remove color from text within the Tiptap editor. The code sample demonstrates how to configure the Color extension and remove the color from the text.

import { Color } from '@tiptap/extension-color';
import { Editor } from '@tiptap/core';

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

editor.chain().focus().unsetColor().run();

Other packages similar to @tiptap/extension-color

quill

Quill is a powerful, rich text editor that provides extensive formatting options, including text color. It offers a more comprehensive set of features compared to @tiptap/extension-color, but it may be more complex to integrate if you only need basic color functionality.

draft-js

Draft.js is a framework for building rich text editors in React. It includes support for text color and other formatting options. While it is highly customizable, it requires more setup and configuration compared to @tiptap/extension-color.

slate

Slate is another rich text editor framework for React that supports text color and other formatting options. It is highly flexible and customizable, but it has a steeper learning curve compared to @tiptap/extension-color.

README

@tiptap/extension-color

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.

Changelog

2.2.2 (2024-02-07)

Bug Fixes

• react: use ref instead of state in useEditor to prevent rerenders (#4856) (56a5737)