feat: split pdf

src/components/input/BaseFileInput.tsx

@@ -14,7 +14,7 @@ import greyPattern from '@assets/grey-pattern.png';
 
 interface BaseFileInputComponentProps extends BaseFileInputProps {
   children: (props: { preview: string | undefined }) => ReactNode;
-  type: 'image' | 'video' | 'audio';
+  type: 'image' | 'video' | 'audio' | 'pdf';
 }
 
 export default function BaseFileInput({

src/components/input/ToolPdfInput.tsx

@@ -0,0 +1,23 @@
+import React, { useRef } from 'react';
+import BaseFileInput from './BaseFileInput';
+import { BaseFileInputProps } from './file-input-utils';
+
+interface PdfFileInputProps extends BaseFileInputProps {}
+
+export default function ToolPdfInput({ ...props }: PdfFileInputProps) {
+  const pdfRef = useRef<HTMLIFrameElement>(null);
+
+  return (
+    <BaseFileInput {...props} type={'pdf'}>
+      {({ preview }) => (
+        <iframe
+          ref={pdfRef}
+          src={preview}
+          width="100%"
+          height="100%"
+          style={{ maxWidth: '500px' }}
+        />
+      )}
+    </BaseFileInput>
+  );
+}

src/components/result/ToolFileResult.tsx

@@ -63,12 +63,14 @@ export default function ToolFileResult({
     }
   };
 
+  type SupportedFileType = 'image' | 'video' | 'audio' | 'pdf' | 'unknown';
   // Determine the file type based on MIME type
-  const getFileType = () => {
+  const getFileType = (): SupportedFileType => {
     if (!value) return 'unknown';
     if (value.type.startsWith('image/')) return 'image';
     if (value.type.startsWith('video/')) return 'video';
     if (value.type.startsWith('audio/')) return 'audio';
+    if (value.type.startsWith('application/pdf')) return 'pdf';
     return 'unknown';
   };
 
@@ -135,6 +137,14 @@ export default function ToolFileResult({
                   style={{ width: '100%', maxWidth: '500px' }}
                 />
               )}
+              {fileType === 'pdf' && (
+                <iframe
+                  src={preview}
+                  width="100%"
+                  height="100%"
+                  style={{ maxWidth: '500px' }}
+                />
+              )}
               {fileType === 'unknown' && (
                 <Box sx={{ padding: 2, textAlign: 'center' }}>
                   File processed successfully. Click download to save the

src/pages/tools/pdf/split-pdf/index.tsx

@@ -9,6 +9,7 @@ import { parsePageRanges, splitPdf } from './service';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { PDFDocument } from 'pdf-lib';
 import { FormikProps } from 'formik';
+import ToolPdfInput from '@components/input/ToolPdfInput';
 
 type InitialValuesType = {
   pageRanges: string;
@@ -115,7 +116,7 @@ export default function SplitPdf({ title }: ToolComponentProps) {
       compute={compute}
       exampleCards={exampleCards}
       inputComponent={
-        <ToolFileInput
+        <ToolPdfInput
           value={input}
           onChange={setInput}
           accept={['application/pdf']}

src/pages/tools/pdf/split-pdf/service.ts

@@ -23,7 +23,15 @@ export function parsePageRanges(
     if (trimmedRange.includes('-')) {
       const [start, end] = trimmedRange.split('-').map(Number);
       if (!isNaN(start) && !isNaN(end)) {
-        for (let i = Math.max(1, start); i <= Math.min(totalPages, end); i++) {
+        // Handle both forward and reversed ranges
+        const normalizedStart = Math.min(start, end);
+        const normalizedEnd = Math.max(start, end);
+
+        for (
+          let i = Math.max(1, normalizedStart);
+          i <= Math.min(totalPages, normalizedEnd);
+          i++
+        ) {
           pageNumbers.add(i);
         }
       }