handle markdown in usecase details

Author: Deepthi-Chand

app/[locale]/(user)/components/ListingComponent.tsx

@@ -24,6 +24,44 @@ import { cn, formatDate } from '@/lib/utils';
 import Filter from '../datasets/components/FIlter/Filter';
 import Styles from '../datasets/dataset.module.scss';
 
+// Helper function to strip markdown and HTML tags for card preview
+const stripMarkdown = (markdown: string): string => {
+  if (!markdown) return '';
+  return markdown
+    // Remove code blocks first (before other replacements)
+    .replace(/```[\s\S]*?```/g, '')
+    // Remove inline code
+    .replace(/`([^`]+)`/g, '$1')
+    // Remove images
+    .replace(/!\[([^\]]*)\]\([^\)]+\)/g, '$1')
+    // Remove links
+    .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
+    // Remove headers
+    .replace(/^#{1,6}\s+/gm, '')
+    // Remove bold
+    .replace(/\*\*([^*]+)\*\*/g, '$1')
+    .replace(/__([^_]+)__/g, '$1')
+    // Remove italic
+    .replace(/\*([^*]+)\*/g, '$1')
+    .replace(/_([^_]+)_/g, '$1')
+    // Remove strikethrough
+    .replace(/~~([^~]+)~~/g, '$1')
+    // Remove blockquotes
+    .replace(/^\s*>\s+/gm, '')
+    // Remove horizontal rules
+    .replace(/^(-{3,}|_{3,}|\*{3,})$/gm, '')
+    // Remove list markers
+    .replace(/^\s*[-*+]\s+/gm, '')
+    .replace(/^\s*\d+\.\s+/gm, '')
+    // Remove HTML tags
+    .replace(/<[^>]*>/g, '')
+    // Remove extra whitespace and newlines
+    .replace(/\n\s*\n/g, '\n')
+    .replace(/\n/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+};
+
 // Interfaces
 interface Bucket {
   key: string;
@@ -554,7 +592,7 @@ const ListingComponent: React.FC<ListingProps> = ({
 
                     const commonProps = {
                       title: item.title,
-                      description: item.description,
+                      description: stripMarkdown(item.description || ''),
                       metadataContent: MetadataContent,
                       tag: item.tags,
                       formats: item.formats,

app/[locale]/(user)/usecases/components/Details.tsx

@@ -3,6 +3,9 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
 import { Button, Icon, Spinner, Tag, Text, Tray } from 'opub-ui';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 
 import { Icons } from '@/components/icons';
 import Metadata from './Metadata';
@@ -89,10 +92,13 @@ const PrimaryDetails = ({ data, isLoading }: { data: any; isLoading: any }) => {
         </div>
         <div className="mt-6 lg:mt-10">
           <Text variant="headingXl">Summary</Text>
-          <div className="mt-4">
-            <Text variant="bodyLg" fontWeight="regular" className="leading-5">
+          <div className="prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-p:leading-relaxed prose-a:text-blue-600 hover:prose-a:text-blue-700 prose-code:bg-gray-200 prose-code:rounded prose-pre:bg-gray-100 prose-pre:border prose-pre:border-gray-300 prose-blockquote:border-l-blue-500 prose-th:bg-gray-100 prose-img:rounded-lg prose prose-lg mt-4 max-w-none prose-headings:text-gray-900 prose-p:text-gray-800 prose-a:underline prose-blockquote:text-gray-700 prose-strong:text-gray-900 prose-em:text-gray-800 prose-code:px-1 prose-code:py-0.5 prose-code:text-gray-900 prose-code:before:content-none prose-code:after:content-none prose-pre:text-gray-900 prose-ol:text-gray-800 prose-ul:text-gray-800 prose-li:text-gray-800 prose-li:marker:text-gray-600 prose-table:text-gray-800 prose-thead:border-gray-300 prose-tr:border-gray-300 prose-th:border-gray-300 prose-th:text-gray-900 prose-td:border-gray-300 prose-td:text-gray-800 prose-hr:border-gray-300">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeRaw]}
+            >
               {data.useCase.summary}
-            </Text>
+            </ReactMarkdown>
           </div>
         </div>
       </div>