docs: Update changelog and version

Author: tjtanjin

CHANGELOG.md

@@ -1,3 +1,8 @@
+## v0.3.1 (12-06-2025)
+
+**Fixed:**
+- Fixed and improved markdown wrapper component
+
 ## v0.3.0 (11-06-2025)
 
 **Added:**

package-lock.json

@@ -13,7 +13,7 @@
   "files": [
     "./dist"
   ],
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A simple plugin for rendering markdown messages in React ChatBotify.",
   "type": "module",
   "main": "./dist/index.cjs",

package.json

@@ -6,16 +6,113 @@ import ReactMarkdown from 'react-markdown';
  * @param children markdown text to render
  */
 const MarkdownWrapper = ({ children }: { children: React.ReactNode }) => {
-	// ensures that markdownText is a string
+	// Ensure children is a string
 	const markdownText = typeof children === 'string' ? children : '';
+
 	return (
-		<ReactMarkdown
-			components={{
-				p: ({ ...props }) => <>{props.children}</>,
-			}}
-		>
-			{markdownText}
-		</ReactMarkdown>
+		<div style={{ whiteSpace: 'normal' }}>
+			<ReactMarkdown
+				components={{
+					p: ({ ...props }) => (
+						<p
+							style={{
+								margin: 0,
+								marginBottom: '0.5em',
+								lineHeight: 1.4,
+								textAlign: 'left',
+							}}
+						>
+							{props.children}
+						</p>
+					),
+
+					ul: ({ ...props }) => (
+						<ul
+							style={{
+								paddingLeft: 'clamp(8px, 3.5vw, 16px)',
+								margin: 0,
+								listStylePosition: 'inside', // KEY CHANGE
+							}}
+						>
+							{props.children}
+						</ul>
+					),
+
+					ol: ({ ...props }) => (
+						<ol
+							style={{
+								paddingLeft: 'clamp(8px, 3.5vw, 16px)',
+								margin: 0,
+								listStylePosition: 'inside', // KEY CHANGE
+							}}
+						>
+							{props.children}
+						</ol>
+					),
+
+					// KEY CHANGE: Remove custom bullet rendering, let browser handle bullets & numbers
+					li: ({ ...props }) => (
+						<li
+							style={{
+								marginBottom: '1px',
+								lineHeight: 1.4,
+							}}
+						>
+							{props.children}
+						</li>
+					),
+
+					code({ inline, children, ...props }: React.HTMLAttributes<HTMLElement> & { inline?: boolean }) {
+						if (inline) {
+							return (
+								<code
+									style={{
+										backgroundColor: 'rgba(0, 0, 0, 0.3)',
+										padding: '2px 4px',
+										borderRadius: '4px',
+										fontFamily: 'inherit',
+										fontSize: '0.95em',
+									}}
+								>
+									{children}
+								</code>
+							);
+						}
+
+						return (
+							<pre
+								style={{
+									backgroundColor: 'rgba(0, 0, 0, 0.3)',
+									padding: '8px',
+									borderRadius: '4px',
+									overflowX: 'auto',
+									margin: '0.5em 0',
+									whiteSpace: 'pre-wrap', // preserve line breaks
+								}}
+							>
+								<code>{children}</code>
+							</pre>
+						);
+					},
+
+					blockquote: ({ ...props }) => (
+						<blockquote
+							style={{
+								margin: 0,
+								paddingLeft: '10px',
+								borderLeft: '2px solid #ccc',
+								color: '#666',
+								fontStyle: 'italic',
+							}}
+						>
+							{props.children}
+						</blockquote>
+					),
+				}}
+			>
+				{markdownText}
+			</ReactMarkdown>
+		</div>
 	);
 };