From cd8fd59a7f508d4f4049f3333a4ea7c6b4c0a28b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Thu, 24 Jul 2025 11:30:35 +0400
Subject: [PATCH] =?UTF-8?q?fix:=20ajout=C3=A9=20rendu=20markdown=20dans=20?=
 =?UTF-8?q?extraits=20timeline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Import du composant MarkdownRenderer dans version-timeline.js
- Logique d'extrait améliorée préservant structure markdown
- Points de coupure intelligents (phrases, paragraphes, mots)
- Longueur d'extrait augmentée à 150 caractères
- Fallback vers Typography pour texte simple
---
 components/versions/version-timeline.js | 54 +++++++++++++++++++++----
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/components/versions/version-timeline.js b/components/versions/version-timeline.js
index d290215..d9fb65c 100644
--- a/components/versions/version-timeline.js
+++ b/components/versions/version-timeline.js
@@ -23,6 +23,7 @@ import EditIcon from '@mui/icons-material/Edit'
 import Snackbar from '@mui/material/Snackbar'
 import Alert from '@mui/material/Alert'
 import SessionExpired from '../session/session-expired.js'
+import MarkdownRenderer from '../markdown-renderer/index.js'
 import VersionDialog from './version-dialog.js'
 import VoteButtons from './vote-buttons.js'
 import CopyButton from './copy-button.js'
@@ -138,10 +139,37 @@ function VersionCard({
     }
   }
 
-  // Estimate content preview (first 100 chars)
-  const contentPreview = version?.delta?.contenu
-    ? version.delta.contenu.slice(0, 100) + (version.delta.contenu.length > 100 ? '...' : '')
-    : 'Contenu non disponible'
+  // Create content preview preserving markdown structure
+  const createContentPreview = content => {
+    if (!content) {
+      return 'Contenu non disponible'
+    }
+
+    // If content is short enough, return as is
+    if (content.length <= 150) {
+      return content
+    }
+
+    // Find a good breaking point (end of sentence, paragraph, or word)
+    const preview = content.slice(0, 150)
+    const lastSentence = Math.max(preview.lastIndexOf('.'), preview.lastIndexOf('!'), preview.lastIndexOf('?'))
+    const lastParagraph = preview.lastIndexOf('\n\n')
+    const lastWord = preview.lastIndexOf(' ')
+
+    // Choose the best breaking point
+    let breakPoint = 150
+    if (lastSentence > 100) {
+      breakPoint = lastSentence + 1
+    } else if (lastParagraph > 80) {
+      breakPoint = lastParagraph
+    } else if (lastWord > 100) {
+      breakPoint = lastWord
+    }
+
+    return content.slice(0, breakPoint) + (content.length > breakPoint ? '...' : '')
+  }
+
+  const contentPreview = createContentPreview(version?.delta?.contenu)
 
   return (
     <Card
@@ -195,9 +223,21 @@ function VersionCard({
           </Box>
         </Box>
 
-        <Typography variant='body2' color='text.secondary' sx={{mb: 2, fontStyle: 'italic'}}>
-          {contentPreview}
-        </Typography>
+        <Box sx={{mb: 2, '& > div': {fontSize: '0.875rem', fontStyle: 'italic', color: 'text.secondary'}}}>
+          <MarkdownRenderer
+            content={contentPreview}
+            fallbackComponent={({children, ...props}) => (
+              <Typography
+                variant='body2'
+                color='text.secondary'
+                sx={{fontStyle: 'italic'}}
+                {...props}
+              >
+                {children}
+              </Typography>
+            )}
+          />
+        </Box>
 
         <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
           <Typography variant='caption' color='text.secondary'>