mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-18 20:09:25 +00:00
feat: get element content from Course
This commit is contained in:
swve
parent
4e966d9126
commit
57e64a2b74
7 changed files with 134 additions and 17 deletions
|
|
@ -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"> <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"> <Pencil2Icon/></a>
|
||||
</Link>
|
||||
</ElementWrapper>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
}
|
||||
|
|
|
|||
76
front/package-lock.json
generated
76
front/package-lock.json
generated
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Layout>
|
||||
<Title>Edit Page </Title>
|
||||
<Title>Edit : {element.name} </Title>
|
||||
<br />
|
||||
{isLoading ? (
|
||||
<div>Loading...</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue