From 21f1f2fd9455a175061be92ee8cc57eefceefa7a Mon Sep 17 00:00:00 2001 From: swve Date: Sun, 7 Jan 2024 18:15:32 +0100 Subject: [PATCH] fix: use editable workaround for blocks --- .../[courseid]/activity/[activityuuid]/edit/page.tsx | 5 +++-- apps/web/components/Contexts/Editor/EditorContext.tsx | 1 + .../Extensions/Callout/Info/InfoCalloutComponent.tsx | 8 ++++++-- .../Editor/Extensions/Callout/Warning/WarningCallout.ts | 2 -- .../Callout/Warning/WarningCalloutComponent.tsx | 8 ++++++-- .../Editor/Extensions/Image/ImageBlockComponent.tsx | 8 ++++++-- .../MathEquation/MathEquationBlockComponent.tsx | 4 +++- .../Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx | 5 ++++- .../Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx | 4 +++- .../Editor/Extensions/Video/VideoBlockComponent.tsx | 5 ++++- 10 files changed, 36 insertions(+), 14 deletions(-) diff --git a/apps/web/app/editor/course/[courseid]/activity/[activityuuid]/edit/page.tsx b/apps/web/app/editor/course/[courseid]/activity/[activityuuid]/edit/page.tsx index 06483373..672002a1 100644 --- a/apps/web/app/editor/course/[courseid]/activity/[activityuuid]/edit/page.tsx +++ b/apps/web/app/editor/course/[courseid]/activity/[activityuuid]/edit/page.tsx @@ -7,6 +7,7 @@ import { getActivityWithAuthHeader } from "@services/courses/activities"; import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshTokenServer } from "@services/auth/auth"; import { getOrganizationContextInfo, getOrganizationContextInfoWithId } from "@services/organizations/orgs"; import SessionProvider from "@components/Contexts/SessionContext"; +import EditorOptionsProvider from "@components/Contexts/Editor/EditorContext"; type MetadataProps = { params: { orgslug: string, courseid: string, activityid: string }; @@ -38,11 +39,11 @@ const EditActivity = async (params: any) => { console.log('courseInfo', courseInfo) return ( -
+ -
+ ); } diff --git a/apps/web/components/Contexts/Editor/EditorContext.tsx b/apps/web/components/Contexts/Editor/EditorContext.tsx index f38f08ff..f39bf2a4 100644 --- a/apps/web/components/Contexts/Editor/EditorContext.tsx +++ b/apps/web/components/Contexts/Editor/EditorContext.tsx @@ -1,3 +1,4 @@ +'use client'; import React, { useState } from 'react' diff --git a/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx index e6037a5c..914f1a04 100644 --- a/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx +++ b/apps/web/components/Objects/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx @@ -1,13 +1,17 @@ +import { useEditorProvider } from "@components/Contexts/Editor/EditorContext"; import { NodeViewContent, NodeViewWrapper } from "@tiptap/react"; import { AlertCircle } from "lucide-react"; import React from "react"; import styled from "styled-components"; function InfoCalloutComponent(props: any) { + const editorState = useEditorProvider() as any; + const isEditable = editorState.isEditable; + return ( - - + + ); diff --git a/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCallout.ts b/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCallout.ts index 526e417c..e7911cac 100644 --- a/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCallout.ts +++ b/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCallout.ts @@ -8,8 +8,6 @@ export default Node.create({ group: "block", draggable: true, content: "text*", - marks: "", - defining: true, // TODO : multi line support diff --git a/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx index d168350c..14338f97 100644 --- a/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx +++ b/apps/web/components/Objects/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx @@ -1,13 +1,17 @@ +import { useEditorProvider } from "@components/Contexts/Editor/EditorContext"; import { NodeViewContent, NodeViewWrapper } from "@tiptap/react"; import { AlertTriangle } from "lucide-react"; import React from "react"; import styled from "styled-components"; function WarningCalloutComponent(props: any) { + const editorState = useEditorProvider() as any; + const isEditable = editorState.isEditable; + return ( - - + + ); diff --git a/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx index e34d59f0..7e6ed2ed 100644 --- a/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx +++ b/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx @@ -8,10 +8,14 @@ import { UploadIcon } from "@radix-ui/react-icons"; import { getActivityBlockMediaDirectory } from "@services/media/media"; import { useOrg } from "@components/Contexts/OrgContext"; import { useCourse } from "@components/Contexts/CourseContext"; +import { useEditorProvider } from "@components/Contexts/Editor/EditorContext"; function ImageBlockComponent(props: any) { const org = useOrg() as any; const course = useCourse() as any; + const editorState = useEditorProvider() as any; + + const isEditable = editorState.isEditable; const [image, setImage] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject); @@ -39,8 +43,8 @@ function ImageBlockComponent(props: any) { return ( - {!blockObject && props.extension.options.editable && ( - + {!blockObject && isEditable && ( + {isLoading ? ( ) : ( diff --git a/apps/web/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx index 4c2938cb..d7fe11c0 100644 --- a/apps/web/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx +++ b/apps/web/components/Objects/Editor/Extensions/MathEquation/MathEquationBlockComponent.tsx @@ -5,11 +5,13 @@ import "katex/dist/katex.min.css"; import { InlineMath, BlockMath } from "react-katex"; import { Edit, Save } from "lucide-react"; import Link from "next/link"; +import { useEditorProvider } from "@components/Contexts/Editor/EditorContext"; function MathEquationBlockComponent(props: any) { const [equation, setEquation] = React.useState(props.node.attrs.math_equation); const [isEditing, setIsEditing] = React.useState(true); - const isEditable = props.extension.options.editable; + const editorState = useEditorProvider() as any; + const isEditable = editorState.isEditable; const handleEquationChange = (event: React.ChangeEvent) => { setEquation(event.target.value); diff --git a/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx index b55f935f..4946f762 100644 --- a/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx +++ b/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx @@ -8,6 +8,7 @@ import { UploadIcon } from "@radix-ui/react-icons"; import { getActivityBlockMediaDirectory } from "@services/media/media"; import { useOrg } from "@components/Contexts/OrgContext"; import { useCourse } from "@components/Contexts/CourseContext"; +import { useEditorProvider } from "@components/Contexts/Editor/EditorContext"; function PDFBlockComponent(props: any) { const org = useOrg() as any; @@ -16,6 +17,8 @@ function PDFBlockComponent(props: any) { const [isLoading, setIsLoading] = React.useState(false); const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject); const fileId = blockObject ? `${blockObject.content.file_id}.${blockObject.content.file_format}` : null; + const editorState = useEditorProvider() as any; + const isEditable = editorState.isEditable; const handlePDFChange = (event: React.ChangeEvent) => { setPDF(event.target.files[0]); @@ -39,7 +42,7 @@ function PDFBlockComponent(props: any) { return ( {!blockObject && ( - + {isLoading ? ( ) : ( diff --git a/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx index c3e350f2..d0cc0db0 100644 --- a/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx +++ b/apps/web/components/Objects/Editor/Extensions/Quiz/QuizBlockComponent.tsx @@ -4,6 +4,7 @@ import { twJoin, twMerge } from 'tailwind-merge' import React from "react"; import { BadgeHelp, Check, Info, Minus, MoreVertical, Plus, RefreshCcw, X } from "lucide-react"; import ReactConfetti from "react-confetti"; +import { useEditorProvider } from "@components/Contexts/Editor/EditorContext"; interface Answer { answer_id: string; @@ -22,7 +23,8 @@ function QuizBlockComponent(props: any) { const [userAnswers, setUserAnswers] = React.useState([]) as [any[], any]; const [submitted, setSubmitted] = React.useState(false) as [boolean, any]; const [submissionMessage, setSubmissionMessage] = React.useState("") as [string, any]; - const isEditable = props.extension.options.editable; + const editorState = useEditorProvider() as any; + const isEditable = editorState.isEditable; const handleAnswerClick = (question_id: string, answer_id: string) => { // if the quiz is submitted, do nothing diff --git a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx index 7f5a0b3d..1b597ac8 100644 --- a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx +++ b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx @@ -8,10 +8,13 @@ import { getActivityBlockMediaDirectory } from "@services/media/media"; import { UploadIcon } from "@radix-ui/react-icons"; import { useOrg } from "@components/Contexts/OrgContext"; import { useCourse } from "@components/Contexts/CourseContext"; +import { useEditorProvider } from "@components/Contexts/Editor/EditorContext"; function VideoBlockComponents(props: any) { const org = useOrg() as any; const course = useCourse() as any; + const editorState = useEditorProvider() as any; + const isEditable = editorState.isEditable; const [video, setVideo] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject); @@ -39,7 +42,7 @@ function VideoBlockComponents(props: any) { return ( {!blockObject && ( - + {isLoading ? ( ) : (