rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: implement editor preview functionality

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

11
front/components/Editor/Editor.tsx
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>

3
front/components/Editor/EditorWrapper.tsx
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>;
}
}