diff --git a/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
index ef2f4e5a..fb985d78 100644
--- a/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
@@ -1,7 +1,7 @@
import { NodeViewWrapper } from '@tiptap/react'
import React, { useEffect } from 'react'
import { Resizable } from 're-resizable'
-import { AlertTriangle, Image } from 'lucide-react'
+import { AlertTriangle, Image, Download } from 'lucide-react'
import { uploadNewImageFile } from '../../../../../services/blocks/Image/images'
import { getActivityBlockMediaDirectory } from '@services/media/media'
import { useOrg } from '@components/Contexts/OrgContext'
@@ -52,6 +52,29 @@ function ImageBlockComponent(props: any) {
})
}
+ const handleDownload = () => {
+ if (!fileId) return;
+
+ const imageUrl = getActivityBlockMediaDirectory(
+ org?.org_uuid,
+ course?.courseStructure.course_uuid,
+ props.extension.options.activity.activity_uuid,
+ blockObject.block_uuid,
+ fileId,
+ 'imageBlock'
+ );
+
+ const link = document.createElement('a');
+ link.href = imageUrl || '';
+ link.download = `image-${blockObject?.block_uuid || 'download'}.${blockObject?.content.file_format || 'jpg'}`;
+ link.setAttribute('download', '');
+ link.setAttribute('target', '_blank');
+ link.setAttribute('rel', 'noopener noreferrer');
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ };
+
useEffect(() => {}, [course, org])
return (
@@ -119,19 +142,28 @@ function ImageBlockComponent(props: any) {
{blockObject && !isEditable && (
-

+
+

+
+
)}
diff --git a/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
index 23a8d025..3988699b 100644
--- a/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
@@ -1,7 +1,7 @@
import { NodeViewWrapper } from '@tiptap/react'
import React, { useEffect } from 'react'
import styled from 'styled-components'
-import { AlertTriangle, FileText } from 'lucide-react'
+import { AlertTriangle, FileText, Download } from 'lucide-react'
import { uploadNewPDFFile } from '../../../../../services/blocks/Pdf/pdf'
import { getActivityBlockMediaDirectory } from '@services/media/media'
import { useOrg } from '@components/Contexts/OrgContext'
@@ -47,6 +47,29 @@ function PDFBlockComponent(props: any) {
})
}
+ const handleDownload = () => {
+ if (!fileId) return;
+
+ const pdfUrl = getActivityBlockMediaDirectory(
+ org?.org_uuid,
+ course?.courseStructure.course_uuid,
+ props.extension.options.activity.activity_uuid,
+ blockObject.block_uuid,
+ fileId,
+ 'pdfBlock'
+ );
+
+ const link = document.createElement('a');
+ link.href = pdfUrl || '';
+ link.download = `document-${blockObject?.block_uuid || 'download'}.${blockObject?.content.file_format || 'pdf'}`;
+ link.setAttribute('download', '');
+ link.setAttribute('target', '_blank');
+ link.setAttribute('rel', 'noopener noreferrer');
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ };
+
useEffect(() => { }, [course, org])
return (
@@ -58,17 +81,28 @@ function PDFBlockComponent(props: any) {
{blockObject && (
-
+
+
+ {!isEditable && (
+
+ )}
+
)}
{isLoading && (
diff --git a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
index 3a4e64ce..3ef75117 100644
--- a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
@@ -3,7 +3,7 @@ import { Node } from '@tiptap/core'
import {
Loader2, Video, Upload, X, HelpCircle,
Maximize2, Minimize2, ArrowLeftRight,
- CheckCircle2, AlertCircle
+ CheckCircle2, AlertCircle, Download
} from 'lucide-react'
import React from 'react'
import { uploadNewVideoFile } from '../../../../../services/blocks/Video/video'
@@ -308,6 +308,21 @@ function VideoBlockComponent(props: ExtendedNodeViewProps) {
'videoBlock'
) : null
+ const handleDownload = () => {
+ if (!videoUrl) return;
+
+ // Create a temporary link element
+ const link = document.createElement('a');
+ link.href = videoUrl;
+ link.download = `video-${blockObject?.block_uuid || 'download'}.${blockObject?.content.file_format || 'mp4'}`;
+ link.setAttribute('download', '');
+ link.setAttribute('target', '_blank');
+ link.setAttribute('rel', 'noopener noreferrer');
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ };
+
// If we're in preview mode and have a video, show only the video player
if (!isEditable && blockObject && videoUrl) {
const width = VIDEO_SIZES[blockObject.size].width
@@ -317,7 +332,7 @@ function VideoBlockComponent(props: ExtendedNodeViewProps) {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
- className="w-full flex justify-center"
+ className="w-full flex justify-center relative"
>
@@ -465,6 +489,16 @@ function VideoBlockComponent(props: ExtendedNodeViewProps) {
{VIDEO_SIZES[size].label}
))}
+
+
+ Download
+