React Simple Tiptap

A powerful, lightweight rich text editor component for React applications. Built with Tiptap and featuring a clean, intuitive interface for creating and editing formatted content.

Features

• 📝 Rich text formatting (bold, italic, underline, strikethrough)
• 📐 Text alignment (left, center, right, justify)
• 📋 Lists (bullet points, numbered lists)
• 🖼️ Image support with upload capabilities
• 🔗 Link management with popover interface
• 🎨 Text highlighting with color options
• ⚡ Keyboard shortcuts and hotkeys
• 📱 Mobile-responsive design
• 🎯 TypeScript support
• ♿ Accessibility features

Installation

npm install simple-text-editor

Peer Dependencies

Make sure you have React installed:

npm install react react-dom

Usage

Basic Usage

import { ReactSimpleTiptap } from "react-simple-tiptap";

import "react-simple-tiptap/styles";

interface Props {
  content: string;
  onContentUpdate: (content: string) => void;
}

export function App({ content, onContentUpdate }: Props) {
   const [content, setContent] = useState("<p>Hello world!</p>");

  return (
    <ReactSimpleTiptap content={content} onContentUpdate={setContent} />
  );
}


## Props

| Prop       | Type                        | Default | Description                         |
| ---------- | --------------------------- | ------- | ----------------------------------- |
| `content`    | `string`                    | `""`    | HTML content of the editor          |
| `onContentUpdate` | `(content: string) => void` | -       | Callback fired when content changes |

## Styling

Dark mode and light mode are supported out of the box. The editor also comes with default styles, but you can customize it by importing your own CSS.

## Keyboard Shortcuts

- **Bold**: `Cmd/Ctrl + B`
- **Italic**: `Cmd/Ctrl + I`
- **Underline**: `Cmd/Ctrl + U`
- **Link**: `Cmd/Ctrl + K`
- **Undo**: `Cmd/Ctrl + Z`
- **Redo**: `Cmd/Ctrl + Shift + Z`
- **Bullet List**: `Cmd/Ctrl + Shift + 8`
- **Ordered List**: `Cmd/Ctrl + Shift + 7`

## Development

### Setup

```bash
git clone <your-repo-url>
cd simple-text-editor
npm install

Development Server

npm run dev

This starts a development server at http://localhost:3001 where you can test the component.

Building

npm run build

Type Checking

npm run type-check

Credits

This editor is based on the Tiptap Simple Editor Template. Tiptap is an amazing headless editor built on top of ProseMirror.

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please file an issue on GitHub.