new and old editor toggle

client/src/__tests__/components/Editor/Editor.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import Editor from '../../../components/Editor/Editor';
+import Editor from '../../../components/Editor/newEditor';
 
 describe('Editor Component', () => {
     const mockOnValuesChange = jest.fn();

client/src/components/Editor/Editor.tsx

@@ -1,202 +1,33 @@
-import React, { useState } from 'react';
+import React, { useRef } from 'react';
-import { TextField, Typography, IconButton, Box, Collapse, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';
+import './editor.css';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { TextareaAutosize } from '@mui/material';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 
 interface EditorProps {
     label: string;
     values: string[];
-    onValuesChange: (values: string[]) => void;
+    onEditorChange: (value: string) => void;
-    onFocusQuestion?: (index: number) => void;
 }
 
-const Editor: React.FC<EditorProps> = ({ label, values, onValuesChange, onFocusQuestion }) => {
+const Editor: React.FC<EditorProps> = ({ label, values, onEditorChange }) => {
-    const [collapsed, setCollapsed] = useState<boolean[]>(Array(values.length).fill(false));
+    const editorRef = useRef<HTMLTextAreaElement | null>(null);
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
 
-    const handleChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    function handleEditorChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-        const newValues = [...values];
+        const text = event.target.value;
-        newValues[index] = event.target.value;
+        onEditorChange(text || '');
-        onValuesChange(newValues);
-    };
-
-    const handleDeleteQuestion = (index: number) => () => {
-        if (values[index].trim() === '') {
-            const newValues = values.filter((_, i) => i !== index);
-            onValuesChange(newValues);
-            setCollapsed((prev) => prev.filter((_, i) => i !== index));
-        } else {
-            setDeleteIndex(index);
-            setDialogOpen(true);
-        }
-    };
-
-    const handleConfirmDelete = () => {
-        if (deleteIndex !== null) {
-            const newValues = values.filter((_, i) => i !== deleteIndex);
-            onValuesChange(newValues);
-            setCollapsed((prev) => prev.filter((_, i) => i !== deleteIndex));
-        }
-        setDialogOpen(false);
-        setDeleteIndex(null);
-    };
-
-    const handleCancelDelete = () => {
-        setDialogOpen(false);
-        setDeleteIndex(null);
-    };
-
-    const handleFocusQuestion = (index: number) => () => {
-        if (onFocusQuestion) {
-            onFocusQuestion(index);
-        }
-    };
-
-    const handleToggleCollapse = (index: number) => () => {
-        setCollapsed((prev) => {
-            const newCollapsed = [...prev];
-            newCollapsed[index] = !newCollapsed[index];
-            return newCollapsed;
-        });
-    };
-
-    const onDragEnd = (result: any) => {
-        if (!result.destination) return;
-
-        const newValues = [...values];
-        const [reorderedItem] = newValues.splice(result.source.index, 1);
-        newValues.splice(result.destination.index, 0, reorderedItem);
-        onValuesChange(newValues);
-
-        const newCollapsed = [...collapsed];
-        const [reorderedCollapsed] = newCollapsed.splice(result.source.index, 1);
-        newCollapsed.splice(result.destination.index, 0, reorderedCollapsed);
-        setCollapsed(newCollapsed);
-    };
-
-    if (collapsed.length !== values.length) {
-        setCollapsed((prev) => {
-            const newCollapsed = [...prev];
-            while (newCollapsed.length < values.length) newCollapsed.push(false);
-            while (newCollapsed.length > values.length) newCollapsed.pop();
-            return newCollapsed;
-        });
     }
 
     return (
-        <div>
+        <label>
-            <Typography variant="h6" fontWeight="bold" style={{ marginBottom: '24px' }}>
+            <h4>{label}</h4>
-                {label}
+            <TextareaAutosize
-            </Typography>
+                id="editor-textarea"
-
+                ref={editorRef}
-            <DragDropContext onDragEnd={onDragEnd}>
+                onChange={handleEditorChange}
-                <Droppable droppableId="questions">
+                value={values}
-                    {(provided) => (
+                className="editor"
-                        <div {...provided.droppableProps} ref={provided.innerRef}>
+                minRows={5}
-                            {values.map((value, index) => (
-                                <Draggable key={index} draggableId={`question-${index}`} index={index}>
-                                    {(provided) => (
-                                        <Box
-                                            ref={provided.innerRef}
-                                            {...provided.draggableProps}
-                                            {...provided.dragHandleProps}
-                                            sx={{
-                                                marginBottom: '8px',
-                                                boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
-                                                border: '1px solid rgba(0, 0, 0, 0.1)',
-                                                padding: '16px',
-                                                borderRadius: '4px',
-                                                ...provided.draggableProps.style,
-                                            }}
-                                        >
-                                            <Box display="flex" alignItems="center" justifyContent="space-between">
-                                                <Typography variant="subtitle1" fontWeight="bold" style={{ marginBottom: '8px' }}>
-                                                    Question {index + 1}
-                                                </Typography>
-                                                <Box>
-                                                    <IconButton
-                                                        onClick={handleToggleCollapse(index)}
-                                                        aria-label="toggle collapse"
-                                                        sx={{
-                                                            color: 'gray',
-                                                            '&:hover': { color: 'blue' },
-                                                            mr: 1,
-                                                        }}
-                                                    >
-                                                        {collapsed[index] ? <ExpandMoreIcon /> : <ExpandLessIcon />}
-                                                    </IconButton>
-                                                    <IconButton
-                                                        onClick={handleFocusQuestion(index)}
-                                                        aria-label="focus question"
-                                                        sx={{
-                                                            color: 'gray',
-                                                            '&:hover': { color: 'blue' },
-                                                            mr: 1,
-                                                        }}
-                                                    >
-                                                        <VisibilityIcon />
-                                                    </IconButton>
-                                                    <IconButton
-                                                        onClick={handleDeleteQuestion(index)}
-                                                        aria-label="delete"
-                                                        sx={{
-                                                            color: 'light-gray',
-                                                            '&:hover': { color: 'red' },
-                                                        }}
-                                                    >
-                                                        <DeleteIcon />
-                                                    </IconButton>
-                                                </Box>
-                                            </Box>
-                                            <Collapse in={!collapsed[index]}>
-                                                <TextField
-                                                    value={value}
-                                                    onChange={handleChange(index)}
-                                                    fullWidth
-                                                    multiline
-                                                    minRows={4}
-                                                    maxRows={Infinity}
-                                                    variant="outlined"
-                                                    style={{ overflow: 'auto' }}
             />
-                                            </Collapse>
+        </label>
-                                        </Box>
-                                    )}
-                                </Draggable>
-                            ))}
-                            {provided.placeholder}
-                        </div>
-                    )}
-                </Droppable>
-            </DragDropContext>
-
-            {/* Confirmation Dialog */}
-            <Dialog
-                open={dialogOpen}
-                onClose={handleCancelDelete}
-                aria-labelledby="delete-confirmation-title"
-                aria-describedby="delete-confirmation-description"
-            >
-                <DialogTitle id="delete-confirmation-title" sx={{ textAlign: 'center'}}>Suppression</DialogTitle>
-                <DialogContent>
-                    <DialogContentText id="delete-confirmation-description">
-                        Confirmez vous la suppression de Question {deleteIndex !== null ? deleteIndex + 1 : ''} ?
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions sx={{ justifyContent: 'center', pb: 2 }}>
-                    <Button onClick={handleCancelDelete} color="primary" sx={{ mx: 1 }}>
-                        Annuler 
-                    </Button>
-                    <Button onClick={handleConfirmDelete} color="error" sx={{ mx: 1 }} autoFocus>
-                        Supprimer
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </div>
     );
 };
 

client/src/components/Editor/newEditor.css

@@ -0,0 +1,9 @@
+.editor {
+    width:  100%;
+    height: 50vh;
+    background-color: #f8f9ff;
+    padding-left: 10px;
+    padding-top: 10px;
+    font-size: medium;
+    resize: none;
+}

client/src/components/Editor/newEditor.tsx

@@ -0,0 +1,203 @@
+import React, { useState } from 'react';
+import { TextField, Typography, IconButton, Box, Collapse, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+
+interface EditorProps {
+    label: string;
+    values: string[];
+    onValuesChange: (values: string[]) => void;
+    onFocusQuestion?: (index: number) => void;
+}
+
+const Editor: React.FC<EditorProps> = ({ label, values, onValuesChange, onFocusQuestion }) => {
+    const [collapsed, setCollapsed] = useState<boolean[]>(Array(values.length).fill(false));
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
+
+    const handleChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+        const newValues = [...values];
+        newValues[index] = event.target.value;
+        onValuesChange(newValues);
+    };
+
+    const handleDeleteQuestion = (index: number) => () => {
+        if (values[index].trim() === '') {
+            const newValues = values.filter((_, i) => i !== index);
+            onValuesChange(newValues);
+            setCollapsed((prev) => prev.filter((_, i) => i !== index));
+        } else {
+            setDeleteIndex(index);
+            setDialogOpen(true);
+        }
+    };
+
+    const handleConfirmDelete = () => {
+        if (deleteIndex !== null) {
+            const newValues = values.filter((_, i) => i !== deleteIndex);
+            onValuesChange(newValues);
+            setCollapsed((prev) => prev.filter((_, i) => i !== deleteIndex));
+        }
+        setDialogOpen(false);
+        setDeleteIndex(null);
+    };
+
+    const handleCancelDelete = () => {
+        setDialogOpen(false);
+        setDeleteIndex(null);
+    };
+
+    const handleFocusQuestion = (index: number) => () => {
+        if (onFocusQuestion) {
+            onFocusQuestion(index);
+        }
+    };
+
+    const handleToggleCollapse = (index: number) => () => {
+        setCollapsed((prev) => {
+            const newCollapsed = [...prev];
+            newCollapsed[index] = !newCollapsed[index];
+            return newCollapsed;
+        });
+    };
+
+    const onDragEnd = (result: any) => {
+        if (!result.destination) return;
+
+        const newValues = [...values];
+        const [reorderedItem] = newValues.splice(result.source.index, 1);
+        newValues.splice(result.destination.index, 0, reorderedItem);
+        onValuesChange(newValues);
+
+        const newCollapsed = [...collapsed];
+        const [reorderedCollapsed] = newCollapsed.splice(result.source.index, 1);
+        newCollapsed.splice(result.destination.index, 0, reorderedCollapsed);
+        setCollapsed(newCollapsed);
+    };
+
+    if (collapsed.length !== values.length) {
+        setCollapsed((prev) => {
+            const newCollapsed = [...prev];
+            while (newCollapsed.length < values.length) newCollapsed.push(false);
+            while (newCollapsed.length > values.length) newCollapsed.pop();
+            return newCollapsed;
+        });
+    }
+
+    return (
+        <div>
+            <Typography variant="h6" fontWeight="bold" style={{ marginBottom: '24px' }}>
+                {label}
+            </Typography>
+
+            <DragDropContext onDragEnd={onDragEnd}>
+                <Droppable droppableId="questions">
+                    {(provided) => (
+                        <div {...provided.droppableProps} ref={provided.innerRef}>
+                            {values.map((value, index) => (
+                                <Draggable key={index} draggableId={`question-${index}`} index={index}>
+                                    {(provided) => (
+                                        <Box
+                                            ref={provided.innerRef}
+                                            {...provided.draggableProps}
+                                            {...provided.dragHandleProps}
+                                            sx={{
+                                                marginBottom: '8px',
+                                                boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
+                                                border: '1px solid rgba(0, 0, 0, 0.1)',
+                                                padding: '16px',
+                                                borderRadius: '4px',
+                                                ...provided.draggableProps.style,
+                                            }}
+                                        >
+                                            <Box display="flex" alignItems="center" justifyContent="space-between">
+                                                <Typography variant="subtitle1" fontWeight="bold" style={{ marginBottom: '8px' }}>
+                                                    Question {index + 1}
+                                                </Typography>
+                                                <Box>
+                                                    <IconButton
+                                                        onClick={handleToggleCollapse(index)}
+                                                        aria-label="toggle collapse"
+                                                        sx={{
+                                                            color: 'gray',
+                                                            '&:hover': { color: 'blue' },
+                                                            mr: 1,
+                                                        }}
+                                                    >
+                                                        {collapsed[index] ? <ExpandMoreIcon /> : <ExpandLessIcon />}
+                                                    </IconButton>
+                                                    <IconButton
+                                                        onClick={handleFocusQuestion(index)}
+                                                        aria-label="focus question"
+                                                        sx={{
+                                                            color: 'gray',
+                                                            '&:hover': { color: 'blue' },
+                                                            mr: 1,
+                                                        }}
+                                                    >
+                                                        <VisibilityIcon />
+                                                    </IconButton>
+                                                    <IconButton
+                                                        onClick={handleDeleteQuestion(index)}
+                                                        aria-label="delete"
+                                                        sx={{
+                                                            color: 'light-gray',
+                                                            '&:hover': { color: 'red' },
+                                                        }}
+                                                    >
+                                                        <DeleteIcon />
+                                                    </IconButton>
+                                                </Box>
+                                            </Box>
+                                            <Collapse in={!collapsed[index]}>
+                                                <TextField
+                                                    value={value}
+                                                    onChange={handleChange(index)}
+                                                    fullWidth
+                                                    multiline
+                                                    minRows={4}
+                                                    maxRows={Infinity}
+                                                    variant="outlined"
+                                                    style={{ overflow: 'auto' }}
+                                                />
+                                            </Collapse>
+                                        </Box>
+                                    )}
+                                </Draggable>
+                            ))}
+                            {provided.placeholder}
+                        </div>
+                    )}
+                </Droppable>
+            </DragDropContext>
+
+            {/* Confirmation Dialog */}
+            <Dialog
+                open={dialogOpen}
+                onClose={handleCancelDelete}
+                aria-labelledby="delete-confirmation-title"
+                aria-describedby="delete-confirmation-description"
+            >
+                <DialogTitle id="delete-confirmation-title" sx={{ textAlign: 'center'}}>Suppression</DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="delete-confirmation-description">
+                        Confirmez vous la suppression de Question {deleteIndex !== null ? deleteIndex + 1 : ''} ?
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions sx={{ justifyContent: 'center', pb: 2 }}>
+                    <Button onClick={handleCancelDelete} color="primary" sx={{ mx: 1 }}>
+                        Annuler 
+                    </Button>
+                    <Button onClick={handleConfirmDelete} color="error" sx={{ mx: 1 }} autoFocus>
+                        Supprimer
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+};
+
+export default Editor;

client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx

@@ -1,16 +1,17 @@
-// EditorQuiz.tsx
 import React, { useState, useEffect, useRef, CSSProperties } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 
 import { FolderType } from '../../../Types/FolderType';
 
+import NewEditor from 'src/components/Editor/newEditor';
 import Editor from 'src/components/Editor/Editor';
+
 import GiftCheatSheet from 'src/components/GIFTCheatSheet/GiftCheatSheet';
 import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview';
 
 import { QuizType } from '../../../Types/QuizType';
 
-import './editorQuiz.css';
+import './EditorQuiz.css';
 import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent, MenuItem, Select, Snackbar } from '@mui/material';
 import ReturnButton from 'src/components/ReturnButton/ReturnButton';
 
@@ -50,6 +51,8 @@ const QuizForm: React.FC = () => {
     const [snackbarMessage, setSnackbarMessage] = useState('');
     const [copySuccess, setCopySuccess] = useState<string | null>(null);
 
+    const [useNewEditor, setUserNewEditor] = useState(false);
+
     const QuestionVraiFaux = "::Exemple de question vrai/faux:: \n 2+2 \\= 4 ? {T}  //Utilisez les valeurs {T}, {F}, {TRUE} et {FALSE}.";
     const QuestionChoixMul = "::Ville capitale du Canada:: \nQuelle ville est la capitale du Canada? {\n~ Toronto\n~ Montréal\n= Ottawa #Rétroaction spécifique.\n}  // Commentaire non visible (au besoin)";
     const QuestionChoixMulMany = "::Villes canadiennes:: \n Quelles villes trouve-t-on au Canada? { \n~ %33.3% Montréal \n ~ %33.3% Ottawa \n ~ %33.3% Vancouver \n ~ %-100% New York \n ~ %-100% Paris \n#### Rétroaction globale de la question. \n}  // Utilisez tilde (signe de vague) pour toutes les réponses. // On doit indiquer le pourcentage de chaque réponse.";
@@ -142,11 +145,27 @@ const QuizForm: React.FC = () => {
         console.log("Updated values:", [...values, '']); // Log new state
     };
 
-    const handleUpdatePreview = (newValues: string[]) => {
+    const newHandleUpdatePreview = (newValues: string[]) => {
         setValues(newValues);
         setFilteredValue(newValues.filter(value => value.trim() !== ''));
     };
 
+    const handleUpdatePreview = (value: string) => {
+        if (value !== '') {
+            setValues([value]);
+        }
+
+        // split value when there is at least one blank line
+        const linesArray = value.split(/\n{2,}/);
+
+        // if the first item in linesArray is blank, remove it
+        if (linesArray[0] === '') linesArray.shift();
+
+        if (linesArray[linesArray.length - 1] === '') linesArray.pop();
+
+        setFilteredValue(linesArray);
+    }
+
     const handleQuizTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setQuizTitle(event.target.value);
     };
@@ -248,56 +267,40 @@ const QuizForm: React.FC = () => {
         copyToClipboard(value, label);
     };
 
+    const toggleEditor = () => {
+        setUserNewEditor(!useNewEditor);
+    }
+
     return (
         <div className='quizEditor'>
-
+            <div className='editHeader' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '32px' }}>
-            <div className='editHeader'
+                <ReturnButton quizTitle={quizTitle} quizContent={filteredValue} quizFolder={selectedFolder} quizId={quiz?._id} isNewQuiz={isNewQuiz} />
-            style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: '32px'
-            }}>
-                <ReturnButton
-                    quizTitle={quizTitle}
-                    quizContent={filteredValue}
-                    quizFolder={selectedFolder}
-                    quizId={quiz?._id}
-                    isNewQuiz={isNewQuiz}
-                />
-
-
-
                 <div className='title'>Éditeur de Quiz</div>
+                <Button
+                    variant="outlined"
+                    onClick={toggleEditor}
+                    size="small"
+                    style={{
+                        fontSize: '10px', // Smaller font
+                        padding: '2px 6px', // Reduced padding
+                        minWidth: 'auto', // Allow button to shrink
+                        height: 'fit-content', // Match height to content
+                    }}
+                >
+                    {useNewEditor ? 'Ancien éditeur' : 'Nouvel éditeur'}
+                </Button>
 
-                <div className='dumb'></div>
             </div>
 
-            {/* <h2 className="subtitle">Éditeur</h2> */}
+            <TextField onChange={handleQuizTitleChange} value={quizTitle} placeholder="Titre du quiz" label="Titre du quiz" fullWidth />
-
-            <TextField
-                onChange={handleQuizTitleChange}
-                value={quizTitle}
-                placeholder="Titre du quiz"
-                label="Titre du quiz"
-                fullWidth
-            />
             <label>Choisir un dossier:
-            <NativeSelect
+                <NativeSelect id="select-folder" color="primary" value={selectedFolder} onChange={handleSelectFolder} disabled={!isNewQuiz} style={{ marginBottom: '16px' }}>
-                id="select-folder"
-                color="primary"
-                value={selectedFolder}
-                onChange={handleSelectFolder}
-                disabled={!isNewQuiz}
-                style={{ marginBottom: '16px' }} // Ajout de marge en bas
-                >
                     <option disabled value=""> Choisir un dossier... </option>
-
                     {folders.map((folder: FolderType) => (
                         <option value={folder._id} key={folder._id}> {folder.title} </option>
                     ))}
-            </NativeSelect></label>
+                </NativeSelect>
-
+            </label>
 
             <div className='sticky-buttons'>
                 <Select
@@ -305,100 +308,62 @@ const QuizForm: React.FC = () => {
                     displayEmpty
                     onChange={(e) => handleSelectChange(e.target.value, templates.find(t => t.value === e.target.value)?.label || '')}
                     style={{ width: '210px' }}
-                    inputProps={{
+                    inputProps={{ 'data-testid': 'template-select' }}
-                        'data-testid': 'template-select'
-                    }}
-
                 >
                     <MenuItem value="" disabled>Modèles de questions</MenuItem>
                     {templates.map((template, index) => (
                         <MenuItem key={index} value={template.value}>{template.label}</MenuItem>
                     ))}
                 </Select>
-                <Button
+
-                    variant="contained"
+                <Button variant="contained" onClick={handleQuizSave} sx={{ display: 'flex', alignItems: 'center' }}>
-                    onClick={handleQuizSave}
-                    sx={{ display: 'flex', alignItems: 'center' }}
-                >
                     <SaveIcon sx={{ fontSize: 20 }} />
                     Enregistrer
                 </Button>
             </div>
 
-            <Snackbar
+            <Snackbar open={!!copySuccess} autoHideDuration={3000} onClose={() => setCopySuccess(null)} message={copySuccess} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} key={copySuccess ? 'open' : 'close'} />
-                open={!!copySuccess}
-                autoHideDuration={3000}
-                onClose={() => setCopySuccess(null)}
-                message={copySuccess}
-                anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-                key={copySuccess ? 'open' : 'close'}
-            />
 
             <Divider style={{ margin: '16px 0' }} />
 
             <div className='editSection'>
-
                 <div className='edit'>
-                    <Editor
+                    {useNewEditor ? (
-                        label=""
+                        <NewEditor label="" values={values} onValuesChange={newHandleUpdatePreview} onFocusQuestion={handleFocusQuestion} />
-                        values={values}
+                    ) : (
-                        onValuesChange={handleUpdatePreview}
+                        <Editor label="" values={values} onEditorChange={handleUpdatePreview} />
-                        onFocusQuestion={handleFocusQuestion} />
+                    )}
+                    {useNewEditor && (
                         <Button variant="contained" onClick={handleAddQuestion}>
                             Ajouter une question
                         </Button>
- 
+                    )}
                     <div className="images">
-                        {/* Collapsible Upload Section */}
                         <div style={{ marginTop: '8px' }}>
-                            <Button
+                            <Button variant="outlined" onClick={() => setIsUploadCollapsed(!isUploadCollapsed)} style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}>
-                                variant="outlined"
-                                onClick={() => setIsUploadCollapsed(!isUploadCollapsed)}
-                                style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}
-                            >
                                 {isUploadCollapsed ? 'Afficher Téléverser image' : 'Masquer Téléverser image'}
                             </Button>
                             {!isUploadCollapsed && (
                                 <div className="upload">
                                     <label className="dropArea">
-                                        <input
+                                        <input type="file" id="file-input" className="file-input" accept="image/jpeg, image/png" multiple ref={fileInputRef} />
-                                            type="file"
+                                        <Button variant="outlined" aria-label="Téléverser" onClick={handleSaveImage}>
-                                            id="file-input"
-                                            className="file-input"
-                                            accept="image/jpeg, image/png"
-                                            multiple
-                                            ref={fileInputRef}
-                                        />
-                                        <Button
-                                            variant="outlined"
-                                            aria-label="Téléverser"
-                                            onClick={handleSaveImage}
-                                        >
                                             Téléverser <Upload />
                                         </Button>
                                     </label>
                                     <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
                                         <DialogTitle>Erreur</DialogTitle>
-                                        <DialogContent>
+                                        <DialogContent>Veuillez d'abord choisir une image à téléverser.</DialogContent>
-                                            Veuillez d'abord choisir une image à téléverser.
-                                        </DialogContent>
                                         <DialogActions>
-                                            <Button onClick={() => setDialogOpen(false)} color="primary">
+                                            <Button onClick={() => setDialogOpen(false)} color="primary">OK</Button>
-                                                OK
-                                            </Button>
                                         </DialogActions>
                                     </Dialog>
                                 </div>
                             )}
                         </div>
 
