@indoui/react-text-editor

A powerful, feature-rich React text editor built on Tiptap with MS Word-like capabilities.

Features

- 📝 Rich Text Editing - Bold, italic, underline, strikethrough, subscript, superscript
- 🎨 Text Styling - Font sizes, text colors, highlight colors
- 📋 Formatting - Headings (H1-H3), blockquotes, code blocks
- 📑 Lists - Bullet lists, ordered lists
- 🔗 Links - Insert and edit hyperlinks
- 🖼️ Media - Images (upload/URL), YouTube videos
- 📊 Tables - Full table support with resizable columns
- ↔️ Text Alignment - Left, center, right, justify
- ↩️ History - Undo/Redo support
- 🌙 Theming - Light/Dark theme with localStorage sync
- 📏 Resizable - Adjustable editor height with drag handle
- 🔧 Customizable - Modular toolbar configuration

Installation

``bash
npm install @indoui/react-text-editor

or

yarn add @indoui/react-text-editor

or

pnpm add @indoui/react-text-editor
`

Quick Start

`tsx
import { TextEditor } from '@indoui/react-text-editor';
import '@indoui/react-text-editor/styles.css';

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

return (
value={content}
onChange={setContent}
placeholder="Start typing..."
/>
);
}
`

Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | string | '' | HTML content (controlled) |
| onChange | (html: string) => void | - | Callback when content changes |
| placeholder | string | 'Start typing...' | Placeholder text |
| disabled | boolean | false | Disable the editor |
| autoFocus | boolean | false | Auto focus on mount |
| className | string | '' | Custom class name |
| minHeight | string \| number | 200 | Minimum height |
| maxHeight | string \| number | - | Maximum height (enables scrolling) |
| height | string \| number | - | Initial height |
| minWidth | string \| number | 200 | Minimum width |
| maxWidth | string \| number | - | Maximum width |
| width | string \| number | - | Initial width |
| resizable | boolean | false | Enable resize handle |
| theme | 'light' \| 'dark' | auto | Theme override |
| toolbar | ToolbarConfig | all enabled | Toolbar configuration |

Toolbar Configuration

You can customize which toolbar buttons are shown:

`tsx
value={content}
onChange={setContent}
toolbar={{
bold: true,
italic: true,
underline: true,
strikethrough: false, // Hide strikethrough
subscript: false,
superscript: false,
bulletList: true,
orderedList: true,
headings: true,
textAlign: true,
link: true,
image: true,
video: false, // Hide video button
table: true,
fontSize: true,
textColor: true,
highlight: true,
blockquote: true,
codeBlock: true,
horizontalRule: true,
history: true,
}}
/>
`

Resizable Height

Enable the resize handle to let users adjust editor height:

`tsx
value={content}
onChange={setContent}
resizable={true}
minHeight={200}
maxHeight={600}
/>
`

Theming

The editor automatically syncs with localStorage.getItem('theme'). You can also override it:

`tsx
// Auto theme (from localStorage)


// Force light theme


// Force dark theme

`

$3

`tsx
import { setTheme, toggleTheme, useTheme } from '@indoui/react-text-editor';

// Programmatically set theme
setTheme('dark');

// Toggle between light/dark
toggleTheme();

// React hook for current theme
const theme = useTheme();
`

Advanced Usage

$3

`tsx
import {
TextEditor,
Toolbar,
ToolbarButton,
FontSize,
} from '@indoui/react-text-editor';
`

$3

`tsx
const [html, setHtml] = useState('');

value={html}
onChange={(newHtml) => {
setHtml(newHtml);
console.log('HTML output:', newHtml);
}}
/>
`

Building from Source

If you want to build the library yourself:

`bash

Clone the repository

git clone https://github.com/indoui/react-text-editor.git
cd react-text-editor

Install dependencies

npm install

Build the library

npm run build:lib

The output will be in the dist/ folder

`

TypeScript Support

Full TypeScript support with exported types:

`tsx
import type {
TextEditorProps,
ToolbarConfig,
EditorTheme
} from '@indoui/react-text-editor';
``

Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

License

MIT © IndoUI