Merge branch 'main' into add-composant-and-snapshot-tests-for-the-EditorQuiz

Button pour monter en haut de la page d'éditeur de quiz

client/package-lock.json

@@ -19,6 +19,7 @@
                 "@mui/material": "^6.1.0",
                 "@types/uuid": "^9.0.7",
                 "axios": "^1.6.7",
+                "dompurify": "^3.2.3",
                 "esbuild": "^0.23.1",
                 "gift-pegjs": "^1.0.2",
                 "jest-environment-jsdom": "^29.7.0",
@@ -4705,6 +4706,13 @@
             "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
             "license": "MIT"
         },
+        "node_modules/@types/trusted-types": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+            "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+            "license": "MIT",
+            "optional": true
+        },
         "node_modules/@types/unist": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -6230,6 +6238,15 @@
                 "node": ">=12"
             }
         },
+        "node_modules/dompurify": {
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.3.tgz",
+            "integrity": "sha512-U1U5Hzc2MO0oW3DF+G9qYN0aT7atAou4AgI0XjWz061nyBPbdxkfdhfy5uMgGn6+oLFCfn44ZGbdDqCzVmlOWA==",
+            "license": "(MPL-2.0 OR Apache-2.0)",
+            "optionalDependencies": {
+                "@types/trusted-types": "^2.0.7"
+            }
+        },
         "node_modules/dunder-proto": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -10818,9 +10835,9 @@
             }
         },
         "node_modules/postcss/node_modules/nanoid": {
-            "version": "3.3.7",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-            "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+            "version": "3.3.8",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+            "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
             "funding": [
                 {
                     "type": "github",

client/package.json

@@ -23,6 +23,7 @@
         "@mui/material": "^6.1.0",
         "@types/uuid": "^9.0.7",
         "axios": "^1.6.7",
+        "dompurify": "^3.2.3",
         "esbuild": "^0.23.1",
         "gift-pegjs": "^1.0.2",
         "jest-environment-jsdom": "^29.7.0",

client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import AnswerIcon from 'src/components/GiftTemplate/templates/AnswerIcon';
+import DOMPurify from 'dompurify';
 
 describe('AnswerIcon', () => {
   test('renders correct icon when correct is true', () => {
-    const { container } = render(<div dangerouslySetInnerHTML={{ __html: AnswerIcon({ correct: true }) }} />);
+    const { container } = render(<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(AnswerIcon({ correct: true })) }} />);
     const svgElement = container.querySelector('svg');
 
     expect(svgElement).toBeInTheDocument();
@@ -20,7 +21,7 @@ describe('AnswerIcon', () => {
   });
 
   test('renders incorrect icon when correct is false', () => {
-    const { container } = render(<div dangerouslySetInnerHTML={{ __html: AnswerIcon({ correct: false }) }} />);
+    const { container } = render(<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(AnswerIcon({ correct: false })) }} />);
     const svgElement = container.querySelector('svg');
 
     expect(svgElement).toBeInTheDocument();

client/src/components/GiftTemplate/GIFTTemplatePreview.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import Template, { ErrorTemplate } from './templates';
 import { parse } from 'gift-pegjs';
 import './styles.css';
+import DOMPurify from 'dompurify';
 
 interface GIFTTemplatePreviewProps {
     questions: string[];
@@ -73,7 +74,7 @@ const GIFTTemplatePreview: React.FC<GIFTTemplatePreviewProps> = ({
                 <div className="error">{error}</div>
             ) : isPreviewReady ? (
                 <div data-testid="preview-container">
-                    <div dangerouslySetInnerHTML={{ __html: items }}></div>
+                    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(items) }}></div>
                 </div>
             ) : (
                 <div className="loading">Chargement de la prévisualisation...</div>

client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx

@@ -4,6 +4,7 @@ import '../questionStyle.css';
 import { Button } from '@mui/material';
 import textType, { formatLatex } from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
+import DOMPurify from 'dompurify';
 // import Latex from 'react-latex';
 
 type Choices = {
@@ -39,7 +40,7 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-container">
             <div className="question content">
-                <div dangerouslySetInnerHTML={{ __html: textType({text: questionContent}) }} />
+                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: questionContent})) }} />
             </div>
             <div className="choices-wrapper mb-1">
                 {choices.map((choice, i) => {
@@ -56,7 +57,7 @@ const MultipleChoiceQuestion: React.FC<Props> = (props) => {
                                     (choice.isCorrect ? '✅' : '❌')}
                                 <div className={`circle ${selected}`}>{alphabet[i]}</div>
                                 <div className={`answer-text ${selected}`}>
-                                    <div dangerouslySetInnerHTML={{ __html: formatLatex(choice.text.text) }} />
+                                    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(formatLatex(choice.text.text)) }} />
                                 </div>
                             </Button>
                             {choice.feedback && showAnswer && (

client/src/components/Questions/NumericalQuestion/NumericalQuestion.tsx

@@ -4,6 +4,7 @@ import '../questionStyle.css';
 import { Button, TextField } from '@mui/material';
 import textType from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
+import DOMPurify from 'dompurify';
 
 type CorrectAnswer = {
     numberHigh?: number;
@@ -34,7 +35,7 @@ const NumericalQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-wrapper">
             <div>
-                <div dangerouslySetInnerHTML={{ __html: textType({text: questionContent}) }} />
+                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: questionContent})) }} />
             </div>
             {showAnswer ? (
                 <>

client/src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.tsx

@@ -4,6 +4,7 @@ import '../questionStyle.css';
 import { Button, TextField } from '@mui/material';
 import textType from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
+import DOMPurify from 'dompurify';
 
 type Choices = {
     feedback: { format: string; text: string } | null;
@@ -28,7 +29,7 @@ const ShortAnswerQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-wrapper">
             <div className="question content">
-                <div dangerouslySetInnerHTML={{ __html: textType({text: questionContent}) }} />
+                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({text: questionContent})) }} />
             </div>
             {showAnswer ? (
                 <>

client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx

@@ -4,6 +4,7 @@ import '../questionStyle.css';
 import { Button } from '@mui/material';
 import textType from '../../GiftTemplate/templates/TextType';
 import { TextFormat } from '../../GiftTemplate/templates/types';
+import DOMPurify from 'dompurify';
 
 interface Props {
     questionContent: TextFormat;
@@ -27,7 +28,7 @@ const TrueFalseQuestion: React.FC<Props> = (props) => {
     return (
         <div className="question-container">
             <div className="question content">
-            <div dangerouslySetInnerHTML={{ __html: textType({ text: questionContent }) }} />
+            <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(textType({ text: questionContent })) }} />
             </div>
             <div className="choices-wrapper mb-1">
                 <Button

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

@@ -1,5 +1,5 @@
 // EditorQuiz.tsx
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, CSSProperties } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 
 import { FolderType } from '../../../Types/FolderType';
@@ -40,6 +40,26 @@ const QuizForm: React.FC = () => {
     };
     const fileInputRef = useRef<HTMLInputElement>(null);
     const [dialogOpen, setDialogOpen] = useState(false);
+    const [showScrollButton, setShowScrollButton] = useState(false);
+
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 300) {
+                setShowScrollButton(true);
+            } else {
+                setShowScrollButton(false);
+            }
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -292,8 +312,32 @@ const QuizForm: React.FC = () => {
 
             </div>
 
+            {showScrollButton && (
+                <Button
+                    onClick={scrollToTop}
+                    variant="contained"
+                    color="primary"
+                    style={scrollToTopButtonStyle}
+                    title="Scroll to top"
+                >
+                    ↑
+                </Button>
+            )}
         </div>
     );
 };
 
+const scrollToTopButtonStyle: CSSProperties = {
+    position: 'fixed',
+    bottom: '40px',
+    right: '50px',
+    padding: '10px',
+    fontSize: '16px',
+    color: 'white',
+    backgroundColor: '#5271ff',
+    border: 'none',
+    cursor: 'pointer',
+    zIndex: 1000,
+};
+
 export default QuizForm;

package-lock.json

@@ -0,0 +1,28 @@
+{
+  "name": "EvalueTonSavoir",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "dompurify": "^3.2.3"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/dompurify": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.3.tgz",
+      "integrity": "sha512-U1U5Hzc2MO0oW3DF+G9qYN0aT7atAou4AgI0XjWz061nyBPbdxkfdhfy5uMgGn6+oLFCfn44ZGbdDqCzVmlOWA==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "dompurify": "^3.2.3"
+  }
+}