pixedi 1.0.6 → 1.2.0
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/CHANGELOG.md +12 -0
- package/README.md +40 -10
- package/README.npm.md +40 -10
- package/dist/lib/index.js +1433 -1084
- package/dist/lib/index.umd.js +3 -24
- package/dist/widget/pixedi-widget.js +6 -27
- package/package.json +1 -2
- package/README.widget.md +0 -96
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixedi",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "A lightweight, embeddable React image editor component.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/lib/index.umd.js",
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
"dist/lib",
|
|
11
11
|
"dist/widget",
|
|
12
12
|
"README.md",
|
|
13
|
-
"README.widget.md",
|
|
14
13
|
"CHANGELOG.md"
|
|
15
14
|
],
|
|
16
15
|
"dependencies": {
|
package/README.widget.md
DELETED
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
# Pixedi Widget
|
|
2
|
-
|
|
3
|
-
A standalone, embeddable image editor widget for non-React environments.
|
|
4
|
-
|
|
5
|
-
The widget is distributed as a UMD bundle and can be loaded directly from a CDN in any HTML page.
|
|
6
|
-
|
|
7
|
-
## CDN
|
|
8
|
-
|
|
9
|
-
Pin to a specific version in production:
|
|
10
|
-
|
|
11
|
-
```html
|
|
12
|
-
<script src="https://cdn.jsdelivr.net/npm/pixedi@1.0.6/dist/widget/pixedi-widget.js"></script>
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
For testing only, use the latest version:
|
|
16
|
-
|
|
17
|
-
```html
|
|
18
|
-
<script src="https://cdn.jsdelivr.net/npm/pixedi/dist/widget/pixedi-widget.js"></script>
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Usage
|
|
22
|
-
|
|
23
|
-
Add a container element with an `id`, then initialize the widget after the script loads:
|
|
24
|
-
|
|
25
|
-
```html
|
|
26
|
-
<!doctype html>
|
|
27
|
-
<html lang="en">
|
|
28
|
-
<head>
|
|
29
|
-
<meta charset="UTF-8" />
|
|
30
|
-
<title>Pixedi Widget Example</title>
|
|
31
|
-
</head>
|
|
32
|
-
<body>
|
|
33
|
-
<div id="editor"></div>
|
|
34
|
-
|
|
35
|
-
<script src="https://cdn.jsdelivr.net/npm/pixedi@1.0.6/dist/widget/pixedi-widget.js"></script>
|
|
36
|
-
<script>
|
|
37
|
-
const widget = window.ImageEditorWidget.init({
|
|
38
|
-
containerId: "editor",
|
|
39
|
-
image: "https://example.com/photo.jpg",
|
|
40
|
-
onSave: (base64) => {
|
|
41
|
-
console.log("Saved image:", base64);
|
|
42
|
-
},
|
|
43
|
-
onBack: () => {
|
|
44
|
-
console.log("User cancelled");
|
|
45
|
-
},
|
|
46
|
-
theme: "light", // "light" or "dark"
|
|
47
|
-
});
|
|
48
|
-
</script>
|
|
49
|
-
</body>
|
|
50
|
-
</html>
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## API
|
|
54
|
-
|
|
55
|
-
### `window.ImageEditorWidget.init(options)`
|
|
56
|
-
|
|
57
|
-
Mounts the image editor into the container.
|
|
58
|
-
|
|
59
|
-
| Option | Type | Required | Description |
|
|
60
|
-
| ------------- | -------------------------- | -------- | -------------------------------------------- |
|
|
61
|
-
| `containerId` | `string` | Yes | The `id` of the DOM element to mount into. |
|
|
62
|
-
| `image` | `string` | Yes | URL or base64 data URI of the image to edit. |
|
|
63
|
-
| `onSave` | `(base64: string) => void` | Yes | Called when the user clicks Save. |
|
|
64
|
-
| `onBack` | `() => void` | Yes | Called when the user clicks Back/Cancel. |
|
|
65
|
-
| `theme` | `"light" \| "dark"` | No | Widget theme. Defaults to `"light"`. |
|
|
66
|
-
|
|
67
|
-
Returns an instance with a `destroy` method, or `undefined` if the container is not found.
|
|
68
|
-
|
|
69
|
-
### `instance.destroy()`
|
|
70
|
-
|
|
71
|
-
Unmounts the widget and cleans up the DOM:
|
|
72
|
-
|
|
73
|
-
```javascript
|
|
74
|
-
const widget = window.ImageEditorWidget.init({/* ... */});
|
|
75
|
-
|
|
76
|
-
// Later, when you want to remove the editor
|
|
77
|
-
widget?.destroy();
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
## Theming
|
|
81
|
-
|
|
82
|
-
Set the `theme` option to `"light"` or `"dark"`. The widget uses the container's `data-theme` attribute, so you can also style the surrounding page accordingly.
|
|
83
|
-
|
|
84
|
-
## Versioning
|
|
85
|
-
|
|
86
|
-
Widget versions match the `pixedi` npm package versions. To use a specific version, pin the URL:
|
|
87
|
-
|
|
88
|
-
```text
|
|
89
|
-
https://cdn.jsdelivr.net/npm/pixedi@<version>/dist/widget/pixedi-widget.js
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
Replace `<version>` with the exact version you want, for example `1.0.6`.
|
|
93
|
-
|
|
94
|
-
## License
|
|
95
|
-
|
|
96
|
-
MIT
|