React TipTap Rich Text Editor

A highly customizable rich text editor for React applications built on top of TipTap. Features a modern UI, dark mode support, and extensive formatting options.

Table of Contents

• React TipTap Rich Text Editor
  • Table of Contents
  • Overview
  • Features
  • Demo
  • Installation
• Using npm
• Using yarn
• Using pnpm
  • Usage
  • Props
  • Customization
    • Toolbar Buttons
    • Custom Theme
    • Custom Extensions
  • Examples
    • Basic Text Formatting
    • As a Form Field
  • Styling
  • Contributing
    • Writing Tests
    • Development Setup
  • License
  • Acknowledgements
  • Support

Overview

This rich text editor provides a powerful, extensible editing experience with a clean, modern interface. Built using TipTap and React, it offers a wide range of formatting options and features while maintaining excellent performance and reliability.

Features

• 📝 Rich Text Formatting
  • Bold, Italic, Underline, Strikethrough
  • Superscript and Subscript
  • Text Color with Color Picker
  • Text Alignment
  • Headings (H1, H2)
  • Lists (Ordered, Unordered, Task Lists)
  • Code Blocks with Syntax Highlighting
  • Blockquotes
  • Tables with Column Resizing
• 🎨 Advanced Features
  • Image Upload and Resizing
  • Link Management
  • Table Management
  • Code Block with Language Selection
• 🌓 Theme Support
  • Light/Dark Mode
  • System Theme Detection
  • Customizable Styles
• 💪 Technical Features
  • TypeScript Support
  • Responsive Design
  • Accessible
  • Customizable via Props
  • Extensible Architecture

Demo

Installation

This package requires React 18 and Tailwind CSS as peer dependencies.

Using npm

npm install @nishant_verma/rich-editor

Using yarn

yarn add @nishant_verma/rich-editor

Using pnpm

pnpm add @nishant_verma/rich-editor

Usage

Basic usage:

Don't forget to import the styles:

import { RichEditor } from '@nishant_verma/rich-editor';
import '@nishant_verma/rich-editor/dist/styles.css';

function App() {
  return (
    <RichEditor
      content="Hello, world!"
      onUpdate={({ editor }) => {
        const html = editor.getHTML();
        console.log(html);
      }}
    />
  );
}

With all options:

import { RichEditor } from '@nishant_verma/rich-editor';
import '@nishant_verma/rich-editor/dist/styles.css';

function App() {
  return (
    <RichEditor
      content="Initial content"
      placeholder="Start writing..."
      editable={true}
      autofocus={true}      
      className="custom-editor"
      theme={{
        colors: {
          primary: '#3b82f6',
          background: '#ffffff',
          text: '#1f2937'
        }
      }}
      toolbarButtons={['bold', 'italic', 'underline', 'link']}
      showWordCount={true}
      maxLength={5000}
      showToolbar={true}
      onUpdate={({ editor }) => {
        // Handle content updates
      }}
      onBlur={({ editor }) => {
        // Handle blur events
      }}
      onFocus={({ editor }) => {
        // Handle focus events
      }}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | string | '' | Initial content of the editor | | placeholder | string | 'Start writing...' | Placeholder text when editor is empty | | editable | boolean | true | Whether the editor is editable | | autofocus | boolean | false | Whether to focus the editor on mount | | className | string | '' | Additional CSS classes for editor | | toolbarClassName | String | '' | Additional Css for toolbar | | theme | ThemeConfig | undefined | Custom theme configuration | | toolbarButtons | ToolbarButton[] | all buttons | Array of toolbar buttons to show | | extensions | Extension[] | [] | Custom TipTap extensions | | showWordCount | boolean | false | Show word count at bottom | | maxLength | number | undefined | Maximum character limit | | showToolbar | boolean | true | Whether to show the toolbar | | onUpdate | function | undefined | Callback when content changes | | onBlur | function | undefined | Callback when editor loses focus | | onFocus | function | undefined | Callback when editor gains focus |

Customization

Toolbar Buttons

You can customize which toolbar buttons are shown:

<RichEditor
  toolbarButtons={[
    'undo', 'redo', 'bold', 'italic', 'underline', 
    'bulletList', 'orderedList', 'link', 'image'
  ]}
/>

Available buttons: undo, redo, heading, bold, italic, underline, strikethrough, highlight, superscript, subscript, bulletList, orderedList, taskList, alignLeft, alignCenter, alignRight, alignJustify, code, codeBlock, blockquote, textColor, link, image, table, findReplace

Custom Theme

<RichEditor
  theme={{
    colors: {
      primary: '#3b82f6',
      secondary: '#6b7280',
      background: '#ffffff',
      text: '#1f2937',
      border: '#e5e7eb',
      toolbar: '#f9fafb'
    },
    fonts: {
      body: 'Inter, sans-serif',
      code: 'Monaco, monospace'
    },
    spacing: {
      padding: '1rem',
      margin: '0.5rem'
    }
  }}
/>

Custom Extensions

import { RichEditor, EmbedExtension } from '@nishant_verma/rich-editor';
import MyCustomExtension from './MyCustomExtension';

<RichEditor
  extensions={[
    EmbedExtension,
    MyCustomExtension.configure({
      // extension options
    })
  ]}
/>

Examples

Basic Text Formatting

<RichEditor
  content="<p>Hello <strong>world</strong>!</p>"
  onUpdate={({ editor }) => {
    console.log(editor.getHTML());
  }}
/>

As a Form Field

function Form() {
  const [content, setContent] = useState('');

  return (
    <form onSubmit={handleSubmit}>
      <RichEditor
        content={content}
        onUpdate={({ editor }) => {
          setContent(editor.getHTML());
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Styling

The editor uses Tailwind CSS for styling. You can customize the appearance by:

1. Overriding the default classes
2. Using the className prop
3. Modifying the CSS variables

.rich-editor {
  --editor-background: #ffffff;
  --editor-text-primary: #000000;
  /* ... other variables */
}

.rich-editor-content {
  background-color: #fff;
  color: black;
}

.rich-editor-toolbar {
  background-color: white;
  color: blue;
}

Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a new branch: git checkout -b feature/your-feature
3. Make your changes
4. Run tests: npm test
5. Commit your changes: git commit -m 'Add some feature'
6. Push to the branch: git push origin feature/your-feature
7. Submit a pull request

Writing Tests

The project uses Vitest and React Testing Library for testing. To run tests:

When contributing, please ensure your changes include appropriate tests. See the src/__tests__ directory for examples.

npm test

To run tests in watch mode:

npm test:watch

To run tests with coverage:

npm test:coverage

Development Setup

# Clone the repository
git clone https://github.com/nishant9083/rich-editor.git

# Install dependencies
npm install

# Start development server
npm run start

# Run tests
npm test

# Build for production
npm run build

License

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

Acknowledgements

• TipTap - The headless editor framework
• React - The UI library
• Tailwind CSS - For styling
• Lucide Icons - For the editor icons
• All the contributors who have helped improve this project

Support

• Report bugs on our issue tracker
• Feel free to raise issue for new features

Built with ❤️ by Nishant Verma