feat: add expand functionality and modal support for image, PDF, and video components

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, 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}>
+      <NodeViewWrapper className="block-image w-full">
-        <FileUploadBlockInput onChange={handleImageChange} accept={SUPPORTED_FILES} />
+       <FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Image}>
-        <FileUploadBlockButton onClick={handleSubmit} disabled={!image}/>
+          <FileUploadBlockInput onChange={handleImageChange} accept={SUPPORTED_FILES} />
-      </FileUploadBlock>
+          <FileUploadBlockButton onClick={handleSubmit} disabled={!image}/>
+        </FileUploadBlock>
         
-      {blockObject && isEditable && (
+        {blockObject && isEditable && (
-        <div className={`w-full flex ${getAlignmentClass()}`}>
+          <div className={`w-full flex ${getAlignmentClass()}`}>
-          <Resizable
+            <Resizable
-            defaultSize={{ width: imageSize.width, height: '100%' }}
+              defaultSize={{ width: imageSize.width, height: '100%' }}
-            handleStyles={{
+              handleStyles={{
-              right: {
+                right: {
-                position: 'unset',
+                  position: 'unset',
-                width: 7,
+                  width: 7,
-                height: 30,
+                  height: 30,
-                borderRadius: 20,
+                  borderRadius: 20,
-                cursor: 'col-resize',
+                  cursor: 'col-resize',
-                backgroundColor: 'black',
+                  backgroundColor: 'black',
-                opacity: '0.3',
+                  opacity: '0.3',
-                margin: 'auto',
+                  margin: 'auto',
-                marginLeft: 5,
+                  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,
                 },
-              })
+              }}
-              setImageSize({
+              style={{
-                width: newWidth,
+                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(
+                src={imageUrl || ''}
-                  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: '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')}
+                  onClick={handleExpand}
-                  className={`p-1.5 rounded-md hover:bg-gray-100 text-gray-600 ${alignment === 'left' ? 'bg-gray-100' : ''}`}
+                  className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
-                  title="Align left"
+                  title="Expand image"
                 >
-                  <AlignLeft size={16} />
+                  <Expand className="w-4 h-4 text-white" />
                 </button>
                 <button
-                  onClick={() => handleAlignmentChange('center')}
+                  onClick={handleDownload}
-                  className={`p-1.5 rounded-md hover:bg-gray-100 text-gray-600 ${alignment === 'center' ? 'bg-gray-100' : ''}`}
+                  className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
-                  title="Center align"
+                  title="Download image"
                 >
-                  <AlignCenter size={16} />
+                  <Download className="w-4 h-4 text-white" />
-                </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>
             </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 && (
+        {isLoading && (
-        <div>
+          <div>
-          <AlertTriangle color="#e1e0e0" size={50} />
+            <AlertTriangle color="#e1e0e0" size={50} />
-        </div>
+          </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>
+    </>
   )
 }
 

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, Download } from 'lucide-react'
+import { AlertTriangle, FileText, Download, Expand } from 'lucide-react'
 import { uploadNewPDFFile } from '../../../../../services/blocks/Pdf/pdf'
 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(['pdf'])
 
@@ -23,6 +24,7 @@ function PDFBlockComponent(props: any) {
   const [blockObject, setblockObject] = React.useState(
     props.node.attrs.blockObject
   )
+  const [isModalOpen, setIsModalOpen] = React.useState(false)
   const fileId = blockObject
     ? `${blockObject.content.file_id}.${blockObject.content.file_format}`
     : null
@@ -70,47 +72,83 @@ function PDFBlockComponent(props: any) {
     document.body.removeChild(link);
   };
 
+  const handleExpand = () => {
+    setIsModalOpen(true);
+  };
+
+  const pdfUrl = blockObject ? getActivityBlockMediaDirectory(
+    org?.org_uuid,
+    course?.courseStructure.course_uuid,
+    props.extension.options.activity.activity_uuid,
+    blockObject.block_uuid,
+    fileId || '',
+    'pdfBlock'
+  ) : null;
+
   useEffect(() => { }, [course, org])
 
   return (
-    <NodeViewWrapper className="block-pdf">
+    <>
-      <FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={FileText}>
+      <NodeViewWrapper className="block-pdf">
-        <FileUploadBlockInput onChange={handlePDFChange} accept={SUPPORTED_FILES} />
+        <FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={FileText}>
-        <FileUploadBlockButton onClick={handleSubmit} disabled={!pdf}/>
+          <FileUploadBlockInput onChange={handlePDFChange} accept={SUPPORTED_FILES} />
-      </FileUploadBlock>
+          <FileUploadBlockButton onClick={handleSubmit} disabled={!pdf}/>
+        </FileUploadBlock>
         
-      {blockObject && (
+        {blockObject && (
-        <BlockPDF>
+          <BlockPDF>
-          <div className="relative">
+            <div className="relative">
-            <iframe
+              <iframe
-              className="shadow-sm rounded-lg h-96 w-full object-scale-down bg-black"
+                className="shadow-sm rounded-lg h-96 w-full object-scale-down bg-black"
-              src={`${getActivityBlockMediaDirectory(
+                src={pdfUrl || ''}
-                org?.org_uuid,
+              />
-                course?.courseStructure.course_uuid,
+              <div className="absolute top-2 right-2 flex gap-1">
-                props.extension.options.activity.activity_uuid,
+                <button
-                blockObject.block_uuid,
+                  onClick={handleExpand}
-                blockObject ? fileId : ' ',
+                  className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
-                'pdfBlock'
+                  title="Expand PDF"
-              )}`}
+                >
-            />
+                  <Expand className="w-4 h-4 text-white" />
-            {!isEditable && (
+                </button>
-              <button
+                {!isEditable && (
-                onClick={handleDownload}
+                  <button
-                className="absolute top-2 right-2 p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
+                    onClick={handleDownload}
-                title="Download PDF"
+                    className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
-              >
+                    title="Download PDF"
-                <Download className="w-4 h-4 text-white" />
+                  >
-              </button>
+                    <Download className="w-4 h-4 text-white" />
-            )}
+                  </button>
+                )}
+              </div>
+            </div>
+          </BlockPDF>
+        )}
+        {isLoading && (
+          <div>
+            <AlertTriangle color="#e1e0e0" size={50} />
           </div>
-        </BlockPDF>
+        )}
+      </NodeViewWrapper>
+      
+      {blockObject && pdfUrl && (
+        <Modal
+          isDialogOpen={isModalOpen}
+          onOpenChange={setIsModalOpen}
+          dialogTitle="PDF Document"
+          minWidth="xl"
+          minHeight="xl"
+          dialogContent={
+            <div className="w-full h-[80vh]">
+              <iframe
+                className="w-full h-full rounded-lg shadow-lg border"
+                src={pdfUrl}
+                title="PDF Document"
+              />
+            </div>
+          }
+        />
       )}
-      {isLoading && (
+    </>
-        <div>
-          <AlertTriangle color="#e1e0e0" size={50} />
-        </div>
-      )}
-    </NodeViewWrapper>
   )
 }
 

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, Download
+  CheckCircle2, AlertCircle, Download, Expand
 } from 'lucide-react'
 import React from 'react'
 import { uploadNewVideoFile } from '../../../../../services/blocks/Video/video'
@@ -16,6 +16,7 @@ import { constructAcceptValue } from '@/lib/constants'
 import { cn } from '@/lib/utils'
 import { motion, AnimatePresence } from 'framer-motion'
 import styled from 'styled-components'
+import Modal from '@components/Objects/StyledElements/Modal/Modal'
 
 const SUPPORTED_FILES = constructAcceptValue(['webm', 'mp4'])
 
@@ -189,6 +190,7 @@ function VideoBlockComponent(props: ExtendedNodeViewProps) {
   const [uploadProgress, setUploadProgress] = React.useState(0)
   const [blockObject, setBlockObject] = React.useState<VideoBlockObject | null>(initialBlockObject)
   const [selectedSize, setSelectedSize] = React.useState<VideoSize>(initialBlockObject?.size || 'medium')
+  const [isModalOpen, setIsModalOpen] = React.useState(false)
 
   // Update block object when size changes
   React.useEffect(() => {
@@ -323,40 +325,73 @@ function VideoBlockComponent(props: ExtendedNodeViewProps) {
     document.body.removeChild(link);
   };
 
+  const handleExpand = () => {
+    setIsModalOpen(true);
+  };
+
   // 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
     return (
-      <NodeViewWrapper className="block-video w-full">
+      <>
-        <motion.div
+        <NodeViewWrapper className="block-video w-full">
-          initial={{ opacity: 0 }}
+          <motion.div
-          animate={{ opacity: 1 }}
+            initial={{ opacity: 0 }}
-          transition={{ duration: 0.3 }}
+            animate={{ opacity: 1 }}
-          className="w-full flex justify-center relative"
+            transition={{ duration: 0.3 }}
-        >
+            className="w-full flex justify-center relative"
-          <div
-            style={{ 
-              maxWidth: typeof width === 'number' ? width : '100%',
-              width: '100%'
-            }}
           >
-            <div className="relative">
+            <div
+              style={{ 
+                maxWidth: typeof width === 'number' ? width : '100%',
+                width: '100%'
+              }}
+            >
+              <div className="relative">
+                <video
+                  controls
+                  className="w-full aspect-video object-contain rounded-lg shadow-sm"
+                  src={videoUrl}
+                />
+                <div className="absolute top-2 right-2 flex gap-1">
+                  <button
+                    onClick={handleExpand}
+                    className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
+                    title="Expand video"
+                  >
+                    <Expand className="w-4 h-4 text-white" />
+                  </button>
+                  <button
+                    onClick={handleDownload}
+                    className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
+                    title="Download video"
+                  >
+                    <Download className="w-4 h-4 text-white" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </NodeViewWrapper>
+        
+        <Modal
+          isDialogOpen={isModalOpen}
+          onOpenChange={setIsModalOpen}
+          dialogTitle="Video Player"
+          minWidth="lg"
+          minHeight="lg"
+          dialogContent={
+            <div className="w-full">
               <video
                 controls
-                className="w-full aspect-video object-contain rounded-lg shadow-sm"
+                autoPlay
+                className="w-full aspect-video object-contain rounded-lg shadow-lg bg-black"
                 src={videoUrl}
               />
-              <button
-                onClick={handleDownload}
-                className="absolute top-2 right-2 p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
-                title="Download video"
-              >
-                <Download className="w-4 h-4 text-white" />
-              </button>
             </div>
-          </div>
+          }
-        </motion.div>
+        />
-      </NodeViewWrapper>
+      </>
     )
   }
 
@@ -524,12 +559,48 @@ function VideoBlockComponent(props: ExtendedNodeViewProps) {
                       )}
                       src={videoUrl}
                     />
+                    <div className="absolute top-2 right-2 flex gap-1">
+                      <button
+                        onClick={handleExpand}
+                        className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
+                        title="Expand video"
+                      >
+                        <Expand className="w-4 h-4 text-white" />
+                      </button>
+                      <button
+                        onClick={handleDownload}
+                        className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
+                        title="Download video"
+                      >
+                        <Download className="w-4 h-4 text-white" />
+                      </button>
+                    </div>
                   </div>
                 </div>
               </VideoContainer>
             </motion.div>
           )}
         </VideoWrapper>
+        
+        {blockObject && videoUrl && (
+          <Modal
+            isDialogOpen={isModalOpen}
+            onOpenChange={setIsModalOpen}
+            dialogTitle="Video Player"
+            minWidth="lg"
+            minHeight="lg"
+            dialogContent={
+              <div className="w-full">
+                <video
+                  controls
+                  autoPlay
+                  className="w-full aspect-video object-contain rounded-lg shadow-lg bg-black"
+                  src={videoUrl}
+                />
+              </div>
+            }
+          />
+        )}
       </motion.div>
     </NodeViewWrapper>
   )