Tiptap Next Support

A modern and feature-rich rich text editor component built with Tiptap and React, providing a seamless integration experience.

Credit

• Code from ndtrung341/next-tiptap

Features

• Rich text formatting with support for:
  • Bold, italic, underline, and strikethrough
  • Lists (ordered and unordered)
  • Code blocks with syntax highlighting
  • Tables
  • Images with captions
  • Links
  • Subscript and superscript
  • Text alignment
  • Character count
• Customizable UI components:
  • Menu bar
  • Status bar
  • Bubble menu
• Responsive design with Tailwind CSS
• Media library integration
• Customizable editor dimensions
• Placeholder text support
• Color highlighting
• Character count tracking
• Table editing capabilities
• Image upload support
• Antd form support

Installation

npm install tiptap-next-support

Usage

import { TiptapEditor } from 'tiptap-next-support';

function App() {
  return (
    <TiptapEditor
      placeholder={{
        paragraph: 'Type something...',
        imageCaption: 'Enter image caption'
      }}
    />
  );
}

Props

The TiptapEditor component accepts the following props:

• ssr: Enable server-side rendering (default: false)
• readonly: Make editor read-only
• disabled: Disable editor
• value: Initial editor content
• placeholder: Custom placeholder text
• output: Output format ('html' or 'json')
• hideMenuBar: Hide menu bar
• hideStatusBar: Hide status bar
• hideBubbleMenu: Hide bubble menu
• containerClass: Custom container class
• menuBarClass: Custom menu bar class
• contentClass: Custom content class
• contentMinHeight: Minimum content height
• contentMaxHeight: Maximum content height
• onChange: Callback for content changes
• primaryColor: Custom primary color
• aria-invalid: Set aria-invalid attribute to true when content is invalid (antd form)
• mediaLibrary: Support images upload, search and delete

License

This project is licensed under the MIT License - see the LICENSE file for details.