@picsart/react-photo-editor 1.0.1 → 1.0.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 +5 -6
- package/dist/index.d.mts +17 -6
- package/dist/index.d.ts +17 -6
- package/dist/index.js +8 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +9 -6
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,6 +12,8 @@ Peer dependencies: **React 17+** and **react-dom**.
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
+
Callers must set the same core fields as the [Picsart quick start](https://docs.picsart.io/docs/photo-video-editor-quick-start): **`apiKey`**, **`customerId`**, **`propertyId`**. The component renders the editor container and passes a matching **`containerId`** to the SDK (you can set **`containerId`** yourself, or omit it to get a stable auto-generated id). **`title`** defaults to **`Photo Print Designer`** if omitted.
|
|
16
|
+
|
|
15
17
|
```tsx
|
|
16
18
|
import { PicsartEditor } from '@picsart/react-photo-editor';
|
|
17
19
|
|
|
@@ -20,12 +22,9 @@ export function Page() {
|
|
|
20
22
|
<PicsartEditor
|
|
21
23
|
apiKey={process.env.NEXT_PUBLIC_PICSART_API_KEY!}
|
|
22
24
|
customerId={process.env.NEXT_PUBLIC_PICSART_CUSTOMER_ID!}
|
|
23
|
-
propertyId={process.env.NEXT_PUBLIC_PICSART_PROPERTY_ID}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
theme="dark"
|
|
27
|
-
onExport={(data) => console.log(data)}
|
|
28
|
-
onError={(err) => console.error(err)}
|
|
25
|
+
propertyId={process.env.NEXT_PUBLIC_PICSART_PROPERTY_ID!}
|
|
26
|
+
containerId="my-editor-root"
|
|
27
|
+
title="Photo Print Designer"
|
|
29
28
|
/>
|
|
30
29
|
);
|
|
31
30
|
}
|
package/dist/index.d.mts
CHANGED
|
@@ -38,8 +38,8 @@ interface PicsartInstance {
|
|
|
38
38
|
}
|
|
39
39
|
interface PicsartConstructorOptions {
|
|
40
40
|
apiKey: string;
|
|
41
|
-
customerId
|
|
42
|
-
propertyId
|
|
41
|
+
customerId: string;
|
|
42
|
+
propertyId: string;
|
|
43
43
|
containerId: string;
|
|
44
44
|
exportType?: PicsartExportType;
|
|
45
45
|
theme?: PicsartTheme;
|
|
@@ -67,18 +67,29 @@ declare global {
|
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
+
/** Matches Picsart quick-start: apiKey, customerId, propertyId, containerId, title. */
|
|
70
71
|
interface PicsartEditorProps {
|
|
72
|
+
/** From Picsart signup / dashboard. */
|
|
71
73
|
apiKey: string;
|
|
74
|
+
/** From Picsart signup / dashboard. */
|
|
72
75
|
customerId: string;
|
|
73
|
-
/**
|
|
74
|
-
propertyId
|
|
76
|
+
/** From Picsart signup / dashboard (required for the standard SDK flow). */
|
|
77
|
+
propertyId: string;
|
|
78
|
+
/**
|
|
79
|
+
* Must match the inner editor container’s `id`. If omitted, a stable unique id is generated
|
|
80
|
+
* and passed to the SDK for you (same as embedding a div with that id).
|
|
81
|
+
*/
|
|
82
|
+
containerId?: string;
|
|
83
|
+
/**
|
|
84
|
+
* Editor chrome title when supported. Defaults to **Photo Print Designer** (Picsart docs default).
|
|
85
|
+
*/
|
|
86
|
+
title?: string;
|
|
75
87
|
sdkScriptUrl?: string;
|
|
76
88
|
className?: string;
|
|
77
89
|
style?: CSSProperties;
|
|
78
90
|
children?: ReactNode;
|
|
79
91
|
exportType?: PicsartExportType;
|
|
80
92
|
theme?: PicsartTheme;
|
|
81
|
-
title?: string;
|
|
82
93
|
selectedCategory?: string;
|
|
83
94
|
canvasSize?: string;
|
|
84
95
|
templatesTitleText?: string;
|
|
@@ -100,7 +111,7 @@ interface PicsartEditorProps {
|
|
|
100
111
|
/** Override initial `open()` payload when autoOpen is true. */
|
|
101
112
|
openOptions?: PicsartOpenOptions;
|
|
102
113
|
}
|
|
103
|
-
declare function PicsartEditor({ apiKey, customerId, propertyId, sdkScriptUrl, className, style, children, exportType, theme,
|
|
114
|
+
declare function PicsartEditor({ apiKey, customerId, propertyId, containerId: containerIdProp, title, sdkScriptUrl, className, style, children, exportType, theme, selectedCategory, canvasSize, templatesTitleText, templatesSubTitle, templatesFilters, replayUrl, videoUrl, imageUrl, subtitleUrl, templateId, stickerText, stickerImageUrl, onUpload, onExport, onError, onClose, autoOpen, openOptions, }: PicsartEditorProps): react_jsx_runtime.JSX.Element;
|
|
104
115
|
|
|
105
116
|
declare function loadPicsartSdk(scriptUrl?: string): Promise<void>;
|
|
106
117
|
|
package/dist/index.d.ts
CHANGED
|
@@ -38,8 +38,8 @@ interface PicsartInstance {
|
|
|
38
38
|
}
|
|
39
39
|
interface PicsartConstructorOptions {
|
|
40
40
|
apiKey: string;
|
|
41
|
-
customerId
|
|
42
|
-
propertyId
|
|
41
|
+
customerId: string;
|
|
42
|
+
propertyId: string;
|
|
43
43
|
containerId: string;
|
|
44
44
|
exportType?: PicsartExportType;
|
|
45
45
|
theme?: PicsartTheme;
|
|
@@ -67,18 +67,29 @@ declare global {
|
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
+
/** Matches Picsart quick-start: apiKey, customerId, propertyId, containerId, title. */
|
|
70
71
|
interface PicsartEditorProps {
|
|
72
|
+
/** From Picsart signup / dashboard. */
|
|
71
73
|
apiKey: string;
|
|
74
|
+
/** From Picsart signup / dashboard. */
|
|
72
75
|
customerId: string;
|
|
73
|
-
/**
|
|
74
|
-
propertyId
|
|
76
|
+
/** From Picsart signup / dashboard (required for the standard SDK flow). */
|
|
77
|
+
propertyId: string;
|
|
78
|
+
/**
|
|
79
|
+
* Must match the inner editor container’s `id`. If omitted, a stable unique id is generated
|
|
80
|
+
* and passed to the SDK for you (same as embedding a div with that id).
|
|
81
|
+
*/
|
|
82
|
+
containerId?: string;
|
|
83
|
+
/**
|
|
84
|
+
* Editor chrome title when supported. Defaults to **Photo Print Designer** (Picsart docs default).
|
|
85
|
+
*/
|
|
86
|
+
title?: string;
|
|
75
87
|
sdkScriptUrl?: string;
|
|
76
88
|
className?: string;
|
|
77
89
|
style?: CSSProperties;
|
|
78
90
|
children?: ReactNode;
|
|
79
91
|
exportType?: PicsartExportType;
|
|
80
92
|
theme?: PicsartTheme;
|
|
81
|
-
title?: string;
|
|
82
93
|
selectedCategory?: string;
|
|
83
94
|
canvasSize?: string;
|
|
84
95
|
templatesTitleText?: string;
|
|
@@ -100,7 +111,7 @@ interface PicsartEditorProps {
|
|
|
100
111
|
/** Override initial `open()` payload when autoOpen is true. */
|
|
101
112
|
openOptions?: PicsartOpenOptions;
|
|
102
113
|
}
|
|
103
|
-
declare function PicsartEditor({ apiKey, customerId, propertyId, sdkScriptUrl, className, style, children, exportType, theme,
|
|
114
|
+
declare function PicsartEditor({ apiKey, customerId, propertyId, containerId: containerIdProp, title, sdkScriptUrl, className, style, children, exportType, theme, selectedCategory, canvasSize, templatesTitleText, templatesSubTitle, templatesFilters, replayUrl, videoUrl, imageUrl, subtitleUrl, templateId, stickerText, stickerImageUrl, onUpload, onExport, onError, onClose, autoOpen, openOptions, }: PicsartEditorProps): react_jsx_runtime.JSX.Element;
|
|
104
115
|
|
|
105
116
|
declare function loadPicsartSdk(scriptUrl?: string): Promise<void>;
|
|
106
117
|
|
package/dist/index.js
CHANGED
|
@@ -82,17 +82,19 @@ function loadPicsartSdk(scriptUrl = DEFAULT_SDK_URL) {
|
|
|
82
82
|
});
|
|
83
83
|
return loadPromise;
|
|
84
84
|
}
|
|
85
|
+
var DEFAULT_TITLE = "Photo Print Designer";
|
|
85
86
|
function PicsartEditor({
|
|
86
87
|
apiKey,
|
|
87
88
|
customerId,
|
|
88
89
|
propertyId,
|
|
90
|
+
containerId: containerIdProp,
|
|
91
|
+
title = DEFAULT_TITLE,
|
|
89
92
|
sdkScriptUrl,
|
|
90
93
|
className,
|
|
91
94
|
style,
|
|
92
95
|
children,
|
|
93
96
|
exportType,
|
|
94
97
|
theme,
|
|
95
|
-
title,
|
|
96
98
|
selectedCategory,
|
|
97
99
|
canvasSize,
|
|
98
100
|
templatesTitleText,
|
|
@@ -112,9 +114,10 @@ function PicsartEditor({
|
|
|
112
114
|
autoOpen = true,
|
|
113
115
|
openOptions
|
|
114
116
|
}) {
|
|
117
|
+
const reactId = react.useId().replace(/:/g, "");
|
|
115
118
|
const containerId = react.useMemo(
|
|
116
|
-
() => `picsart-editor-${
|
|
117
|
-
[]
|
|
119
|
+
() => containerIdProp ?? `picsart-editor-${reactId}`,
|
|
120
|
+
[containerIdProp, reactId]
|
|
118
121
|
);
|
|
119
122
|
const instanceRef = react.useRef(null);
|
|
120
123
|
const propsRef = react.useRef({
|
|
@@ -133,11 +136,11 @@ function PicsartEditor({
|
|
|
133
136
|
const baseOptions = {
|
|
134
137
|
apiKey,
|
|
135
138
|
customerId,
|
|
136
|
-
|
|
139
|
+
propertyId,
|
|
137
140
|
containerId,
|
|
138
141
|
...exportType && { exportType },
|
|
139
142
|
...theme && { theme },
|
|
140
|
-
|
|
143
|
+
title,
|
|
141
144
|
...selectedCategory && { selectedCategory },
|
|
142
145
|
...canvasSize && { canvasSize },
|
|
143
146
|
...templatesTitleText && { templatesTitleText },
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/defaultUpload.ts","../src/loadScript.ts","../src/PicsartEditor.tsx"],"names":["useMemo","useRef","useEffect","jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import type { PicsartUploadHandler } from './types';\n\nexport function createDefaultVideoUpload(apiKey: string): PicsartUploadHandler {\n console.log('createDefaultVideoUpload', apiKey);\n return async (file, mimeType) => {\n const video = new Blob([file as BlobPart], { type: mimeType });\n const form = new FormData();\n form.append('file', video);\n\n const result = await fetch('https://video-api.picsart.io/v2/upload', {\n method: 'POST',\n headers: {\n accept: 'application/json',\n 'X-Picsart-API-Key': apiKey,\n },\n body: form,\n });\n\n const res = (await result.json()) as { data?: { url?: string } };\n\n return {\n url: res.data?.url ?? '',\n status: 'done',\n progress: 100,\n error: null,\n };\n };\n}\n","const DEFAULT_SDK_URL = 'https://demo.sdk.picsart.io/sdk/cdn/cdn.js';\nconsole.log('DEFAULT_SDK_URL', DEFAULT_SDK_URL);\nlet loadPromise: Promise<void> | null = null;\n\nexport function loadPicsartSdk(scriptUrl: string = DEFAULT_SDK_URL): Promise<void> {\n console.log('loadPicsartSdk', scriptUrl);\n if (typeof window === 'undefined') {\n return Promise.reject(new Error('Picsart SDK can only load in a browser.'));\n }\n\n if (window.Picsart) {\n return Promise.resolve();\n }\n\n if (loadPromise) {\n return loadPromise;\n }\n\n loadPromise = new Promise((resolve, reject) => {\n const resolvedUrl = new URL(scriptUrl, document.baseURI).href;\n const scripts = document.getElementsByTagName('script');\n let existing: HTMLScriptElement | null = null;\n for (let i = 0; i < scripts.length; i++) {\n const s = scripts[i];\n if (s.dataset.picsartSdk === 'true' && s.src === resolvedUrl) {\n existing = s;\n break;\n }\n }\n if (existing) {\n if (window.Picsart) {\n resolve();\n return;\n }\n existing.addEventListener('load', () => resolve(), { once: true });\n existing.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load Picsart SDK: ${scriptUrl}`)),\n { once: true },\n );\n return;\n }\n\n const script = document.createElement('script');\n script.src = scriptUrl;\n script.async = true;\n script.dataset.picsartSdk = 'true';\n script.onload = () => resolve();\n script.onerror = () => {\n loadPromise = null;\n reject(new Error(`Failed to load Picsart SDK: ${scriptUrl}`));\n };\n document.head.append(script);\n });\n\n return loadPromise;\n}\n","import {\n useEffect,\n useMemo,\n useRef,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createDefaultVideoUpload } from './defaultUpload';\nimport { loadPicsartSdk } from './loadScript';\nimport type {\n PicsartConstructorOptions,\n PicsartExportOutput,\n PicsartExportType,\n PicsartInstance,\n PicsartOpenOptions,\n PicsartTheme,\n PicsartUploadHandler,\n} from './types';\n\nexport interface PicsartEditorProps {\n apiKey: string;\n customerId: string;\n /** Omitted when your Picsart setup does not use a property id. */\n propertyId?: string;\n\n sdkScriptUrl?: string;\n className?: string;\n style?: CSSProperties;\n children?: ReactNode;\n\n exportType?: PicsartExportType;\n theme?: PicsartTheme;\n title?: string;\n selectedCategory?: string;\n canvasSize?: string;\n templatesTitleText?: string;\n templatesSubTitle?: string;\n templatesFilters?: Record<string, unknown>;\n\n replayUrl?: string;\n videoUrl?: string;\n imageUrl?: string;\n subtitleUrl?: string;\n templateId?: string;\n stickerText?: string;\n stickerImageUrl?: string;\n\n onUpload?: PicsartUploadHandler;\n onExport?: (output: PicsartExportOutput) => void;\n onError?: (error: unknown) => void;\n onClose?: () => void;\n\n /** When false, `open()` is called with no asset (blank editor). Default true. */\n autoOpen?: boolean;\n /** Override initial `open()` payload when autoOpen is true. */\n openOptions?: PicsartOpenOptions;\n}\n\nexport function PicsartEditor({\n apiKey,\n customerId,\n propertyId,\n sdkScriptUrl,\n className,\n style,\n children,\n exportType,\n theme,\n title,\n selectedCategory,\n canvasSize,\n templatesTitleText,\n templatesSubTitle,\n templatesFilters,\n replayUrl,\n videoUrl,\n imageUrl,\n subtitleUrl,\n templateId,\n stickerText,\n stickerImageUrl,\n onUpload,\n onExport,\n onError,\n onClose,\n autoOpen = true,\n openOptions,\n}: PicsartEditorProps) {\n const containerId = useMemo(\n () => `picsart-editor-${Math.random().toString(36).slice(2, 12)}`,\n [],\n );\n const instanceRef = useRef<PicsartInstance | null>(null);\n const propsRef = useRef({\n onExport,\n onError,\n onClose,\n });\n propsRef.current = { onExport, onError, onClose };\n\n useEffect(() => {\n let cancelled = false;\n\n (async () => {\n await loadPicsartSdk(sdkScriptUrl);\n if (cancelled || !window.Picsart) {\n return;\n }\n\n const baseOptions: PicsartConstructorOptions = {\n apiKey,\n customerId,\n ...(propertyId ? { propertyId } : {}),\n containerId,\n ...(exportType && { exportType }),\n ...(theme && { theme }),\n ...(title && { title }),\n ...(selectedCategory && { selectedCategory }),\n ...(canvasSize && { canvasSize }),\n ...(templatesTitleText && { templatesTitleText }),\n ...(templatesSubTitle && { templatesSubTitle }),\n ...(templatesFilters && Object.keys(templatesFilters).length > 0\n ? { templatesFilters }\n : {}),\n ...(replayUrl && { replayUrl }),\n ...(videoUrl && { videoUrl }),\n ...(imageUrl && { imageUrl }),\n ...(subtitleUrl && { subtitleUrl }),\n ...(templateId && { templateId }),\n ...(stickerText && { stickerText }),\n ...(stickerImageUrl && { stickerImageUrl }),\n onUpload: onUpload ?? createDefaultVideoUpload(apiKey),\n };\n\n const instance = new window.Picsart(baseOptions);\n instanceRef.current = instance;\n\n instance.onError((err: unknown) => {\n propsRef.current.onError?.(err);\n });\n\n instance.onExport((output: PicsartExportOutput) => {\n propsRef.current.onExport?.(output);\n });\n\n if (onClose) {\n instance.onClose(() => {\n propsRef.current.onClose?.();\n });\n }\n\n if (autoOpen) {\n const openPayload: PicsartOpenOptions =\n openOptions ??\n (replayUrl\n ? { replayUrl }\n : templateId\n ? { templateId }\n : imageUrl\n ? { imageUrl }\n : {});\n\n if (Object.keys(openPayload).length > 0) {\n instance.open(openPayload);\n } else {\n instance.open();\n }\n }\n })().catch(err => {\n propsRef.current.onError?.(err);\n });\n\n return () => {\n cancelled = true;\n instanceRef.current?.close();\n instanceRef.current = null;\n };\n }, [\n apiKey,\n customerId,\n propertyId,\n containerId,\n sdkScriptUrl,\n exportType,\n theme,\n title,\n selectedCategory,\n canvasSize,\n templatesTitleText,\n templatesSubTitle,\n replayUrl,\n videoUrl,\n imageUrl,\n subtitleUrl,\n templateId,\n stickerText,\n stickerImageUrl,\n onUpload,\n autoOpen,\n openOptions,\n JSON.stringify(templatesFilters ?? null),\n onClose,\n ]);\n\n return (\n <div className={className} style={{ height: '100%', width: '100%', ...style }}>\n {children}\n <div\n id={containerId}\n style={{\n width: '100%',\n height: '100%',\n minHeight: 480,\n background: '#ededed',\n borderRadius: 3,\n }}\n />\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/defaultUpload.ts","../src/loadScript.ts","../src/PicsartEditor.tsx"],"names":["useId","useMemo","useRef","useEffect","jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import type { PicsartUploadHandler } from './types';\n\nexport function createDefaultVideoUpload(apiKey: string): PicsartUploadHandler {\n console.log('createDefaultVideoUpload', apiKey);\n return async (file, mimeType) => {\n const video = new Blob([file as BlobPart], { type: mimeType });\n const form = new FormData();\n form.append('file', video);\n\n const result = await fetch('https://video-api.picsart.io/v2/upload', {\n method: 'POST',\n headers: {\n accept: 'application/json',\n 'X-Picsart-API-Key': apiKey,\n },\n body: form,\n });\n\n const res = (await result.json()) as { data?: { url?: string } };\n\n return {\n url: res.data?.url ?? '',\n status: 'done',\n progress: 100,\n error: null,\n };\n };\n}\n","const DEFAULT_SDK_URL = 'https://demo.sdk.picsart.io/sdk/cdn/cdn.js';\nconsole.log('DEFAULT_SDK_URL', DEFAULT_SDK_URL);\nlet loadPromise: Promise<void> | null = null;\n\nexport function loadPicsartSdk(scriptUrl: string = DEFAULT_SDK_URL): Promise<void> {\n console.log('loadPicsartSdk', scriptUrl);\n if (typeof window === 'undefined') {\n return Promise.reject(new Error('Picsart SDK can only load in a browser.'));\n }\n\n if (window.Picsart) {\n return Promise.resolve();\n }\n\n if (loadPromise) {\n return loadPromise;\n }\n\n loadPromise = new Promise((resolve, reject) => {\n const resolvedUrl = new URL(scriptUrl, document.baseURI).href;\n const scripts = document.getElementsByTagName('script');\n let existing: HTMLScriptElement | null = null;\n for (let i = 0; i < scripts.length; i++) {\n const s = scripts[i];\n if (s.dataset.picsartSdk === 'true' && s.src === resolvedUrl) {\n existing = s;\n break;\n }\n }\n if (existing) {\n if (window.Picsart) {\n resolve();\n return;\n }\n existing.addEventListener('load', () => resolve(), { once: true });\n existing.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load Picsart SDK: ${scriptUrl}`)),\n { once: true },\n );\n return;\n }\n\n const script = document.createElement('script');\n script.src = scriptUrl;\n script.async = true;\n script.dataset.picsartSdk = 'true';\n script.onload = () => resolve();\n script.onerror = () => {\n loadPromise = null;\n reject(new Error(`Failed to load Picsart SDK: ${scriptUrl}`));\n };\n document.head.append(script);\n });\n\n return loadPromise;\n}\n","import {\n useEffect,\n useId,\n useMemo,\n useRef,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createDefaultVideoUpload } from './defaultUpload';\nimport { loadPicsartSdk } from './loadScript';\nimport type {\n PicsartConstructorOptions,\n PicsartExportOutput,\n PicsartExportType,\n PicsartInstance,\n PicsartOpenOptions,\n PicsartTheme,\n PicsartUploadHandler,\n} from './types';\n\n/** Matches Picsart quick-start: apiKey, customerId, propertyId, containerId, title. */\nexport interface PicsartEditorProps {\n /** From Picsart signup / dashboard. */\n apiKey: string;\n /** From Picsart signup / dashboard. */\n customerId: string;\n /** From Picsart signup / dashboard (required for the standard SDK flow). */\n propertyId: string;\n /**\n * Must match the inner editor container’s `id`. If omitted, a stable unique id is generated\n * and passed to the SDK for you (same as embedding a div with that id).\n */\n containerId?: string;\n /**\n * Editor chrome title when supported. Defaults to **Photo Print Designer** (Picsart docs default).\n */\n title?: string;\n\n sdkScriptUrl?: string;\n className?: string;\n style?: CSSProperties;\n children?: ReactNode;\n\n exportType?: PicsartExportType;\n theme?: PicsartTheme;\n selectedCategory?: string;\n canvasSize?: string;\n templatesTitleText?: string;\n templatesSubTitle?: string;\n templatesFilters?: Record<string, unknown>;\n\n replayUrl?: string;\n videoUrl?: string;\n imageUrl?: string;\n subtitleUrl?: string;\n templateId?: string;\n stickerText?: string;\n stickerImageUrl?: string;\n\n onUpload?: PicsartUploadHandler;\n onExport?: (output: PicsartExportOutput) => void;\n onError?: (error: unknown) => void;\n onClose?: () => void;\n\n /** When false, `open()` is called with no asset (blank editor). Default true. */\n autoOpen?: boolean;\n /** Override initial `open()` payload when autoOpen is true. */\n openOptions?: PicsartOpenOptions;\n}\n\nconst DEFAULT_TITLE = 'Photo Print Designer';\n\nexport function PicsartEditor({\n apiKey,\n customerId,\n propertyId,\n containerId: containerIdProp,\n title = DEFAULT_TITLE,\n sdkScriptUrl,\n className,\n style,\n children,\n exportType,\n theme,\n selectedCategory,\n canvasSize,\n templatesTitleText,\n templatesSubTitle,\n templatesFilters,\n replayUrl,\n videoUrl,\n imageUrl,\n subtitleUrl,\n templateId,\n stickerText,\n stickerImageUrl,\n onUpload,\n onExport,\n onError,\n onClose,\n autoOpen = true,\n openOptions,\n}: PicsartEditorProps) {\n const reactId = useId().replace(/:/g, '');\n const containerId = useMemo(\n () => containerIdProp ?? `picsart-editor-${reactId}`,\n [containerIdProp, reactId],\n );\n const instanceRef = useRef<PicsartInstance | null>(null);\n const propsRef = useRef({\n onExport,\n onError,\n onClose,\n });\n propsRef.current = { onExport, onError, onClose };\n\n useEffect(() => {\n let cancelled = false;\n\n (async () => {\n await loadPicsartSdk(sdkScriptUrl);\n if (cancelled || !window.Picsart) {\n return;\n }\n\n const baseOptions: PicsartConstructorOptions = {\n apiKey,\n customerId,\n propertyId,\n containerId,\n ...(exportType && { exportType }),\n ...(theme && { theme }),\n title,\n ...(selectedCategory && { selectedCategory }),\n ...(canvasSize && { canvasSize }),\n ...(templatesTitleText && { templatesTitleText }),\n ...(templatesSubTitle && { templatesSubTitle }),\n ...(templatesFilters && Object.keys(templatesFilters).length > 0\n ? { templatesFilters }\n : {}),\n ...(replayUrl && { replayUrl }),\n ...(videoUrl && { videoUrl }),\n ...(imageUrl && { imageUrl }),\n ...(subtitleUrl && { subtitleUrl }),\n ...(templateId && { templateId }),\n ...(stickerText && { stickerText }),\n ...(stickerImageUrl && { stickerImageUrl }),\n onUpload: onUpload ?? createDefaultVideoUpload(apiKey),\n };\n\n const instance = new window.Picsart(baseOptions);\n instanceRef.current = instance;\n\n instance.onError((err: unknown) => {\n propsRef.current.onError?.(err);\n });\n\n instance.onExport((output: PicsartExportOutput) => {\n propsRef.current.onExport?.(output);\n });\n\n if (onClose) {\n instance.onClose(() => {\n propsRef.current.onClose?.();\n });\n }\n\n if (autoOpen) {\n const openPayload: PicsartOpenOptions =\n openOptions ??\n (replayUrl\n ? { replayUrl }\n : templateId\n ? { templateId }\n : imageUrl\n ? { imageUrl }\n : {});\n\n if (Object.keys(openPayload).length > 0) {\n instance.open(openPayload);\n } else {\n instance.open();\n }\n }\n })().catch(err => {\n propsRef.current.onError?.(err);\n });\n\n return () => {\n cancelled = true;\n instanceRef.current?.close();\n instanceRef.current = null;\n };\n }, [\n apiKey,\n customerId,\n propertyId,\n containerId,\n sdkScriptUrl,\n exportType,\n theme,\n title,\n selectedCategory,\n canvasSize,\n templatesTitleText,\n templatesSubTitle,\n replayUrl,\n videoUrl,\n imageUrl,\n subtitleUrl,\n templateId,\n stickerText,\n stickerImageUrl,\n onUpload,\n autoOpen,\n openOptions,\n JSON.stringify(templatesFilters ?? null),\n onClose,\n ]);\n\n return (\n <div className={className} style={{ height: '100%', width: '100%', ...style }}>\n {children}\n <div\n id={containerId}\n style={{\n width: '100%',\n height: '100%',\n minHeight: 480,\n background: '#ededed',\n borderRadius: 3,\n }}\n />\n </div>\n );\n}\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useMemo, useRef, useEffect } from 'react';
|
|
1
|
+
import { useId, useMemo, useRef, useEffect } from 'react';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
|
|
4
4
|
// src/PicsartEditor.tsx
|
|
@@ -80,17 +80,19 @@ function loadPicsartSdk(scriptUrl = DEFAULT_SDK_URL) {
|
|
|
80
80
|
});
|
|
81
81
|
return loadPromise;
|
|
82
82
|
}
|
|
83
|
+
var DEFAULT_TITLE = "Photo Print Designer";
|
|
83
84
|
function PicsartEditor({
|
|
84
85
|
apiKey,
|
|
85
86
|
customerId,
|
|
86
87
|
propertyId,
|
|
88
|
+
containerId: containerIdProp,
|
|
89
|
+
title = DEFAULT_TITLE,
|
|
87
90
|
sdkScriptUrl,
|
|
88
91
|
className,
|
|
89
92
|
style,
|
|
90
93
|
children,
|
|
91
94
|
exportType,
|
|
92
95
|
theme,
|
|
93
|
-
title,
|
|
94
96
|
selectedCategory,
|
|
95
97
|
canvasSize,
|
|
96
98
|
templatesTitleText,
|
|
@@ -110,9 +112,10 @@ function PicsartEditor({
|
|
|
110
112
|
autoOpen = true,
|
|
111
113
|
openOptions
|
|
112
114
|
}) {
|
|
115
|
+
const reactId = useId().replace(/:/g, "");
|
|
113
116
|
const containerId = useMemo(
|
|
114
|
-
() => `picsart-editor-${
|
|
115
|
-
[]
|
|
117
|
+
() => containerIdProp ?? `picsart-editor-${reactId}`,
|
|
118
|
+
[containerIdProp, reactId]
|
|
116
119
|
);
|
|
117
120
|
const instanceRef = useRef(null);
|
|
118
121
|
const propsRef = useRef({
|
|
@@ -131,11 +134,11 @@ function PicsartEditor({
|
|
|
131
134
|
const baseOptions = {
|
|
132
135
|
apiKey,
|
|
133
136
|
customerId,
|
|
134
|
-
|
|
137
|
+
propertyId,
|
|
135
138
|
containerId,
|
|
136
139
|
...exportType && { exportType },
|
|
137
140
|
...theme && { theme },
|
|
138
|
-
|
|
141
|
+
title,
|
|
139
142
|
...selectedCategory && { selectedCategory },
|
|
140
143
|
...canvasSize && { canvasSize },
|
|
141
144
|
...templatesTitleText && { templatesTitleText },
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/defaultUpload.ts","../src/loadScript.ts","../src/PicsartEditor.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import type { PicsartUploadHandler } from './types';\n\nexport function createDefaultVideoUpload(apiKey: string): PicsartUploadHandler {\n console.log('createDefaultVideoUpload', apiKey);\n return async (file, mimeType) => {\n const video = new Blob([file as BlobPart], { type: mimeType });\n const form = new FormData();\n form.append('file', video);\n\n const result = await fetch('https://video-api.picsart.io/v2/upload', {\n method: 'POST',\n headers: {\n accept: 'application/json',\n 'X-Picsart-API-Key': apiKey,\n },\n body: form,\n });\n\n const res = (await result.json()) as { data?: { url?: string } };\n\n return {\n url: res.data?.url ?? '',\n status: 'done',\n progress: 100,\n error: null,\n };\n };\n}\n","const DEFAULT_SDK_URL = 'https://demo.sdk.picsart.io/sdk/cdn/cdn.js';\nconsole.log('DEFAULT_SDK_URL', DEFAULT_SDK_URL);\nlet loadPromise: Promise<void> | null = null;\n\nexport function loadPicsartSdk(scriptUrl: string = DEFAULT_SDK_URL): Promise<void> {\n console.log('loadPicsartSdk', scriptUrl);\n if (typeof window === 'undefined') {\n return Promise.reject(new Error('Picsart SDK can only load in a browser.'));\n }\n\n if (window.Picsart) {\n return Promise.resolve();\n }\n\n if (loadPromise) {\n return loadPromise;\n }\n\n loadPromise = new Promise((resolve, reject) => {\n const resolvedUrl = new URL(scriptUrl, document.baseURI).href;\n const scripts = document.getElementsByTagName('script');\n let existing: HTMLScriptElement | null = null;\n for (let i = 0; i < scripts.length; i++) {\n const s = scripts[i];\n if (s.dataset.picsartSdk === 'true' && s.src === resolvedUrl) {\n existing = s;\n break;\n }\n }\n if (existing) {\n if (window.Picsart) {\n resolve();\n return;\n }\n existing.addEventListener('load', () => resolve(), { once: true });\n existing.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load Picsart SDK: ${scriptUrl}`)),\n { once: true },\n );\n return;\n }\n\n const script = document.createElement('script');\n script.src = scriptUrl;\n script.async = true;\n script.dataset.picsartSdk = 'true';\n script.onload = () => resolve();\n script.onerror = () => {\n loadPromise = null;\n reject(new Error(`Failed to load Picsart SDK: ${scriptUrl}`));\n };\n document.head.append(script);\n });\n\n return loadPromise;\n}\n","import {\n useEffect,\n useMemo,\n useRef,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createDefaultVideoUpload } from './defaultUpload';\nimport { loadPicsartSdk } from './loadScript';\nimport type {\n PicsartConstructorOptions,\n PicsartExportOutput,\n PicsartExportType,\n PicsartInstance,\n PicsartOpenOptions,\n PicsartTheme,\n PicsartUploadHandler,\n} from './types';\n\nexport interface PicsartEditorProps {\n apiKey: string;\n customerId: string;\n /** Omitted when your Picsart setup does not use a property id. */\n propertyId?: string;\n\n sdkScriptUrl?: string;\n className?: string;\n style?: CSSProperties;\n children?: ReactNode;\n\n exportType?: PicsartExportType;\n theme?: PicsartTheme;\n title?: string;\n selectedCategory?: string;\n canvasSize?: string;\n templatesTitleText?: string;\n templatesSubTitle?: string;\n templatesFilters?: Record<string, unknown>;\n\n replayUrl?: string;\n videoUrl?: string;\n imageUrl?: string;\n subtitleUrl?: string;\n templateId?: string;\n stickerText?: string;\n stickerImageUrl?: string;\n\n onUpload?: PicsartUploadHandler;\n onExport?: (output: PicsartExportOutput) => void;\n onError?: (error: unknown) => void;\n onClose?: () => void;\n\n /** When false, `open()` is called with no asset (blank editor). Default true. */\n autoOpen?: boolean;\n /** Override initial `open()` payload when autoOpen is true. */\n openOptions?: PicsartOpenOptions;\n}\n\nexport function PicsartEditor({\n apiKey,\n customerId,\n propertyId,\n sdkScriptUrl,\n className,\n style,\n children,\n exportType,\n theme,\n title,\n selectedCategory,\n canvasSize,\n templatesTitleText,\n templatesSubTitle,\n templatesFilters,\n replayUrl,\n videoUrl,\n imageUrl,\n subtitleUrl,\n templateId,\n stickerText,\n stickerImageUrl,\n onUpload,\n onExport,\n onError,\n onClose,\n autoOpen = true,\n openOptions,\n}: PicsartEditorProps) {\n const containerId = useMemo(\n () => `picsart-editor-${Math.random().toString(36).slice(2, 12)}`,\n [],\n );\n const instanceRef = useRef<PicsartInstance | null>(null);\n const propsRef = useRef({\n onExport,\n onError,\n onClose,\n });\n propsRef.current = { onExport, onError, onClose };\n\n useEffect(() => {\n let cancelled = false;\n\n (async () => {\n await loadPicsartSdk(sdkScriptUrl);\n if (cancelled || !window.Picsart) {\n return;\n }\n\n const baseOptions: PicsartConstructorOptions = {\n apiKey,\n customerId,\n ...(propertyId ? { propertyId } : {}),\n containerId,\n ...(exportType && { exportType }),\n ...(theme && { theme }),\n ...(title && { title }),\n ...(selectedCategory && { selectedCategory }),\n ...(canvasSize && { canvasSize }),\n ...(templatesTitleText && { templatesTitleText }),\n ...(templatesSubTitle && { templatesSubTitle }),\n ...(templatesFilters && Object.keys(templatesFilters).length > 0\n ? { templatesFilters }\n : {}),\n ...(replayUrl && { replayUrl }),\n ...(videoUrl && { videoUrl }),\n ...(imageUrl && { imageUrl }),\n ...(subtitleUrl && { subtitleUrl }),\n ...(templateId && { templateId }),\n ...(stickerText && { stickerText }),\n ...(stickerImageUrl && { stickerImageUrl }),\n onUpload: onUpload ?? createDefaultVideoUpload(apiKey),\n };\n\n const instance = new window.Picsart(baseOptions);\n instanceRef.current = instance;\n\n instance.onError((err: unknown) => {\n propsRef.current.onError?.(err);\n });\n\n instance.onExport((output: PicsartExportOutput) => {\n propsRef.current.onExport?.(output);\n });\n\n if (onClose) {\n instance.onClose(() => {\n propsRef.current.onClose?.();\n });\n }\n\n if (autoOpen) {\n const openPayload: PicsartOpenOptions =\n openOptions ??\n (replayUrl\n ? { replayUrl }\n : templateId\n ? { templateId }\n : imageUrl\n ? { imageUrl }\n : {});\n\n if (Object.keys(openPayload).length > 0) {\n instance.open(openPayload);\n } else {\n instance.open();\n }\n }\n })().catch(err => {\n propsRef.current.onError?.(err);\n });\n\n return () => {\n cancelled = true;\n instanceRef.current?.close();\n instanceRef.current = null;\n };\n }, [\n apiKey,\n customerId,\n propertyId,\n containerId,\n sdkScriptUrl,\n exportType,\n theme,\n title,\n selectedCategory,\n canvasSize,\n templatesTitleText,\n templatesSubTitle,\n replayUrl,\n videoUrl,\n imageUrl,\n subtitleUrl,\n templateId,\n stickerText,\n stickerImageUrl,\n onUpload,\n autoOpen,\n openOptions,\n JSON.stringify(templatesFilters ?? null),\n onClose,\n ]);\n\n return (\n <div className={className} style={{ height: '100%', width: '100%', ...style }}>\n {children}\n <div\n id={containerId}\n style={{\n width: '100%',\n height: '100%',\n minHeight: 480,\n background: '#ededed',\n borderRadius: 3,\n }}\n />\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/defaultUpload.ts","../src/loadScript.ts","../src/PicsartEditor.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import type { PicsartUploadHandler } from './types';\n\nexport function createDefaultVideoUpload(apiKey: string): PicsartUploadHandler {\n console.log('createDefaultVideoUpload', apiKey);\n return async (file, mimeType) => {\n const video = new Blob([file as BlobPart], { type: mimeType });\n const form = new FormData();\n form.append('file', video);\n\n const result = await fetch('https://video-api.picsart.io/v2/upload', {\n method: 'POST',\n headers: {\n accept: 'application/json',\n 'X-Picsart-API-Key': apiKey,\n },\n body: form,\n });\n\n const res = (await result.json()) as { data?: { url?: string } };\n\n return {\n url: res.data?.url ?? '',\n status: 'done',\n progress: 100,\n error: null,\n };\n };\n}\n","const DEFAULT_SDK_URL = 'https://demo.sdk.picsart.io/sdk/cdn/cdn.js';\nconsole.log('DEFAULT_SDK_URL', DEFAULT_SDK_URL);\nlet loadPromise: Promise<void> | null = null;\n\nexport function loadPicsartSdk(scriptUrl: string = DEFAULT_SDK_URL): Promise<void> {\n console.log('loadPicsartSdk', scriptUrl);\n if (typeof window === 'undefined') {\n return Promise.reject(new Error('Picsart SDK can only load in a browser.'));\n }\n\n if (window.Picsart) {\n return Promise.resolve();\n }\n\n if (loadPromise) {\n return loadPromise;\n }\n\n loadPromise = new Promise((resolve, reject) => {\n const resolvedUrl = new URL(scriptUrl, document.baseURI).href;\n const scripts = document.getElementsByTagName('script');\n let existing: HTMLScriptElement | null = null;\n for (let i = 0; i < scripts.length; i++) {\n const s = scripts[i];\n if (s.dataset.picsartSdk === 'true' && s.src === resolvedUrl) {\n existing = s;\n break;\n }\n }\n if (existing) {\n if (window.Picsart) {\n resolve();\n return;\n }\n existing.addEventListener('load', () => resolve(), { once: true });\n existing.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load Picsart SDK: ${scriptUrl}`)),\n { once: true },\n );\n return;\n }\n\n const script = document.createElement('script');\n script.src = scriptUrl;\n script.async = true;\n script.dataset.picsartSdk = 'true';\n script.onload = () => resolve();\n script.onerror = () => {\n loadPromise = null;\n reject(new Error(`Failed to load Picsart SDK: ${scriptUrl}`));\n };\n document.head.append(script);\n });\n\n return loadPromise;\n}\n","import {\n useEffect,\n useId,\n useMemo,\n useRef,\n type CSSProperties,\n type ReactNode,\n} from 'react';\nimport { createDefaultVideoUpload } from './defaultUpload';\nimport { loadPicsartSdk } from './loadScript';\nimport type {\n PicsartConstructorOptions,\n PicsartExportOutput,\n PicsartExportType,\n PicsartInstance,\n PicsartOpenOptions,\n PicsartTheme,\n PicsartUploadHandler,\n} from './types';\n\n/** Matches Picsart quick-start: apiKey, customerId, propertyId, containerId, title. */\nexport interface PicsartEditorProps {\n /** From Picsart signup / dashboard. */\n apiKey: string;\n /** From Picsart signup / dashboard. */\n customerId: string;\n /** From Picsart signup / dashboard (required for the standard SDK flow). */\n propertyId: string;\n /**\n * Must match the inner editor container’s `id`. If omitted, a stable unique id is generated\n * and passed to the SDK for you (same as embedding a div with that id).\n */\n containerId?: string;\n /**\n * Editor chrome title when supported. Defaults to **Photo Print Designer** (Picsart docs default).\n */\n title?: string;\n\n sdkScriptUrl?: string;\n className?: string;\n style?: CSSProperties;\n children?: ReactNode;\n\n exportType?: PicsartExportType;\n theme?: PicsartTheme;\n selectedCategory?: string;\n canvasSize?: string;\n templatesTitleText?: string;\n templatesSubTitle?: string;\n templatesFilters?: Record<string, unknown>;\n\n replayUrl?: string;\n videoUrl?: string;\n imageUrl?: string;\n subtitleUrl?: string;\n templateId?: string;\n stickerText?: string;\n stickerImageUrl?: string;\n\n onUpload?: PicsartUploadHandler;\n onExport?: (output: PicsartExportOutput) => void;\n onError?: (error: unknown) => void;\n onClose?: () => void;\n\n /** When false, `open()` is called with no asset (blank editor). Default true. */\n autoOpen?: boolean;\n /** Override initial `open()` payload when autoOpen is true. */\n openOptions?: PicsartOpenOptions;\n}\n\nconst DEFAULT_TITLE = 'Photo Print Designer';\n\nexport function PicsartEditor({\n apiKey,\n customerId,\n propertyId,\n containerId: containerIdProp,\n title = DEFAULT_TITLE,\n sdkScriptUrl,\n className,\n style,\n children,\n exportType,\n theme,\n selectedCategory,\n canvasSize,\n templatesTitleText,\n templatesSubTitle,\n templatesFilters,\n replayUrl,\n videoUrl,\n imageUrl,\n subtitleUrl,\n templateId,\n stickerText,\n stickerImageUrl,\n onUpload,\n onExport,\n onError,\n onClose,\n autoOpen = true,\n openOptions,\n}: PicsartEditorProps) {\n const reactId = useId().replace(/:/g, '');\n const containerId = useMemo(\n () => containerIdProp ?? `picsart-editor-${reactId}`,\n [containerIdProp, reactId],\n );\n const instanceRef = useRef<PicsartInstance | null>(null);\n const propsRef = useRef({\n onExport,\n onError,\n onClose,\n });\n propsRef.current = { onExport, onError, onClose };\n\n useEffect(() => {\n let cancelled = false;\n\n (async () => {\n await loadPicsartSdk(sdkScriptUrl);\n if (cancelled || !window.Picsart) {\n return;\n }\n\n const baseOptions: PicsartConstructorOptions = {\n apiKey,\n customerId,\n propertyId,\n containerId,\n ...(exportType && { exportType }),\n ...(theme && { theme }),\n title,\n ...(selectedCategory && { selectedCategory }),\n ...(canvasSize && { canvasSize }),\n ...(templatesTitleText && { templatesTitleText }),\n ...(templatesSubTitle && { templatesSubTitle }),\n ...(templatesFilters && Object.keys(templatesFilters).length > 0\n ? { templatesFilters }\n : {}),\n ...(replayUrl && { replayUrl }),\n ...(videoUrl && { videoUrl }),\n ...(imageUrl && { imageUrl }),\n ...(subtitleUrl && { subtitleUrl }),\n ...(templateId && { templateId }),\n ...(stickerText && { stickerText }),\n ...(stickerImageUrl && { stickerImageUrl }),\n onUpload: onUpload ?? createDefaultVideoUpload(apiKey),\n };\n\n const instance = new window.Picsart(baseOptions);\n instanceRef.current = instance;\n\n instance.onError((err: unknown) => {\n propsRef.current.onError?.(err);\n });\n\n instance.onExport((output: PicsartExportOutput) => {\n propsRef.current.onExport?.(output);\n });\n\n if (onClose) {\n instance.onClose(() => {\n propsRef.current.onClose?.();\n });\n }\n\n if (autoOpen) {\n const openPayload: PicsartOpenOptions =\n openOptions ??\n (replayUrl\n ? { replayUrl }\n : templateId\n ? { templateId }\n : imageUrl\n ? { imageUrl }\n : {});\n\n if (Object.keys(openPayload).length > 0) {\n instance.open(openPayload);\n } else {\n instance.open();\n }\n }\n })().catch(err => {\n propsRef.current.onError?.(err);\n });\n\n return () => {\n cancelled = true;\n instanceRef.current?.close();\n instanceRef.current = null;\n };\n }, [\n apiKey,\n customerId,\n propertyId,\n containerId,\n sdkScriptUrl,\n exportType,\n theme,\n title,\n selectedCategory,\n canvasSize,\n templatesTitleText,\n templatesSubTitle,\n replayUrl,\n videoUrl,\n imageUrl,\n subtitleUrl,\n templateId,\n stickerText,\n stickerImageUrl,\n onUpload,\n autoOpen,\n openOptions,\n JSON.stringify(templatesFilters ?? null),\n onClose,\n ]);\n\n return (\n <div className={className} style={{ height: '100%', width: '100%', ...style }}>\n {children}\n <div\n id={containerId}\n style={{\n width: '100%',\n height: '100%',\n minHeight: 480,\n background: '#ededed',\n borderRadius: 3,\n }}\n />\n </div>\n );\n}\n"]}
|