What is @tiptap/extension-bold?
@tiptap/extension-bold is an extension for the Tiptap editor that allows you to add bold formatting to your text. It provides a simple way to toggle bold styling on and off within the Tiptap rich-text editor.
What are @tiptap/extension-bold's main functionalities?
Add Bold Formatting
This code demonstrates how to add the Bold extension to a Tiptap editor instance. The Bold extension is imported and included in the editor's extensions array, enabling bold formatting in the editor.
import { Bold } from '@tiptap/extension-bold';
import { Editor } from '@tiptap/core';
const editor = new Editor({
extensions: [
Bold,
],
content: '<p>Hello World!</p>',
});
Toggle Bold Formatting
This code shows how to programmatically toggle bold formatting on the selected text in the Tiptap editor. The `toggleBold` command is chained with `focus` to ensure the editor is focused before applying the bold formatting.
editor.chain().focus().toggleBold().run();
Other packages similar to @tiptap/extension-bold
prosemirror-example-setup
The `prosemirror-example-setup` package provides a set of example configurations for ProseMirror, including bold formatting. It is more general-purpose and requires more setup compared to @tiptap/extension-bold, which is specifically designed for Tiptap.
draft-js
Draft.js is a rich text editor framework for React that includes built-in support for bold formatting. It offers a more comprehensive solution for building rich text editors but may require more configuration and customization compared to the straightforward @tiptap/extension-bold.
quill
Quill is a powerful, open-source WYSIWYG editor that supports bold formatting out of the box. It provides a more feature-rich editor experience but is a standalone editor, unlike @tiptap/extension-bold, which is an extension for the Tiptap editor.