@picsart/react-photo-editor 1.0.0 → 1.0.1

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/dist/index.mjs CHANGED
@@ -1,1843 +1,228 @@
1
- import { forwardRef, useId, useMemo, useRef, useImperativeHandle, useEffect } from 'react';
2
- import merge from 'lodash/merge';
3
- import { jsx } from 'react/jsx-runtime';
1
+ import { useMemo, useRef, useEffect } from 'react';
2
+ import { jsxs, jsx } from 'react/jsx-runtime';
4
3
 
5
- // src/PhotoEditor.tsx
4
+ // src/PicsartEditor.tsx
6
5
 
7
- // src/core/fontsList.js
8
- var fontsList_default = [{
9
- font_name: "Abril Fatface",
10
- font_src: "https://fonts.gstatic.com/s/abrilfatface/v11/zOL64pLDlL1D99S8g8PtiKchm-BsjOLhZBY.ttf",
11
- preview_url: "https://cdn140.picsart.com/25386885332449700051.png",
12
- meta_data: {
13
- font_name: "Abril Fatface"
14
- }
15
- }, {
16
- font_name: "Alfa Slab One",
17
- font_src: "https://fonts.gstatic.com/s/alfaslabone/v9/6NUQ8FmMKwSEKjnm5-4v-4Jh6dVretWvYmE.ttf",
18
- preview_url: "https://cdn130.picsart.com/53956840285132480830.png",
19
- meta_data: {
20
- font_name: "Alfa Slab One"
21
- }
22
- }, {
23
- font_name: "Anton",
24
- font_src: "https://fonts.gstatic.com/s/anton/v11/1Ptgg87LROyAm0K08i4gS7lu.ttf",
25
- preview_url: "https://cdn140.picsart.com/98137588707333945131.png",
26
- meta_data: {
27
- font_name: "Anton"
28
- }
29
- }, {
30
- font_name: "Arbutus Slab",
31
- font_src: "https://fonts.gstatic.com/s/arbutusslab/v8/oY1Z8e7OuLXkJGbXtr5ba7ZVa68dJlaFAQ.ttf",
32
- preview_url: "https://cdn130.picsart.com/27819557168994204830.png",
33
- meta_data: {
34
- font_name: "Arbutus Slab"
35
- }
36
- }, {
37
- font_name: "Asap",
38
- font_src: "https://fonts.gstatic.com/s/asap/v11/KFOoCniXp96a-zwU4UROGzY.ttf",
39
- preview_url: "https://cdn140.picsart.com/60809597155772951620.png",
40
- meta_data: {
41
- font_name: "Asap"
42
- }
43
- }, {
44
- font_name: "Bad Script",
45
- font_src: "https://fonts.gstatic.com/s/badscript/v8/6NUT8F6PJgbFWQn47_x7lOwuzd1AZtw.ttf",
46
- preview_url: "https://cdn140.picsart.com/13128634343141786843.png",
47
- meta_data: {
48
- font_name: "Bad Script"
49
- }
50
- }, {
51
- font_name: "Bangers",
52
- font_src: "https://fonts.gstatic.com/s/bangers/v12/FeVQS0BTqb0h60ACL5la2bxii28.ttf",
53
- preview_url: "https://cdn140.picsart.com/44707958769094196908.png",
54
- meta_data: {
55
- font_name: "Bangers"
56
- }
57
- }, {
58
- font_name: "Bebas Neue",
59
- font_src: "https://fonts.gstatic.com/s/bebasneue/v1/JTUSjIg69CK48gW7PXooxW5rygbi49c.ttf",
60
- preview_url: "https://cdn130.picsart.com/98334325782617391670.png",
61
- meta_data: {
62
- font_name: "Bebas Neue"
63
- }
64
- }, {
65
- font_name: "Big Shoulders Text",
66
- font_src: "https://fonts.gstatic.com/s/bigshoulderstext/v1/55xxezRtP9G3CGPIf49hxc8P0eytUxBsnIx7QMISdQ.ttf",
67
- preview_url: "https://cdn130.picsart.com/12121726167610188875.png",
68
- meta_data: {
69
- font_name: "Big Shoulders Text"
70
- }
71
- }, {
72
- font_name: "Chivo",
73
- font_src: "https://fonts.gstatic.com/s/chivo/v11/va9I4kzIxd1KFoBvS-J3kbDP.ttf",
74
- preview_url: "https://cdn140.picsart.com/58052000465919491577.png",
75
- meta_data: {
76
- font_name: "Chivo"
77
- }
78
- }, {
79
- font_name: "Cormorant Garamond",
80
- font_src: "https://fonts.gstatic.com/s/cormorantgaramond/v7/co3bmX5slCNuHLi8bLeY9MK7whWMhyjornFLsS6V7w.ttf",
81
- preview_url: "https://pastatic.picsart.com/93140072008531375848.png",
82
- meta_data: {
83
- font_name: "Cormorant Garamond"
84
- }
85
- }, {
86
- font_name: "Crimson Text",
87
- font_src: "https://fonts.gstatic.com/s/crimsontext/v10/wlp2gwHKFkZgtmSR3NB0oRJvaAJSA_JN3Q.ttf",
88
- preview_url: "https://cdn140.picsart.com/69167876914314732943.png",
89
- meta_data: {
90
- font_name: "Crimson Text"
91
- }
92
- }, {
93
- font_name: "DM Serif Text",
94
- font_src: "https://fonts.gstatic.com/s/dmseriftext/v4/rnCu-xZa_krGokauCeNq1wWyafOPXHIJErY.ttf",
95
- preview_url: "https://cdn130.picsart.com/55282901287078186246.png",
96
- meta_data: {
97
- font_name: "DM Serif Text"
98
- }
99
- }, {
100
- font_name: "Dancing Script",
101
- font_src: "https://fonts.gstatic.com/s/dancingscript/v13/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSoHTeB9ptDqpw.ttf",
102
- preview_url: "https://cdn140.picsart.com/24219941301405950625.png",
103
- meta_data: {
104
- font_name: "Dancing Script"
105
- }
106
- }, {
107
- font_name: "EB Garamond",
108
- font_src: "https://fonts.gstatic.com/s/ebgaramond/v12/SlGDmQSNjdsmc35JDF1K5E55YMjF_7DPuGi-6_RUA4V-e6yHgQ.ttf",
109
- preview_url: "https://cdn140.picsart.com/74991851353912958783.png",
110
- meta_data: {
111
- font_name: "EB Garamond"
112
- }
113
- }, {
114
- font_name: "Great Vibes",
115
- font_src: "https://fonts.gstatic.com/s/greatvibes/v7/RWmMoKWR9v4ksMfaWd_JN-XCg6UKDXlq.ttf",
116
- preview_url: "https://cdn140.picsart.com/22644934000530171740.png",
117
- meta_data: {
118
- font_name: "Great Vibes"
119
- }
120
- }, {
121
- font_name: "Heebo",
122
- font_src: "https://fonts.gstatic.com/s/heebo/v5/NGS6v5_NC0k9P-HxR7BDsbMB.ttf",
123
- preview_url: "https://cdn140.picsart.com/52315751355339412370.png",
124
- meta_data: {
125
- font_name: "Heebo"
126
- }
127
- }, {
128
- font_name: "Inria Serif",
129
- font_src: "https://fonts.gstatic.com/s/inriaserif/v1/fC1lPYxPY3rXxEndZJAzN0SsfSzNr0Ck.ttf",
130
- preview_url: "https://cdn130.picsart.com/94780437423766762060.png",
131
- meta_data: {
132
- font_name: "Inria Serif"
133
- }
134
- }, {
135
- font_name: "Merienda One",
136
- font_src: "https://fonts.gstatic.com/s/meriendaone/v10/H4cgBXaMndbflEq6kyZ1ht6YgoyyYzFzFw.ttf",
137
- preview_url: "https://cdn140.picsart.com/21041524504352927265.png",
138
- meta_data: {
139
- font_name: "Merienda One"
140
- }
141
- }, {
142
- font_name: "Merriweather",
143
- font_src: "https://fonts.gstatic.com/s/merriweather/v21/u-440qyriQwlOrhSvowK_l5OeyxNV-bnrw.ttf",
144
- preview_url: "https://cdn130.picsart.com/69929375998507772789.png",
145
- meta_data: {
146
- font_name: "Merriweather"
147
- }
148
- }, {
149
- font_name: "Open Sans",
150
- font_src: "https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-U1UpcaXcl0Aw.ttf",
151
- preview_url: "https://cdn140.picsart.com/35428599082644159320.png",
152
- meta_data: {
153
- font_name: "Open Sans"
154
- }
155
- }, {
156
- font_name: "Oswald",
157
- font_src: "https://fonts.gstatic.com/s/oswald/v29/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvgUFoZAaRliE.ttf",
158
- preview_url: "https://cdn130.picsart.com/71974891250077960293.png",
159
- meta_data: {
160
- font_name: "Oswald"
161
- }
162
- }, {
163
- font_name: "Parisienne",
164
- font_src: "https://fonts.gstatic.com/s/parisienne/v7/E21i_d3kivvAkxhLEVZpcy96DuKuavM.ttf",
165
- preview_url: "https://cdn130.picsart.com/84449816304575771854.png",
166
- meta_data: {
167
- font_name: "Parisienne"
168
- }
169
- }, {
170
- font_name: "Source Code Pro",
171
- font_src: "https://fonts.gstatic.com/s/sourcecodepro/v11/HI_SiYsKILxRpg3hIP6sJ7fM7PqVOuHXvMY3xw.ttf",
172
- preview_url: "https://cdn130.picsart.com/40590227740456995315.png",
173
- meta_data: {
174
- font_name: "Source Code Pro"
175
- }
176
- }, {
177
- font_name: "Staatliches",
178
- font_src: "https://fonts.gstatic.com/s/staatliches/v3/HI_OiY8KO6hCsQSoAPmtMbectJG9O9PS.ttf",
179
- preview_url: "https://cdn130.picsart.com/73687792431864727223.png",
180
- meta_data: {
181
- font_name: "Staatliches"
182
- }
183
- }, {
184
- font_name: "Vollkorn",
185
- font_src: "https://fonts.gstatic.com/s/vollkorn/v10/0yb9GDoxxrvAnPhYGykuYkw2rQg1.ttf",
186
- preview_url: "https://cdn140.picsart.com/80348853381420089213.png",
187
- meta_data: {
188
- font_name: "Vollkorn"
189
- }
190
- }, {
191
- font_name: "Zilla Slab Highlight",
192
- font_src: "https://fonts.gstatic.com/s/zillaslabhighlight/v7/gNMbW2BrTpK8-inLtBJgMMfbm6uNVDvRxhtIY2DwSXlM.ttf",
193
- preview_url: "https://cdn140.picsart.com/29550039543117905772.png",
194
- meta_data: {
195
- font_name: "Zilla Slab Highlight"
196
- }
197
- }, {
198
- font_name: "Amatic SC",
199
- font_src: "https://fonts.gstatic.com/s/amaticsc/v13/TUZyzwprpvBS1izr_vO0De6ecZQf1A.ttf",
200
- preview_url: "https://cdn140.picsart.com/76133169940323953167.png",
201
- meta_data: {
202
- font_name: "Amatic SC"
203
- }
204
- }, {
205
- font_name: "Bungee Hairline",
206
- font_src: "https://fonts.gstatic.com/s/bungeehairline/v5/snfys0G548t04270a_ljTLUVrv-7YB2dQ5ZPqQ.ttf",
207
- preview_url: "https://cdn130.picsart.com/45339044762932607722.png",
208
- meta_data: {
209
- font_name: "Bungee Hairline"
210
- }
211
- }, {
212
- font_name: "Bungee Shade",
213
- font_src: "https://fonts.gstatic.com/s/bungeeshade/v5/DtVkJxarWL0t2KdzK3oI_jks7iLSrwFUlw.ttf",
214
- preview_url: "https://cdn130.picsart.com/30429614379741731995.png",
215
- meta_data: {
216
- font_name: "Bungee Shade"
217
- }
218
- }, {
219
- font_name: "Caveat",
220
- font_src: "https://fonts.gstatic.com/s/caveat/v7/Wnz6HAc5bAfYB2QLYTwZqg_MPQ.ttf",
221
- preview_url: "https://cdn140.picsart.com/99600177644972122868.png",
222
- meta_data: {
223
- font_name: "Caveat"
224
- }
225
- }, {
226
- font_name: "Changa One",
227
- font_src: "https://fonts.gstatic.com/s/changaone/v12/xfu00W3wXn3QLUJXhzq46AbouLfbK64.ttf",
228
- preview_url: "https://cdn140.picsart.com/08678826250924492860.png",
229
- meta_data: {
230
- font_name: "Changa One"
231
- }
232
- }, {
233
- font_name: "Codystar",
234
- font_src: "https://fonts.gstatic.com/s/codystar/v7/FwZY7-Q1xVk-40qxOt6A4sijpFu_.ttf",
235
- preview_url: "https://cdn140.picsart.com/47765983021350681268.png",
236
- meta_data: {
237
- font_name: "Codystar"
238
- }
239
- }, {
240
- font_name: "Concert One",
241
- font_src: "https://fonts.gstatic.com/s/concertone/v10/VEM1Ro9xs5PjtzCu-srDqRTlhv-CuVAQ.ttf",
242
- preview_url: "https://cdn130.picsart.com/76388331921052823333.png",
243
- meta_data: {
244
- font_name: "Concert One"
245
- }
246
- }, {
247
- font_name: "Crete Round",
248
- font_src: "https://fonts.gstatic.com/s/creteround/v8/55xoey1sJNPjPiv1ZZZrxJ1827zAKnxN.ttf",
249
- preview_url: "https://cdn140.picsart.com/73227707607828188588.png",
250
- meta_data: {
251
- font_name: "Crete Round"
252
- }
253
- }, {
254
- font_name: "Dr Sugiyama",
255
- font_src: "https://fonts.gstatic.com/s/drsugiyama/v9/HTxoL2k4N3O9n5I1boGI7abRM4-t-g7y.ttf",
256
- preview_url: "https://cdn130.picsart.com/66294513859724732016.png",
257
- meta_data: {
258
- font_name: "Dr Sugiyama"
259
- }
260
- }, {
261
- font_name: "Fredericka the Great",
262
- font_src: "https://fonts.gstatic.com/s/frederickathegreat/v9/9Bt33CxNwt7aOctW2xjbCstzwVKsIBVV-9Skz7Ylch2L.ttf",
263
- preview_url: "https://cdn130.picsart.com/92007141600631385660.png",
264
- meta_data: {
265
- font_name: "Fredericka the Great"
266
- }
267
- }, {
268
- font_name: "Frijole",
269
- font_src: "https://fonts.gstatic.com/s/frijole/v8/uU9PCBUR8oakM2BQ7xPb3vyHmlI.ttf",
270
- preview_url: "https://cdn130.picsart.com/29077552055373747063.png",
271
- meta_data: {
272
- font_name: "Frijole"
273
- }
274
- }, {
275
- font_name: "Henny Penny",
276
- font_src: "https://fonts.gstatic.com/s/hennypenny/v7/wXKvE3UZookzsxz_kjGSfMQqt3M7tMDT.ttf",
277
- preview_url: "https://cdn130.picsart.com/93810668391587565745.png",
278
- meta_data: {
279
- font_name: "Henny Penny"
280
- }
281
- }, {
282
- font_name: "IM Fell English SC",
283
- font_src: "https://fonts.gstatic.com/s/imfellenglishsc/v9/a8IENpD3CDX-4zrWfr1VY879qFF05pZLO4gOg0shzA.ttf",
284
- preview_url: "https://cdn130.picsart.com/04660082970457630430.png",
285
- meta_data: {
286
- font_name: "IM Fell English SC"
287
- }
288
- }, {
289
- font_name: "Julius Sans One",
290
- font_src: "https://fonts.gstatic.com/s/juliussansone/v8/1Pt2g8TAX_SGgBGUi0tGOYEga5W-xXEW6aGXHw.ttf",
291
- preview_url: "https://cdn140.picsart.com/45176589609511593985.png",
292
- meta_data: {
293
- font_name: "Julius Sans One"
294
- }
295
- }, {
296
- font_name: "League Script",
297
- font_src: "https://fonts.gstatic.com/s/leaguescript/v11/CSR54zpSlumSWj9CGVsoBZdeaNNUuOwkC2s.ttf",
298
- preview_url: "https://cdn140.picsart.com/40896784254023474235.png",
299
- meta_data: {
300
- font_name: "League Script"
301
- }
302
- }, {
303
- font_name: "Leckerli One",
304
- font_src: "https://fonts.gstatic.com/s/leckerlione/v10/V8mCoQH8VCsNttEnxnGQ-1itLZxcBtItFw.ttf",
305
- preview_url: "https://cdn130.picsart.com/76382168072777436281.png",
306
- meta_data: {
307
- font_name: "Leckerli One"
308
- }
309
- }, {
310
- font_name: "Lobster",
311
- font_src: "https://fonts.gstatic.com/s/lobster/v22/neILzCirqoswsqX9_oWsMqEzSJQ.ttf",
312
- preview_url: "https://cdn140.picsart.com/60206260212877767907.png",
313
- meta_data: {
314
- font_name: "Lobster"
315
- }
316
- }, {
317
- font_name: "Long Cang",
318
- font_src: "https://fonts.gstatic.com/s/longcang/v5/LYjAdGP8kkgoTec8zkRgrXArXN7HWQ.ttf",
319
- preview_url: "https://cdn140.picsart.com/37794032314052223165.png",
320
- meta_data: {
321
- font_name: "Long Cang"
322
- }
323
- }, {
324
- font_name: "Lora",
325
- font_src: "https://fonts.gstatic.com/s/lora/v14/0QIvMX1D_JOuAw3xItNPh_A.ttf",
326
- preview_url: "https://cdn140.picsart.com/30097693383754699804.png",
327
- meta_data: {
328
- font_name: "Lora"
329
- }
330
- }, {
331
- font_name: "Major Mono Display",
332
- font_src: "https://fonts.gstatic.com/s/majormonodisplay/v4/RWmVoLyb5fEqtsfBX9PDZIGr2tFubRhLCn2QIndPww.ttf",
333
- preview_url: "https://cdn140.picsart.com/16985850342092279724.png",
334
- meta_data: {
335
- font_name: "Major Mono Display"
336
- }
337
- }, {
338
- font_name: "Mali",
339
- font_src: "https://fonts.gstatic.com/s/mali/v3/N0ba2SRONuN4eCrODlxxOd8.ttf",
340
- preview_url: "https://cdn130.picsart.com/34820611090914930892.png",
341
- meta_data: {
342
- font_name: "Mali"
343
- }
344
- }, {
345
- font_name: "Mansalva",
346
- font_src: "https://fonts.gstatic.com/s/mansalva/v1/aWB4m0aacbtDfvq5NJllI47vdyBg.ttf",
347
- preview_url: "https://cdn130.picsart.com/84697180082457451630.png",
348
- meta_data: {
349
- font_name: "Mansalva"
350
- }
351
- }, {
352
- font_name: "Marck Script",
353
- font_src: "https://fonts.gstatic.com/s/marckscript/v10/nwpTtK2oNgBA3Or78gapdwuCzyI-aMPF7Q.ttf",
354
- preview_url: "https://cdn130.picsart.com/57318081978554768069.png",
355
- meta_data: {
356
- font_name: "Marck Script"
357
- }
358
- }, {
359
- font_name: "Nanum Brush Script",
360
- font_src: "https://fonts.gstatic.com/s/nanumbrushscript/v17/wXK2E2wfpokopxzthSqPbcR5_gVaxazyjqBr1lO97Q.ttf",
361
- preview_url: "https://cdn130.picsart.com/82999967921594322943.png",
362
- meta_data: {
363
- font_name: "Nanum Brush Script"
364
- }
365
- }, {
366
- font_name: "Paprika",
367
- font_src: "https://fonts.gstatic.com/s/paprika/v7/8QIJdijZitv49rDfuIgOq7jkAOw.ttf",
368
- preview_url: "https://cdn140.picsart.com/51347254242869641933.png",
369
- meta_data: {
370
- font_name: "Paprika"
371
- }
372
- }, {
373
- font_name: "Pathway Gothic One",
374
- font_src: "https://fonts.gstatic.com/s/pathwaygothicone/v8/MwQrbgD32-KAvjkYGNUUxAtW7pEBwx-dTFxeb80flQ.ttf",
375
- preview_url: "https://cdn130.picsart.com/37863778924817299018.png",
376
- meta_data: {
377
- font_name: "Pathway Gothic One"
378
- }
379
- }, {
380
- font_name: "Quicksand",
381
- font_src: "https://fonts.gstatic.com/s/quicksand/v19/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o18G0wx40QDw.ttf",
382
- preview_url: "https://cdn140.picsart.com/15573473827666789357.png",
383
- meta_data: {
384
- font_name: "Quicksand"
385
- }
386
- }, {
387
- font_name: "Reenie Beanie",
388
- font_src: "https://fonts.gstatic.com/s/reeniebeanie/v10/z7NSdR76eDkaJKZJFkkjuvWxbP2_qoOgf_w.ttf",
389
- preview_url: "https://cdn140.picsart.com/81953552784397470347.png",
390
- meta_data: {
391
- font_name: "Reenie Beanie"
392
- }
393
- }, {
394
- font_name: "Sacramento",
395
- font_src: "https://fonts.gstatic.com/s/sacramento/v7/buEzpo6gcdjy0EiZMBUG0CoV_NxLeiw.ttf",
396
- preview_url: "https://cdn130.picsart.com/33129819049263984903.png",
397
- meta_data: {
398
- font_name: "Sacramento"
399
- }
400
- }, {
401
- font_name: "Satisfy",
402
- font_src: "https://fonts.gstatic.com/s/satisfy/v10/rP2Hp2yn6lkG50LoOZSCHBeHFl0.ttf",
403
- preview_url: "https://cdn140.picsart.com/40423524857848743546.png",
404
- meta_data: {
405
- font_name: "Satisfy"
406
- }
407
- }, {
408
- font_name: "Seaweed Script",
409
- font_src: "https://fonts.gstatic.com/s/seaweedscript/v7/bx6cNx6Tne2pxOATYE8C_Rsoe0WJ-KcGVbLW.ttf",
410
- preview_url: "https://cdn130.picsart.com/36743659579852331137.png",
411
- meta_data: {
412
- font_name: "Seaweed Script"
413
- }
414
- }, {
415
- font_name: "Srisakdi",
416
- font_src: "https://fonts.gstatic.com/s/srisakdi/v3/yMJRMIlvdpDbkB0A-jq8fSx5i814.ttf",
417
- preview_url: "https://cdn140.picsart.com/60734086227056523665.png",
418
- meta_data: {
419
- font_name: "Srisakdi"
420
- }
421
- }, {
422
- font_name: "Tangerine",
423
- font_src: "https://fonts.gstatic.com/s/tangerine/v11/IurY6Y5j_oScZZow4VOBDpxNhLBQ4Q.ttf",
424
- preview_url: "https://cdn140.picsart.com/66743549317724920262.png",
425
- meta_data: {
426
- font_name: "Tangerine"
427
- }
428
- }, {
429
- font_name: "Vast Shadow",
430
- font_src: "https://fonts.gstatic.com/s/vastshadow/v9/pe0qMImKOZ1V62ZwbVY9dfe6Kdpickwp.ttf",
431
- preview_url: "https://cdn130.picsart.com/77776772587774873556.png",
432
- meta_data: {
433
- font_name: "Vast Shadow"
434
- }
435
- }];
436
-
437
- // src/core/defaultShapes.js
438
- var defaultShapes_default = [
439
- {
440
- id: 345303412001900,
441
- shapeURL: "https://pastatic.picsart.com/67674838747034922127.svg",
442
- previewURL: "https://pastatic.picsart.com/39063950453406823106.svg",
443
- shapeData: {},
444
- height: 80,
445
- width: 80
446
- },
447
- {
448
- id: 345303412006900,
449
- shapeURL: "https://pastatic.picsart.com/98272467955195325128.svg",
450
- previewURL: "https://pastatic.picsart.com/05206144264858143619.svg",
451
- shapeData: {},
452
- height: 200,
453
- width: 200
454
- },
455
- {
456
- id: 345303412002900,
457
- shapeURL: "https://pastatic.picsart.com/57791726628432881396.svg",
458
- previewURL: "https://pastatic.picsart.com/63067569913637571198.svg",
459
- shapeData: {},
460
- height: 200,
461
- width: 200
462
- },
463
- {
464
- id: 345303412011900,
465
- shapeURL: "https://pastatic.picsart.com/46559167057824445884.svg",
466
- previewURL: "https://pastatic.picsart.com/12360977754442257483.svg",
467
- shapeData: {},
468
- height: 201,
469
- width: 233
470
- },
471
- {
472
- id: 345303412009900,
473
- shapeURL: "https://pastatic.picsart.com/89599633680779280911.svg",
474
- previewURL: "https://pastatic.picsart.com/63267229478005739326.svg",
475
- shapeData: {},
476
- height: 141,
477
- width: 264
478
- },
479
- {
480
- id: 345303412010900,
481
- shapeURL: "https://pastatic.picsart.com/78485030174201737552.svg",
482
- previewURL: "https://pastatic.picsart.com/86263046247610758102.svg",
483
- meta_data: {},
484
- height: 199,
485
- width: 200
486
- },
487
- {
488
- id: 345303412012900,
489
- shapeURL: "https://pastatic.picsart.com/24634984538216308784.svg",
490
- previewURL: "https://pastatic.picsart.com/62784000735717431696.svg",
491
- meta_data: {},
492
- height: 200,
493
- width: 181
494
- },
495
- {
496
- id: 345303412017900,
497
- shapeURL: "https://pastatic.picsart.com/54207421235588996849.svg",
498
- previewURL: "https://pastatic.picsart.com/01167396734591686010.svg",
499
- shapeData: {},
500
- height: 232,
501
- width: 240
502
- },
503
- {
504
- id: 345303412015900,
505
- shapeURL: "https://pastatic.picsart.com/15320122074878532844.svg",
506
- previewURL: "https://pastatic.picsart.com/74335799754416069084.svg",
507
- meta_data: {},
508
- height: 200,
509
- width: 195
510
- },
511
- {
512
- id: 345303412016900,
513
- shapeURL: "https://pastatic.picsart.com/06832702078758556506.svg",
514
- previewURL: "https://pastatic.picsart.com/71342560555351334228.svg",
515
- shapeData: {},
516
- height: 200,
517
- width: 200
518
- },
519
- {
520
- id: 345303412019900,
521
- shapeURL: "https://pastatic.picsart.com/64264690279601930886.svg",
522
- previewURL: "https://pastatic.picsart.com/90493137861472273324.svg",
523
- meta_data: {},
524
- height: 200,
525
- width: 240
526
- },
527
- {
528
- id: 345303412020900,
529
- shapeURL: "https://pastatic.picsart.com/96644793285407212882.svg",
530
- previewURL: "https://pastatic.picsart.com/00682611258560241631.svg",
531
- meta_data: {},
532
- height: 80,
533
- width: 80
534
- },
535
- {
536
- id: 345632150027900,
537
- shapeURL: "https://pastatic.picsart.com/43281069001980185600.svg",
538
- previewURL: "https://pastatic.picsart.com/54482957936732253406.svg",
539
- shapeData: {},
540
- height: 150,
541
- width: 150
542
- },
543
- {
544
- id: 345632901034900,
545
- shapeURL: "https://pastatic.picsart.com/16979764773159337615.svg",
546
- previewURL: "https://pastatic.picsart.com/15126367804291641171.svg",
547
- shapeData: {},
548
- height: 150,
549
- width: 79
550
- },
551
- {
552
- id: 345632901024900,
553
- shapeURL: "https://pastatic.picsart.com/38992226894190707969.svg",
554
- previewURL: "https://pastatic.picsart.com/16528511082002358061.svg",
555
- shapeData: {},
556
- height: 150,
557
- width: 150
558
- },
559
- {
560
- id: 345632901026900,
561
- shapeURL: "https://pastatic.picsart.com/70713047862835243809.svg",
562
- previewURL: "https://pastatic.picsart.com/93054071608107947709.svg",
563
- shapeData: {},
564
- height: 150,
565
- width: 150
566
- }
567
- ];
568
-
569
- // src/core/defaultStickerShapes.js
570
- var defaultStickerShapes_default = [
571
- {
572
- id: 1,
573
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/ae0dbf05-3df3-4703-91b2-49471ff40cfa.svg",
574
- previewURL: "https://pastatic.picsart.com/cms-pastatic/ae0dbf05-3df3-4703-91b2-49471ff40cfa.svg",
575
- shapeData: {},
576
- height: 100,
577
- width: 100,
578
- aspectRatio: "1:1",
579
- path: void 0
580
- },
581
- {
582
- id: 2,
583
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/4aff343f-2f06-4c1d-bdc3-a16800a536a4.svg",
584
- previewURL: "https://pastatic.picsart.com/cms-pastatic/4aff343f-2f06-4c1d-bdc3-a16800a536a4.svg",
585
- shapeData: {},
586
- height: 100,
587
- width: 100,
588
- aspectRatio: "1:1",
589
- path: "M 0,0.5\n a 0.5,0.5 0 1,0 1,0\n a 0.5,0.5 0 1,0 -1,0"
590
- },
591
- {
592
- id: 3,
593
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/5852cf85-2f78-4915-b6ca-59d50de81729.svg",
594
- previewURL: "https://pastatic.picsart.com/cms-pastatic/5852cf85-2f78-4915-b6ca-59d50de81729.svg",
595
- shapeData: {},
596
- height: 100,
597
- width: 100,
598
- aspectRatio: "4:3",
599
- path: "M 0,0.5 a 0.5,0.5 0 1,0 1,0 a 0.5,0.5 0 1,0 -1,0"
600
- },
601
- {
602
- id: 4,
603
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/42d502bc-2550-413b-80f6-eec2d67a924a.svg",
604
- previewURL: "https://pastatic.picsart.com/cms-pastatic/42d502bc-2550-413b-80f6-eec2d67a924a.svg",
605
- shapeData: {},
606
- height: 100,
607
- width: 100,
608
- aspectRatio: "3:4",
609
- path: "M 0,0.5 a 0.5,0.5 0 1,0 1,0 a 0.5,0.5 0 1,0 -1,0"
610
- },
611
- {
612
- id: 5,
613
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/d22d17be-382a-410e-9eb7-e0c6f84a8484.svg",
614
- previewURL: "https://pastatic.picsart.com/cms-pastatic/d22d17be-382a-410e-9eb7-e0c6f84a8484.svg",
615
- shapeData: {},
616
- height: 100,
617
- width: 100,
618
- aspectRatio: "1:1",
619
- path: "M 0,0 H 1 V 1 H 0 V 0 Z"
620
- },
621
- {
622
- id: 6,
623
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/fee313c8-f93e-4545-9e3c-040a1b741849.svg",
624
- previewURL: "https://pastatic.picsart.com/cms-pastatic/fee313c8-f93e-4545-9e3c-040a1b741849.svg",
625
- shapeData: {},
626
- height: 100,
627
- width: 100,
628
- aspectRatio: "1:1",
629
- path: "M 0.1,0 H 0.9 A 0.1,0.1 0 0 1 1,0.1 V 0.9 A 0.1,0.1 0 0 1 0.9,1 H 0.1 A 0.1,0.1 0 0 1 0,0.9 V 0.1 A 0.1,0.1 0 0 1 0.1,0 Z"
630
- },
631
- {
632
- id: 7,
633
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/94c0c7ba-499f-47e0-a1c3-4b8d96acf7b1.svg",
634
- previewURL: "https://pastatic.picsart.com/cms-pastatic/94c0c7ba-499f-47e0-a1c3-4b8d96acf7b1.svg",
635
- shapeData: {},
636
- height: 100,
637
- width: 100,
638
- aspectRatio: "4:3",
639
- path: "M 0,0 H 1 V 1 H 0 V 0 Z"
640
- },
641
- {
642
- id: 8,
643
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/d158f176-47a4-46ad-94df-17a92f4165da.svg",
644
- previewURL: "https://pastatic.picsart.com/cms-pastatic/d158f176-47a4-46ad-94df-17a92f4165da.svg",
645
- shapeData: {},
646
- height: 100,
647
- width: 100,
648
- aspectRatio: "3:4",
649
- path: "M 0,0 H 1 V 1 H 0 V 0 Z"
650
- },
651
- {
652
- id: 9,
653
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/b8be9e0c-0c44-4c79-b5e4-e655dc53eabc.svg",
654
- previewURL: "https://pastatic.picsart.com/cms-pastatic/b8be9e0c-0c44-4c79-b5e4-e655dc53eabc.svg",
655
- shapeData: {},
656
- height: 100,
657
- width: 100,
658
- aspectRatio: "1:1",
659
- path: "M 0.5,0.020000000000000018 L 0.9945493884734798,0.3793111629250274 L 0.8056483311920861,0.9606888370749727 L 0.194351668807914,0.9606888370749727 L 0.005450611526520099,0.3793111629250274 Z"
660
- },
661
- {
662
- id: 10,
663
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/dd8a0225-45b5-43b5-9d12-f556af64acf1.svg",
664
- previewURL: "https://pastatic.picsart.com/cms-pastatic/dd8a0225-45b5-43b5-9d12-f556af64acf1.svg",
665
- shapeData: {},
666
- height: 100,
667
- width: 100,
668
- aspectRatio: "1:1",
669
- path: "M 0.5,0 L 0.9330127018922193,0.25 L 0.9330127018922194,0.7499999999999999 L 0.5,1 L 0.06698729810778076,0.7500000000000002 L 0.0669872981077807,0.24999999999999994 Z"
670
- },
671
- {
672
- id: 11,
673
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/6fac991b-1058-4148-a47a-362f57acac01.svg",
674
- previewURL: "https://pastatic.picsart.com/cms-pastatic/6fac991b-1058-4148-a47a-362f57acac01.svg",
675
- shapeData: {},
676
- height: 100,
677
- width: 100,
678
- aspectRatio: "1:1",
679
- path: "M 0.5,0 L 0.8535533905932737,0.14644660940672627 L 1,0.5 L 0.8535533905932737,0.8535533905932737 L 0.5,1 L 0.14644660940672627,0.8535533905932737 L 0,0.5000000000000001 L 0.14644660940672616,0.14644660940672627 Z"
680
- },
681
- {
682
- id: 12,
683
- shapeURL: "https://pastatic.picsart.com/cms-pastatic/c577e9a6-7e13-4eb9-b9df-a8c33cac2563.svg",
684
- previewURL: "https://pastatic.picsart.com/cms-pastatic/c577e9a6-7e13-4eb9-b9df-a8c33cac2563.svg",
685
- shapeData: {},
686
- height: 100,
687
- width: 100,
688
- aspectRatio: "1:1",
689
- path: "M 0.5,0.030000000000000027 L 0.6293127555043441,0.37201626123751164 L 0.9945493884734798,0.38931116292502743 L 0.7092324335849338,0.6179837387624885 L 0.8056483311920861,0.9706888370749727 L 0.5,0.77 L 0.194351668807914,0.9706888370749727 L 0.2907675664150662,0.6179837387624885 L 0.005450611526520099,0.38931116292502743 L 0.3706872444956559,0.37201626123751164 Z"
690
- }
691
- ];
692
-
693
- // src/core/constants.js
694
- var PICSART_PROP_NAME = "Picsart";
695
- var PICSART_FONT_NAME = "Picsart-Fonts";
696
- var FONT_DEFAULTS = {
697
- size: 16,
698
- family: "Arial"
699
- };
700
- var EXPORT_FORMATS = {
701
- IMAGE_JPEG: "image/jpeg",
702
- IMAGE_PNG: "image/png",
703
- IMAGE_WEBP: "image/webp",
704
- PRINT_PDF: "print/pdf",
705
- PREVIEW_PDF: "preview/pdf",
706
- PDF: "pdf",
707
- REPLAY: "replay",
708
- VIDEO_MP4: "video/mp4"
709
- };
710
- var DEFAULT_FORMAT = EXPORT_FORMATS.IMAGE_PNG;
711
- var ALLOWED_FORMATS = [
712
- EXPORT_FORMATS.IMAGE_JPEG,
713
- EXPORT_FORMATS.IMAGE_PNG,
714
- EXPORT_FORMATS.IMAGE_WEBP,
715
- EXPORT_FORMATS.PRINT_PDF,
716
- EXPORT_FORMATS.PREVIEW_PDF,
717
- EXPORT_FORMATS.PDF,
718
- EXPORT_FORMATS.REPLAY,
719
- EXPORT_FORMATS.VIDEO_MP4
720
- ];
721
- var MAX_COLORS_AMOUNT = 21;
722
- function readNodeEnv(key) {
723
- if (typeof globalThis === "undefined") return void 0;
724
- const proc = globalThis.process;
725
- if (proc == null || typeof proc !== "object") return void 0;
726
- const env = proc.env;
727
- return env && typeof env === "object" ? env[key] : void 0;
728
- }
729
- var AI_API_KEY = readNodeEnv("AI_API_KEY");
730
- var USE_PICSART_INVENTORY_MSG = "It is forbidden to provide data";
731
- var getParentDomain = () => typeof window !== "undefined" ? window.location.origin : "";
732
- var MEASUREMENTS_MAP = {
733
- in: "inch",
734
- cm: "centimeter",
735
- mm: "millimeter",
736
- px: "pixel"
737
- };
738
- var measurements = [
739
- MEASUREMENTS_MAP.in,
740
- MEASUREMENTS_MAP.cm,
741
- MEASUREMENTS_MAP.mm,
742
- MEASUREMENTS_MAP.px
743
- ];
744
- var EDITOR_MODE = {
745
- print: "print",
746
- video: "video",
747
- image: "image"
748
- };
749
- var DEFAULT_EXPORT_SETTINGS = {
750
- "print/pdf": {
751
- colorProfile: "rgb"
752
- }
753
- };
754
- var EXPORT_TYPES = {
755
- buffer: "buffer",
756
- blob: "blob",
757
- base64: "base64"
758
- };
759
- var SHAPES_DATA = {
760
- type: "shape_mask",
761
- items: [],
762
- shop_item_uid: "package_simple_shapes",
763
- name: "Simple Shapes",
764
- commercial: true,
765
- icon: "https://easycdn.picsart.com/62940820781500116332.png",
766
- is_monotype: false
767
- };
768
- var UPLOAD_TYPES = {
769
- audio: "Audio"};
770
- var WHITELIST_CDN_URLS = ["picsart.com"];
771
- var TOOLS_REPLACEMENT_MAP = {
772
- tool_removeBG: "remove-background"
773
- };
774
-
775
- // src/core/utils.js
776
- var blobToBase64 = (blob) => new Promise((resolve, reject) => {
777
- const reader = new FileReader();
778
- reader.onloadend = () => resolve(reader.result);
779
- reader.onerror = () => reject(reader.error);
780
- reader.readAsDataURL(blob);
781
- });
782
- var blobToArrayBuffer = (blob) => new Promise((resolve, reject) => {
783
- const reader = new FileReader();
784
- reader.onloadend = () => resolve(reader.result);
785
- reader.onerror = () => reject(reader.error);
786
- reader.readAsArrayBuffer(blob);
787
- });
788
- var arrayBufferToBase64 = (buffer) => {
789
- let binary = "";
790
- const bytes = new Uint8Array(buffer);
791
- const len = bytes.byteLength;
792
- for (let i = 0; i < len; i++) {
793
- binary += String.fromCharCode(bytes[i]);
794
- }
795
- return window.btoa(binary);
796
- };
797
- var noop = () => {
798
- };
799
- var getImageData = (buffer, exportType, mediaType = "base64") => {
800
- const blob = new Blob([buffer], { type: exportType });
801
- const url = URL.createObjectURL(blob);
802
- switch (exportType) {
803
- case EXPORT_TYPES.buffer:
804
- return buffer;
805
- case EXPORT_TYPES.blob:
806
- return blob;
807
- case EXPORT_TYPES.base64:
808
- return `data:${mediaType};base64,${arrayBufferToBase64(buffer)}`;
809
- default:
810
- return url;
811
- }
812
- };
813
- var getReplayData = (replay, exportType) => {
814
- const buffer = replay.buffer;
815
- switch (exportType) {
816
- case EXPORT_TYPES.buffer:
817
- return buffer;
818
- case EXPORT_TYPES.blob:
819
- return new Blob([buffer], { type: "application/zip+replay" });
820
- case EXPORT_TYPES.base64:
821
- return arrayBufferToBase64(buffer);
822
- default:
823
- return replay;
824
- }
825
- };
826
- var getPrintData = async (blob, exportType) => {
827
- const buffer = await blobToArrayBuffer(blob);
828
- switch (exportType) {
829
- case EXPORT_TYPES.buffer:
830
- return buffer;
831
- case EXPORT_TYPES.blob:
832
- return blob;
833
- case EXPORT_TYPES.base64:
834
- const base64 = await blobToBase64(blob);
835
- return base64;
836
- default:
837
- return blob;
838
- }
839
- };
840
- var getCustomTheme = (branding) => {
841
- const {
842
- main,
843
- texts,
844
- accents,
845
- hover,
846
- background,
847
- fonts,
848
- language
849
- } = branding;
850
- const customTheme = {
851
- ...main && { backgrounds: main },
852
- ...texts && { texts },
853
- ...fonts && { fonts: fonts.map((item) => ({ ...item, fontFamily: PICSART_FONT_NAME })) },
854
- ...language && { language }
855
- };
856
- if (background) {
857
- customTheme.canvasBackLayer = background;
858
- }
859
- if (accents) {
860
- const colors = {
861
- base: {
862
- default: accents,
863
- action: hover || accents
864
- }
865
- };
866
- customTheme.accents = {
867
- primary: colors,
868
- secondary: colors
869
- };
870
- customTheme.accentIllustrations = {
871
- primary: {
872
- tint4: accents
873
- }
6
+ // src/defaultUpload.ts
7
+ function createDefaultVideoUpload(apiKey) {
8
+ console.log("createDefaultVideoUpload", apiKey);
9
+ return async (file, mimeType) => {
10
+ const video = new Blob([file], { type: mimeType });
11
+ const form = new FormData();
12
+ form.append("file", video);
13
+ const result = await fetch("https://video-api.picsart.io/v2/upload", {
14
+ method: "POST",
15
+ headers: {
16
+ accept: "application/json",
17
+ "X-Picsart-API-Key": apiKey
18
+ },
19
+ body: form
20
+ });
21
+ const res = await result.json();
22
+ return {
23
+ url: res.data?.url ?? "",
24
+ status: "done",
25
+ progress: 100,
26
+ error: null
874
27
  };
875
- }
876
- return customTheme;
877
- };
878
- var makeQuery = (params = {}, settings = {}) => {
879
- const query = new URLSearchParams();
880
- const replayUrl = params.replayUrl ?? settings.replayUrl;
881
- const videoURL = params.videoUrl ?? settings.videoUrl;
882
- const subtitleURL = params.subtitleUrl ?? settings.subtitleUrl;
883
- const template = params.templateId ?? settings.templateId;
884
- const category = params.selectedCategory ?? settings.selectedCategory;
885
- const canvasSize = params.canvasSize ?? settings.canvasSize;
886
- const templateSize = params.templateSize ?? settings.templateSize;
887
- const templatesFilters = params.templatesFilters ?? settings.templatesFilters;
888
- const clientUpload = params.onUpload ?? settings.onUpload;
889
- const templatesTitleText = params.templatesTitleText ?? settings.templatesTitleText;
890
- const templatesSubTitle = params.templatesSubTitle ?? settings.templatesSubTitle;
891
- const imageUrl = params.imageUrl ?? settings.imageUrl;
892
- const stickerText = params.stickerText ?? settings.stickerText;
893
- const stickerImageUrl = params.stickerImageUrl ?? settings.stickerImageUrl;
894
- const logo = params.logo ?? settings.logo;
895
- const parentDomain = params.parentDomain ?? settings.parentDomain ?? (typeof window !== "undefined" ? window.location.origin : "");
896
- const queryParams = {
897
- settings: JSON.stringify(settings),
898
- parentDomain,
899
- instanceId: settings.instanceId,
900
- ...replayUrl && { replayUrl },
901
- ...videoURL && { videoURL },
902
- ...subtitleURL && { subtitleURL },
903
- ...template && { template },
904
- ...category && { category },
905
- ...canvasSize && { customSize: canvasSize },
906
- ...canvasSize && { shouldFit: true },
907
- ...templateSize && { templateSize },
908
- ...templatesFilters && { templatesFilters: JSON.stringify(templatesFilters) },
909
- ...clientUpload && { clientUpload: true },
910
- ...templatesTitleText && { templatesTitleText },
911
- ...templatesSubTitle && { templatesSubTitle },
912
- ...imageUrl && { image: imageUrl },
913
- ...stickerImageUrl && { stickerImageUrl },
914
- ...stickerText && { stickerText },
915
- ...logo && { logo }
916
- };
917
- for (const [key, value] of Object.entries(queryParams)) {
918
- if (value) query.set(key, value);
919
- }
920
- return query;
921
- };
922
-
923
- // src/core/getSettings.js
924
- var isBoolean = (val) => typeof val === "boolean";
925
- var mapTools = (tools) => tools.map((tool) => TOOLS_REPLACEMENT_MAP[tool] || tool);
926
- var applyBooleanFields = (target, source, fields) => {
927
- fields.forEach((field) => {
928
- if (isBoolean(source[field])) {
929
- target[field] = source[field];
930
- delete source[field];
931
- }
932
- });
933
- };
934
- function getSettings(settings, params) {
935
- const categories = params.categories || settings.categories;
936
- const settingsWidgetOptions = params.features?.settingsWidgetOptions || settings.features?.settingsWidgetOptions;
937
- const features = {
938
- ...settings.features,
939
- ...params.features
940
28
  };
941
- if (!features.toolbar) features.toolbar = {};
942
- if (features.tools) {
943
- features.toolbar.tools = mapTools(features.tools);
944
- delete features.tools;
945
- }
946
- const editorSettings = {
947
- ...features,
948
- canvasOptions: { ...features.canvasOptions },
949
- categories: categories || {},
950
- printing: {
951
- ...features.printing,
952
- resolution: {
953
- ...features.printing?.resolution
954
- }
955
- },
956
- header: {
957
- ...features.header,
958
- export: {
959
- ...features.header?.export
960
- }
961
- },
962
- footer: {
963
- ...features.footer,
964
- ...settingsWidgetOptions?.length && { helpWidgetList: settingsWidgetOptions }
965
- },
966
- ...categories && { sidebar: Object.keys(categories).map((item) => item.toUpperCase()).filter((cat) => cat !== "MINIAPPS"), categories }
967
- };
968
- editorSettings.categories.text = {
969
- ...editorSettings.categories.text || {},
970
- ...settings.textSettings,
971
- ...params.textSettings
972
- };
973
- applyBooleanFields(editorSettings.categories.elements || {}, editorSettings, [
974
- "gradientForShapes",
975
- "shapeToCollage"
976
- ]);
977
- applyBooleanFields(editorSettings.categories.uploads || {}, editorSettings, [
978
- "uploadAndDrawVideo",
979
- "uploadAndDrawImage",
980
- "allowVideoUpload",
981
- "showUploadLoader"
982
- ]);
983
- applyBooleanFields(editorSettings.categories.videos || {}, editorSettings, [
984
- "videoTools",
985
- "volume",
986
- "video"
987
- ]);
988
- applyBooleanFields(editorSettings.toolbar, editorSettings, [
989
- "hideTextStylesToolbarButton"
990
- ]);
991
- applyBooleanFields(editorSettings.footer, editorSettings, [
992
- "zoomControls"
993
- ]);
994
- applyBooleanFields(editorSettings.printing, editorSettings, [
995
- "fitBackgroundToBleedArea",
996
- "showPrintBleedByDefault"
997
- ]);
998
- applyBooleanFields(editorSettings.printing.resolution, editorSettings, [
999
- "PPI"
1000
- ]);
1001
- applyBooleanFields(editorSettings.header.export, editorSettings, [
1002
- "exportTemplateData"
1003
- ]);
1004
- if (editorSettings.multiCanvasSupport) {
1005
- editorSettings.canvasOptions = {
1006
- ...editorSettings.canvasOptions,
1007
- multiCanvasEnabled: editorSettings.multiCanvasSupport
1008
- };
1009
- delete editorSettings.multiCanvasSupport;
1010
- }
1011
- if (settings.usePicsartInventory) {
1012
- ["layout", "text", "photos", "templates"].forEach((key) => {
1013
- editorSettings.categories[key] = {
1014
- ...editorSettings.categories[key],
1015
- get: true,
1016
- provideData: false,
1017
- ...key === "text" && { customFontList: false }
1018
- };
1019
- });
1020
- }
1021
- if (settings.mode === EDITOR_MODE.print) {
1022
- editorSettings.printing.printablePdf = true;
1023
- Object.assign(editorSettings.categories.elements || {}, {
1024
- unsupportedColorTypes: ["shadow"]
1025
- });
1026
- Object.assign(editorSettings.categories.text || {}, {
1027
- unsupportedColorTypes: ["shadow"],
1028
- unsupportedTextAligns: ["space-justify"]
1029
- });
1030
- editorSettings.exportFormats = settings.exportFormats?.filter((format) => !format.includes("video")) || [EXPORT_FORMATS.PRINT_PDF];
1031
- }
1032
- if (settings.mode === EDITOR_MODE.video) {
1033
- editorSettings.toolbar.colorOptionTabs = false;
1034
- editorSettings.categories.videos = { ...editorSettings.categories.videos, videoEnable: true, videoTools: true };
1035
- if (editorSettings.categories.uploads) {
1036
- editorSettings.categories.uploads.type = UPLOAD_TYPES.audio;
1037
- }
1038
- editorSettings.exportFormats = settings.exportFormats?.filter((format) => !format.includes("pdf")) || [EXPORT_FORMATS.VIDEO_MP4];
1039
- }
1040
- if (settings.mode !== EDITOR_MODE.image) {
1041
- editorSettings.toolbar.disableBlendModes = true;
1042
- }
1043
- if (settings.exportFormats.some((item) => [EXPORT_FORMATS.PRINT_PDF, EXPORT_FORMATS.PREVIEW_PDF, EXPORT_FORMATS.PDF].includes(item))) {
1044
- editorSettings.toolbar.colorOptionTabs = false;
1045
- }
1046
- if (categories?.uploads?.blackAndWhite) editorSettings.toolbar.colorOptionTabs = false;
1047
- if (settings.branding) editorSettings.branding = getCustomTheme(settings.branding);
1048
- if (settings.onUpload) editorSettings.clientUpload = true;
1049
- return editorSettings;
1050
29
  }
1051
30
 
1052
- // src/core/cmsSettings.js
1053
- var cmsSettings_default = {
1054
- exportSettings: {
1055
- "print/pdf": {
1056
- emptyMargin: true
1057
- }
1058
- },
1059
- textSettings: {
1060
- recents: true,
1061
- search: true,
1062
- fontStyle: true
1063
- },
1064
- features: {
1065
- cdnUploadApiKey: "60b37071-370e-413c-a855-95483e870190",
1066
- showPrintBleedByDefault: true,
1067
- segments: "ul35, l7xj",
1068
- pulse: false,
1069
- hslAdjust: true,
1070
- exportTemplateData: true,
1071
- hideRemoveBackgroundSidebarIcon: false,
1072
- hideMultiCanvasToolbar: false,
1073
- applyRemoveBackground: false,
1074
- hideTextStylesToolbarButton: false,
1075
- hideRemoveObjectTool: false,
1076
- storeImagesInReplay: false,
1077
- offlineUploads: false,
1078
- hidePremiumIcons: false,
1079
- tools: [
1080
- "effects",
1081
- "eraser",
1082
- "tool_removeBG",
1083
- "remover",
1084
- "duplicate",
1085
- "adjust",
1086
- "edit",
1087
- "color",
1088
- "gradient",
1089
- "font",
1090
- "border",
1091
- "outline",
1092
- "shadow",
1093
- "replace",
1094
- "remove",
1095
- "animation",
1096
- "flip_rotate",
1097
- "position"
1098
- ],
1099
- settingsWidgetOptions: [
1100
- "update",
1101
- "hint",
1102
- "shortcut",
1103
- "feedback",
1104
- "help",
1105
- "language",
1106
- "theme",
1107
- "report",
1108
- "bleed"
1109
- ]
1110
- },
1111
- categories: {
1112
- templates: {
1113
- provideData: false,
1114
- header: true,
1115
- showRecent: true,
1116
- title: false,
1117
- applyMultiPageOnClick: true
1118
- },
1119
- layout: {
1120
- customSize: true,
1121
- provideData: false,
1122
- title: false
1123
- },
1124
- uploads: {
1125
- linkUpload: false,
1126
- header: true,
1127
- tabs: [
1128
- "Images",
1129
- "Fonts"
1130
- ]
1131
- },
1132
- collage: {},
1133
- photos: {
1134
- provideData: false,
1135
- uploadTab: false,
1136
- thumbnailFooter: true,
1137
- showRecent: true,
1138
- title: false,
1139
- fitToImageSize: false
1140
- },
1141
- stickers: {
1142
- provideData: false,
1143
- header: true,
1144
- thumbnailFooter: true,
1145
- showRecent: true,
1146
- showTags: true,
1147
- title: false
1148
- },
1149
- text: {
1150
- provideData: false,
1151
- showRecent: true,
1152
- library: true,
1153
- toggleView: true,
1154
- title: false,
1155
- miniapps: true
1156
- },
1157
- overlays: {},
1158
- elements: {
1159
- provideData: false,
1160
- header: true,
1161
- title: false,
1162
- viewExpanded: false,
1163
- backBtn: true,
1164
- hidePreview: false
1165
- },
1166
- background: {
1167
- tabs: ["Texture", "Color", "Library"]
1168
- },
1169
- miniapps: {}
1170
- }
1171
- };
1172
-
1173
- // src/core/Picsart.js
1174
- var Picsart = class {
1175
- constructor(settings) {
1176
- const defaultSettings = {
1177
- containerId: "containerId",
1178
- accessibilityTitle: "Picsart",
1179
- iframeClassName: "iframe",
1180
- debug: false,
1181
- fxView: "groups",
1182
- instanceId: Math.random().toString(16).slice(2),
1183
- exportFormats: [DEFAULT_FORMAT],
1184
- templatesFilters: {},
1185
- theme: "dark",
1186
- exportType: "blob"
1187
- };
1188
- this.settings = {
1189
- ...defaultSettings,
1190
- ...settings.cms && cmsSettings_default,
1191
- ...settings,
1192
- domain: settings.domain ?? (typeof process !== "undefined" && process.env && process.env.EDITOR_DOMAIN) ?? ""
1193
- };
1194
- this.settings.exportFormats = this.settings.exportFormats.length ? this.settings.exportFormats.filter((item) => ALLOWED_FORMATS.includes(item)) : [DEFAULT_FORMAT];
1195
- this.provideShapesData = { data: defaultShapes_default };
1196
- this.isEditorReady = false;
1197
- this.onExportCb = noop;
1198
- this.messageListener = this.handleMessage.bind(this);
1199
- this.isMessageListenerAttached = false;
1200
- this.attachMessageListener();
1201
- }
1202
- log(...args) {
1203
- if (this.settings.debug) console.log(...args);
1204
- }
1205
- onOpen(callback) {
1206
- this.openCallBack = callback;
1207
- return this;
1208
- }
1209
- renderNew(src) {
1210
- this.attachMessageListener();
1211
- const iframe = document.createElement("iframe");
1212
- iframe.src = src;
1213
- iframe.title = this.settings.accessibilityTitle;
1214
- this.settings.iframeClassName && iframe.classList.add(this.settings.iframeClassName);
1215
- iframe.style.width = "100%";
1216
- iframe.style.height = "100%";
1217
- iframe.style.pointerEvents = "auto";
1218
- iframe.style.userSelect = "none";
1219
- const container = document.getElementById(this.settings.containerId) || document.body;
1220
- container.appendChild(iframe);
1221
- this.iframe = iframe;
1222
- this.isEditorReady = false;
1223
- this.iframe.onload = () => {
1224
- this.iframe.focus();
1225
- this.log("Picsart iframe loaded");
1226
- this.openCallBack && this.openCallBack();
1227
- };
1228
- }
1229
- // TODO: This is only for versions before 1.13 (remote settings)
1230
- // use renderNew instead, I keep it only for information purposes
1231
- render(src) {
1232
- this.attachMessageListener();
1233
- const iframe = document.createElement("iframe");
1234
- iframe.src = src;
1235
- iframe.title = this.settings.accessibilityTitle;
1236
- this.settings.iframeClassName && iframe.classList.add(this.settings.iframeClassName);
1237
- iframe.style.width = "100%";
1238
- iframe.style.height = "100%";
1239
- iframe.style.pointerEvents = "auto";
1240
- iframe.style.userSelect = "none";
1241
- const container = document.getElementById(this.settings.containerId) || document.body;
1242
- container.appendChild(iframe);
1243
- this.iframe = iframe;
1244
- this.isEditorReady = false;
1245
- this.iframe.onload = () => {
1246
- this.iframe.focus();
1247
- this.log("Picsart iframe loaded");
1248
- this.openCallBack && this.openCallBack();
1249
- };
1250
- }
1251
- close() {
1252
- this.callCloseHandlers();
1253
- this.resetTempData();
1254
- if (this.iframe) {
1255
- this.iframe.parentNode.removeChild(this.iframe);
1256
- this.iframe = null;
1257
- this.log("Picsart iframe closed");
1258
- }
1259
- this.isEditorReady = false;
1260
- this.detachMessageListener();
1261
- return this;
1262
- }
1263
- hide() {
1264
- if (this.iframe) this.iframe.style.display = "none";
1265
- }
1266
- callCloseHandlers() {
1267
- this.cbClose && this.cbClose();
1268
- this.tempOnClose && this.tempOnClose();
1269
- }
1270
- resetTempData() {
1271
- this.tempOnClose = noop;
1272
- this.tempOnExport = noop;
1273
- this.tempExportType = "";
1274
- this.tempExportSettings = null;
1275
- }
1276
- onClose(cb = noop) {
1277
- this.cbClose = cb;
1278
- return this;
1279
- }
1280
- /**
1281
- * @param {(payload: any) => void} [cb]
1282
- */
1283
- onError(cb = noop) {
1284
- this.cbError = cb;
1285
- return this;
1286
- }
1287
- clear() {
1288
- if (this.iframe) this.sendMessage("clearCanvas");
1289
- return this;
1290
- }
1291
- applySettings(settings) {
1292
- if (settings) this.sendMessage("applySettings", settings);
1293
- }
1294
- isIframeLoaded() {
1295
- return this.iframe && this.isEditorReady;
1296
- }
1297
- // left for compatibility with older versions. Delete later
1298
- onReady(cb = noop) {
1299
- cb();
1300
- return this;
1301
- }
1302
- async exportData(payload, cb) {
1303
- const exportType = this.tempExportType || this.settings.exportType;
1304
- const {
1305
- buffer,
1306
- replay,
1307
- printData,
1308
- // pdf for print with print marks
1309
- printDataPreview,
1310
- // pdf for print without print marks
1311
- pdfData: rasterisedPdf,
1312
- // rasterised pdf
1313
- previews,
1314
- imageFormat,
1315
- videoData,
1316
- videoUrl,
1317
- ...rest
1318
- } = payload;
1319
- const previewsData = previews ? previews.map((item) => getImageData(item, exportType, imageFormat)) : null;
1320
- const replayData = exportType && replay ? getReplayData(replay, exportType) : replay;
1321
- const pdfForPrintData = exportType && printData ? await getPrintData(printData, exportType) : printData;
1322
- const pdfForPrintDataPreview = exportType && printDataPreview ? await getPrintData(printDataPreview, exportType) : printDataPreview;
1323
- const rasterisedPdfData = exportType && rasterisedPdf ? await getPrintData(rasterisedPdf, exportType) : rasterisedPdf;
1324
- const result = {
1325
- data: {
1326
- ...replayData && { replayData },
1327
- ...pdfForPrintData && { printData: pdfForPrintData },
1328
- ...pdfForPrintDataPreview && { previewPdfData: pdfForPrintDataPreview },
1329
- ...rasterisedPdfData && { pdfData: rasterisedPdfData },
1330
- ...previewsData && { previewsData, imageData: previewsData[0] },
1331
- ...videoData && { videoData },
1332
- ...videoUrl && { videoUrl }
1333
- },
1334
- ...rest
1335
- };
1336
- cb(result);
1337
- this.tempOnExport(result);
1338
- }
1339
- handleUpload(data) {
1340
- const { uploadId, file, mimeType } = data;
1341
- this.settings.onUpload(file, mimeType).then((res) => {
1342
- this.sendMessage("upload", {
1343
- ...res,
1344
- uploadId
1345
- });
1346
- }).catch((err) => {
1347
- this.sendMessage("upload", {
1348
- error: err,
1349
- uploadId
1350
- });
1351
- });
1352
- }
1353
- onUpload(handler) {
1354
- this.settings.onUpload = handler;
1355
- }
1356
- /**
1357
- * @param {(result: any) => void} [cb]
1358
- */
1359
- onExport(cb = noop) {
1360
- this.onExportCb = cb;
1361
- return this;
1362
- }
1363
- export() {
1364
- this.sendMessage("export");
1365
- }
1366
- getEditorSettings(params) {
1367
- return getSettings(this.settings, params);
1368
- }
1369
- open(params = {}) {
1370
- if (!this.settings.domain) {
1371
- throw new Error(
1372
- "Picsart: `domain` is required (full editor URL, e.g. https://pe.picsart.io). Pass `domain` in constructor settings."
1373
- );
1374
- }
1375
- if (!this.iframe) {
1376
- const query = makeQuery(params, this.settings);
1377
- this.tempOnClose = params.onClose || noop;
1378
- this.tempOnExport = params.onExport || noop;
1379
- this.tempExportType = params.exportType || "";
1380
- this.tempExportSettings = params.exportSettings || null;
1381
- const src = `${this.settings.domain}?${query.toString()}`;
1382
- this.renderNew(src);
1383
- } else if (this.iframe.style.display === "none") {
1384
- this.iframe.style.display = "block";
1385
- } else {
1386
- params.onError && params.onError("Iframe is already opened");
1387
- }
1388
- return this;
1389
- }
1390
- openOld(params = {}) {
1391
- if (!this.iframe) {
1392
- const query = new URLSearchParams();
1393
- const editorSettings = this.getEditorSettings(params);
1394
- const measurement = params.measurement || this.settings.measurement;
1395
- const checkedMeasurement = measurements.includes(measurement) ? measurement : MEASUREMENTS_MAP.px;
1396
- const queryParams = {
1397
- fitExportPDFSizeResult: params.fitExportPDFSizeResult || this.settings.fitExportPDFSizeResult,
1398
- settings: JSON.stringify(editorSettings),
1399
- instanceId: this.settings.instanceId,
1400
- logo: params.logo || this.settings.logo,
1401
- propertyId: params.propertyId || this.settings.propertyId,
1402
- theme: params.theme || this.settings.theme,
1403
- apiKey: params.apiKey || this.settings.apiKey || AI_API_KEY,
1404
- replayUrl: params.replayURL || this.settings.replayURL,
1405
- videoURL: params.videoURL || this.settings.videoURL,
1406
- subtitleURL: params.subtitleURL || this.settings.subtitleURL,
1407
- image: params.imageURL || this.settings.imageURL,
1408
- customSize: params.customSize || this.settings.customSize,
1409
- exportDPI: params.exportDPI || this.settings.exportDPI,
1410
- exportQuality: params.quality || this.settings.quality,
1411
- // TODO: fix - not implemented (quality)
1412
- parentDomain: getParentDomain(),
1413
- measurement: checkedMeasurement,
1414
- fitBackgroundToBleedArea: params.fitBackgroundToBleedArea || this.settings.fitBackgroundToBleedArea,
1415
- exportSettings: JSON.stringify(params.exportSettings || this.settings.exportSettings),
1416
- templatesLoadSettings: JSON.stringify(params.templatesLoadSettings || this.settings.templatesLoadSettings),
1417
- advancedText: this.settings.advancedText || params.advancedText,
1418
- whitelistCdnUrls: JSON.stringify(WHITELIST_CDN_URLS),
1419
- miniapps: JSON.stringify(this.settings.miniapps || params.miniapps),
1420
- backgroundColor: params.backgroundColor || this.settings.backgroundColor
1421
- };
1422
- for (const [key, value] of Object.entries(queryParams)) {
1423
- if (value) query.set(key, value);
1424
- }
1425
- const exportFormats = params.exportFormats || this.settings.exportFormats;
1426
- if (exportFormats) exportFormats.forEach((item) => query.append("exportFormats", item));
1427
- const defaultTemplateId = params.defaultTemplateId || this.settings.defaultTemplateId;
1428
- if (defaultTemplateId && !queryParams.image && !params.templateSize && !queryParams.customSize && !queryParams.replayUrl) {
1429
- query.set("template", defaultTemplateId);
1430
- }
1431
- const selectedTool = params.selectedTool || this.settings.selectedTool;
1432
- if (selectedTool && (!editorSettings.sidebar || editorSettings.sidebar?.includes(selectedTool.toUpperCase()))) {
1433
- query.set("category", selectedTool);
31
+ // src/loadScript.ts
32
+ var DEFAULT_SDK_URL = "https://demo.sdk.picsart.io/sdk/cdn/cdn.js";
33
+ console.log("DEFAULT_SDK_URL", DEFAULT_SDK_URL);
34
+ var loadPromise = null;
35
+ function loadPicsartSdk(scriptUrl = DEFAULT_SDK_URL) {
36
+ console.log("loadPicsartSdk", scriptUrl);
37
+ if (typeof window === "undefined") {
38
+ return Promise.reject(new Error("Picsart SDK can only load in a browser."));
39
+ }
40
+ if (window.Picsart) {
41
+ return Promise.resolve();
42
+ }
43
+ if (loadPromise) {
44
+ return loadPromise;
45
+ }
46
+ loadPromise = new Promise((resolve, reject) => {
47
+ const resolvedUrl = new URL(scriptUrl, document.baseURI).href;
48
+ const scripts = document.getElementsByTagName("script");
49
+ let existing = null;
50
+ for (let i = 0; i < scripts.length; i++) {
51
+ const s = scripts[i];
52
+ if (s.dataset.picsartSdk === "true" && s.src === resolvedUrl) {
53
+ existing = s;
54
+ break;
1434
55
  }
1435
- if (params.title) query.set("title", params.title);
1436
- if (params.templateSize) query.set("templateSize", params.templateSize);
1437
- const templatesFilters = params.templatesFilters || this.settings.templatesFilters;
1438
- if (templatesFilters) query.set("templatesFilters", JSON.stringify(templatesFilters));
1439
- this.tempOnClose = params.onClose || noop;
1440
- this.tempOnExport = params.onExport || noop;
1441
- this.tempExportType = params.exportType || "";
1442
- this.tempExportSettings = params.exportSettings || null;
1443
- const src = `${this.settings.domain}?${query.toString()}`;
1444
- this.render(src);
1445
- } else if (this.iframe.style.display === "none") {
1446
- this.iframe.style.display = "block";
1447
- } else {
1448
- params.onError && params.onError("Iframe is already opened");
1449
- }
1450
- return this;
1451
- }
1452
- sendMessage(type, data) {
1453
- this.iframe.contentWindow.postMessage({
1454
- type,
1455
- payload: data
1456
- }, this.settings.domain);
1457
- }
1458
- attachMessageListener() {
1459
- if (this.isMessageListenerAttached) return;
1460
- window.addEventListener("message", this.messageListener);
1461
- this.isMessageListenerAttached = true;
1462
- }
1463
- detachMessageListener() {
1464
- if (!this.isMessageListenerAttached) return;
1465
- window.removeEventListener("message", this.messageListener);
1466
- this.isMessageListenerAttached = false;
1467
- }
1468
- handleMessage({ data, origin }) {
1469
- if (!data || origin !== new URL(this.settings.domain).origin || data.instanceId !== this.settings.instanceId) return;
1470
- const { type, payload } = data;
1471
- this.log(`Picsart '${type}' event: `, payload);
1472
- if (type === "ready") {
1473
- this.handleEditorReady();
1474
- return;
1475
- }
1476
- if (type === "error") {
1477
- this.cbError(payload);
1478
- } else if (type === "upload") {
1479
- this.handleUpload(payload);
1480
- } else if (type === "cancel") {
1481
- this.close();
1482
- } else {
1483
- this.exportData(payload, this.onExportCb);
1484
- }
1485
- }
1486
- handleEditorReady() {
1487
- if (this.isEditorReady) return;
1488
- if (!this.iframe) return;
1489
- this.isEditorReady = true;
1490
- this.log("Picsart editor ready");
1491
- this.flushPendingData();
1492
- }
1493
- flushPendingData() {
1494
- this.sendMessage("textSettingsData", fontsList_default);
1495
- this.provideExportSettings();
1496
- if (this.provideCanvasSizesData) this.provideCanvasSizes(this.provideCanvasSizesData);
1497
- if (this.provideTemplatesData) this.provideTemplates(this.provideTemplatesData);
1498
- if (this.provideStickersData) this.provideStickers(this.provideStickersData);
1499
- if (this.provideShapesData) this.provideShapes(this.provideShapesData);
1500
- if (this.provideStickerShapes) this.provideStickerShapes(this.provideShapesData);
1501
- if (this.provideColorsData) this.provideColors(this.provideColorsData);
1502
- if (this.providePhotosData) this.providePhotos(this.providePhotosData);
1503
- if (this.provideLabelsData) this.provideLabels(this.provideLabelsData);
1504
- if (this.provideFontsData) this.provideFonts(this.provideFontsData);
1505
- if (this.provideTextsData) this.provideTexts(this.provideTextsData);
1506
- if (this.provideImageData) this.provideImage(this.provideImageData);
1507
- }
1508
- async getFetch(url) {
1509
- try {
1510
- const res = await fetch(url);
1511
- const resJson = await res.json();
1512
- return resJson;
1513
- } catch (e) {
1514
- this.log("Get data error: ", e);
1515
56
  }
1516
- }
1517
- async getCategoriesData(data) {
1518
- const categoriesData = [];
1519
- for (const item of data) {
1520
- if (item.url) {
1521
- const resJson = await this.getFetch(item.url);
1522
- categoriesData.push({ ...resJson, _id: item.id || resJson._id });
1523
- } else {
1524
- categoriesData.push(item);
57
+ if (existing) {
58
+ if (window.Picsart) {
59
+ resolve();
60
+ return;
1525
61
  }
1526
- }
1527
- return categoriesData;
1528
- }
1529
- async provideTemplates({ data, dataURL }) {
1530
- if (this.settings.usePicsartInventory) {
1531
- this.log(USE_PICSART_INVENTORY_MSG);
1532
- return;
1533
- }
1534
- if (!this.isIframeLoaded()) {
1535
- this.provideTemplatesData = { data, dataURL };
1536
- return;
1537
- }
1538
- let templatesData = data;
1539
- if (dataURL) {
1540
- const res = await this.getFetch(dataURL);
1541
- templatesData = await this.getCategoriesData(res);
1542
- }
1543
- const preparedData = templatesData.map((item) => ({
1544
- ...item,
1545
- ...item.previewURL && { preview_url: item.previewURL },
1546
- ...item.previewWidth && { preview_width: item.previewWidth },
1547
- ...item.previewHeight && { preview_height: item.previewHeight }
1548
- }));
1549
- this.sendMessage("templatesAdd", preparedData);
1550
- return this;
1551
- }
1552
- async provideShapes({ data, dataURL }) {
1553
- if (!this.isIframeLoaded()) {
1554
- this.provideShapesData = data || dataURL ? { data, dataURL } : this.provideShapesData;
1555
- return;
1556
- }
1557
- let items = data;
1558
- if (dataURL) {
1559
- const res = await this.getFetch(dataURL);
1560
- items = await this.getCategoriesData(res);
1561
- }
1562
- const shapesDataItems = items.map((item) => ({
1563
- ...item,
1564
- preview_url: item.previewURL,
1565
- url: item.shapeURL,
1566
- meta_data: item.shapeData
1567
- }));
1568
- this.sendMessage("shapesAdd", [{ ...SHAPES_DATA, items: shapesDataItems }]);
1569
- return this;
1570
- }
1571
- async provideStickerShapes() {
1572
- const stickerShapesDataItems = defaultStickerShapes_default.map((item) => ({
1573
- ...item,
1574
- preview_url: item.previewURL,
1575
- url: item.shapeURL,
1576
- meta_data: item.shapeData
1577
- }));
1578
- this.sendMessage("stickerShapesAdd", stickerShapesDataItems);
1579
- return this;
1580
- }
1581
- async provideTexts({ data, dataURL }) {
1582
- if (this.settings.usePicsartInventory) {
1583
- this.log(USE_PICSART_INVENTORY_MSG);
1584
- return;
1585
- }
1586
- if (!this.isIframeLoaded()) {
1587
- this.provideTextsData = { data, dataURL };
1588
- return;
1589
- }
1590
- const textsData = dataURL ? await this.getFetch(dataURL) : data;
1591
- if (textsData) {
1592
- this.sendMessage("textsAdd", textsData.map((item) => ({
1593
- ...item,
1594
- font_size: item.fontSize || FONT_DEFAULTS.size,
1595
- title: item.previewText || item.text,
1596
- font_family: item.fontFamily || FONT_DEFAULTS.family
1597
- })));
1598
- }
1599
- return this;
1600
- }
1601
- provideColors(data) {
1602
- if (!this.isIframeLoaded()) {
1603
- this.provideColorsData = data;
1604
- return;
1605
- }
1606
- const colorsData = {};
1607
- if (data.palette?.colors) {
1608
- colorsData.palette = { ...data.palette, title: data.palette.title || "Popular Colors" };
1609
- if (data.palette.colors.length > MAX_COLORS_AMOUNT) colorsData.palette.colors.length = MAX_COLORS_AMOUNT;
1610
- }
1611
- if (data.presets?.colors) {
1612
- colorsData.presets = { ...data.presets, title: data.presets.title || "Presets" };
1613
- if (data.presets.colors.length > MAX_COLORS_AMOUNT) colorsData.presets.colors.length = MAX_COLORS_AMOUNT;
1614
- }
1615
- this.sendMessage("colorsAdd", colorsData);
1616
- return this;
1617
- }
1618
- async providePhotos({ data, dataURL }) {
1619
- if (this.settings.usePicsartInventory) {
1620
- this.log(USE_PICSART_INVENTORY_MSG);
1621
- return;
1622
- }
1623
- if (!this.isIframeLoaded()) {
1624
- this.providePhotosData = { data, dataURL };
1625
- return;
1626
- }
1627
- const photosData = dataURL ? await this.getFetch(dataURL) : data;
1628
- if (photosData) {
1629
- const preparedData = photosData.map(({
1630
- id,
1631
- previewURL,
1632
- imageURL,
1633
- width,
1634
- height
1635
- }) => ({
1636
- id,
1637
- url: previewURL || imageURL,
1638
- data_url: imageURL,
1639
- width,
1640
- height
1641
- }));
1642
- this.sendMessage("photosAdd", preparedData);
1643
- }
1644
- return this;
1645
- }
1646
- async provideStickers({ data, dataURL }) {
1647
- if (this.settings.usePicsartInventory) {
1648
- this.log(USE_PICSART_INVENTORY_MSG);
1649
- return;
1650
- }
1651
- if (!this.isIframeLoaded()) {
1652
- this.provideStickersData = { data, dataURL };
1653
- return;
1654
- }
1655
- const stickersData = dataURL ? await this.getFetch(dataURL) : data;
1656
- if (stickersData) {
1657
- const preparedData = stickersData.map(({ id, previewURL, stickerURL }) => ({ id, url: previewURL || stickerURL, data_url: stickerURL }));
1658
- this.sendMessage("stickersAdd", preparedData);
1659
- }
1660
- return this;
1661
- }
1662
- async provideFonts({ data, dataURL }) {
1663
- if (this.settings.usePicsartInventory) {
1664
- this.log(USE_PICSART_INVENTORY_MSG);
1665
- return;
1666
- }
1667
- if (!this.isIframeLoaded()) {
1668
- this.provideFontsData = { data, dataURL };
1669
- return;
1670
- }
1671
- const fontsData = dataURL ? await this.getFetch(dataURL) : data;
1672
- if (fontsData) {
1673
- const msg = fontsData.map(({
1674
- fontFamily,
1675
- previewURL,
1676
- url,
1677
- licenseInfo
1678
- }) => ({
1679
- id: fontFamily,
1680
- font_family: fontFamily,
1681
- font_src: url,
1682
- preview_url: previewURL,
1683
- url: previewURL,
1684
- ...licenseInfo && { license: licenseInfo },
1685
- meta_data: {
1686
- font_name: fontFamily
1687
- }
1688
- }));
1689
- this.sendMessage("fontsAdd", msg);
1690
- }
1691
- return this;
1692
- }
1693
- async provideCanvasSizes({ data, dataURL }) {
1694
- if (this.settings.usePicsartInventory) {
1695
- this.log(USE_PICSART_INVENTORY_MSG);
1696
- return;
1697
- }
1698
- if (!this.isIframeLoaded()) {
1699
- this.provideCanvasSizesData = { data, dataURL };
1700
- return;
1701
- }
1702
- const canvasSizesData = dataURL ? await this.getFetch(dataURL) : data;
1703
- if (canvasSizesData) this.sendMessage("canvasSizesAdd", canvasSizesData);
1704
- return this;
1705
- }
1706
- provideLabels(data) {
1707
- if (!this.isIframeLoaded()) {
1708
- this.provideLabelsData = data;
62
+ existing.addEventListener("load", () => resolve(), { once: true });
63
+ existing.addEventListener(
64
+ "error",
65
+ () => reject(new Error(`Failed to load Picsart SDK: ${scriptUrl}`)),
66
+ { once: true }
67
+ );
1709
68
  return;
1710
69
  }
1711
- if (data) this.sendMessage("labelsAdd", data);
1712
- return this;
1713
- }
1714
- provideExportSettings() {
1715
- const exportSettings = merge(DEFAULT_EXPORT_SETTINGS, this.settings.exportSettings, this.tempExportSettings);
1716
- this.sendMessage("exportSettings", exportSettings);
1717
- }
1718
- };
1719
- if (typeof window !== "undefined") {
1720
- window[PICSART_PROP_NAME] = window[PICSART_PROP_NAME] || Picsart;
1721
- }
1722
- var Picsart_default = Picsart;
1723
- function readBundledEnv(key) {
1724
- const proc = globalThis.process;
1725
- return proc?.env?.[key];
1726
- }
1727
- function resolveEditorDomain(explicit) {
1728
- if (explicit) return explicit;
1729
- const fromEnv = readBundledEnv("NEXT_PUBLIC_PICSART_EDITOR_DOMAIN") || readBundledEnv("PICSART_EDITOR_DOMAIN") || readBundledEnv("EDITOR_DOMAIN");
1730
- return fromEnv || "";
1731
- }
1732
- function resolveParentDomain(explicit) {
1733
- if (explicit) return explicit;
1734
- return readBundledEnv("NEXT_PUBLIC_PICSART_PARENT_DOMAIN") || readBundledEnv("VITE_PICSART_PARENT_DOMAIN") || readBundledEnv("PICSART_PARENT_DOMAIN") || "";
70
+ const script = document.createElement("script");
71
+ script.src = scriptUrl;
72
+ script.async = true;
73
+ script.dataset.picsartSdk = "true";
74
+ script.onload = () => resolve();
75
+ script.onerror = () => {
76
+ loadPromise = null;
77
+ reject(new Error(`Failed to load Picsart SDK: ${scriptUrl}`));
78
+ };
79
+ document.head.append(script);
80
+ });
81
+ return loadPromise;
1735
82
  }
1736
- var PhotoEditor = forwardRef(
1737
- function PhotoEditor2({
1738
- apiKey,
1739
- customerId,
1740
- propertyId,
1741
- editorDomain,
1742
- parentDomain: parentDomainProp,
1743
- className,
1744
- style,
1745
- title,
1746
- imageUrl,
1747
- cms = true,
1748
- debug = false,
83
+ function PicsartEditor({
84
+ apiKey,
85
+ customerId,
86
+ propertyId,
87
+ sdkScriptUrl,
88
+ className,
89
+ style,
90
+ children,
91
+ exportType,
92
+ theme,
93
+ title,
94
+ selectedCategory,
95
+ canvasSize,
96
+ templatesTitleText,
97
+ templatesSubTitle,
98
+ templatesFilters,
99
+ replayUrl,
100
+ videoUrl,
101
+ imageUrl,
102
+ subtitleUrl,
103
+ templateId,
104
+ stickerText,
105
+ stickerImageUrl,
106
+ onUpload,
107
+ onExport,
108
+ onError,
109
+ onClose,
110
+ autoOpen = true,
111
+ openOptions
112
+ }) {
113
+ const containerId = useMemo(
114
+ () => `picsart-editor-${Math.random().toString(36).slice(2, 12)}`,
115
+ []
116
+ );
117
+ const instanceRef = useRef(null);
118
+ const propsRef = useRef({
1749
119
  onExport,
1750
120
  onError,
1751
- onClose,
1752
- onOpen,
1753
- picsartSettings,
1754
- openParams
1755
- }, ref) {
1756
- const reactId = useId().replace(/:/g, "");
1757
- const containerId = useMemo(() => `picsart-react-${reactId}`, [reactId]);
1758
- const instanceRef = useRef(null);
1759
- const domain = useMemo(() => resolveEditorDomain(editorDomain), [editorDomain]);
1760
- const parentDomain = useMemo(
1761
- () => resolveParentDomain(parentDomainProp),
1762
- [parentDomainProp]
1763
- );
1764
- useImperativeHandle(
1765
- ref,
1766
- () => ({
1767
- get picsart() {
1768
- return instanceRef.current;
1769
- },
1770
- open: (params) => instanceRef.current.open(params),
1771
- close: () => instanceRef.current.close()
1772
- }),
1773
- []
1774
- );
1775
- useEffect(() => {
1776
- if (!domain) {
1777
- console.error(
1778
- "PhotoEditor: set `editorDomain` or env NEXT_PUBLIC_PICSART_EDITOR_DOMAIN / PICSART_EDITOR_DOMAIN / EDITOR_DOMAIN."
1779
- );
1780
- return void 0;
1781
- }
1782
- if (typeof window !== "undefined") {
1783
- const insecureLocal = window.location.protocol === "http:" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
1784
- if (insecureLocal && !parentDomain) {
1785
- console.warn(
1786
- "[PhotoEditor] You are on http://localhost without `parentDomain`. The editor SDK often rejects this for postMessage / auth. Use an HTTPS tunnel (ngrok, Cloudflare Tunnel, \u2026) and set `parentDomain` or `VITE_PICSART_PARENT_DOMAIN` / `NEXT_PUBLIC_PICSART_PARENT_DOMAIN` to that https origin."
1787
- );
1788
- }
121
+ onClose
122
+ });
123
+ propsRef.current = { onExport, onError, onClose };
124
+ useEffect(() => {
125
+ let cancelled = false;
126
+ (async () => {
127
+ await loadPicsartSdk(sdkScriptUrl);
128
+ if (cancelled || !window.Picsart) {
129
+ return;
1789
130
  }
1790
- const instance = new Picsart_default({
1791
- ...picsartSettings || {},
1792
- containerId,
1793
- domain,
131
+ const baseOptions = {
1794
132
  apiKey,
1795
133
  customerId,
1796
- ...parentDomain ? { parentDomain } : {},
1797
- ...propertyId != null && propertyId !== "" ? { propertyId } : {},
1798
- cms,
1799
- debug
1800
- });
134
+ ...propertyId ? { propertyId } : {},
135
+ containerId,
136
+ ...exportType && { exportType },
137
+ ...theme && { theme },
138
+ ...title && { title },
139
+ ...selectedCategory && { selectedCategory },
140
+ ...canvasSize && { canvasSize },
141
+ ...templatesTitleText && { templatesTitleText },
142
+ ...templatesSubTitle && { templatesSubTitle },
143
+ ...templatesFilters && Object.keys(templatesFilters).length > 0 ? { templatesFilters } : {},
144
+ ...replayUrl && { replayUrl },
145
+ ...videoUrl && { videoUrl },
146
+ ...imageUrl && { imageUrl },
147
+ ...subtitleUrl && { subtitleUrl },
148
+ ...templateId && { templateId },
149
+ ...stickerText && { stickerText },
150
+ ...stickerImageUrl && { stickerImageUrl },
151
+ onUpload: onUpload ?? createDefaultVideoUpload(apiKey)
152
+ };
153
+ const instance = new window.Picsart(baseOptions);
1801
154
  instanceRef.current = instance;
1802
- if (onExport) instance.onExport(onExport);
1803
- if (onError) instance.onError(onError);
1804
- if (onClose) instance.onClose(onClose);
1805
- if (onOpen) instance.onOpen(onOpen);
1806
- instance.open({
1807
- ...title ? { title } : {},
1808
- ...imageUrl ? { imageUrl } : {},
1809
- ...openParams || {}
155
+ instance.onError((err) => {
156
+ propsRef.current.onError?.(err);
1810
157
  });
1811
- return () => {
1812
- instance.close();
1813
- instanceRef.current = null;
1814
- };
1815
- }, [
1816
- apiKey,
1817
- customerId,
1818
- propertyId,
1819
- domain,
1820
- parentDomain,
1821
- containerId,
1822
- cms,
1823
- debug,
1824
- JSON.stringify(picsartSettings || {}),
1825
- JSON.stringify(openParams || {}),
1826
- imageUrl,
1827
- title
1828
- ]);
1829
- return /* @__PURE__ */ jsx(
158
+ instance.onExport((output) => {
159
+ propsRef.current.onExport?.(output);
160
+ });
161
+ if (onClose) {
162
+ instance.onClose(() => {
163
+ propsRef.current.onClose?.();
164
+ });
165
+ }
166
+ if (autoOpen) {
167
+ const openPayload = openOptions ?? (replayUrl ? { replayUrl } : templateId ? { templateId } : imageUrl ? { imageUrl } : {});
168
+ if (Object.keys(openPayload).length > 0) {
169
+ instance.open(openPayload);
170
+ } else {
171
+ instance.open();
172
+ }
173
+ }
174
+ })().catch((err) => {
175
+ propsRef.current.onError?.(err);
176
+ });
177
+ return () => {
178
+ cancelled = true;
179
+ instanceRef.current?.close();
180
+ instanceRef.current = null;
181
+ };
182
+ }, [
183
+ apiKey,
184
+ customerId,
185
+ propertyId,
186
+ containerId,
187
+ sdkScriptUrl,
188
+ exportType,
189
+ theme,
190
+ title,
191
+ selectedCategory,
192
+ canvasSize,
193
+ templatesTitleText,
194
+ templatesSubTitle,
195
+ replayUrl,
196
+ videoUrl,
197
+ imageUrl,
198
+ subtitleUrl,
199
+ templateId,
200
+ stickerText,
201
+ stickerImageUrl,
202
+ onUpload,
203
+ autoOpen,
204
+ openOptions,
205
+ JSON.stringify(templatesFilters ?? null),
206
+ onClose
207
+ ]);
208
+ return /* @__PURE__ */ jsxs("div", { className, style: { height: "100%", width: "100%", ...style }, children: [
209
+ children,
210
+ /* @__PURE__ */ jsx(
1830
211
  "div",
1831
212
  {
1832
213
  id: containerId,
1833
- className,
1834
- style: { width: "100%", height: "100%", minHeight: 480, ...style }
214
+ style: {
215
+ width: "100%",
216
+ height: "100%",
217
+ minHeight: 480,
218
+ background: "#ededed",
219
+ borderRadius: 3
220
+ }
1835
221
  }
1836
- );
1837
- }
1838
- );
1839
- var PhotoEditor_default = PhotoEditor;
222
+ )
223
+ ] });
224
+ }
1840
225
 
1841
- export { PhotoEditor_default as PhotoEditor, Picsart_default as Picsart };
226
+ export { PicsartEditor, createDefaultVideoUpload, loadPicsartSdk };
1842
227
  //# sourceMappingURL=index.mjs.map
1843
228
  //# sourceMappingURL=index.mjs.map