fix: use editable workaround for blocks

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 (
-    <div>
+    <EditorOptionsProvider options={{ isEditable: true }}>
       <SessionProvider>
         <EditorWrapper org={org} course={courseInfo} activity={activity} content={activity.content}></EditorWrapper>
       </SessionProvider>
-    </div>
+    </EditorOptionsProvider>
   );
 }
 

apps/web/components/Contexts/Editor/EditorContext.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { useState } from 'react'
 
 

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 (
     <NodeViewWrapper>
-      <InfoCalloutWrapper className="flex space-x-2 items-center bg-blue-200 rounded-lg text-blue-900 px-3 shadow-inner" contentEditable={props.extension.options.editable}>
+      <InfoCalloutWrapper className="flex space-x-2 items-center bg-blue-200 rounded-lg text-blue-900 px-3 shadow-inner" contentEditable={isEditable}>
-        <AlertCircle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
+        <AlertCircle /> <NodeViewContent contentEditable={isEditable} className="content" />
       </InfoCalloutWrapper>
     </NodeViewWrapper>
   );

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
 

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 (
     <NodeViewWrapper>
-      <CalloutWrapper className="flex space-x-2 items-center bg-yellow-200 rounded-lg text-yellow-900 px-3 shadow-inner" contentEditable={props.extension.options.editable}>
+      <CalloutWrapper className="flex space-x-2 items-center bg-yellow-200 rounded-lg text-yellow-900 px-3 shadow-inner" contentEditable={isEditable}>
-        <AlertTriangle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
+        <AlertTriangle /> <NodeViewContent contentEditable={isEditable} className="content" />
       </CalloutWrapper>
     </NodeViewWrapper>
   );

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 (
     <NodeViewWrapper className="block-image">
-      {!blockObject && props.extension.options.editable && (
+      {!blockObject && isEditable && (
-        <BlockImageWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
+        <BlockImageWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={isEditable}>
           {isLoading ? (
             <Loader className="animate-spin animate-pulse text-gray-200" size={50} />
           ) : (

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<any>) => {
     setEquation(event.target.value);

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<any>) => {
     setPDF(event.target.files[0]);
@@ -39,7 +42,7 @@ function PDFBlockComponent(props: any) {
   return (
     <NodeViewWrapper className="block-pdf">
       {!blockObject && (
-        <BlockPDFWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
+        <BlockPDFWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={isEditable}>
           {isLoading ? (
             <Loader className="animate-spin animate-pulse text-gray-200" size={50} />
           ) : (

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

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 (
     <NodeViewWrapper className="block-video">
       {!blockObject && (
-        <BlockVideoWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={props.extension.options.editable}>
+        <BlockVideoWrapper className="flex items-center space-x-3 py-7 bg-gray-50 rounded-xl text-gray-900 px-3 border-dashed border-gray-150 border-2" contentEditable={isEditable}>
           {isLoading ? (
             <Loader className="animate-spin animate-pulse text-gray-200" size={50} />
           ) : (