feat: get element content from Course

front/components/drags/element.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import React from "react";
 import {  Draggable } from "react-beautiful-dnd";
+import { EyeOpenIcon, Pencil2Icon } from '@radix-ui/react-icons'
 import styled from "styled-components";
 
 function Element(props: any) {
@@ -10,8 +11,11 @@ function Element(props: any) {
       {(provided) => (
         <ElementWrapper key={props.element.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
           <p>{props.element.name} </p>
+          <Link href={`/org/${props.orgslug}/course/${props.courseid}/element/${props.element.id.replace("element_", "")}`}>
+            <a  target="_blank" rel="noopener noreferrer">&nbsp; <EyeOpenIcon/></a>
+          </Link>
           <Link href={`/org/${props.orgslug}/course/${props.courseid}/element/${props.element.id.replace("element_", "")}/edit`}>
-            <a  target="_blank" rel="noopener noreferrer">Edit</a>
+            <a  target="_blank" rel="noopener noreferrer">&nbsp; <Pencil2Icon/></a>
           </Link>
         </ElementWrapper>
       )}

front/components/editor/Editor.tsx

@@ -27,7 +27,7 @@ function Editor(props: EditorProps) {
 
   async function setContent(content: any) {
     let element = props.element;
-    element.content = content.content;
+    element.content = content;
     const res = await updateElement(element, element.element_id);
     
   }

front/package-lock.json

@@ -12,6 +12,7 @@
         "@radix-ui/react-icons": "^1.1.1",
         "@tiptap/extension-collaboration": "^2.0.0-beta.199",
         "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.199",
+        "@tiptap/html": "^2.0.0-beta.202",
         "@tiptap/react": "^2.0.0-beta.199",
         "@tiptap/starter-kit": "^2.0.0-beta.199",
         "avvvatars-react": "^0.4.2",
@@ -982,9 +983,9 @@
       }
     },
     "node_modules/@tiptap/core": {
-      "version": "2.0.0-beta.199",
+      "version": "2.0.0-beta.202",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.199.tgz",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.202.tgz",
-      "integrity": "sha512-34GaXcBEmNFjW1R7nf1LSmOHo3Q81YjKqvLAXjDLLG7MTx+YTrQ4yWwUvMsZtmi4o/FchUzrs1NVCfr571Zxzg==",
+      "integrity": "sha512-KnOcZBtkWoDT7EsVLiJr9DyBnQcKJQHI8kOhNIL0snUrksr25q8xBW05iYqw6cGAF7iu1cFM80VikfgefsZUpw==",
       "dependencies": {
         "prosemirror-commands": "^1.3.1",
         "prosemirror-keymap": "^1.2.0",
@@ -1295,6 +1296,20 @@
         "@tiptap/core": "^2.0.0-beta.193"
       }
     },
+    "node_modules/@tiptap/html": {
+      "version": "2.0.0-beta.202",
+      "resolved": "https://registry.npmjs.org/@tiptap/html/-/html-2.0.0-beta.202.tgz",
+      "integrity": "sha512-NgUBBXWwXA8Oaw12AdGswVQXZ9dIKItJngEYIdh4kV9QpSGN7EnC4TPagNIAsIzBrDx+72/2UfGjQxW3F/jMug==",
+      "dependencies": {
+        "@tiptap/core": "^2.0.0-beta.202",
+        "prosemirror-model": "^1.18.1",
+        "zeed-dom": "^0.9.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
     "node_modules/@tiptap/react": {
       "version": "2.0.0-beta.199",
       "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.0.0-beta.199.tgz",
@@ -2007,6 +2022,17 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
@@ -5084,6 +5110,21 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zeed-dom": {
+      "version": "0.9.26",
+      "resolved": "https://registry.npmjs.org/zeed-dom/-/zeed-dom-0.9.26.tgz",
+      "integrity": "sha512-HWjX8rA3Y/RI32zby3KIN1D+mgskce+She4K7kRyyx62OiVxJ5FnYm8vWq0YVAja3Tf2S1M0XAc6O2lRFcMgcQ==",
+      "dependencies": {
+        "css-what": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=14.13.1"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/holtwick"
+      }
     }
   },
   "dependencies": {
@@ -5752,9 +5793,9 @@
       }
     },
     "@tiptap/core": {
-      "version": "2.0.0-beta.199",
+      "version": "2.0.0-beta.202",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.199.tgz",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.202.tgz",
-      "integrity": "sha512-34GaXcBEmNFjW1R7nf1LSmOHo3Q81YjKqvLAXjDLLG7MTx+YTrQ4yWwUvMsZtmi4o/FchUzrs1NVCfr571Zxzg==",
+      "integrity": "sha512-KnOcZBtkWoDT7EsVLiJr9DyBnQcKJQHI8kOhNIL0snUrksr25q8xBW05iYqw6cGAF7iu1cFM80VikfgefsZUpw==",
       "requires": {
         "prosemirror-commands": "^1.3.1",
         "prosemirror-keymap": "^1.2.0",
@@ -5920,6 +5961,16 @@
       "integrity": "sha512-ntOqEhkBjDHrdzxvpPe4U1JB5GgE9/yyWqWdgzSL9lpSndRTJN1xQLOmyuv0qsLqOgBHn1YITHvaxPb3t8FrFw==",
       "requires": {}
     },
+    "@tiptap/html": {
+      "version": "2.0.0-beta.202",
+      "resolved": "https://registry.npmjs.org/@tiptap/html/-/html-2.0.0-beta.202.tgz",
+      "integrity": "sha512-NgUBBXWwXA8Oaw12AdGswVQXZ9dIKItJngEYIdh4kV9QpSGN7EnC4TPagNIAsIzBrDx+72/2UfGjQxW3F/jMug==",
+      "requires": {
+        "@tiptap/core": "^2.0.0-beta.202",
+        "prosemirror-model": "^1.18.1",
+        "zeed-dom": "^0.9.19"
+      }
+    },
     "@tiptap/react": {
       "version": "2.0.0-beta.199",
       "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.0.0-beta.199.tgz",
@@ -6402,6 +6453,11 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
+    },
     "csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
@@ -8587,6 +8643,14 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zeed-dom": {
+      "version": "0.9.26",
+      "resolved": "https://registry.npmjs.org/zeed-dom/-/zeed-dom-0.9.26.tgz",
+      "integrity": "sha512-HWjX8rA3Y/RI32zby3KIN1D+mgskce+She4K7kRyyx62OiVxJ5FnYm8vWq0YVAja3Tf2S1M0XAc6O2lRFcMgcQ==",
+      "requires": {
+        "css-what": "^6.1.0"
+      }
     }
   }
 }

