From 715891e657fe6c4473054effc667dfdfd2c63862 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Wed, 23 Jul 2025 12:21:10 +0400
Subject: [PATCH] =?UTF-8?q?feat:=20ajoute=20MarkdownRenderer=20avec=20coul?=
 =?UTF-8?q?eurs=20personnalis=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/markdown-renderer/index.js | 61 +++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 components/markdown-renderer/index.js

diff --git a/components/markdown-renderer/index.js b/components/markdown-renderer/index.js
new file mode 100644
index 0000000..7d6f63c
--- /dev/null
+++ b/components/markdown-renderer/index.js
@@ -0,0 +1,61 @@
+'use client'
+
+import PropTypes from 'prop-types'
+import dynamic from 'next/dynamic'
+import Typography from '@mui/material/Typography'
+import {useTheme} from '@mui/material/styles'
+
+const MarkdownPreview = dynamic(
+  () => import('@uiw/react-markdown-preview').then(mod => mod.default),
+  {ssr: false}
+)
+
+export default function MarkdownRenderer({content, color, fallbackComponent: FallbackComponent = Typography}) {
+  const theme = useTheme()
+
+  // Check if content contains markdown syntax
+  const hasMarkdown = content && (
+    content.includes('**')
+    || content.includes('*')
+    || content.includes('#')
+    || content.includes('[')
+    || content.includes('`')
+    || content.includes('> ')
+    || content.includes('- ')
+    || content.includes('1. ')
+  )
+
+  if (!hasMarkdown) {
+    // Fallback to original rendering for plain text
+    const formattedContent = content.replaceAll('\n', '<br />')
+    return <FallbackComponent dangerouslySetInnerHTML={{__html: formattedContent}} />
+  }
+
+  const textColor = color || theme.palette.text.primary
+
+  return (
+    <div
+      style={{
+        backgroundColor: 'transparent',
+        color: textColor
+      }}
+      data-color-mode={theme.palette.mode}
+    >
+      <MarkdownPreview
+        source={content}
+        style={{
+          backgroundColor: 'transparent',
+          color: textColor,
+          fontSize: 'inherit',
+          fontFamily: 'inherit'
+        }}
+      />
+    </div>
+  )
+}
+
+MarkdownRenderer.propTypes = {
+  content: PropTypes.string.isRequired,
+  color: PropTypes.string,
+  fallbackComponent: PropTypes.elementType
+}