add option de texte

frontend/src/components/EditPost.jsx

@@ -3,11 +3,18 @@ import { useParams, useNavigate } from "react-router-dom";
 import { getPostById, updatePost, uploadImageFromUrl } from "../wordpress"; // utilise uploadImageFromUrl
 import { getToken } from "../auth";
 import {
-  Box, Container, Typography, TextField, Button, Paper
+  Box,
+  Container,
+  Typography,
+  TextField,
+  Button,
+  Paper,
 } from "@mui/material";
-import { ArrowBack, Publish } from "@mui/icons-material";
+import { ArrowBack, Height, Publish } from "@mui/icons-material";
 import ImageUploaderCloudinary from "./ImageUploaderCloudinary";
 import CloudinaryGallerySelector from "./CloudinaryGallerySelector";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
 
 function EditPost() {
   const { id } = useParams();
@@ -65,19 +72,50 @@ function EditPost() {
   };
 
   return (
-    <Box sx={{ minHeight: "100vh", display: "flex", justifyContent: "center", alignItems: "center" }}>
+    <Box
+      sx={{
+        minHeight: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
       <Container maxWidth="sm">
         <Paper elevation={6} sx={{ p: 4, borderRadius: 3 }}>
-          <Button onClick={() => navigate("/admin/gestion-articles")} variant="outlined" startIcon={<ArrowBack />}>
+          <Button
+            onClick={() => navigate("/admin/gestion-articles")}
+            variant="outlined"
+            startIcon={<ArrowBack />}
+          >
             Retour
           </Button>
 
-          <Typography variant="h4" align="center" sx={{ mb: 3 }}>Modifier l'article</Typography>
+          <Typography variant="h4" align="center" sx={{ mb: 3 }}>
+            Modifier l'article
+          </Typography>
 
           <form onSubmit={handleUpdate}>
-            <TextField label="Titre" fullWidth value={title} onChange={(e) => setTitle(e.target.value)} sx={{ mb: 2 }} />
-            <TextField label="Contenu" multiline rows={4} fullWidth value={content} onChange={(e) => setContent(e.target.value)} sx={{ mb: 2 }} />
-
+            <TextField
+              label="Titre"
+              fullWidth
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              sx={{ mb: 2 }}
+            />
+            <Typography
+              variant="body1"
+              sx={{ mt: 2, mb: 2, fontWeight: "bold" }}
+            >
+              Contenu de l'article :
+            </Typography>
+            <Box sx={{ height: 250, mb: 7 }}>
+              <ReactQuill
+                theme="snow"
+                value={content}
+                onChange={setContent}
+                style={{ height: "100%" }}
+              />
+            </Box>
             <Typography fontWeight="bold">Image depuis ton ordi :</Typography>
             <ImageUploaderCloudinary
               onUploadSuccess={(url) => {
@@ -86,7 +124,9 @@ function EditPost() {
               }}
             />
 
-            <Typography fontWeight="bold" sx={{ mt: 3 }}>Ou choisir une image déjà envoyée :</Typography>
+            <Typography fontWeight="bold" sx={{ mt: 3 }}>
+              Ou choisir une image déjà envoyée :
+            </Typography>
             <CloudinaryGallerySelector
               onSelect={async (url) => {
                 setImageUrl(url);
@@ -98,11 +138,26 @@ function EditPost() {
             {imageUrl && (
               <Box sx={{ mt: 2 }}>
                 <Typography variant="body2">Aperçu :</Typography>
-                <img src={imageUrl} style={{ width: "100%", borderRadius: 6, maxHeight: 200, objectFit: "cover" }} alt="preview" />
+                <img
+                  src={imageUrl}
+                  style={{
+                    width: "100%",
+                    borderRadius: 6,
+                    maxHeight: 200,
+                    objectFit: "cover",
+                  }}
+                  alt="preview"
+                />
               </Box>
             )}
 
-            <Button type="submit" variant="contained" fullWidth sx={{ mt: 3 }} startIcon={<Publish />}>
+            <Button
+              type="submit"
+              variant="contained"
+              fullWidth
+              sx={{ mt: 3 }}
+              startIcon={<Publish />}
+            >
               Mettre à jour
             </Button>
           </form>
@@ -112,4 +167,4 @@ function EditPost() {
   );
 }
 
-export default EditPost;
+export default EditPost;

frontend/src/components/Pages/CreatePost.jsx

@@ -13,6 +13,8 @@ import {
 import { ArrowBack, Publish } from "@mui/icons-material";
 import ImageUploaderCloudinary from "../ImageUploaderCloudinary";
 import CloudinaryGallerySelector from "../CloudinaryGallerySelector";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
 
 function CreatePost() {
   const [title, setTitle] = useState("");
@@ -85,7 +87,8 @@ function CreatePost() {
               required
             />
 
-            <TextField
+            <Box sx={{ height: 250, mb: 7 }}>
+            <ReactQuill
               label="Contenu"
               fullWidth
               margin="normal"
@@ -95,7 +98,9 @@ function CreatePost() {
               value={content}
               onChange={(e) => setContent(e.target.value)}
               required
+              style={{height:"100%"}}
             />
+            </Box>
 
             {/* Upload via Cloudinary */}
             <Box sx={{ mt: 3 }}>