pixedi 1.0.5 → 1.0.6
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 +6 -0
- package/README.md +4 -4
- package/README.npm.md +4 -4
- package/README.widget.md +96 -0
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## 1.0.6
|
|
6
|
+
|
|
7
|
+
- Created a dedicated `README.widget.md` with full widget API documentation and examples.
|
|
8
|
+
- Included `README.widget.md` in the npm package.
|
|
9
|
+
- Updated npm README to link to the widget documentation.
|
|
10
|
+
|
|
5
11
|
## 1.0.5
|
|
6
12
|
|
|
7
13
|
- Professionalized CI/CD pipeline: split build, deploy, and publish into separate jobs.
|
package/README.md
CHANGED
|
@@ -73,10 +73,12 @@ function App() {
|
|
|
73
73
|
|
|
74
74
|
## Widget CDN
|
|
75
75
|
|
|
76
|
-
For non-React environments, use the standalone UMD widget from a CDN.
|
|
76
|
+
For non-React environments, use the standalone UMD widget from a CDN. See [`README.widget.md`](https://github.com/rastiv/pixedi/blob/main/README.widget.md) for full usage instructions, API reference, and examples.
|
|
77
|
+
|
|
78
|
+
Pin to a specific version in production:
|
|
77
79
|
|
|
78
80
|
```html
|
|
79
|
-
<script src="https://cdn.jsdelivr.net/npm/pixedi@1.0.
|
|
81
|
+
<script src="https://cdn.jsdelivr.net/npm/pixedi@1.0.6/dist/widget/pixedi-widget.js"></script>
|
|
80
82
|
```
|
|
81
83
|
|
|
82
84
|
For the latest version (use only for testing):
|
|
@@ -85,8 +87,6 @@ For the latest version (use only for testing):
|
|
|
85
87
|
<script src="https://cdn.jsdelivr.net/npm/pixedi/dist/widget/pixedi-widget.js"></script>
|
|
86
88
|
```
|
|
87
89
|
|
|
88
|
-
The widget exposes `ImageEditorWidget` on the global `window` object after the script loads.
|
|
89
|
-
|
|
90
90
|
## TypeScript
|
|
91
91
|
|
|
92
92
|
TypeScript declarations are included under `dist/lib/index.d.ts`. No additional `@types` package is required.
|
package/README.npm.md
CHANGED
|
@@ -73,10 +73,12 @@ function App() {
|
|
|
73
73
|
|
|
74
74
|
## Widget CDN
|
|
75
75
|
|
|
76
|
-
For non-React environments, use the standalone UMD widget from a CDN.
|
|
76
|
+
For non-React environments, use the standalone UMD widget from a CDN. See [`README.widget.md`](https://github.com/rastiv/pixedi/blob/main/README.widget.md) for full usage instructions, API reference, and examples.
|
|
77
|
+
|
|
78
|
+
Pin to a specific version in production:
|
|
77
79
|
|
|
78
80
|
```html
|
|
79
|
-
<script src="https://cdn.jsdelivr.net/npm/pixedi@1.0.
|
|
81
|
+
<script src="https://cdn.jsdelivr.net/npm/pixedi@1.0.6/dist/widget/pixedi-widget.js"></script>
|
|
80
82
|
```
|
|
81
83
|
|
|
82
84
|
For the latest version (use only for testing):
|
|
@@ -85,8 +87,6 @@ For the latest version (use only for testing):
|
|
|
85
87
|
<script src="https://cdn.jsdelivr.net/npm/pixedi/dist/widget/pixedi-widget.js"></script>
|
|
86
88
|
```
|
|
87
89
|
|
|
88
|
-
The widget exposes `ImageEditorWidget` on the global `window` object after the script loads.
|
|
89
|
-
|
|
90
90
|
## TypeScript
|
|
91
91
|
|
|
92
92
|
TypeScript declarations are included under `dist/lib/index.d.ts`. No additional `@types` package is required.
|
package/README.widget.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
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
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixedi",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "A lightweight, embeddable React image editor component.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/lib/index.umd.js",
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
"dist/lib",
|
|
11
11
|
"dist/widget",
|
|
12
12
|
"README.md",
|
|
13
|
+
"README.widget.md",
|
|
13
14
|
"CHANGELOG.md"
|
|
14
15
|
],
|
|
15
16
|
"dependencies": {
|