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

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>
+  );
+}