@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