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
• 🇹🇷 Turkish Locale Support: Proper Turkish character capitalization with capitalizeFirst() utility
• 📏 Correct Line Spacing: Fixed double line break issue for accurate spacing

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'
    locale: 'tr-TR'  // Optional: For Turkish locale support (affects capitalization if needed)
  }}
  className="custom-class"
  style={{ /* custom styles */ }}
/>

Turkish Locale Support

Using capitalizeFirst() Utility

The package exports a capitalizeFirst() function for proper Turkish character capitalization:

import { capitalizeFirst } from 'qpien-chat-text-formatter';

// Turkish capitalization (proper handling of i, ı, ğ, ş, ç, ö, ü)
const text1 = capitalizeFirst('istanbul', 'tr-TR');  // Returns: 'İstanbul' ✅
const text2 = capitalizeFirst('ıspanak', 'tr-TR');   // Returns: 'Ispanak' ✅
const text3 = capitalizeFirst('çalışma', 'tr-TR');   // Returns: 'Çalışma' ✅

// Standard capitalization
const text4 = capitalizeFirst('hello');              // Returns: 'Hello'

// Wrong way (don't use for Turkish):
const wrong = 'istanbul'.toUpperCase();              // Returns: 'ISTANBUL' ❌ (should be 'İSTANBUL')

Why This Matters

In Turkish, the uppercase version of 'i' is 'İ' (with a dot), not 'I'. Similarly:

• i → İ (i with dot)
• ı → I (dotless I)
• Other Turkish characters (ğ, ş, ç, ö, ü) also need proper locale handling

Using toLocaleUpperCase('tr-TR') ensures correct capitalization for Turkish text.

Recent Updates

Version 1.3.0 (Latest)

• ✅ Added: Turkish locale support with capitalizeFirst() utility function
• ✅ Fixed: Double line break issue - empty lines now render correctly without extra spacing
• ✅ Added: locale configuration option for proper Turkish character capitalization
• ✅ Improved: Both web and React Native versions now handle Turkish characters properly
• ✅ Added: Comprehensive test page (demo/test-fixes.html) for Turkish and line break testing
• ✅ Exported: capitalizeFirst() utility for use in parent applications

Version 1.0.1

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