diff --git a/frontend/src/components/fileEditor/FileEditor.tsx b/frontend/src/components/fileEditor/FileEditor.tsx
index 24954998c..b4222d9ae 100644
--- a/frontend/src/components/fileEditor/FileEditor.tsx
+++ b/frontend/src/components/fileEditor/FileEditor.tsx
@@ -12,6 +12,7 @@ import { FileOperation } from '../../types/fileContext';
import { fileStorage } from '../../services/fileStorage';
import { generateThumbnailForFile } from '../../utils/thumbnailUtils';
import { zipFileService } from '../../services/zipFileService';
+import { detectFileExtension } from '../../utils/fileUtils';
import styles from '../pageEditor/PageEditor.module.css';
import FileThumbnail from '../pageEditor/FileThumbnail';
import DragDropGrid from '../pageEditor/DragDropGrid';
@@ -34,6 +35,7 @@ interface FileEditorProps {
toolMode?: boolean;
showUpload?: boolean;
showBulkActions?: boolean;
+ supportedExtensions?: string[];
}
const FileEditor = ({
@@ -41,10 +43,17 @@ const FileEditor = ({
onMergeFiles,
toolMode = false,
showUpload = true,
- showBulkActions = true
+ showBulkActions = true,
+ supportedExtensions = ["pdf"]
}: FileEditorProps) => {
const { t } = useTranslation();
+ // Utility function to check if a file extension is supported
+ const isFileSupported = useCallback((fileName: string): boolean => {
+ const extension = detectFileExtension(fileName);
+ return extension ? supportedExtensions.includes(extension) : false;
+ }, [supportedExtensions]);
+
// Get file context
const fileContext = useFileContext();
const {
@@ -807,6 +816,7 @@ const FileEditor = ({
onSplitFile={handleSplitFile}
onSetStatus={setStatus}
toolMode={toolMode}
+ isSupported={isFileSupported(file.name)}
/>
)}
renderSplitMarker={(file, index) => (
diff --git a/frontend/src/components/fileManagement/FileCard.tsx b/frontend/src/components/fileManagement/FileCard.tsx
index c58438b83..d474a2f63 100644
--- a/frontend/src/components/fileManagement/FileCard.tsx
+++ b/frontend/src/components/fileManagement/FileCard.tsx
@@ -18,9 +18,10 @@ interface FileCardProps {
onEdit?: () => void;
isSelected?: boolean;
onSelect?: () => void;
+ isSupported?: boolean; // Whether the file format is supported by the current tool
}
-const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, onSelect }: FileCardProps) => {
+const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, onSelect, isSupported = true }: FileCardProps) => {
const { t } = useTranslation();
const { thumbnail: thumb, isGenerating } = useIndexedDBThumbnail(file);
const [isHovered, setIsHovered] = useState(false);
@@ -35,10 +36,12 @@ const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, o
width: 225,
minWidth: 180,
maxWidth: 260,
- cursor: onDoubleClick ? "pointer" : undefined,
+ cursor: onDoubleClick && isSupported ? "pointer" : undefined,
position: 'relative',
border: isSelected ? '2px solid var(--mantine-color-blue-6)' : undefined,
- backgroundColor: isSelected ? 'var(--mantine-color-blue-0)' : undefined
+ backgroundColor: isSelected ? 'var(--mantine-color-blue-0)' : undefined,
+ opacity: isSupported ? 1 : 0.5,
+ filter: isSupported ? 'none' : 'grayscale(50%)'
}}
onDoubleClick={onDoubleClick}
onMouseEnter={() => setIsHovered(true)}
@@ -180,6 +183,11 @@ const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, o
DB
)}
+ {!isSupported && (
+
+ {t("fileManager.unsupported", "Unsupported")}
+
+ )}