-                        {/* Collapsible Images Section */}
                         <div style={{ marginTop: '2px' }}>
-                            <Button
+                            <Button variant="outlined" onClick={() => setIsImagesCollapsed(!isImagesCollapsed)} style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}>
-                                variant="outlined"
-                                onClick={() => setIsImagesCollapsed(!isImagesCollapsed)}
-                                style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}
-                            >
                                 {isImagesCollapsed ? 'Afficher Mes images' : 'Masquer Mes images'}
                             </Button>
                             {!isImagesCollapsed && (
@@ -407,16 +372,8 @@ const QuizForm: React.FC = () => {
                                     <div>
                                         <div>
                                             <div style={{ display: 'inline' }}>(Voir section </div>
-                                            <a
+                                            <a href="#images-section" style={{ textDecoration: 'none' }} onClick={scrollToImagesSection}>
-                                                href="#images-section"
+                                                <u><em><h4 style={{ display: 'inline' }}> 9. Images </h4></em></u>
-                                                style={{ textDecoration: 'none' }}
-                                                onClick={scrollToImagesSection}
-                                            >
-                                                <u>
-                                                    <em>
-                                                        <h4 style={{ display: 'inline' }}> 9. Images </h4>
-                                                    </em>
-                                                </u>
                                             </a>
                                             <div style={{ display: 'inline' }}> ci-dessous</div>
                                             <div style={{ display: 'inline' }}>)</div>
@@ -428,9 +385,7 @@ const QuizForm: React.FC = () => {
                                                 const imgTag = `![alt_text](${escapeForGIFT(link)} "texte de l'infobulle")`;
                                                 return (
                                                     <li key={index}>
-                                                        <code onClick={() => handleCopyToClipboard(imgTag)}>
+                                                        <code onClick={() => handleCopyToClipboard(imgTag)}>{imgTag}</code>
-                                                            {imgTag}
-                                                        </code>
                                                     </li>
                                                 );
                                             })}
@@ -440,13 +395,8 @@ const QuizForm: React.FC = () => {
                             )}
                         </div>
 
