@tiptap/extension-paragraph

What is @tiptap/extension-paragraph?

@tiptap/extension-paragraph is an extension for the Tiptap editor that provides support for paragraph nodes. It allows you to define and manipulate paragraphs within the Tiptap rich-text editor, enabling you to create, format, and manage text content in a structured way.

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

Basic Paragraph Node

This code demonstrates how to include the Paragraph extension in a Tiptap editor instance. It allows the editor to recognize and handle paragraph nodes.

import { Paragraph } from '@tiptap/extension-paragraph';

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

Custom Paragraph Attributes

This code shows how to extend the Paragraph extension to add custom attributes. In this example, a custom attribute named 'customAttribute' is added to the paragraph node.

import { Paragraph } from '@tiptap/extension-paragraph';

const CustomParagraph = Paragraph.extend({
  addAttributes() {
    return {
      customAttribute: {
        default: null,
      },
    };
  },
});

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

Custom Paragraph Styling

This code demonstrates how to extend the Paragraph extension to apply custom styling. The 'renderHTML' method is overridden to add a custom CSS class to the paragraph element.

import { Paragraph } from '@tiptap/extension-paragraph';

const CustomParagraph = Paragraph.extend({
  renderHTML({ HTMLAttributes }) {
    return ['p', { ...HTMLAttributes, class: 'custom-paragraph' }, 0];
  },
});

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

Other packages similar to @tiptap/extension-paragraph

prosemirror-schema-basic

The 'prosemirror-schema-basic' package provides a basic schema for ProseMirror, including paragraph nodes. It is similar to @tiptap/extension-paragraph in that it defines the structure and behavior of paragraph nodes, but it is more low-level and requires more manual setup compared to Tiptap's extension.

draft-js

Draft.js is a rich text editor framework for React, developed by Facebook. It includes support for paragraph nodes and other text formatting features. While it offers similar functionality to @tiptap/extension-paragraph, Draft.js is a more comprehensive framework with a different architecture and API.

quill

Quill is a powerful, open-source WYSIWYG editor that supports paragraph nodes and various text formatting options. It provides a user-friendly interface and a rich set of features, making it comparable to @tiptap/extension-paragraph in terms of functionality, but with a different approach to customization and extension.

README

@tiptap/extension-paragraph

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.1.4 (2023-08-18)

Bug Fixes

• replace the whole node in nodeInputRule (#4341) (ffeefe2)