Support headers and links

Author: Konard

example/components/chat-with-markdown.tsx

@@ -1,23 +1,10 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { ChakraProvider, Box, Textarea, Button, VStack, HStack, Avatar, Text } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { ChakraProvider, Box, Textarea, Button, VStack, HStack, Avatar, Text, Link as ChakraLink, Heading } from '@chakra-ui/react';
 import ReactMarkdown from 'react-markdown';
 
 function ChatApp() {
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState("");
-  const textareaRef = useRef(null);
-
-  // Maximum height of the textarea should be 30% of the viewport height
-  const maxHeight = window.innerHeight * 0.3;
-
-  // Adjust textarea height based on content
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto'; // Reset the height
-      const newHeight = Math.min(textareaRef.current.scrollHeight, maxHeight); // Set to scroll height or maxHeight
-      textareaRef.current.style.height = `${newHeight}px`;
-    }
-  }, [input]); // Recalculate height when input changes
 
   const sendMessage = () => {
     if (input.trim() !== "") {
@@ -32,6 +19,21 @@ function ChatApp() {
     }
   };
 
+  // Custom renderers for Markdown components using Chakra UI
+  const renderers = {
+    // Render headers using Chakra's Heading component
+    h1: ({ children }) => <Heading as="h1" size="xl" mb={2}>{children}</Heading>,
+    h2: ({ children }) => <Heading as="h2" size="lg" mb={2}>{children}</Heading>,
+    h3: ({ children }) => <Heading as="h3" size="md" mb={2}>{children}</Heading>,
+
+    // Render links using Chakra's Link component
+    a: ({ href, children }) => (
+      <ChakraLink href={href} color="blue.500" isExternal>
+        {children}
+      </ChakraLink>
+    ),
+  };
+
   return (
     <ChakraProvider>
       <Box bg="gray.100" h="100vh" p={4} display="flex" flexDirection="column">
@@ -54,7 +56,7 @@ function ChatApp() {
                   {message.sender}
                 </Text>
                 {/* Rendering the message text with markdown support */}
-                <ReactMarkdown children={message.text} />
+                <ReactMarkdown components={renderers} children={message.text} />
                 <Text fontSize="xs" color="gray.500">
                   {message.timestamp}
                 </Text>
@@ -66,13 +68,11 @@ function ChatApp() {
         {/* Input Section */}
         <HStack mt={4} spacing={2} align="end">
           <Textarea
-            ref={textareaRef}
             value={input}
             onChange={(e) => setInput(e.target.value)}
             placeholder="Type a message with Markdown..."
             bg="white"
             resize="none" // Disable manual resize
-            maxH={`${maxHeight}px`} // Set maximum height
             overflow="hidden" // Hide overflow when max height is reached
             flex="1"
           />