rajoute le support de l'utilisation de markdown (sur un sous-ensemble) dans la description des campagnes et des propositions

src/components/AddPropositionModal.tsx

@@ -2,10 +2,10 @@
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
 import { propositionService } from '@/lib/services';
+import { MarkdownEditor } from '@/components/MarkdownEditor';
 
 interface AddPropositionModalProps {
   isOpen: boolean;
@@ -105,18 +105,13 @@ export default function AddPropositionModal({ isOpen, onClose, onSuccess, campai
             />
           </div>
           
-          <div className="space-y-2">
-            <Label htmlFor="description">Description *</Label>
-            <Textarea
-              id="description"
-              name="description"
-              value={formData.description}
-              onChange={handleChange}
-              placeholder="Décrivez votre proposition en détail..."
-              rows={4}
-              required
-            />
-          </div>
+          <MarkdownEditor
+            value={formData.description}
+            onChange={(value) => setFormData(prev => ({ ...prev, description: value }))}
+            placeholder="Décrivez votre proposition en détail..."
+            label="Description *"
+            maxLength={2000}
+          />
           
           <div className="border-t border-slate-200 dark:border-slate-700 pt-4">
             <h3 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">

src/components/CreateCampaignModal.tsx

@@ -2,10 +2,10 @@
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
 import { campaignService } from '@/lib/services';
+import { MarkdownEditor } from '@/components/MarkdownEditor';
 
 interface CreateCampaignModalProps {
   isOpen: boolean;
@@ -160,18 +160,13 @@ export default function CreateCampaignModal({ isOpen, onClose, onSuccess }: Crea
             />
           </div>
           
-          <div className="space-y-2">
-            <Label htmlFor="description">Description *</Label>
-            <Textarea
-              id="description"
-              name="description"
-              value={formData.description}
-              onChange={handleChange}
-              placeholder="Décrivez l'objectif de cette campagne..."
-              rows={3}
-              required
-            />
-          </div>
+          <MarkdownEditor
+            value={formData.description}
+            onChange={(value) => setFormData(prev => ({ ...prev, description: value }))}
+            placeholder="Décrivez l'objectif de cette campagne..."
+            label="Description *"
+            maxLength={2000}
+          />
           
           <div className="space-y-2">
             <Label htmlFor="budget_per_user">Budget (€) *</Label>

src/components/EditCampaignModal.tsx

@@ -2,12 +2,12 @@
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { campaignService } from '@/lib/services';
 import { Campaign, CampaignStatus } from '@/types';
+import { MarkdownEditor } from '@/components/MarkdownEditor';
 
 interface EditCampaignModalProps {
   isOpen: boolean;
@@ -109,18 +109,13 @@ export default function EditCampaignModal({ isOpen, onClose, onSuccess, campaign
             />
           </div>
           
-          <div className="space-y-2">
-            <Label htmlFor="description">Description *</Label>
-            <Textarea
-              id="description"
-              name="description"
-              value={formData.description}
-              onChange={handleChange}
-              placeholder="Décrivez l'objectif de cette campagne..."
-              rows={3}
-              required
-            />
-          </div>
+          <MarkdownEditor
+            value={formData.description}
+            onChange={(value) => setFormData(prev => ({ ...prev, description: value }))}
+            placeholder="Décrivez l'objectif de cette campagne..."
+            label="Description *"
+            maxLength={2000}
+          />
           
           <div className="space-y-2">
             <Label htmlFor="status">Statut de la campagne</Label>

src/components/EditPropositionModal.tsx

@@ -2,11 +2,11 @@
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
 import { propositionService } from '@/lib/services';
 import { Proposition } from '@/types';
+import { MarkdownEditor } from '@/components/MarkdownEditor';
 
 interface EditPropositionModalProps {
   isOpen: boolean;
@@ -102,18 +102,13 @@ export default function EditPropositionModal({ isOpen, onClose, onSuccess, propo
             />
           </div>
           
-          <div className="space-y-2">
-            <Label htmlFor="description">Description *</Label>
-            <Textarea
-              id="description"
-              name="description"
-              value={formData.description}
-              onChange={handleChange}
-              placeholder="Décrivez votre proposition en détail..."
-              rows={4}
-              required
-            />
-          </div>
+          <MarkdownEditor
+            value={formData.description}
+            onChange={(value) => setFormData(prev => ({ ...prev, description: value }))}
+            placeholder="Décrivez votre proposition en détail..."
+            label="Description *"
+            maxLength={2000}
+          />
           
           <div className="border-t border-slate-200 dark:border-slate-700 pt-4">
             <h3 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">

src/components/MarkdownContent.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { parseMarkdown } from '@/lib/markdown';
+
+interface MarkdownContentProps {
+  content: string;
+  className?: string;
+  maxLength?: number;
+  showPreview?: boolean;
+}
+
+export function MarkdownContent({
+  content,
+  className = "",
+  maxLength,
+  showPreview = false
+}: MarkdownContentProps) {
+  if (!content) {
+    return null;
+  }
+
+  // Si showPreview est activé et qu'une longueur max est définie, tronquer
+  const displayContent = showPreview && maxLength && content.length > maxLength
+    ? content.substring(0, maxLength) + '...'
+    : content;
+
+  // Parser le markdown
+  const parsedContent = parseMarkdown(displayContent);
+
+  return (
+    <div 
+      className={`prose prose-sm max-w-none ${className}`}
+      dangerouslySetInnerHTML={{ __html: parsedContent }}
+    />
+  );
+}

src/components/MarkdownEditor.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Eye, Edit3, AlertCircle, HelpCircle } from 'lucide-react';
+import { previewMarkdown, validateMarkdown } from '@/lib/markdown';
+
+interface MarkdownEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  label?: string;
+  maxLength?: number;
+  className?: string;
+}
+
+export function MarkdownEditor({
+  value,
+  onChange,
+  placeholder = "Écrivez votre description...",
+  label = "Description",
+  maxLength = 5000,
+  className = ""
+}: MarkdownEditorProps) {
+  const [activeTab, setActiveTab] = useState<'edit' | 'preview'>('edit');
+  const [validation, setValidation] = useState<{ isValid: boolean; errors: string[] }>({ isValid: true, errors: [] });
+  const [showHelp, setShowHelp] = useState(false);
+
+  // Validation en temps réel
+  useEffect(() => {
+    const validationResult = validateMarkdown(value);
+    setValidation(validationResult);
+  }, [value]);
+
+  const handleChange = (newValue: string) => {
+    if (newValue.length <= maxLength) {
+      onChange(newValue);
+    }
+  };
+
+  const previewContent = previewMarkdown(value);
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="flex items-center justify-between">
+        <Label htmlFor="markdown-editor" className="text-sm font-medium">
+          {label}
+        </Label>
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowHelp(!showHelp)}
+            className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
+          >
+            <HelpCircle className="h-3 w-3 mr-1" />
+            Aide Markdown
+          </Button>
+          <span className="text-sm text-muted-foreground">{value.length}/{maxLength}</span>
+        </div>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as 'edit' | 'preview')}>
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="edit" className="flex items-center gap-2">
+            <Edit3 className="h-4 w-4" />
+            Éditer
+          </TabsTrigger>
+          <TabsTrigger value="preview" className="flex items-center gap-2">
+            <Eye className="h-4 w-4" />
+            Prévisualiser
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="edit" className="space-y-4">
+          <Textarea
+            id="markdown-editor"
+            value={value}
+            onChange={(e) => handleChange(e.target.value)}
+            placeholder={placeholder}
+            className="min-h-[200px] font-mono text-sm"
+          />
+          
+          {/* Aide markdown (affichée conditionnellement) */}
+          {showHelp && (
+            <div className="rounded-lg border bg-muted/50 p-4 animate-in fade-in duration-200">
+              <div className="flex items-center justify-between mb-2">
+                <h4 className="text-sm font-medium">Syntaxe Markdown supportée</h4>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowHelp(false)}
+                  className="h-6 px-2 text-xs"
+                >
+                  ×
+                </Button>
+              </div>
+              <div className="grid grid-cols-2 gap-4 text-xs text-muted-foreground">
+                <div>
+                  <p><strong>**gras**</strong> → <strong>gras</strong></p>
+                  <p><em>*italique*</em> → <em>italique</em></p>
+                  <p><u>__souligné__</u> → <u>souligné</u></p>
+                  <p><del>~~barré~~</del> → <del>barré</del></p>
+                </div>
+                <div>
+                  <p># Titre 1</p>
+                  <p>## Titre 2</p>
+                  <p>- Liste à puces</p>
+                  <p>[Lien](https://exemple.com)</p>
+                </div>
+              </div>
+            </div>
+          )}
+        </TabsContent>
+
+        <TabsContent value="preview" className="space-y-4">
+          <div className="min-h-[200px] rounded-lg border bg-background p-4">
+            {value ? (
+              <div 
+                className="prose prose-sm max-w-none"
+                dangerouslySetInnerHTML={{ __html: previewContent }}
+              />
+            ) : (
+              <p className="text-muted-foreground italic">
+                Aucun contenu à prévisualiser
+              </p>
+            )}
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      {/* Messages d'erreur */}
+      {!validation.isValid && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            <ul className="list-disc list-inside space-y-1">
+              {validation.errors.map((error, index) => (
+                <li key={index}>{error}</li>
+              ))}
+            </ul>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Avertissement de longueur */}
+      {value.length > maxLength * 0.9 && (
+        <Alert variant={value.length > maxLength ? "destructive" : "default"}>
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            {value.length > maxLength 
+              ? `Le contenu dépasse la limite de ${maxLength} caractères`
+              : `Le contenu approche de la limite de ${maxLength} caractères`
+            }
+          </AlertDescription>
+        </Alert>
+      )}
+    </div>
+  );
+}