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: Improve ImageBlockComponent with responsive resizing and layout

Browse source
This commit is contained in:
swve 2025-02-26 10:20:41 +01:00
parent f8974da088
commit 552d21046e
1 changed files with 64 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -29,6 +29,7 @@ function ImageBlockComponent(props: any) {
const [imageSize, setImageSize] = React.useState({ const [imageSize, setImageSize] = React.useState({
width: props.node.attrs.size ? props.node.attrs.size.width : 300, width: props.node.attrs.size ? props.node.attrs.size.width : 300,
}) })
const fileId = blockObject const fileId = blockObject
? `${blockObject.content.file_id}.${blockObject.content.file_format}` ? `${blockObject.content.file_id}.${blockObject.content.file_format}`
: null : null
@ -54,13 +55,14 @@ function ImageBlockComponent(props: any) {
useEffect(() => {}, [course, org]) useEffect(() => {}, [course, org])
return ( return (
<NodeViewWrapper className="block-image"> <NodeViewWrapper className="block-image w-full">
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Image}> <FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Image}>
<FileUploadBlockInput onChange={handleImageChange} accept={SUPPORTED_FILES} /> <FileUploadBlockInput onChange={handleImageChange} accept={SUPPORTED_FILES} />
<FileUploadBlockButton onClick={handleSubmit} disabled={!image}/> <FileUploadBlockButton onClick={handleSubmit} disabled={!image}/>
</FileUploadBlock> </FileUploadBlock>
{blockObject && ( {blockObject && isEditable && (
<div className="w-full flex justify-center">
<Resizable <Resizable
defaultSize={{ width: imageSize.width, height: '100%' }} defaultSize={{ width: imageSize.width, height: '100%' }}
handleStyles={{ handleStyles={{
@ -77,22 +79,24 @@ function ImageBlockComponent(props: any) {
}, },
}} }}
style={{ style={{
margin: 'auto',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
height: '100%', height: '100%',
maxWidth: '100%',
}} }}
maxWidth={1000} maxWidth="100%"
minWidth={200} minWidth={200}
enable={{ right: true }}
onResizeStop={(e, direction, ref, d) => { onResizeStop={(e, direction, ref, d) => {
const newWidth = Math.min(imageSize.width + d.width, ref.parentElement?.clientWidth || 1000);
props.updateAttributes({ props.updateAttributes({
size: { size: {
width: imageSize.width + d.width, width: newWidth,
}, },
}) })
setImageSize({ setImageSize({
width: imageSize.width + d.width, width: newWidth,
}) })
}} }}
> >
@ -106,10 +110,31 @@ function ImageBlockComponent(props: any) {
'imageBlock' 'imageBlock'
)}`} )}`}
alt="" alt=""
className="rounded-lg shadow " className="rounded-lg shadow max-w-full h-auto"
style={{ width: '100%' }}
/> />
</Resizable> </Resizable>
</div>
)} )}
{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 max-w-full h-auto"
style={{ width: imageSize.width, maxWidth: '100%' }}
/>
</div>
)}
{isLoading && ( {isLoading && (
<div> <div>
<AlertTriangle color="#e1e0e0" size={50} /> <AlertTriangle color="#e1e0e0" size={50} />