Integrate Tutorial creation with backend

package.json

@@ -29,6 +29,7 @@
     "chalk": "^5.2.0",
     "codemirror": "^5.56.0",
     "color-thief-react": "^1.0.2",
+    "dompurify": "^3.0.5",
     "elasticlunr": "^0.9.5",
     "emoji-picker-react": "^4.4.9",
     "firebase": "^9.17.2",

src/components/Editor/QuillEditor.jsx

@@ -1,15 +1,16 @@
 import React, { useEffect, useRef, useState } from "react";
 import "../../css/quillEditor.css";
-import { useFirebase } from "react-redux-firebase";
+import { useFirestore } from "react-redux-firebase";
 import { useDispatch, useSelector } from "react-redux";
 import { Prompt } from "react-router-dom";
-import { setCurrentStep } from "../../store/actions";
+import { setCurrentStepContent } from "../../store/actions";
 import * as Y from "yjs";
 import { QuillBinding } from "y-quill";
 import Quill from "quill";
 import QuillCursors from "quill-cursors";
 import { FirestoreProvider, getColor } from "@gmcfall/yjs-firestore-provider";
 import { onlineFirebaseApp } from "../../config";
+import { QuillDeltaToHtmlConverter } from "quill-delta-to-html";
 
 Quill.register("modules/cursors", QuillCursors);
 
@@ -18,11 +19,13 @@ const QuillEditor = ({ id, data, tutorial_id }) => {
   const editorRef = useRef(null);
   const containerRef = useRef(null);
   let noteID = id || "test_note";
-  const firebase = useFirebase();
+  const firestore = useFirestore();
   const dispatch = useDispatch();
-  const basePath = ["cl_codelabz", "organization", "codelabzorg", tutorial_id];
+  // This path in cloud firestore contains yjs documents storing content of a step
+  // (actual data used to render is present in "steps" collection in the same doc)
+  const basePath = ["tutorials", tutorial_id, "yjsStepDocs", id];
   let provider, binding, ydoc;
-  
+
   const currentUserHandle = useSelector(
     ({
       firebase: {
@@ -43,8 +46,13 @@ const QuillEditor = ({ id, data, tutorial_id }) => {
 
         // on updating text in editor this gets triggered
         ydoc.on("update", () => {
+          // deltaText is quill editor's data structure to store text
           const deltaText = ydoc.getText("quill").toDelta();
-          setCurrentStep(deltaText)(dispatch);
+          var config = {};
+          var converter = new QuillDeltaToHtmlConverter(deltaText, config);
+
+          var html = converter.convert();
+          setCurrentStepContent(tutorial_id, id, html)(firestore, dispatch);
         });
         provider = new FirestoreProvider(onlineFirebaseApp, ydoc, basePath, {
           disableAwareness: true

src/components/Tutorials/index.jsx

@@ -13,15 +13,15 @@ import StepsTitle from "./subComps/StepsTitle";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import {
-  getCurrentStepContentFromRTDB,
+  getCurrentStepContentFromFirestore,
   getCurrentTutorialData,
   setCurrentStepNo
 } from "../../store/actions";
 import { useFirebase, useFirestore } from "react-redux-firebase";
 import Spinner from "../../helpers/spinner";
 import AddNewStepModal from "./subComps/AddNewStep";
 import QuillEditor from "../Editor/QuillEditor";
-import RichTextRenderer from "./subComps/RichTextRenderer";
+import HtmlTextRenderer from "./subComps/HtmlTextRenderer";
 import { Collapse, Button } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { makeStyles } from "@mui/styles";
@@ -152,8 +152,8 @@ const ViewTutorial = () => {
   useEffect(() => {
     if (stepsData) {
       setTimeRemaining(TutorialTimeRemaining(stepsData, currentStep));
-      getCurrentStepContentFromRTDB(tutorial_id, stepsData[currentStep].id)(
-        firebase,
+      getCurrentStepContentFromFirestore(tutorial_id, stepsData[currentStep].id)(
+        firestore,
         dispatch
       );
     }
@@ -264,7 +264,7 @@ const ViewTutorial = () => {
                   <>
                     {mode === "view" && (
                       <div data-testId="tutorial-content">
-                        <RichTextRenderer delta={currentStepContent} />
+                        <HtmlTextRenderer html={currentStepContent} />
                       </div>
                     )}
                     {mode === "edit" && (

src/components/Tutorials/subComps/HtmlTextRenderer.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import DOMPurify from "dompurify";
+
+const HtmlTextRenderer = ({ html = "<p>Html Text Renderer</p>" }) => {
+    // used to remove any sensitive tags like <script> which might me malicious
+  const sanitizedHTML = DOMPurify.sanitize(html);
+  return <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />;
+};
+
+export default HtmlTextRenderer;

src/store/actions/index.js

@@ -47,7 +47,7 @@ export {
   clearTutorialImagesReducer,
   clearTutorialsBasicData,
   createTutorial,
-  getCurrentStepContentFromRTDB,
+  getCurrentStepContentFromFirestore,
   getCurrentTutorialData,
   getOrgTutorialsBasicData,
   getUserTutorialsBasicData,
@@ -57,6 +57,7 @@ export {
   searchFromTutorialsIndex,
   setCurrentStep,
   setCurrentStepNo,
+  setCurrentStepContent,
   setTutorialTheme,
   updateStepTime,
   updateStepTitle,