edit-pdf 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +79 -12
  2. package/package.json +1 -20
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # edit-pdf
2
2
 
3
- A powerful and flexible React PDF editor component.
3
+ A powerful and flexible React PDF editor component with comprehensive annotation tools.
4
4
 
5
5
  ## Installation
6
6
 
@@ -10,8 +10,11 @@ npm install edit-pdf
10
10
 
11
11
  ## Usage
12
12
 
13
+ ### Basic Usage
14
+
13
15
  ```tsx
14
- import { PdfEditor } from 'edit-pdf';
16
+ import PdfEditor from 'edit-pdf';
17
+ import { useState } from 'react';
15
18
 
16
19
  function App() {
17
20
  return (
@@ -24,24 +27,88 @@ function App() {
24
27
  export default App;
25
28
  ```
26
29
 
30
+ ### Advanced Usage with Export Control
31
+
32
+ ```tsx
33
+ import PdfEditor from 'edit-pdf';
34
+ import { useState } from 'react';
35
+
36
+ function App() {
37
+ const [shouldExport, setShouldExport] = useState(false);
38
+
39
+ const handleSave = (file: File) => {
40
+ console.log("Saved file:", file);
41
+ // Download the file
42
+ const url = URL.createObjectURL(file);
43
+ const a = document.createElement("a");
44
+ a.href = url;
45
+ a.download = file.name || "edited.pdf";
46
+ document.body.appendChild(a);
47
+ a.click();
48
+ document.body.removeChild(a);
49
+ URL.revokeObjectURL(url);
50
+ // You can also upload to server, process the file, etc.
51
+ };
52
+
53
+ const handleSaveClick = () => {
54
+ setShouldExport(true);
55
+ };
56
+
57
+ return (
58
+ <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
59
+ <button onClick={handleSaveClick}>Save PDF</button>
60
+ <div style={{ flex: 1, overflow: 'hidden' }}>
61
+ <PdfEditor
62
+ fileUrl="/path/to/document.pdf"
63
+ onSave={handleSave}
64
+ shouldExport={shouldExport}
65
+ onExportComplete={() => setShouldExport(false)}
66
+ />
67
+ </div>
68
+ </div>
69
+ );
70
+ }
71
+
72
+ export default App;
73
+ ```
74
+
27
75
  ## Features
28
76
 
29
77
  - **View PDF**: Render PDF documents with high fidelity.
30
78
  - **Annotations**:
31
- - **Highlight**: Highlight text with customizable colors.
32
- - **Pen**: Freehand drawing tool.
33
- - **Text**: Insert text annotations.
34
- - **Shapes**: Add rectangles, circles, arrows, and lines.
79
+ - **Highlight**: Highlight text with customizable colors and stroke width.
80
+ - **Pen**: Freehand drawing tool with customizable colors and stroke width.
81
+ - **Text**: Insert text annotations with customizable colors.
82
+ - **Shapes**: Add rectangles, circles, ellipses, arrows, and lines with customizable stroke colors, widths, and rotation.
35
83
  - **Images**: Insert images into the PDF.
36
- - **Signatures**: Create and manage signatures.
37
- - **Eraser**: Remove annotations.
38
- - **Search**: Find text within the document.
84
+ - **Signatures**: Create, save, and manage signatures with drawing canvas.
85
+ - **Eraser**: Remove annotations with adjustable eraser width.
86
+ - **Search**: Find and navigate text within the document.
87
+ - **Export**: Export annotated PDFs with all annotations embedded.
39
88
 
40
89
  ## Props
41
90
 
42
- | Prop | Type | Description |
43
- |------|------|-------------|
44
- | `fileUrl` | `string` | The URL of the PDF file to load. |
91
+ | Prop | Type | Required | Description |
92
+ |------|------|----------|-------------|
93
+ | `fileUrl` | `string` | Yes | The URL of the PDF file to load. |
94
+ | `onSave` | `(file: File) => void` | No | Callback function called when PDF is exported. Receives the edited PDF file. |
95
+ | `shouldExport` | `boolean` | No | Boolean flag to trigger PDF export. Set to `true` to export the PDF. |
96
+ | `onExportComplete` | `() => void` | No | Callback function called after export is complete. Use this to reset `shouldExport` to `false`. |
97
+
98
+ ## Export Workflow
99
+
100
+ The component uses a boolean trigger pattern for exporting:
101
+
102
+ 1. Set `shouldExport` to `true` to trigger export
103
+ 2. The component will generate the PDF and call `onSave` with the file
104
+ 3. Call `onExportComplete` to reset the flag (typically set `shouldExport` back to `false`)
105
+
106
+ This pattern gives you full control over when and how the PDF is exported, allowing you to:
107
+ - Download the file
108
+ - Upload to a server
109
+ - Process the file before saving
110
+ - Show loading states
111
+ - Handle errors
45
112
 
46
113
  ## License
47
114
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "edit-pdf",
3
3
  "private": false,
4
- "version": "0.0.1",
4
+ "version": "0.0.3",
5
5
  "type": "module",
6
6
  "main": "./dist/pdf-editor.umd.js",
7
7
  "module": "./dist/pdf-editor.js",
@@ -20,25 +20,6 @@
20
20
  "react-dom": "^19.2.0"
21
21
  },
22
22
  "dependencies": {
23
- "@lexical/code": "^0.38.2",
24
- "@lexical/html": "^0.38.2",
25
- "@lexical/link": "^0.38.2",
26
- "@lexical/list": "^0.38.2",
27
- "@lexical/markdown": "^0.38.2",
28
- "@lexical/plain-text": "^0.38.2",
29
- "@lexical/react": "^0.38.2",
30
- "@lexical/rich-text": "^0.38.2",
31
- "@lexical/selection": "^0.38.2",
32
- "@lexical/table": "^0.38.2",
33
- "@lexical/utils": "^0.38.2",
34
- "@tiptap/extension-image": "^3.10.7",
35
- "@tiptap/extension-placeholder": "^3.10.7",
36
- "@tiptap/react": "^3.10.7",
37
- "@tiptap/starter-kit": "^3.10.7",
38
- "@types/node-forge": "^1.3.14",
39
- "lexical": "^0.38.2",
40
- "node-forge": "^1.3.1",
41
- "pdf-annotate.js": "^1.0.0",
42
23
  "pdf-lib": "^1.17.1",
43
24
  "pdfjs-dist": "^5.4.394"
44
25
  },