mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: add expand functionality and modal support for image, PDF, and video components
This commit is contained in:
swve
parent
7ef7f9feee
commit
70ce4bcac6
3 changed files with 314 additions and 166 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import { NodeViewWrapper } from '@tiptap/react'
|
||||
import React, { useEffect } from 'react'
|
||||
import { Resizable } from 're-resizable'
|
||||
import { AlertTriangle, Image, Download, AlignLeft, AlignCenter, AlignRight } from 'lucide-react'
|
||||
import { AlertTriangle, Image, Download, AlignLeft, AlignCenter, AlignRight, Expand } from 'lucide-react'
|
||||
import { uploadNewImageFile } from '../../../../../services/blocks/Image/images'
|
||||
import { getActivityBlockMediaDirectory } from '@services/media/media'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
|
|
@ -10,6 +10,7 @@ import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
|
|||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
|
||||
import { constructAcceptValue } from '@/lib/constants';
|
||||
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||
|
||||
const SUPPORTED_FILES = constructAcceptValue(['image'])
|
||||
|
||||
|
|
@ -30,6 +31,7 @@ function ImageBlockComponent(props: any) {
|
|||
width: props.node.attrs.size ? props.node.attrs.size.width : 300,
|
||||
})
|
||||
const [alignment, setAlignment] = React.useState(props.node.attrs.alignment || 'center')
|
||||
const [isModalOpen, setIsModalOpen] = React.useState(false)
|
||||
|
||||
const fileId = blockObject
|
||||
? `${blockObject.content.file_id}.${blockObject.content.file_format}`
|
||||
|
|
@ -78,6 +80,10 @@ function ImageBlockComponent(props: any) {
|
|||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
const handleExpand = () => {
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleAlignmentChange = (newAlignment: string) => {
|
||||
setAlignment(newAlignment);
|
||||
props.updateAttributes({
|
||||
|
|
@ -85,6 +91,15 @@ function ImageBlockComponent(props: any) {
|
|||
});
|
||||
};
|
||||
|
||||
const imageUrl = blockObject ? getActivityBlockMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course?.courseStructure.course_uuid,
|
||||
props.extension.options.activity.activity_uuid,
|
||||
blockObject.block_uuid,
|
||||
fileId || '',
|
||||
'imageBlock'
|
||||
) : null;
|
||||
|
||||
useEffect(() => {}, [course, org])
|
||||
|
||||
const getAlignmentClass = () => {
|
||||
|
|
@ -99,126 +114,150 @@ function ImageBlockComponent(props: any) {
|
|||
};
|
||||
|
||||
return (
|
||||
<NodeViewWrapper className="block-image w-full">
|
||||
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Image}>
|
||||
<FileUploadBlockInput onChange={handleImageChange} accept={SUPPORTED_FILES} />
|
||||
<FileUploadBlockButton onClick={handleSubmit} disabled={!image}/>
|
||||
</FileUploadBlock>
|
||||
|
||||
{blockObject && isEditable && (
|
||||
<div className={`w-full flex ${getAlignmentClass()}`}>
|
||||
<Resizable
|
||||
defaultSize={{ width: imageSize.width, height: '100%' }}
|
||||
handleStyles={{
|
||||
right: {
|
||||
position: 'unset',
|
||||
width: 7,
|
||||
height: 30,
|
||||
borderRadius: 20,
|
||||
cursor: 'col-resize',
|
||||
backgroundColor: 'black',
|
||||
opacity: '0.3',
|
||||
margin: 'auto',
|
||||
marginLeft: 5,
|
||||
},
|
||||
}}
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
maxWidth: '100%',
|
||||
}}
|
||||
maxWidth="100%"
|
||||
minWidth={200}
|
||||
enable={{ right: true }}
|
||||
onResizeStop={(e, direction, ref, d) => {
|
||||
const newWidth = Math.min(imageSize.width + d.width, ref.parentElement?.clientWidth || 1000);
|
||||
props.updateAttributes({
|
||||
size: {
|
||||
width: newWidth,
|
||||
<>
|
||||
<NodeViewWrapper className="block-image w-full">
|
||||
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Image}>
|
||||
<FileUploadBlockInput onChange={handleImageChange} accept={SUPPORTED_FILES} />
|
||||
<FileUploadBlockButton onClick={handleSubmit} disabled={!image}/>
|
||||
</FileUploadBlock>
|
||||
|
||||
{blockObject && isEditable && (
|
||||
<div className={`w-full flex ${getAlignmentClass()}`}>
|
||||
<Resizable
|
||||
defaultSize={{ width: imageSize.width, height: '100%' }}
|
||||
handleStyles={{
|
||||
right: {
|
||||
position: 'unset',
|
||||
width: 7,
|
||||
height: 30,
|
||||
borderRadius: 20,
|
||||
cursor: 'col-resize',
|
||||
backgroundColor: 'black',
|
||||
opacity: '0.3',
|
||||
margin: 'auto',
|
||||
marginLeft: 5,
|
||||
},
|
||||
})
|
||||
setImageSize({
|
||||
width: newWidth,
|
||||
})
|
||||
}}
|
||||
>
|
||||
}}
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
maxWidth: '100%',
|
||||
}}
|
||||
maxWidth="100%"
|
||||
minWidth={200}
|
||||
enable={{ right: true }}
|
||||
onResizeStop={(e, direction, ref, d) => {
|
||||
const newWidth = Math.min(imageSize.width + d.width, ref.parentElement?.clientWidth || 1000);
|
||||
props.updateAttributes({
|
||||
size: {
|
||||
width: newWidth,
|
||||
},
|
||||
})
|
||||
setImageSize({
|
||||
width: newWidth,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div className="relative">
|
||||
<img
|
||||
src={imageUrl || ''}
|
||||
alt=""
|
||||
className="rounded-lg shadow-sm max-w-full h-auto"
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
<div className="absolute top-2 right-2 flex items-center gap-1.5 bg-white bg-opacity-90 backdrop-blur-xs rounded-lg p-1 shadow-xs transition-opacity opacity-70 hover:opacity-100">
|
||||
<button
|
||||
onClick={() => handleAlignmentChange('left')}
|
||||
className={`p-1.5 rounded-md hover:bg-gray-100 text-gray-600 ${alignment === 'left' ? 'bg-gray-100' : ''}`}
|
||||
title="Align left"
|
||||
>
|
||||
<AlignLeft size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleAlignmentChange('center')}
|
||||
className={`p-1.5 rounded-md hover:bg-gray-100 text-gray-600 ${alignment === 'center' ? 'bg-gray-100' : ''}`}
|
||||
title="Center align"
|
||||
>
|
||||
<AlignCenter size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleAlignmentChange('right')}
|
||||
className={`p-1.5 rounded-md hover:bg-gray-100 text-gray-600 ${alignment === 'right' ? 'bg-gray-100' : ''}`}
|
||||
title="Align right"
|
||||
>
|
||||
<AlignRight size={16} />
|
||||
</button>
|
||||
<div className="w-px h-4 bg-gray-300"></div>
|
||||
<button
|
||||
onClick={handleExpand}
|
||||
className="p-1.5 rounded-md hover:bg-gray-100 text-gray-600"
|
||||
title="Expand image"
|
||||
>
|
||||
<Expand size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Resizable>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{blockObject && !isEditable && (
|
||||
<div className={`w-full flex ${getAlignmentClass()}`}>
|
||||
<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'
|
||||
)}`}
|
||||
src={imageUrl || ''}
|
||||
alt=""
|
||||
className="rounded-lg shadow-sm max-w-full h-auto"
|
||||
style={{ width: '100%' }}
|
||||
style={{ width: imageSize.width, maxWidth: '100%' }}
|
||||
/>
|
||||
<div className="absolute top-2 right-2 flex items-center gap-1.5 bg-white bg-opacity-90 backdrop-blur-xs rounded-lg p-1 shadow-xs transition-opacity opacity-70 hover:opacity-100">
|
||||
<div className="absolute top-2 right-2 flex gap-1">
|
||||
<button
|
||||
onClick={() => handleAlignmentChange('left')}
|
||||
className={`p-1.5 rounded-md hover:bg-gray-100 text-gray-600 ${alignment === 'left' ? 'bg-gray-100' : ''}`}
|
||||
title="Align left"
|
||||
onClick={handleExpand}
|
||||
className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
title="Expand image"
|
||||
>
|
||||
<AlignLeft size={16} />
|
||||
<Expand className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleAlignmentChange('center')}
|
||||
className={`p-1.5 rounded-md hover:bg-gray-100 text-gray-600 ${alignment === 'center' ? 'bg-gray-100' : ''}`}
|
||||
title="Center align"
|
||||
onClick={handleDownload}
|
||||
className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
title="Download image"
|
||||
>
|
||||
<AlignCenter size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleAlignmentChange('right')}
|
||||
className={`p-1.5 rounded-md hover:bg-gray-100 text-gray-600 ${alignment === 'right' ? 'bg-gray-100' : ''}`}
|
||||
title="Align right"
|
||||
>
|
||||
<AlignRight size={16} />
|
||||
<Download className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Resizable>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{blockObject && !isEditable && (
|
||||
<div className={`w-full flex ${getAlignmentClass()}`}>
|
||||
<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>
|
||||
)}
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
<div>
|
||||
<AlertTriangle color="#e1e0e0" size={50} />
|
||||
</div>
|
||||
{isLoading && (
|
||||
<div>
|
||||
<AlertTriangle color="#e1e0e0" size={50} />
|
||||
</div>
|
||||
)}
|
||||
</NodeViewWrapper>
|
||||
|
||||
{blockObject && imageUrl && (
|
||||
<Modal
|
||||
isDialogOpen={isModalOpen}
|
||||
onOpenChange={setIsModalOpen}
|
||||
dialogTitle="Image Viewer"
|
||||
minWidth="lg"
|
||||
minHeight="lg"
|
||||
dialogContent={
|
||||
<div className="w-full flex items-center justify-center">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt=""
|
||||
className="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</NodeViewWrapper>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue