diff --git a/front/components/drags/element.tsx b/front/components/drags/element.tsx
index 0d716cdb..ba8b46d5 100644
--- a/front/components/drags/element.tsx
+++ b/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) => (
{props.element.name}
+
+
+
- Edit
+
)}
diff --git a/front/components/editor/Editor.tsx b/front/components/editor/Editor.tsx
index d501ea25..db22f6e3 100644
--- a/front/components/editor/Editor.tsx
+++ b/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);
}
diff --git a/front/package-lock.json b/front/package-lock.json
index d5fc4c0d..4542cc72 100644
--- a/front/package-lock.json
+++ b/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",
- "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.199.tgz",
- "integrity": "sha512-34GaXcBEmNFjW1R7nf1LSmOHo3Q81YjKqvLAXjDLLG7MTx+YTrQ4yWwUvMsZtmi4o/FchUzrs1NVCfr571Zxzg==",
+ "version": "2.0.0-beta.202",
+ "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.202.tgz",
+ "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",
- "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.199.tgz",
- "integrity": "sha512-34GaXcBEmNFjW1R7nf1LSmOHo3Q81YjKqvLAXjDLLG7MTx+YTrQ4yWwUvMsZtmi4o/FchUzrs1NVCfr571Zxzg==",
+ "version": "2.0.0-beta.202",
+ "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.202.tgz",
+ "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"
+ }
}
}
}
diff --git a/front/package.json b/front/package.json
index d656a6d7..ec6ffb14 100644
--- a/front/package.json
+++ b/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",
diff --git a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx b/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx
index 6396d77c..77b25194 100644
--- a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx
+++ b/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)
-
-const Editor : any = dynamic(() => import("../../../../../../../components/editor/editor"), {
+// Workaround (Next.js SSR doesn't support tip tap editor)
+const Editor: any = dynamic(() => import("../../../../../../../components/editor/Editor") as any, {
ssr: false,
});
@@ -29,11 +28,12 @@ function EditElement() {
fetchElementData();
}
return () => {};
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [router.isReady]);
return (
- Edit Page
+ Edit : {element.name}
{isLoading ? (
Loading...
diff --git a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx b/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx
index 3aef1a47..690a70f1 100644
--- a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx
+++ b/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({});
+ 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 (
- ElementPage
- )
+
+ {isLoading ? (
+ Loading...
+ ) : (
+
+
element
+
{element.name}
+
+
+