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

npm install qpien-chat-text-formatter

Usage

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 <ChatTextFormatter text={text} />;
}

Formatting Syntax

Text Formatting

• Bold: *text* → text
• Italic: _text_ → text
• Strikethrough: ~text~ → ~~text~~
• Monospace: ```text``` → text

Lists

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. 

URLs

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!

Using the Preview

1. Open demo/preview.html in your browser:

   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

Example Tests Available in Preview:

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

Configuration

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

Recent Updates

Version 1.0.1 (Latest)

• ✅ 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

Bug Fixes

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

Build

npm run build

Test

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

License

MIT

Author

Akif(demirelakif) - [email protected]