Paragraph

Create paragraph nodes for standard text blocks in your editor.

The Paragraph extension allows you to create paragraph nodes. It’s one of the most basic and essential nodes for any editor.

Installation

npm

npm install @tiptap/extension-paragraph

Usage

The Paragraph extension is included in the StarterKit by default:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [StarterKit],
})

To use it standalone:

import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

const editor = new Editor({
  extensions: [
    Document,
    Paragraph,
    Text,
  ],
})

Configuration

HTMLAttributes

Custom HTML attributes to add to the rendered paragraph element.

HTMLAttributes · Record<string, any> · default: "{}"

Custom HTML attributes that should be added to the rendered HTML tag.

Paragraph.configure({
  HTMLAttributes: {
    class: 'my-paragraph',
  },
})

Commands

setParagraph

Converts the current node to a paragraph.

editor.commands.setParagraph()

Keyboard Shortcuts

• Mod-Alt-0: Convert current node to paragraph

Source Code

View the source code on GitHub:

packages/extension-paragraph/src/paragraph.ts