zynx-pdf 0.1.0 → 0.1.2
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.
- package/README.md +132 -2
- package/dist/zynx-pdf.js +2 -2
- package/dist/zynx-pdf.umd.cjs +1 -1
- package/package.json +7 -3
package/README.md
CHANGED
|
@@ -1,10 +1,140 @@
|
|
|
1
1
|
# Zynx PDF
|
|
2
2
|
|
|
3
|
-
Zynx PDF is a modern React PDF viewer and editor built
|
|
3
|
+
**Zynx PDF** is a modern React PDF viewer and editor for web applications. It is built on top of **Mozilla PDF.js** for PDF rendering and **pdf-lib** for PDF export and editing operations.
|
|
4
4
|
|
|
5
5
|
Developed by **Hafiz Muhammad Zunnoorain**.
|
|
6
6
|
|
|
7
|
+
---
|
|
8
|
+
|
|
7
9
|
## Install
|
|
8
10
|
|
|
9
11
|
```bash
|
|
10
|
-
npm install zynx-pdf
|
|
12
|
+
npm install zynx-pdf
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Basic Usage
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { PdfEditor } from "zynx-pdf";
|
|
21
|
+
import "zynx-pdf/style.css";
|
|
22
|
+
|
|
23
|
+
export default function App() {
|
|
24
|
+
return (
|
|
25
|
+
<PdfEditor
|
|
26
|
+
height="100vh"
|
|
27
|
+
onSave={(pdfBytes, annotations) => {
|
|
28
|
+
console.log("Saved PDF:", pdfBytes);
|
|
29
|
+
console.log("Annotations:", annotations);
|
|
30
|
+
}}
|
|
31
|
+
/>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Features
|
|
39
|
+
|
|
40
|
+
- PDF upload and viewing
|
|
41
|
+
- Page navigation
|
|
42
|
+
- Zoom in and zoom out
|
|
43
|
+
- Add new text
|
|
44
|
+
- Visually replace existing PDF text
|
|
45
|
+
- Add highlights
|
|
46
|
+
- Freehand drawing
|
|
47
|
+
- Add images
|
|
48
|
+
- Add signatures
|
|
49
|
+
- Select, move, resize, and delete edits
|
|
50
|
+
- Undo and redo support
|
|
51
|
+
- Export edited PDF
|
|
52
|
+
- TypeScript support
|
|
53
|
+
- React component API
|
|
54
|
+
- Clean purple SaaS-style editor UI
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## Existing Text Editing
|
|
59
|
+
|
|
60
|
+
Zynx PDF supports **visual text replacement**.
|
|
61
|
+
|
|
62
|
+
This means when you edit existing PDF text:
|
|
63
|
+
|
|
64
|
+
1. The original text area is visually covered.
|
|
65
|
+
2. New text is placed on top.
|
|
66
|
+
3. The final exported PDF looks edited.
|
|
67
|
+
|
|
68
|
+
This is the practical frontend-only method for browser-based PDF editing.
|
|
69
|
+
|
|
70
|
+
> Note: True internal PDF text stream editing is not currently supported. Scanned image PDFs require OCR.
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
## Component Props
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
<PdfEditor
|
|
78
|
+
file={null}
|
|
79
|
+
height="100vh"
|
|
80
|
+
defaultScale={1}
|
|
81
|
+
enableUpload={true}
|
|
82
|
+
showDevJson={false}
|
|
83
|
+
onSave={(pdfBytes, annotations) => {}}
|
|
84
|
+
onAnnotationsChange={(annotations) => {}}
|
|
85
|
+
/>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
| Prop | Type | Description |
|
|
89
|
+
|---|---|---|
|
|
90
|
+
| `file` | `File \| string \| ArrayBuffer \| Uint8Array \| null` | Optional PDF file source |
|
|
91
|
+
| `height` | `string \| number` | Editor height |
|
|
92
|
+
| `defaultScale` | `number` | Initial zoom scale |
|
|
93
|
+
| `enableUpload` | `boolean` | Show or hide upload option |
|
|
94
|
+
| `showDevJson` | `boolean` | Show developer JSON panel |
|
|
95
|
+
| `onSave` | `function` | Called when PDF is exported |
|
|
96
|
+
| `onAnnotationsChange` | `function` | Called when annotations change |
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## Example with Theme
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
import { PdfEditor } from "zynx-pdf";
|
|
104
|
+
import "zynx-pdf/style.css";
|
|
105
|
+
|
|
106
|
+
export default function App() {
|
|
107
|
+
return (
|
|
108
|
+
<PdfEditor
|
|
109
|
+
height="90vh"
|
|
110
|
+
theme={{
|
|
111
|
+
primary: "#6d5dfc",
|
|
112
|
+
background: "#f6f3ff",
|
|
113
|
+
surface: "#ffffff",
|
|
114
|
+
border: "#e4def8",
|
|
115
|
+
text: "#16142f"
|
|
116
|
+
}}
|
|
117
|
+
/>
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## Keyboard Shortcuts
|
|
125
|
+
|
|
126
|
+
| Shortcut | Action |
|
|
127
|
+
|---|---|
|
|
128
|
+
| `Ctrl + Z` | Undo |
|
|
129
|
+
| `Ctrl + Y` | Redo |
|
|
130
|
+
| `Ctrl + Shift + Z` | Redo |
|
|
131
|
+
| `Ctrl + S` | Export PDF |
|
|
132
|
+
| `Delete` | Delete selected edit |
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
## License
|
|
137
|
+
|
|
138
|
+
Zynx PDF is proprietary software.
|
|
139
|
+
|
|
140
|
+
This package uses open-source third-party libraries including Mozilla PDF.js and pdf-lib. Their respective licenses remain applicable to those libraries.
|
package/dist/zynx-pdf.js
CHANGED
|
@@ -777,8 +777,8 @@ function le(e) {
|
|
|
777
777
|
className: "mpe-toolbar__brand",
|
|
778
778
|
children: [/* @__PURE__ */ d("span", {
|
|
779
779
|
className: "mpe-toolbar__logo",
|
|
780
|
-
children: "
|
|
781
|
-
}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("strong", { children: "PDF
|
|
780
|
+
children: "Z"
|
|
781
|
+
}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("strong", { children: "Zynx PDF" }), /* @__PURE__ */ d("small", { children: r?.hint || "Upload, view, edit, and export PDFs" })] })]
|
|
782
782
|
}),
|
|
783
783
|
/* @__PURE__ */ f("div", {
|
|
784
784
|
className: "mpe-toolbar__section mpe-toolbar__section--view",
|