-                        {/* Collapsible CheatSheet Section */}
                         <div style={{ marginTop: '2px' }}>
-                            <Button
+                            <Button variant="outlined" onClick={() => setIsCheatSheetCollapsed(!isCheatSheetCollapsed)} style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}>
-                                variant="outlined"
-                                onClick={() => setIsCheatSheetCollapsed(!isCheatSheetCollapsed)}
-                                style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}
-                            >
                                 {isCheatSheetCollapsed ? 'Afficher CheatSheet' : 'Masquer CheatSheet'}
                             </Button>
                             {!isCheatSheetCollapsed && <GiftCheatSheet />}
@@ -465,24 +415,12 @@ const QuizForm: React.FC = () => {
             </div>
 
             {showScrollButton && (
-                <Button
+                <Button onClick={scrollToTop} variant="contained" color="primary" style={scrollToTopButtonStyle} title="Scroll to top">
-                    onClick={scrollToTop}
-                    variant="contained"
-                    color="primary"
-                    style={scrollToTopButtonStyle}
-                    title="Scroll to top"
-                >
                     ↑
                 </Button>
             )}
 
-            <Snackbar
+            <Snackbar open={snackbarOpen} autoHideDuration={3000} onClose={handleSnackbarClose} message={snackbarMessage} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} />
-                open={snackbarOpen}
-                autoHideDuration={3000} // Hide after 3 seconds
-                onClose={handleSnackbarClose}
-                message={snackbarMessage}
-                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} // Lower-right corner
-            />
         </div>
     );
 };