Rich text editor2

frontend/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.61",
+    "quill": "^1.3.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
@@ -42,6 +43,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/quill": "^2.0.14",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "eslint": "^8.54.0"

frontend/src/pages/CoursePage/CoursePage.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore
 import React, { useEffect, useState } from 'react';
 import CourseDetails from "./Components/CourseDetails";
 import { getCourseDetails } from '../../api/courseService';

frontend/src/pages/CourseStreamListPage/CourseStreamListPage.tsx

@@ -3,6 +3,7 @@ import React, {CSSProperties, useEffect, useState} from 'react';
 import CourseInstance from "./Components/CourseInstance";
 import { getCoursesList } from '../../api/coursesListService';
 
+
 // TypeScript interfaces for type checking
 interface Course {
     id: string;

frontend/src/pages/CourseTemplateListPage/Components/TemplateInstance.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { CSSProperties } from 'react';
 import { useMyContext } from '../../../MyContext';
 
+
 const cellStyle: CSSProperties = {
     border: '1px solid black',
     padding: '10px',

frontend/src/pages/CourseTemplateListPage/CourseTemplateListPage.tsx

@@ -2,6 +2,22 @@ import React, {CSSProperties, useEffect, useState} from 'react';
 
 import TemplateInstance from "./Components/TemplateInstance";
 import { getCourseTemplates } from '../../api/templateListService';
+//import RichTextEditor from "../../pages/RichTextEditor";
+
+// Example using RichTextEditor:
+/*const YourPageComponent: React.FC = () => {
+    const handleFileUpload = (fileContent: string) => {
+        // Do something with the file content, e.g., save it or display it
+        console.log('File content:', fileContent);
+    };
+
+    return (
+        <div>
+            <h1>Your Page</h1>
+            <RichTextEditor onFileUpload={handleFileUpload} />
+        </div>
+    );
+};*/
 
 const tableStyle: CSSProperties = {
     width: '100%',      // Makes the table full-width

frontend/src/pages/RichTextEditor.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+
+interface RichTextEditorProps {
+    onFileUpload: (fileContent: string) => void;
+}
+
+const RichTextEditor: React.FC<RichTextEditorProps> = ({ onFileUpload }) => {
+    const quillRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const quill = new Quill(quillRef.current as HTMLElement, {
+            theme: 'snow',
+            placeholder: 'Write something...',
+        });
+
+        // Optional: Add event listeners or customize Quill further if needed
+
+        return () => {
+            quill.off('text-change', () => {});
+            quill.off('selection-change', () => {});
+        };
+    }, []);
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const fileContent = e.target?.result as string;
+                onFileUpload(fileContent);
+            };
+            reader.readAsText(file);
+        }
+    };
+
+    return (
+        <div>
+            <div ref={quillRef} />
+            <input type="file" onChange={handleFileChange} />
+        </div>
+    );
+};
+
+export default RichTextEditor;