React Text Marker

English | 简体中文

A React component for text highlighting and annotation with customizable themes and interactive features.

Features

• 🎨 Customizable highlight colors and themes
• 🖱️ Interactive text selection and highlighting
• ⌨️ Keyboard shortcuts support (Delete/Backspace to remove highlights)
• 🎯 Multiple highlight support with nested ranges
• 📱 Responsive design
• 🧪 Comprehensive test coverage
• 🔍 Customizable hint display
• 🎭 Theme-based highlighting
• ⚡ Real-time highlight updates

Installation

# Using npm
npm install react-text-maker

# Using yarn
yarn add react-text-maker

# Using pnpm
pnpm add react-text-maker

Usage

import { ReactTextMaker } from 'react-text-maker';
import 'react-text-maker/dist/style.css';

function App() {
  const [highlights, setHighlights] = useState([]);

  return (
    <ReactTextMaker
      text="Your text content here"
      hint="annotation"
      onChange={setHighlights}
      onMarkClick={(ids) => console.log('Clicked highlights:', ids)}
      onMarkAdd={(item) => console.log('Added highlight:', item)}
      onMarkRemove={(items) => console.log('Removed highlights:', items)}
    />
  );
}

Props

Prop	Type	Default	Description
text	string	required	The text content to be highlighted
hint	string	required	The hint text to be displayed with highlights
value	HighlightItem[]	[]	Array of highlight items
onChange	(items: HighlightItem[]) => void	-	Callback when highlights change
onMarkClick	(ids: string[]) => void	-	Callback when a highlight is clicked
onMarkAdd	(item: HighlightItem) => void	-	Callback when a highlight is added
onMarkRemove	(items: HighlightItem[]) => void | boolean	-	Callback when highlights are removed
disabled	boolean	false	Whether the component is disabled
className	string	-	Additional CSS class name
style	React.CSSProperties	-	Additional inline styles
theme	(string | { hint: string; color?: string })[]	DEFAULT_THEME	Array of color codes or theme objects for highlights
maxCount	number	-	Maximum number of highlights allowed
hintStyle	React.CSSProperties	-	Custom styles for hint text

HighlightItem Type

interface HighlightItem {
  id: string;           // Unique identifier for the highlight
  text: string;         // The highlighted text content
  hint: string;         // The hint text to display
  range: [number, number]; // Start and end indices of the highlight
  color: [number, number, number];       // rgb
}

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run tests
pnpm test

# Run tests with coverage
pnpm test:coverage

# Run tests with UI
pnpm test:ui

# Build
pnpm build

# Lint
pnpm lint

# Lint with auto-fix
pnpm lint:fix

Testing

The project uses Vitest and React Testing Library for testing. Run the following commands:

# Run tests
pnpm test

# Run tests with coverage
pnpm test:coverage

# Run tests with UI
pnpm test:ui

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT