feat: implement editor preview functionality

This commit is contained in:
swve 2023-04-26 22:45:57 +02:00
parent 5b2187c311
commit 0a38f5bda7
4 changed files with 17 additions and 6 deletions

View file

@ -8,7 +8,7 @@ import { getActivity } from "@services/courses/activities";
import AuthProvider from "@components/Security/AuthProvider";
import EditorWrapper from "@components/Editor/EditorWrapper";
import useSWR, { mutate } from "swr";
import { getAPIUrl } from "@services/config/config";
import { getAPIUrl, getOrgFromUri } from "@services/config/config";
import { swrFetcher } from "@services/utils/ts/requests";
@ -16,15 +16,18 @@ function EditActivity(params: any) {
const router = useRouter();
const activityid = params.params.activityid;
const courseid = params.params.courseid;
const orgslug = params.params.orgslug;
const { data: courseInfo, error: error_course } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`, swrFetcher);
const { data: activity, error: error_activity } = useSWR(`${getAPIUrl()}activities/activity_${activityid}`, swrFetcher);
return (
<AuthProvider>
{!courseInfo || !activity ? <div>Loading...</div> : <EditorWrapper course={courseInfo} activity={activity} content={activity.content}></EditorWrapper>}
{!courseInfo || !activity ? <div>Loading...</div> : <EditorWrapper orgslug={orgslug} course={courseInfo} activity={activity} content={activity.content}></EditorWrapper>}
</AuthProvider>
);
}

View file

@ -9,7 +9,7 @@ import { ToolbarButtons } from "./Toolbar/ToolbarButtons";
import { motion, AnimatePresence } from "framer-motion";
import Image from "next/image";
import styled from "styled-components";
import { getBackendUrl } from "@services/config/config";
import { getBackendUrl, getUriWithOrg } from "@services/config/config";
import { DividerVerticalIcon, EyeOpenIcon, SlashIcon } from "@radix-ui/react-icons";
import Avvvatars from "avvvatars-react";
// extensions
@ -23,18 +23,25 @@ import MathEquationBlock from "./Extensions/MathEquation/MathEquationBlock";
import PDFBlock from "./Extensions/PDF/PDFBlock";
import QuizBlock from "./Extensions/Quiz/QuizBlock";
import ToolTip from "@components/UI/Tooltip/Tooltip";
import Link from "next/link";
interface Editor {
content: string;
ydoc: any;
provider: any;
activity: any;
orgslug : string
course: any;
setContent: (content: string) => void;
}
function Editor(props: Editor) {
const auth: any = React.useContext(AuthContext);
// remove course_ from course_id
const course_id = props.course.course.course_id.substring(7);
// remove activity_ from activity_id
const activity_id = props.activity.activity_id.substring(9);
const editor: any = useEditor({
editable: true,
@ -128,7 +135,7 @@ function Editor(props: Editor) {
<DividerVerticalIcon style={{ marginTop: "auto", marginBottom: "auto", color: "grey" }} />
<EditorLeftOptionsSection>
<EditorLeftOptionsSaveButton onClick={() => props.setContent(editor.getJSON())}> Save </EditorLeftOptionsSaveButton>
<ToolTip content="Preview"><EditorLeftOptionsPreviewButton> <Eye size={15} /> </EditorLeftOptionsPreviewButton></ToolTip>
<ToolTip content="Preview"><Link target="_blank" href={`/course/${course_id}/activity/${activity_id}`}><EditorLeftOptionsPreviewButton> <Eye size={15} /> </EditorLeftOptionsPreviewButton></Link></ToolTip>
</EditorLeftOptionsSection>
</EditorUsersSection>
</EditorTop>

View file

@ -8,6 +8,7 @@ interface EditorWrapperProps {
content: string;
activity: any;
course:any
orgslug: string;
}
function EditorWrapper(props: EditorWrapperProps) : JSX.Element {
@ -35,7 +36,7 @@ function EditorWrapper(props: EditorWrapperProps) : JSX.Element {
createRTCProvider();
return <div>Loading...</div>;
} else {
return <Editor course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
return <Editor orgslug={props.orgslug} course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
}
}

View file

@ -118,7 +118,7 @@ async def get_course_meta(request: Request, course_id: str, current_user: Public
for chapter in chapters:
chapters_list_with_activities.append(
{"id": chapters[chapter]["id"], "name": chapters[chapter]["name"], "activities": [activities_list[activity] for activity in chapters[chapter]["activityIds"]]})
course = Course(**course)
course = CourseInDB(**course)
# Get activity by user
trail = await trails.find_one(