Custom text formatter for chat messages with support for italic, bold, strikethrough, monospace, and lists
npm install qpien-chat-text-formatterCustom text formatter for chat messages with support for italic, bold, strikethrough, monospace, URLs, and lists.
- โจ 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
``bash`
npm install qpien-chat-text-formatter
`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
}
โ 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 ExamplesConfiguration
`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.MIT
Akif(demirelakif) - demirel.akif@hotmail.com