feat: pdf editor

2025-09-21 23:19:30 +02:00 · 2025-07-09 17:51:12 +01:00
parent 143a5684cf
commit cd19ffccf6
4 changed files with 103 additions and 18 deletions
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,11 +4,10 @@
    <option name="autoReloadType" value="SELECTIVE" />
  </component>
  <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: favicons">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: examples button visibility">
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/editor/index.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/editor/meta.ts" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/pages/tools/pdf/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/pdf/index.ts" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
@@ -494,15 +493,7 @@
      <workItem from="1751846528195" duration="4358000" />
      <workItem from="1752070315115" duration="19000" />
      <workItem from="1752071020011" duration="1599000" />
-      <workItem from="1752077170501" duration="2423000" />
-    </task>
-    <task id="LOCAL-00164" summary="refactor: file inputs">
-      <option name="closed" value="true" />
-      <created>1742960931740</created>
-      <option name="number" value="00164" />
-      <option name="presentableId" value="LOCAL-00164" />
-      <option name="project" value="LOCAL" />
-      <updated>1742960931740</updated>
+      <workItem from="1752077170501" duration="2619000" />
    </task>
    <task id="LOCAL-00165" summary="feat: background removal">
      <option name="closed" value="true" />
@@ -888,7 +879,15 @@
      <option name="project" value="LOCAL" />
      <updated>1752071147050</updated>
    </task>
-    <option name="localTasksCounter" value="213" />
+    <task id="LOCAL-00213" summary="chore: examples button visibility">
+      <option name="closed" value="true" />
+      <created>1752079671580</created>
+      <option name="number" value="00213" />
+      <option name="presentableId" value="LOCAL-00213" />
+      <option name="project" value="LOCAL" />
+      <updated>1752079671580</updated>
+    </task>
+    <option name="localTasksCounter" value="214" />
    <servers />
  </component>
  <component name="TypeScriptGeneratedFilesManager">
@@ -935,7 +934,6 @@
    <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
    <option name="CHECK_NEW_TODO" value="false" />
    <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: uninstall @jspawn/ghostscript-wasm" />
    <MESSAGE value="feat: protect pdf" />
    <MESSAGE value="feat: image to text" />
    <MESSAGE value="chore: hideCopy if video or audio" />
@@ -960,7 +958,8 @@
    <MESSAGE value="feat: convert to jpg" />
    <MESSAGE value="feat: edit image" />
    <MESSAGE value="fix: favicons" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: favicons" />
+    <MESSAGE value="chore: examples button visibility" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: examples button visibility" />
  </component>
  <component name="VgoProject">
    <integration-enabled>false</integration-enabled>
--- a/src/pages/tools/pdf/editor/index.tsx
+++ b/src/pages/tools/pdf/editor/index.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { Box } from '@mui/material';
+import ToolPdfInput from '@components/input/ToolPdfInput';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import { EmbedPDF } from '@simplepdf/react-embed-pdf';
+
+export default function PdfEditor({ title }: ToolComponentProps) {
+  const [input, setInput] = useState<File | null>(null);
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+
+  const onFileChange = (file: File | null) => {
+    if (file) {
+      setInput(file);
+      const url = URL.createObjectURL(file);
+      setPdfUrl(url);
+    } else {
+      setInput(null);
+      setPdfUrl(null);
+    }
+  };
+
+  return (
+    <ToolContent
+      title={title}
+      initialValues={{}}
+      getGroups={null}
+      input={input}
+      inputComponent={
+        <>
+          {pdfUrl ? (
+            <Box sx={{ width: '100%', height: '80vh' }}>
+              <EmbedPDF
+                mode="inline"
+                style={{ width: '100%', height: '100%' }}
+                documentURL={pdfUrl}
+              />
+            </Box>
+          ) : (
+            <ToolPdfInput
+              value={input}
+              onChange={onFileChange}
+              accept={['application/pdf']}
+              title="Upload a PDF to edit"
+            />
+          )}
+        </>
+      }
+      toolInfo={{
+        title: 'PDF Editor',
+        description:
+          'Edit, annotate, highlight, fill forms, and export your PDFs entirely in the browser. Add text, drawings, signatures, and more to your PDF documents with this powerful online editor.'
+      }}
+      compute={() => {
+        /* no background compute required */
+      }}
+    />
+  );
+}
--- a/src/pages/tools/pdf/editor/meta.ts
+++ b/src/pages/tools/pdf/editor/meta.ts
@@ -0,0 +1,27 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('pdf', {
+  name: 'PDF Editor',
+  path: 'editor',
+  icon: 'mdi:file-document-edit',
+  description:
+    'Advanced PDF editor with annotation, form-fill, highlight, and export capabilities. Edit your PDFs directly in the browser with professional-grade tools including text insertion, drawing, highlighting, signing and form filling.',
+  shortDescription: 'Edit PDFs with advanced annotation and editing tools',
+  keywords: [
+    'pdf',
+    'editor',
+    'edit',
+    'annotate',
+    'highlight',
+    'form',
+    'fill',
+    'text',
+    'drawing',
+    'signature',
+    'export',
+    'annotation',
+    'markup'
+  ],
+  component: lazy(() => import('./index'))
+});
--- a/src/pages/tools/pdf/index.ts
+++ b/src/pages/tools/pdf/index.ts
@@ -9,12 +9,12 @@ import { meta as pdfToEpub } from './pdf-to-epub/meta';
 import { tool as pdfEditor } from './editor/meta';

 export const pdfTools: DefinedTool[] = [
+  pdfEditor,
  splitPdfMeta,
  pdfRotatePdf,
  compressPdfTool,
  protectPdfTool,
  mergePdf,
  pdfToEpub,
-  pdfPdfToPng,
-  pdfEditor
+  pdfPdfToPng
 ];