npm package: @indoui/react-text-editor
Description: A powerful, feature-rich React text editor built on Tiptap with MS Word-like capabilities
Author: IndoUI
Latest version: 1.1.5

# @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 (
    <TextEditor
      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
<TextEditor
  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
<TextEditor
  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)
<TextEditor value={content} onChange={setContent} />

// Force light theme
<TextEditor value={content} onChange={setContent} theme="light" />

// Force dark theme
<TextEditor value={content} onChange={setContent} theme="dark" />
```

### Theme Utilities

```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

### Access Individual Components

```tsx
import { 
  TextEditor,
  Toolbar,
  ToolbarButton,
  FontSize,
} from '@indoui/react-text-editor';
```

### Get HTML Output

```tsx
const [html, setHtml] = useState('');

<TextEditor
  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