@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

npm install @indoui/react-text-editor
# or
yarn add @indoui/react-text-editor
# or
pnpm add @indoui/react-text-editor

Quick Start

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:

<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:

<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:

// 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

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

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

Get HTML Output

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:

# 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:

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

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT © IndoUI