@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.

Offical Documentation

Documentation can be found on the tiptap website.

License

tiptap is open-sourced software licensed under the MIT license.