front/package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-icons": "^1.1.1",
     "@tiptap/extension-collaboration": "^2.0.0-beta.199",
     "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.199",
+    "@tiptap/html": "^2.0.0-beta.202",
     "@tiptap/react": "^2.0.0-beta.199",
     "@tiptap/starter-kit": "^2.0.0-beta.199",
     "avvvatars-react": "^0.4.2",

front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx

@@ -6,9 +6,8 @@ import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { getElement } from "../../../../../../../services/courses/elements";
 
-// Workarkound (Next.js SSR doesn't support tip tap editor)
+// Workaround (Next.js SSR doesn't support tip tap editor)
-
+const Editor: any = dynamic(() => import("../../../../../../../components/editor/Editor") as any, {
-const Editor : any = dynamic(() => import("../../../../../../../components/editor/editor"), {
   ssr: false,
 });
 
@@ -29,11 +28,12 @@ function EditElement() {
       fetchElementData();
     }
     return () => {};
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady]);
 
   return (
     <Layout>
-      <Title>Edit Page </Title>
+      <Title>Edit : {element.name} </Title>
       <br />
       {isLoading ? (
         <div>Loading...</div>

front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx

@@ -1,9 +1,56 @@
-import React from 'react'
+import Bold from "@tiptap/extension-bold";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import StarterKit from "@tiptap/starter-kit";
+import Text from "@tiptap/extension-text";
+import { generateHTML } from "@tiptap/html";
+import { useRouter } from "next/router";
+import React, { useMemo } from "react";
+import Layout from "../../../../../../../components/ui/Layout";
+import { getElement } from "../../../../../../../services/courses/elements";
 
 function ElementPage() {
+  const router = useRouter();
+  const { elementid } = router.query;
+  const [element, setElement] = React.useState<any>({});
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  async function fetchElementData() {
+    const element = await getElement("element_" + elementid);
+    setElement(element);
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    if (router.isReady) {
+      fetchElementData();
+    }
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady]);
+
+  const output = useMemo(() => {
+    if (router.isReady) {
+      console.log("element", element.content);
+
+      return generateHTML(element.content, [Document, StarterKit, Paragraph, Text, Bold]);
+    }
+  }, [element.content]);
+
   return (
-    <div>ElementPage</div>
+    <Layout>
-  )
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <div>
+          <p>element</p>
+          <h1>{element.name}</h1>
+          <hr />
+          <div dangerouslySetInnerHTML={{ __html: output } as any}></div>
+        </div>
+      )}
+    </Layout>
+  );
 }
 
-export default ElementPage
+export default ElementPage;

front/pages/org/[orgslug]/course/[courseid]/index.tsx

@@ -17,7 +17,7 @@ const CourseIdPage = () => {
     const course = await getCourse("course_" + courseid);
 
     setCourseInfo(course);
-    console.log(courseInfo);
+    console.log("courseinfo" , courseInfo);
 
     setIsLoading(false);
   }
@@ -27,6 +27,7 @@ const CourseIdPage = () => {
       fetchCourseInfo();
     }
     return () => {};
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady]);
 
   return (