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.
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.
-
📝 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
This package requires React 18 and Tailwind CSS as peer dependencies.
npm install @nishant_verma/rich-editor
yarn add @nishant_verma/rich-editor
pnpm add @nishant_verma/rich-editor
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
}}
/>
);
}| 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 |
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
<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'
}
}}
/>import { RichEditor, EmbedExtension } from '@nishant_verma/rich-editor';
import MyCustomExtension from './MyCustomExtension';
<RichEditor
extensions={[
EmbedExtension,
MyCustomExtension.configure({
// extension options
})
]}
/><RichEditor
content="<p>Hello <strong>world</strong>!</p>"
onUpdate={({ editor }) => {
console.log(editor.getHTML());
}}
/>function Form() {
const [content, setContent] = useState('');
return (
<form onSubmit={handleSubmit}>
<RichEditor
content={content}
onUpdate={({ editor }) => {
setContent(editor.getHTML());
}}
/>
<button type="submit">Submit</button>
</form>
);
}The editor uses Tailwind CSS for styling. You can customize the appearance by:
- Overriding the default classes
- Using the
classNameprop - 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;
}We welcome contributions! Please follow these steps:
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature - Make your changes
- Run tests:
npm test - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin feature/your-feature - Submit a pull request
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 testTo run tests in watch mode:
npm test:watchTo run tests with coverage:
npm test:coverage# 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 buildThis project is licensed under the MIT License - see the LICENSE file for details.
- 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
- Report bugs on our issue tracker
- Feel free to raise issue for new features
Built with ❤️ by Nishant Verma