QPIEN Chat Text Formatter

Custom text formatter for chat messages with support for italic, bold, strikethrough, monospace, URLs, and lists.

Features

- ✨ Text Formatting: Italic, bold, strikethrough, and monospace
- 🔗 Auto URL Detection: Automatically detects and links URLs
- 📝 Lists: Both bulleted and numbered lists (including empty list items)
- ⚛️ React Component: Easy to integrate into React applications
- 🎨 Customizable: Configure link behavior and styling
- 🧪 Interactive Preview: Test your formatting in real-time

Installation

``bash
npm install qpien-chat-text-formatter
`

Usage

`tsx
import { ChatTextFormatter } from 'qpien-chat-text-formatter';

function MyComponent() {
const text =
Bold text and _italic text_

Features:
* First feature
* Second feature

Steps:
1. First step
2. Second step
;

return ;
}
`

Formatting Syntax

$3


- Bold: text → text
- Italic: _text_ → _text_
- Strikethrough: ~text~ → ~~text~~
- Monospace: `text` → text

$3

#### Bulleted Lists
`
* First item
* Second item
* Third item
`

You can also use hyphens:
`
- First item
- Second item
- Third item
`

Note: Empty list items are now supported (fixed!)
`
*
* Item with text
*
`

#### Numbered Lists
`
1. First step
2. Second step
3. Third step
`

Note: Empty numbered items are also supported
`
1.
2. Step with text
3.
`

$3


URLs are automatically detected and linked:
`
Visit https://example.com for more info
`

Interactive Preview

We've included an interactive preview page where you can test all formatting features in real-time!

$3

1. Open demo/preview.html in your browser:
`bash
open demo/preview.html
`

2. Features of the preview:
- 📝 Live Editing: Type or paste text and see instant formatting
- 🎨 Pre-loaded Examples: Click example cards to load different formatting patterns
- 📊 Statistics: See character, word, and line counts
- 🎯 Side-by-side View: Input on the left, formatted output on the right

$3

- ✨ Basic Formatting
- 📝 Lists (bulleted and numbered)
- ⚠️ Empty Lists (testing the fix)
- 🔗 URLs
- 🎨 Mixed Content
- 🚀 Complex Examples

Configuration

`tsx
text="Your text here"
config={{
linkTarget: '_blank', // Default: '_blank'
linkRel: 'noopener noreferrer' // Default: 'noopener noreferrer'
}}
className="custom-class"
style={{ / custom styles / }}
/>
`

Recent Updates

$3


- ✅ Fixed: Bulleted and numbered lists now support empty items
- ✅ Fixed: Regex patterns updated from .+ to .* to match empty content
- ✅ Added: Interactive preview/test page (demo/preview.html)
- ✅ Added: Comprehensive example library in preview
- ✅ Improved: Better error handling for edge cases

$3

The package had issues with list parsing where:
- Lists with empty items (* or 1. with no text) were not recognized
- Regex patterns required at least one character (.+)

Solution: Updated regex patterns to use (.*) instead of (.+) and added null-coalescing operators for safety.

Development

$3


`bash
npm run build
`

$3

Open demo/preview.html` in your browser to test changes interactively.

License

MIT

Author

Akif(demirelakif) - demirel.akif@hotmail.com