fix: ajouté rendu markdown dans extraits timeline

- 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

@@ -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)
+  // Create content preview preserving markdown structure
-  const contentPreview = version?.delta?.contenu
+  const createContentPreview = content => {
-    ? version.delta.contenu.slice(0, 100) + (version.delta.contenu.length > 100 ? '...' : '')
+    if (!content) {
-    : 'Contenu non disponible'
+      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'}}>
+        <Box sx={{mb: 2, '& > div': {fontSize: '0.875rem', fontStyle: 'italic', color: 'text.secondary'}}}>
-          {contentPreview}
+          <MarkdownRenderer
-        </Typography>
+            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'>