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: add download functionality to Image, PDF, and Video block components

Browse source
This commit is contained in:
swve 2025-04-13 13:06:58 +02:00
parent 3f2a008bef
commit b25505465b
3 changed files with 133 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

60
apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
View file

@ -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 && (
<div className="w-full flex justify-center">
<img
src={`${getActivityBlockMediaDirectory(
org?.org_uuid,
course?.courseStructure.course_uuid,
props.extension.options.activity.activity_uuid,
blockObject.block_uuid,
blockObject ? fileId : ' ',
'imageBlock'
)}`}
alt=""
className="rounded-lg shadow-sm max-w-full h-auto"
style={{ width: imageSize.width, maxWidth: '100%' }}
/>
<div className="relative">
<img
src={`${getActivityBlockMediaDirectory(
org?.org_uuid,
course?.courseStructure.course_uuid,
props.extension.options.activity.activity_uuid,
blockObject.block_uuid,
blockObject ? fileId : ' ',
'imageBlock'
)}`}
alt=""
className="rounded-lg shadow-sm max-w-full h-auto"
style={{ width: imageSize.width, maxWidth: '100%' }}
/>
<button
onClick={handleDownload}
className="absolute top-2 right-2 p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
title="Download image"
>
<Download className="w-4 h-4 text-white" />
</button>
</div>
</div>
)}