feat: add info callout custom extension

front/pages/index.tsx

@@ -4,12 +4,10 @@ import styled from "styled-components";
 import learnhouseBigIcon from "public/learnhouse_bigicon.png";
 import Image from "next/image";
 import Link from "next/link";
-import { PreAlphaLabel } from "../components//UI/Layout";
 
 const Home: NextPage = () => {
   return (
     <HomePage>
-      <PreAlphaLabel>🚧 Pre-Alpha</PreAlphaLabel>
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}

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

@@ -1,14 +1,9 @@
-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";
 import { getBackendUrl } from "../../../../../../../services/config";
+import Canva from "../../../../../../../components/Canva/Canva";
 
 function ElementPage() {
   const router = useRouter();
@@ -30,35 +25,6 @@ function ElementPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady]);
 
-  const output = useMemo(() => {
-    if (router.isReady && !isLoading) {
-      console.log(element);
-
-      if (element.type == "dynamic") {
-        let content =
-          Object.keys(element.content).length > 0
-            ? element.content
-            : {
-                type: "doc",
-                content: [
-                  {
-                    type: "paragraph",
-                    content: [
-                      {
-                        type: "text",
-                        text: "Hello world, this is a example Canva ⚡️",
-                      },
-                    ],
-                  },
-                ],
-              };
-        console.log("element", content);
-
-        return generateHTML(content, [Document, StarterKit, Paragraph, Text, Bold]);
-      }
-    }
-  }, [element.content]);
-
   return (
     <Layout>
       {isLoading ? (
@@ -69,7 +35,7 @@ function ElementPage() {
           <h1>{element.name} </h1>
           <hr />
 
-          {element.type == "dynamic" && <div dangerouslySetInnerHTML={{ __html: output } as any}></div>}
+          {element.type == "dynamic" && <Canva content= {element.content} element={element}/>}
           {/* todo : use apis & streams instead of this */}
           {element.type == "video" && (
             <video controls src={`${getBackendUrl()}content/uploads/video/${element.content.video.element_id}/${element.content.video.filename}`}></video>