@tiptap/extension-heading

What is @tiptap/extension-heading?

@tiptap/extension-heading is an extension for the Tiptap text editor that allows you to add and manage heading elements in your rich text content. It provides a straightforward way to include headings of various levels (e.g., H1, H2, H3) in your editor, making it easier to structure and format your text.

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

Add Heading

This feature allows you to add heading elements to your Tiptap editor. You can configure which heading levels are available (e.g., H1, H2, H3).

const editor = new Editor({
  extensions: [
    Heading.configure({
      levels: [1, 2, 3],
    }),
  ],
})

Set Heading Level

This feature allows you to set the heading level for a selected text. In this example, the selected text is set to a level 2 heading (H2).

editor.chain().focus().toggleHeading({ level: 2 }).run()

Check Heading Level

This feature allows you to check if the current selection is a heading of a specific level. In this example, it checks if the selection is an H1 heading.

const isHeading = editor.isActive('heading', { level: 1 })

Other packages similar to @tiptap/extension-heading

prosemirror-schema-basic

prosemirror-schema-basic provides a basic schema for ProseMirror, including heading nodes. It is more low-level compared to @tiptap/extension-heading and requires more manual setup.

draft-js

draft-js is a rich text editor framework for React. It includes support for headings, but the API and configuration are different from Tiptap. It is more integrated with React and offers a different set of features.

quill

quill is a modern WYSIWYG editor built for compatibility and extensibility. It supports headings out of the box and offers a different user experience and API compared to Tiptap.

README

@tiptap/extension-heading

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.