useblocks 1.1.46 → 1.1.49

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.
Files changed (80) hide show
  1. package/iframe/js/amp.BP7EklKo.js +1 -0
  2. package/iframe/js/iframe-eblock.js +1 -1
  3. package/iframe/js/iframe.js +1 -1
  4. package/iframe/js/rules.4N5s3OV-.js +1 -1
  5. package/monacoeditorwork/css.worker.bundle.js +40524 -40442
  6. package/monacoeditorwork/editor.worker.bundle.js +9740 -9697
  7. package/monacoeditorwork/html.worker.bundle.js +50513 -50431
  8. package/monacoeditorwork/json.worker.bundle.js +14570 -14527
  9. package/monacoeditorwork/ts.worker.bundle.js +119593 -119455
  10. package/npm-publish.manifest.json +7 -7
  11. package/package.json +1 -1
  12. package/runtime/@ant-design/cssinjs/index.js +1 -1
  13. package/runtime/@ant-design/icons/index.js +2 -2
  14. package/runtime/README.md +1 -1
  15. package/runtime/THIRD_PARTY_LICENSES.txt +70 -42
  16. package/runtime/antd/index.js +1 -1
  17. package/runtime/react/index.js +3 -3
  18. package/runtime/react/jsx-runtime/index.js +1 -1
  19. package/runtime/react-dom/client/index.js +4 -4
  20. package/runtime/react-dom/index.js +3 -3
  21. package/runtime/react-router-dom/index.js +2 -2
  22. package/singlepage_headless_plugin.html +1 -1
  23. package/static/core/{cc8f145d.js → 11296a18.js} +55 -55
  24. package/static/core/{a321a57d.js → 13d197af.js} +26 -26
  25. package/static/core/13f581cc.js +924 -0
  26. package/static/core/{90ec6d2b2.js → 1ca5f3772.js} +184 -155
  27. package/static/core/{b9529b8a.js → 339377b8.js} +16684 -16503
  28. package/static/core/{6e2d88d5.js → 386cf7b3.js} +3573 -3559
  29. package/static/core/{6df04323.js → 3b4845f7.js} +537 -518
  30. package/static/core/{526b23c2.js → 3dea3b87.js} +7 -7
  31. package/static/core/59023866.js +2090 -0
  32. package/static/core/{4a2af478.js → 7a229b90.js} +3 -3
  33. package/static/core/{6b8432a3.js → 8c81db36.js} +3 -3
  34. package/static/core/{b8b730b2.js → 8e110c69.js} +22 -22
  35. package/static/core/{35e13192.js → a11c28c2.js} +172 -168
  36. package/static/core/{9c1c1b89.js → aacf134d.js} +745 -664
  37. package/static/core/{350eac23.js → acb049cb.js} +1349 -1297
  38. package/static/core/{cefd6620.js → c59f9731.js} +7640 -6595
  39. package/static/core/{4eb628d3.js → de79e0c5.js} +3947 -3705
  40. package/static/core/e7c24fe9.js +649 -0
  41. package/static/esm/{dab4cdfd.js → 448d4bb0.js} +70 -70
  42. package/static/esm/{7c5227f0.js → d180c108.js} +50 -47
  43. package/static/runtime/{DownloadOutlined-CgJ8OpH_.js → DownloadOutlined-Dg_G2xO7.js} +4 -4
  44. package/static/runtime/client-CfXgU5Vo.js +7580 -0
  45. package/static/runtime/{defineProperty-B-FyVNQF.js → defineProperty-C_9hhJHt.js} +1 -1
  46. package/static/runtime/dom-export-CHgQ7Ws9.js +8069 -0
  47. package/static/runtime/{es-DnZp8dh1.js → es-BPfImJ0x.js} +5 -5
  48. package/static/runtime/{es-B2DS-PLP.js → es-DcH6fwd6.js} +2 -2
  49. package/static/runtime/{es-deqzngIL.js → es-_OY-D9g1.js} +2 -2
  50. package/static/runtime/{jsx-dev-runtime-Wj1_6O79.js → jsx-dev-runtime-DDukXY54.js} +2 -2
  51. package/static/runtime/jsx-runtime-BodCQYDg.js +22 -0
  52. package/static/runtime/react-BHNx_xzv.js +290 -0
  53. package/static/runtime/react-dom-CyByzibb.js +127 -0
  54. package/two_step_headless_plugin.html +1 -1
  55. package/{useblocks-core.2116f1b9.js → useblocks-core.15a9129c.js} +82 -76
  56. package/useblocks-esm.js +628 -3198
  57. package/useblocks.d.ts +184 -52
  58. package/useblocks.js +818 -12588
  59. package/vite/index.cjs +46 -21
  60. package/vite/index.d.ts +0 -1
  61. package/vite/index.js +46 -21
  62. package/vite/pluginDev/index.d.ts +0 -1
  63. package/webpack/index.cjs +46 -21
  64. package/webpack/index.d.ts +0 -1
  65. package/webpack/index.js +46 -21
  66. package/webpack/pluginDev/index.d.ts +0 -1
  67. package/iframe/js/amp.CVC2Iq48.js +0 -1
  68. package/static/core/9421a704.js +0 -869
  69. package/static/core/9c79239d.js +0 -2063
  70. package/static/core/df0652cc.js +0 -1119
  71. package/static/esm/2fb07398.js +0 -3480
  72. package/static/esm/352121c5.js +0 -55
  73. package/static/esm/64966e1c.js +0 -18
  74. package/static/runtime/client-CM3WFcip.js +0 -7
  75. package/static/runtime/dist-DUS42Hru.js +0 -3421
  76. package/static/runtime/jsx-runtime-DmPQfqtr.js +0 -28
  77. package/static/runtime/react-DIf5CLST.js +0 -258
  78. package/static/runtime/react-dom-Cc3IcUkg.js +0 -5604
  79. /package/iframe/{iframe-eblock.2116f1b9.html → iframe-eblock.15a9129c.html} +0 -0
  80. /package/iframe/{iframe.2116f1b9.html → iframe.15a9129c.html} +0 -0
@@ -1,2063 +0,0 @@
1
- (function(){try{if(typeof document<"u"){var o=document.createElement("style");o.setAttribute("data-useblocks","true"),o.appendChild(document.createTextNode(".blocks-app .image-preview{text-align:center;min-height:100px;position:relative}.blocks-app .image-preview .image-editor-modal{border:1px solid red}.blocks-app .image-preview__edit-button{position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.blocks-app .image-preview img{border:1px solid var(--colorBorder);border-radius:6px;max-width:100%;max-height:500px}.blocks-app .image-editor-modal .ant-modal-container{flex-direction:column;min-height:100vh;display:flex;border-radius:0!important}.blocks-app .image-editor-modal .ant-modal-body{flex-grow:1;display:flex}.blocks-app .image-editor-modal .ant-modal-body #pixie-editor{flex-grow:1;height:calc(100vh - 70px);min-height:calc(100vh - 70px);overflow:hidden}.blocks-app .image-editor-modal .pi .text-on-primary{background:var(--colorPrimary);border-color:var(--colorPrimary)}.blocks-app .image-editor-modal .pi .text-on-primary:hover{background:var(--colorPrimaryHover);border-color:var(--colorPrimaryHover)}.blocks-app .image-editor-modal .pi .text-on-primary.rounded-full{border-radius:calc(var(--borderRadius) * 1px)}.blocks-app .image-editor-modal .pi .shadow-xl{box-shadow:none}.blocks-app .image-editor-modal .w-\\[4ch\\].text-sm.text-center{width:5ch}.blocks-app .image-editor-modal .pi .border-white{border-color:var(--colorPrimary)}.blocks-app .image-editor-modal .pi .bg-white\\/50{background-color:var(--colorPrimary)}.blocks-app .image-editor-modal .pi .text-on-primary{color:var(--colorWhite)}.blocks-app .serach-results .ant-row{align-items:center}.blocks-app .serach-results .blocks-search__divider-wrapper{margin-top:12px;position:relative}.blocks-app .serach-results .blocks-search__divider-wrapper .ant-divider-horizontal{border-top:1px solid var(--colorBorderSecondary);background:0 0;width:100%;height:1px;min-height:0;margin:0;position:static}.blocks-app .slideshow-container{width:524px;height:350px;margin:auto;position:relative;overflow:hidden}.blocks-app .slideshow-image{opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}.blocks-app .image-ai .slideshow-image{width:auto;height:auto}.blocks-app .image-ai__image-item{text-align:center;border-radius:6px;justify-content:center;align-items:center;min-height:100px;display:flex;position:relative}.blocks-app .image-ai__image-item .buttons{justify-content:space-between;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.blocks-app .image-ai .text-area-input-hybrid{border:none;outline:none;min-height:0;padding:0 0 0 1px}.blocks-app .image-ai .text-area-input-hybrid textarea{height:32px;min-height:32px;padding:3px 11px;line-height:26px}.blocks-app .image-ai__loading{justify-content:center;align-items:center;min-height:150px;display:flex}.blocks-app .image-ai__loading .spin{flex-direction:column;justify-content:center;align-items:center;height:150px;display:flex}.blocks-app .image-ai__loading .status{margin:3px 0 0}.blocks-app .image-ai__preview{border-radius:6px;margin-top:24px;overflow:hidden}.blocks-app .image-ai__preview .image-ai__image-item img{border-radius:calc(var(--borderRadius) * 1px);object-fit:contain;max-height:100%;transition:height 1s;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.blocks-app .image-ai .small{width:302px;height:202px}.blocks-app .image-ai .large{width:524px;height:350px}.blocks-app .image-ai .image-ai__row{padding:0 2px}.blocks-app .image-ai .image-ai__input-affix-wrapper{border-style:solid;border-width:calc(var(--borderWidth) * 1px);border-color:var(--colorFillSecondaryDarken);border-radius:calc(var(--borderRadius) * 1px);width:100%;padding-left:0;display:inline-flex}.blocks-app .image-ai .image-ai__input-affix-wrapper:hover{border-color:var(--borderColorHover)}.blocks-app .image-ai .image-ai__input-affix-wrapper.ant-input-affix-wrapper-focused{border-color:var(--colorPrimaryBorder)}.blocks-app .image-ai .image-ai__textarea{font-size:16px}.blocks-app .image-ai .image-ai__input-icon{font-size:16px;top:0;right:0}.dark .blocks-app .image-ai .image-ai__preview .image-ai__image-item img{background:#2b2b2b;border:1px solid #434343}.dark .blocks-app .image-ai .ant-btn{background:#1f1f1f}.dark .blocks-app .image-ai .ant-btn:hover{color:var(--colorPrimary)}.blocks-app .stock-tab img{border-radius:0;max-width:none;max-height:none}.blocks-app .stock-tab .stock-search-input{padding:0 2px}.blocks-app .stock-tab .my-masonry-grid{text-align:center;width:auto;display:flex}.blocks-app .stock-tab .my-masonry-grid_column{background-clip:padding-box}.blocks-app .stock-tab .list-item{cursor:pointer;background:#f0f2f5;border:1px solid #f0f2f5;border-radius:6px;min-height:100px;max-height:100px;margin-bottom:20px;transition:all .3s;display:inline-block;position:relative;overflow:hidden}.blocks-app .stock-tab .list-item .overlay-image{opacity:0;background-size:cover;width:110px;height:40px;transition:opacity .5s;position:absolute;bottom:10px;right:10px}.blocks-app .stock-tab .list-item .ant-spin{color:#f0f2f5;font-size:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.blocks-app .stock-tab .list-item img{object-fit:cover;opacity:0;border-radius:6px;height:auto;transition:opacity .5s ease-in-out;display:block}.blocks-app .stock-tab .list-item.loaded{border:1px solid #d9d9d9;max-height:1000px}.blocks-app .stock-tab .list-item.loaded img{opacity:1;height:100%}.blocks-app .stock-tab .list-item.loaded .loaded-image{opacity:.5}.blocks-app .stock-tab .list-item:hover{box-shadow:0 1px 2px -2px #00000029,0 3px 6px #0000001f,0 5px 12px 4px #00000017}.blocks-app .stock-tab .list-item:hover p.creator-info,.blocks-app .stock-tab .list-item:hover .overlay-image{opacity:1}.blocks-app .stock-tab .list-item p.creator-info{color:#fff;opacity:0;background-color:#00000080;border-radius:0 0 6px;margin:0;padding:5px;font-size:10px;line-height:1.2;position:absolute;bottom:0;right:0}.blocks-app .stock-tab .list-item p.creator-info:hover a{color:#fff;text-decoration:underline}.blocks-app .stock-tab .list-item p.creator-info a{color:#fff;text-decoration:none}.blocks-app .stock-color-filter{display:flex}.blocks-app .stock-color-filter label{border-width:1px;width:24px;height:24px;margin:4px;padding:0;font-size:0;border-radius:6px!important}.blocks-app .stock-color-filter label.all-colors{background-image:linear-gradient(135deg,red,#ff7f00,#ff0,#0f0,#00f,#8b00ff)}.blocks-app .stock-color-filter label.black-color{background:#222}.blocks-app .stock-color-filter label.bw-color{background-image:linear-gradient(135deg,#222 50%,#fff 50%)}.blocks-app .stock-color-filter label.white-color{background:#fff}.blocks-app .stock-color-filter label.orange-color{background:#fa8c16}.blocks-app .stock-color-filter label.red-color{background:#f5222d}.blocks-app .stock-color-filter label.purple-color{background:#722ed1}.blocks-app .stock-color-filter label.magenta-color{background:#eb2f96}.blocks-app .stock-color-filter label.green-color{background:#52c41a}.blocks-app .stock-color-filter label.teal-color{background:#43c3c3}.blocks-app .stock-color-filter label.blue-color{background:#1677ff}.blocks-app .stock-color-filter .ant-radio-button-wrapper:not(:first-child):before{display:none}.blocks-app .serach-results{padding-top:6px}.blocks-app .serach-results .stock-search-input{width:322px;padding:0 2px}.blocks-app .serach-results .blocks-search__divider-wrapper{width:calc(100% + 48px);margin-top:12px;margin-left:-24px;margin-right:-24px;position:relative}.blocks-app .serach-results .blocks-search__divider-wrapper .ant-divider-horizontal{pointer-events:none;border-top:1px solid var(--colorBorderSecondary);background:linear-gradient(180deg, var(--colorBgContainerDisabled), transparent 40%);border-bottom:none;width:100%;height:20px;min-height:20px;margin:0;position:relative;bottom:auto;left:auto;right:auto}.dark .blocks-app .image-center .stock-tab .serach-results .blocks-search__divider-wrapper .ant-divider-horizontal{background:linear-gradient(180deg, var(--colorBgBase), transparent 40%)}.dark .blocks-app .stock-tab .list-item{background:#2b2b2b;border:1px solid #2b2b2b}.dark .blocks-app .stock-tab .list-item.loaded{border:1px solid #434343}.blocks-app .image-center .image-center-image-preview{justify-content:center;align-items:center;display:flex}.blocks-app .image-center .ant-divider-horizontal{pointer-events:none;z-index:1;background:linear-gradient(180deg, var(--colorBgContainerDisabled), transparent 40%);width:calc(100% + 48px);height:20px;margin:24px -24px 0;position:absolute;bottom:-19px}.dark .blocks-app .image-center .ant-divider-horizontal{background:linear-gradient(180deg, var(--colorBgBase), transparent 40%)}.blocks-app .image-center .ant-divider-horizontal.ant-divider-with-text{background:0 0;width:calc(100% + 38px);margin:0 -24px 20px;position:relative;top:0}.blocks-app .image-center img{border-radius:4px;max-width:524px;max-height:352px}.blocks-app .image-center .image-size{justify-content:center;margin-top:6px;font-size:14px;line-height:22px;display:flex}.blocks-app .image-center .ant-upload.ant-upload-drag{border-radius:6px}.blocks-app .image-center .ant-modal-body .stock-search-input{margin-bottom:0}.blocks-app .image-center .ant-modal-body .serach-results .stock-search-input{margin-bottom:10px}.blocks-app .image-center .ant-modal-body .ant-form:not(.serach-results) .ant-form-item:last-child{margin-bottom:0}.blocks-app .image-center .ant-modal-body .ant-tabs{transition:all .7s cubic-bezier(.075,.82,.165,1)}.blocks-app .image-center .ant-modal-body .ant-tabs .ant-tabs-content-holder{overflow-y:clip}.blocks-app .ant-modal{transition:width .7s ease-in-out}")),document.head.appendChild(o)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
2
- __useblocks__.define("static/core/9c79239d.js", [
3
- "require",
4
- "exports",
5
- "module",
6
- "static/core/bd36b180.js",
7
- "static/core/cefd6620.js",
8
- "static/core/9421a704.js",
9
- "static/core/350eac23.js",
10
- "static/core/6e2d88d5.js",
11
- "static/core/90ec6d2b2.js",
12
- "static/core/6df04323.js",
13
- "react",
14
- "prop-types",
15
- "react-router-dom",
16
- "react/jsx-runtime"
17
- ], function(ee, wt, ur) {
18
- const Ze = ee("./bd36b180.js"), f = ee("./cefd6620.js"), H = ee("./9421a704.js"), d = ee("./350eac23.js"), bt = ee("./6e2d88d5.js"), U = ee("./90ec6d2b2.js"), q = ee("./6df04323.js");
19
- let o = ee("react");
20
- o = Ze.__toESM(o);
21
- let Be = ee("prop-types");
22
- Be = Ze.__toESM(Be);
23
- let Me = ee("react-router-dom"), s = ee("react/jsx-runtime");
24
- function At(r, e) {
25
- return { [r]: {
26
- Filter: e("Filter"),
27
- filter: e("filter"),
28
- Resize: e("Resize"),
29
- resize: e("resize"),
30
- Crop: e("Crop"),
31
- Width: e("Width"),
32
- width: e("width"),
33
- Height: e("Height"),
34
- height: e("height"),
35
- "Background color": e("Background color"),
36
- Cancel: e("Cancel"),
37
- Create: e("Create"),
38
- Objects: e("Objects"),
39
- Quality: e("Quality"),
40
- Save: e("Save"),
41
- "Loading Canvas": e("Loading Canvas"),
42
- "Loading Image": e("Loading Image"),
43
- "Loading State": e("Loading State"),
44
- "Processing Image": e("Processing Image"),
45
- Close: e("Close"),
46
- Apply: e("Apply"),
47
- Font: e("Font"),
48
- Color: e("Color"),
49
- Background: e("Background"),
50
- Image: e("Image"),
51
- Opacity: e("Opacity"),
52
- Outline: e("Outline"),
53
- Shadow: e("Shadow"),
54
- Gradient: e("Gradient"),
55
- Texture: e("Texture"),
56
- "Replace Image": e("Replace Image"),
57
- "Outline Color": e("Outline Color"),
58
- "Shadow Color": e("Shadow Color"),
59
- "Font Size": e("Font Size"),
60
- Radius: e("Radius"),
61
- "Brush Color": e("Brush Color"),
62
- "Brush Type": e("Brush Type"),
63
- "Brush Size": e("Brush Size"),
64
- History: e("History"),
65
- "Maintain aspect ratio": e("Maintain aspect ratio"),
66
- "New Text": e("New Text"),
67
- Size: e("Size"),
68
- Draw: e("Draw"),
69
- Text: e("Text"),
70
- Stickers: e("Stickers"),
71
- Frame: e("Frame"),
72
- Shapes: e("Shapes"),
73
- Corners: e("Corners"),
74
- corners: e("corners"),
75
- Done: e("Done"),
76
- "Applied Filters": e("Applied Filters"),
77
- "Resized Image": e("Resized Image"),
78
- "Cropped Image": e("Cropped Image"),
79
- "Added Drawing": e("Added Drawing"),
80
- "Added Text": e("Added Text"),
81
- "Added Shape": e("Added Shape"),
82
- "Added Sticker": e("Added Sticker"),
83
- "Added Frame": e("Added Frame"),
84
- "Merged Objects": e("Merged Objects"),
85
- "Rounded Corner": e("Rounded Corner"),
86
- "Replaced Background Image": e("Replaced Background Image"),
87
- "Added Image": e("Added Image"),
88
- Initial: e("Initial"),
89
- "Loaded State": e("Loaded State"),
90
- "Changed Style": e("Changed Style"),
91
- "Deleted object": e("Deleted object"),
92
- Merge: e("Merge"),
93
- Emoticons: e("Emoticons"),
94
- Doodles: e("Doodles"),
95
- Landmarks: e("Landmarks"),
96
- Bubbles: e("Bubbles"),
97
- Transportation: e("Transportation"),
98
- Beach: e("Beach"),
99
- PencilBrush: e("PencilBrush"),
100
- SprayBrush: e("SprayBrush"),
101
- CircleBrush: e("CircleBrush"),
102
- DiamondBrush: e("DiamondBrush"),
103
- VLineBrush: e("VLineBrush"),
104
- HLineBrush: e("HLineBrush"),
105
- SquareBrush: e("SquareBrush"),
106
- Square: e("Square"),
107
- square: e("square")
108
- } };
109
- }
110
- function Xe(r, e = "application/octet-stream") {
111
- let n = r.trim(), t = e?.trim() || "application/octet-stream";
112
- const i = n.indexOf(",");
113
- if (n.startsWith("data:") && i >= 0) {
114
- const p = n.slice(5, i).split(";")[0]?.trim();
115
- p && (t = p), n = n.slice(i + 1);
116
- }
117
- const l = n.replace(/\s/g, ""), h = atob(l), C = new Uint8Array(h.length);
118
- for (let p = 0; p < h.length; p++) C[p] = h.charCodeAt(p);
119
- return new Blob([C], { type: t });
120
- }
121
- var St = "static/media/image-editor", It = { text: {
122
- replaceDefaultItems: !0,
123
- defaultText: "Handwriting",
124
- items: [
125
- {
126
- family: "Inter",
127
- src: "fonts/inter-v20-cyrillic_latin-regular.woff2"
128
- },
129
- {
130
- family: "Commissioner",
131
- src: "fonts/commissioner-v24-cyrillic_latin-regular.woff2"
132
- },
133
- {
134
- family: "Montserrat Light",
135
- src: "fonts/Montserrat-Light.woff2"
136
- },
137
- {
138
- family: "Montserrat Regular",
139
- src: "fonts/Montserrat-Regular.woff2"
140
- },
141
- {
142
- family: "Montserrat Bold",
143
- src: "fonts/Montserrat-Bold.woff2"
144
- },
145
- {
146
- family: "Montserrat Black",
147
- src: "fonts/Montserrat-Black.woff2"
148
- },
149
- {
150
- family: "Roboto Light",
151
- src: "fonts/Roboto-Light.woff2"
152
- },
153
- {
154
- family: "Roboto Regular",
155
- src: "fonts/Roboto-Regular.woff2"
156
- },
157
- {
158
- family: "Roboto Bold",
159
- src: "fonts/Roboto-Bold.woff2"
160
- },
161
- {
162
- family: "Roboto Black",
163
- src: "fonts/Roboto-Black.woff2"
164
- },
165
- {
166
- family: "Lato Light",
167
- src: "fonts/Lato-Light.woff2"
168
- },
169
- {
170
- family: "Lato Regular",
171
- src: "fonts/Lato-Regular.woff2"
172
- },
173
- {
174
- family: "Lato Bold",
175
- src: "fonts/Lato-Bold.woff2"
176
- },
177
- {
178
- family: "Lato Black",
179
- src: "fonts/Lato-Black.woff2"
180
- },
181
- {
182
- family: "Rubik Light",
183
- src: "fonts/Rubik-Light.woff2"
184
- },
185
- {
186
- family: "Rubik Regular",
187
- src: "fonts/Rubik-Regular.woff2"
188
- },
189
- {
190
- family: "Rubik Bold",
191
- src: "fonts/Rubik-Bold.woff2"
192
- },
193
- {
194
- family: "Rubik Black",
195
- src: "fonts/Rubik-Black.woff2"
196
- },
197
- {
198
- family: "Bebas Neue Light",
199
- src: "fonts/BebasNeueLight.woff2"
200
- },
201
- {
202
- family: "Bebas Neue Regular",
203
- src: "fonts/BebasNeueRegular.woff2"
204
- },
205
- {
206
- family: "Bebas Neue Book",
207
- src: "fonts/BebasNeueBook.woff2"
208
- },
209
- {
210
- family: "Bebas Neue Bold",
211
- src: "fonts/BebasNeueBold.woff2"
212
- },
213
- {
214
- family: "Fira Sans",
215
- src: "fonts/fira-sans-v11-latin-ext_latin_cyrillic-regular.woff2"
216
- },
217
- {
218
- family: "Lobster",
219
- src: "fonts/Lobster.woff2"
220
- },
221
- {
222
- family: "Pacifico",
223
- src: "fonts/pacifico-v23-cyrillic_latin-regular.woff2"
224
- },
225
- {
226
- family: "Playfair Display",
227
- src: "fonts/playfair-display-v40-cyrillic_latin-regular.woff2"
228
- },
229
- {
230
- family: "Oswald",
231
- src: "fonts/oswald-v57-cyrillic_latin-regular.woff2"
232
- },
233
- {
234
- family: "Caveat",
235
- src: "fonts/caveat-v23-cyrillic_latin-regular.woff2"
236
- }
237
- ]
238
- } };
239
- function xt(r, e) {
240
- if (r === "json") return new Blob([e], { type: "application/json" });
241
- if (r === "svg") return new Blob([e], { type: "image/svg+xml" });
242
- const n = `image/${r}`;
243
- return Xe(e.replace(/data:image\/([a-z]*)?;base64,/, ""), n);
244
- }
245
- var jt = ({ currentImageLink: r, prefetchedBlob: e, onSave: n, uploadImageResultIsLoading: t }) => {
246
- const i = q.useCookieManager(), [l, h] = (0, o.useState)(), [C, p] = (0, o.useState)(), { __: b } = d.useI18n();
247
- let j = f.useDispatch();
248
- const m = f.useStore(), v = f.useAppConfig(), A = f.useSelector(f.selectedCurrentUser), w = f.useSelector(H.selectSecondModal), T = f.useSelector(f.selectProject), g = (0, o.useMemo)(() => {
249
- if (!v?.icons) return;
250
- const O = {};
251
- for (const [M, R] of Object.entries(v.icons)) typeof R == "string" && (O[M] = U.sanitizeHtml(R));
252
- return Object.keys(O).length > 0 ? O : void 0;
253
- }, [v?.icons]), L = (0, o.useRef)(!1), [E, F] = (0, o.useState)(), K = f.useEventEmitter(f.events.FILE_PROXY_EVENT_ID);
254
- (0, o.useEffect)(() => {
255
- let O = !1;
256
- return (async () => {
257
- const R = r;
258
- if (!R && !e) return;
259
- let S = e;
260
- if (!S && R) try {
261
- S = await (await fetch(R)).blob();
262
- } catch {
263
- if (S = await K.fire({
264
- url: R,
265
- project: T
266
- }).filter((D) => D instanceof Blob)[0], !S) {
267
- const D = i.get(f.APP_COOKIES.em_token) || await f.di.getInstance(m, H.TOKEN_ID);
268
- S = await (await fetch(`https://app.useblocks.io/api/wp-json/cors-proxy/v1/get?url=${encodeURIComponent(R)}`, { headers: { authorization: `Bearer ${D}` } })).blob();
269
- }
270
- }
271
- if (O || !S) return;
272
- const z = new FileReader();
273
- z.onload = () => {
274
- if (O) return;
275
- const D = z.result;
276
- typeof D == "string" && (h(D), p(S.type), E?.tools.import.openBackgroundImage(D));
277
- }, z.onerror = () => {}, z.readAsDataURL(S);
278
- })().catch((R) => {}), () => {
279
- O = !0;
280
- };
281
- }, [
282
- r,
283
- e,
284
- i,
285
- E,
286
- K,
287
- T,
288
- m
289
- ]);
290
- const k = (0, o.useCallback)(() => {
291
- h(null), p(null), j(H.closeSecondModal()), j(H.closeModal(f.MODALS.UPLOAD_IMAGE_MODAL));
292
- }, [j]), B = (0, o.useRef)();
293
- B.current = async function(O, M, R) {
294
- try {
295
- const S = xt(R, O);
296
- n && await n(new File([S], M, {
297
- lastModified: Date.now(),
298
- type: S.type
299
- }));
300
- } catch (S) {
301
- throw S;
302
- }
303
- };
304
- const G = (0, o.useCallback)((O) => {
305
- if (O && !(L.current && E)) {
306
- L.current = !0;
307
- const M = A.locale ? A.locale.replace("_", "-") : "en-US", R = A.theme === "system" ? matchMedia("(prefers-color-scheme: dark)").matches ? f.DARK : f.LIGHT : A.theme;
308
- bt.Tf.init({
309
- selector: "#pixie-editor",
310
- baseUrl: d.getBundledHostAssetUrl(St),
311
- image: l,
312
- activeLanguage: M,
313
- languages: At(M, b),
314
- tools: It,
315
- ui: {
316
- menubar: {
317
- replaceDefaultItems: !0,
318
- items: [
319
- {
320
- type: "undoWidget",
321
- align: "left"
322
- },
323
- {
324
- type: "zoomWidget",
325
- align: "center",
326
- desktopOnly: !0
327
- },
328
- {
329
- type: "button",
330
- icon: (0, s.jsx)(d.EmIcons, {
331
- icon: "HistoryOutlined",
332
- configIcons: g,
333
- style: { fontSize: 20 }
334
- }),
335
- align: "right",
336
- desktopOnly: !0,
337
- action: (S) => {
338
- S.togglePanel("history");
339
- }
340
- },
341
- {
342
- type: "button",
343
- icon: (0, s.jsx)(d.EmIcons, {
344
- icon: "CloseOutlined",
345
- configIcons: g,
346
- style: { fontSize: 20 }
347
- }),
348
- align: "right",
349
- desktopOnly: !0,
350
- action: () => k()
351
- }
352
- ]
353
- },
354
- nav: { position: "top" },
355
- activeTheme: R,
356
- mode: "inline",
357
- forceOverlayModeOnMobile: !1
358
- },
359
- onSave: async function(S, z, D) {
360
- try {
361
- await B.current(S, z, D);
362
- } catch {}
363
- }
364
- }).then((S) => {
365
- F(S);
366
- }).catch((S) => {});
367
- }
368
- }, [
369
- A.theme,
370
- l,
371
- E,
372
- F,
373
- A.locale,
374
- b,
375
- k,
376
- g
377
- ]), Z = (0, o.useCallback)(() => {
378
- E?.tools.export.save(r?.split("/").pop().split(".")[0], C?.split("/")[1]);
379
- }, [
380
- E,
381
- r,
382
- C
383
- ]);
384
- return (0, s.jsxs)(d.Modal, {
385
- afterOpenChange: G,
386
- width: "100%",
387
- style: {
388
- maxWidth: "100%",
389
- minHeight: "100vh"
390
- },
391
- className: "image-editor-modal",
392
- centered: !0,
393
- closable: !1,
394
- zIndex: 1100,
395
- mask: !1,
396
- open: w,
397
- footer: [(0, s.jsx)(d.Button, {
398
- className: "em-analytics__profile-cancel",
399
- onClick: k,
400
- children: b("Cancel")
401
- }, "Cancel"), (0, s.jsx)(d.Button, {
402
- className: "em-analytics__profile-updapixiete",
403
- id: "save",
404
- type: "primary",
405
- onClick: Z,
406
- children: b("Update")
407
- }, "Ok")],
408
- children: [t && (0, s.jsx)("div", {
409
- style: {
410
- position: "absolute",
411
- height: "100%",
412
- width: "100%",
413
- display: "flex",
414
- alignItems: "center",
415
- justifyContent: "center",
416
- background: "var(--colorBgLayout)",
417
- zIndex: 10,
418
- opacity: .7
419
- },
420
- children: (0, s.jsx)(d.Spin, { size: "large" })
421
- }), (0, s.jsx)("div", { id: "pixie-editor" })]
422
- });
423
- }, Et = ({ currentImageLink: r, newLink: e, previewDisplayUrl: n, resolvedPreviewObjectUrl: t, resolvedPreviewBlob: i, onSave: l, uploadImageResultIsLoading: h }) => {
424
- const C = n || t;
425
- return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)("div", { children: (0, s.jsxs)("div", {
426
- className: "image-preview",
427
- children: [h && (0, s.jsx)("div", {
428
- style: {
429
- position: "absolute",
430
- height: "100%",
431
- width: "100%",
432
- display: "flex",
433
- alignItems: "center",
434
- justifyContent: "center",
435
- background: "var(--colorBgLayout)",
436
- zIndex: 10,
437
- opacity: .7
438
- },
439
- children: (0, s.jsx)(d.Spin, { size: "large" })
440
- }), C && (0, s.jsx)("img", {
441
- alt: "uploadedImage",
442
- src: C
443
- })]
444
- }) }), (0, s.jsx)(jt, {
445
- currentImageLink: r,
446
- prefetchedBlob: i,
447
- newLink: e,
448
- onSave: l,
449
- uploadImageResultIsLoading: h
450
- })] });
451
- }, Ue = function(r, e) {
452
- return Ue = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(n, t) {
453
- n.__proto__ = t;
454
- } || function(n, t) {
455
- for (var i in t) t.hasOwnProperty(i) && (n[i] = t[i]);
456
- }, Ue(r, e);
457
- };
458
- function Ot(r, e) {
459
- Ue(r, e);
460
- function n() {
461
- this.constructor = r;
462
- }
463
- r.prototype = e === null ? Object.create(e) : (n.prototype = e.prototype, new n());
464
- }
465
- var Ce = function() {
466
- return Ce = Object.assign || function(e) {
467
- for (var n, t = 1, i = arguments.length; t < i; t++) {
468
- n = arguments[t];
469
- for (var l in n) Object.prototype.hasOwnProperty.call(n, l) && (e[l] = n[l]);
470
- }
471
- return e;
472
- }, Ce.apply(this, arguments);
473
- };
474
- function Rt(r, e, n, t) {
475
- var i, l = !1, h = 0;
476
- function C() {
477
- i && clearTimeout(i);
478
- }
479
- function p() {
480
- C(), l = !0;
481
- }
482
- typeof e != "boolean" && (t = n, n = e, e = void 0);
483
- function b() {
484
- var j = this, m = Date.now() - h, v = arguments;
485
- if (l) return;
486
- function A() {
487
- h = Date.now(), n.apply(j, v);
488
- }
489
- function w() {
490
- i = void 0;
491
- }
492
- t && !i && A(), C(), t === void 0 && m > r ? A() : e !== !0 && (i = setTimeout(t ? w : A, t === void 0 ? r - m : r));
493
- }
494
- return b.cancel = p, b;
495
- }
496
- var pe = {
497
- Pixel: "Pixel",
498
- Percent: "Percent"
499
- }, Je = {
500
- unit: pe.Percent,
501
- value: .8
502
- };
503
- function $e(r) {
504
- return typeof r == "number" ? {
505
- unit: pe.Percent,
506
- value: r * 100
507
- } : typeof r == "string" ? r.match(/^(\d*(\.\d+)?)px$/) ? {
508
- unit: pe.Pixel,
509
- value: parseFloat(r)
510
- } : r.match(/^(\d*(\.\d+)?)%$/) ? {
511
- unit: pe.Percent,
512
- value: parseFloat(r)
513
- } : Je : Je;
514
- }
515
- var et = (function(r) {
516
- Ot(e, r);
517
- function e(n) {
518
- var t = r.call(this, n) || this;
519
- return t.lastScrollTop = 0, t.actionTriggered = !1, t.startY = 0, t.currentY = 0, t.dragging = !1, t.maxPullDownDistance = 0, t.getScrollableTarget = function() {
520
- return t.props.scrollableTarget instanceof HTMLElement ? t.props.scrollableTarget : typeof t.props.scrollableTarget == "string" ? document.getElementById(t.props.scrollableTarget) : (t.props.scrollableTarget, null);
521
- }, t.onStart = function(i) {
522
- t.lastScrollTop || (t.dragging = !0, i instanceof MouseEvent ? t.startY = i.pageY : i instanceof TouchEvent && (t.startY = i.touches[0].pageY), t.currentY = t.startY, t._infScroll && (t._infScroll.style.willChange = "transform", t._infScroll.style.transition = "transform 0.2s cubic-bezier(0,0,0.31,1)"));
523
- }, t.onMove = function(i) {
524
- t.dragging && (i instanceof MouseEvent ? t.currentY = i.pageY : i instanceof TouchEvent && (t.currentY = i.touches[0].pageY), !(t.currentY < t.startY) && (t.currentY - t.startY >= Number(t.props.pullDownToRefreshThreshold) && t.setState({ pullToRefreshThresholdBreached: !0 }), !(t.currentY - t.startY > t.maxPullDownDistance * 1.5) && t._infScroll && (t._infScroll.style.overflow = "visible", t._infScroll.style.transform = "translate3d(0px, " + (t.currentY - t.startY) + "px, 0px)")));
525
- }, t.onEnd = function() {
526
- t.startY = 0, t.currentY = 0, t.dragging = !1, t.state.pullToRefreshThresholdBreached && (t.props.refreshFunction && t.props.refreshFunction(), t.setState({ pullToRefreshThresholdBreached: !1 })), requestAnimationFrame(function() {
527
- t._infScroll && (t._infScroll.style.overflow = "auto", t._infScroll.style.transform = "none", t._infScroll.style.willChange = "unset");
528
- });
529
- }, t.onScrollListener = function(i) {
530
- typeof t.props.onScroll == "function" && setTimeout(function() {
531
- return t.props.onScroll && t.props.onScroll(i);
532
- }, 0);
533
- var l = t.props.height || t._scrollableNode ? i.target : document.documentElement.scrollTop ? document.documentElement : document.body;
534
- t.actionTriggered || ((t.props.inverse ? t.isElementAtTop(l, t.props.scrollThreshold) : t.isElementAtBottom(l, t.props.scrollThreshold)) && t.props.hasMore && (t.actionTriggered = !0, t.setState({ showLoader: !0 }), t.props.next && t.props.next()), t.lastScrollTop = l.scrollTop);
535
- }, t.state = {
536
- showLoader: !1,
537
- pullToRefreshThresholdBreached: !1,
538
- prevDataLength: n.dataLength
539
- }, t.throttledOnScrollListener = Rt(150, t.onScrollListener).bind(t), t.onStart = t.onStart.bind(t), t.onMove = t.onMove.bind(t), t.onEnd = t.onEnd.bind(t), t;
540
- }
541
- return e.prototype.componentDidMount = function() {
542
- if (typeof this.props.dataLength > "u") throw new Error("mandatory prop \"dataLength\" is missing. The prop is needed when loading more content. Check README.md for usage");
543
- if (this._scrollableNode = this.getScrollableTarget(), this.el = this.props.height ? this._infScroll : this._scrollableNode || window, this.el && this.el.addEventListener("scroll", this.throttledOnScrollListener), typeof this.props.initialScrollY == "number" && this.el && this.el instanceof HTMLElement && this.el.scrollHeight > this.props.initialScrollY && this.el.scrollTo(0, this.props.initialScrollY), this.props.pullDownToRefresh && this.el && (this.el.addEventListener("touchstart", this.onStart), this.el.addEventListener("touchmove", this.onMove), this.el.addEventListener("touchend", this.onEnd), this.el.addEventListener("mousedown", this.onStart), this.el.addEventListener("mousemove", this.onMove), this.el.addEventListener("mouseup", this.onEnd), this.maxPullDownDistance = this._pullDown && this._pullDown.firstChild && this._pullDown.firstChild.getBoundingClientRect().height || 0, this.forceUpdate(), typeof this.props.refreshFunction != "function")) throw new Error(`Mandatory prop "refreshFunction" missing.
544
- Pull Down To Refresh functionality will not work
545
- as expected. Check README.md for usage'`);
546
- }, e.prototype.componentWillUnmount = function() {
547
- this.el && (this.el.removeEventListener("scroll", this.throttledOnScrollListener), this.props.pullDownToRefresh && (this.el.removeEventListener("touchstart", this.onStart), this.el.removeEventListener("touchmove", this.onMove), this.el.removeEventListener("touchend", this.onEnd), this.el.removeEventListener("mousedown", this.onStart), this.el.removeEventListener("mousemove", this.onMove), this.el.removeEventListener("mouseup", this.onEnd)));
548
- }, e.prototype.componentDidUpdate = function(n) {
549
- this.props.dataLength !== n.dataLength && (this.actionTriggered = !1, this.setState({ showLoader: !1 }));
550
- }, e.getDerivedStateFromProps = function(n, t) {
551
- return n.dataLength !== t.prevDataLength ? Ce(Ce({}, t), { prevDataLength: n.dataLength }) : null;
552
- }, e.prototype.isElementAtTop = function(n, t) {
553
- t === void 0 && (t = .8);
554
- var i = n === document.body || n === document.documentElement ? window.screen.availHeight : n.clientHeight, l = $e(t);
555
- return l.unit === pe.Pixel ? n.scrollTop <= l.value + i - n.scrollHeight + 1 : n.scrollTop <= l.value / 100 + i - n.scrollHeight + 1;
556
- }, e.prototype.isElementAtBottom = function(n, t) {
557
- t === void 0 && (t = .8);
558
- var i = n === document.body || n === document.documentElement ? window.screen.availHeight : n.clientHeight, l = $e(t);
559
- return l.unit === pe.Pixel ? n.scrollTop + i >= n.scrollHeight - l.value : n.scrollTop + i >= l.value / 100 * n.scrollHeight;
560
- }, e.prototype.render = function() {
561
- var n = this, t = Ce({
562
- height: this.props.height || "auto",
563
- overflow: "auto",
564
- WebkitOverflowScrolling: "touch"
565
- }, this.props.style), i = this.props.hasChildren || !!(this.props.children && this.props.children instanceof Array && this.props.children.length), l = this.props.pullDownToRefresh && this.props.height ? { overflow: "auto" } : {};
566
- return o.default.createElement("div", {
567
- style: l,
568
- className: "infinite-scroll-component__outerdiv"
569
- }, o.default.createElement("div", {
570
- className: "infinite-scroll-component " + (this.props.className || ""),
571
- ref: function(h) {
572
- return n._infScroll = h;
573
- },
574
- style: t
575
- }, this.props.pullDownToRefresh && o.default.createElement("div", {
576
- style: { position: "relative" },
577
- ref: function(h) {
578
- return n._pullDown = h;
579
- }
580
- }, o.default.createElement("div", { style: {
581
- position: "absolute",
582
- left: 0,
583
- right: 0,
584
- top: -1 * this.maxPullDownDistance
585
- } }, this.state.pullToRefreshThresholdBreached ? this.props.releaseToRefreshContent : this.props.pullDownToRefreshContent)), this.props.children, !this.state.showLoader && !i && this.props.hasMore && this.props.loader, this.state.showLoader && this.props.hasMore && this.props.loader, !this.props.hasMore && this.props.endMessage));
586
- }, e;
587
- })(o.Component);
588
- function Lt(r, e) {
589
- if (r == null) return {};
590
- var n = kt(r, e), t, i;
591
- if (Object.getOwnPropertySymbols) {
592
- var l = Object.getOwnPropertySymbols(r);
593
- for (i = 0; i < l.length; i++) t = l[i], !(e.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(r, t) && (n[t] = r[t]);
594
- }
595
- return n;
596
- }
597
- function kt(r, e) {
598
- if (r == null) return {};
599
- var n = {}, t = Object.keys(r), i, l;
600
- for (l = 0; l < t.length; l++) i = t[l], !(e.indexOf(i) >= 0) && (n[i] = r[i]);
601
- return n;
602
- }
603
- function Oe() {
604
- return Oe = Object.assign || function(r) {
605
- for (var e = 1; e < arguments.length; e++) {
606
- var n = arguments[e];
607
- for (var t in n) Object.prototype.hasOwnProperty.call(n, t) && (r[t] = n[t]);
608
- }
609
- return r;
610
- }, Oe.apply(this, arguments);
611
- }
612
- function tt(r, e) {
613
- var n = Object.keys(r);
614
- if (Object.getOwnPropertySymbols) {
615
- var t = Object.getOwnPropertySymbols(r);
616
- e && (t = t.filter(function(i) {
617
- return Object.getOwnPropertyDescriptor(r, i).enumerable;
618
- })), n.push.apply(n, t);
619
- }
620
- return n;
621
- }
622
- function we(r) {
623
- for (var e = 1; e < arguments.length; e++) {
624
- var n = arguments[e] != null ? arguments[e] : {};
625
- e % 2 ? tt(Object(n), !0).forEach(function(t) {
626
- Dt(r, t, n[t]);
627
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(n)) : tt(Object(n)).forEach(function(t) {
628
- Object.defineProperty(r, t, Object.getOwnPropertyDescriptor(n, t));
629
- });
630
- }
631
- return r;
632
- }
633
- function Dt(r, e, n) {
634
- return e in r ? Object.defineProperty(r, e, {
635
- value: n,
636
- enumerable: !0,
637
- configurable: !0,
638
- writable: !0
639
- }) : r[e] = n, r;
640
- }
641
- var Tt = {
642
- breakpointCols: void 0,
643
- className: void 0,
644
- columnClassName: void 0,
645
- children: void 0,
646
- columnAttrs: void 0,
647
- column: void 0
648
- }, Pe = 2, Ne = class extends o.default.Component {
649
- constructor(r) {
650
- super(r), this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this), this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this);
651
- let e;
652
- this.props.breakpointCols && this.props.breakpointCols.default ? e = this.props.breakpointCols.default : e = parseInt(this.props.breakpointCols) || Pe, this.state = { columnCount: e };
653
- }
654
- componentDidMount() {
655
- this.reCalculateColumnCount(), window && window.addEventListener("resize", this.reCalculateColumnCountDebounce);
656
- }
657
- componentDidUpdate() {
658
- this.reCalculateColumnCount();
659
- }
660
- componentWillUnmount() {
661
- window && window.removeEventListener("resize", this.reCalculateColumnCountDebounce);
662
- }
663
- reCalculateColumnCountDebounce() {
664
- if (!window || !window.requestAnimationFrame) {
665
- this.reCalculateColumnCount();
666
- return;
667
- }
668
- window.cancelAnimationFrame && window.cancelAnimationFrame(this._lastRecalculateAnimationFrame), this._lastRecalculateAnimationFrame = window.requestAnimationFrame(() => {
669
- this.reCalculateColumnCount();
670
- });
671
- }
672
- reCalculateColumnCount() {
673
- const r = window && window.innerWidth || Infinity;
674
- let e = this.props.breakpointCols;
675
- typeof e != "object" && (e = { default: parseInt(e) || Pe });
676
- let n = Infinity, t = e.default || Pe;
677
- for (let i in e) {
678
- const l = parseInt(i);
679
- l > 0 && r <= l && l < n && (n = l, t = e[i]);
680
- }
681
- t = Math.max(1, parseInt(t) || 1), this.state.columnCount !== t && this.setState({ columnCount: t });
682
- }
683
- itemsInColumns() {
684
- const r = this.state.columnCount, e = new Array(r), n = o.default.Children.toArray(this.props.children);
685
- for (let t = 0; t < n.length; t++) {
686
- const i = t % r;
687
- e[i] || (e[i] = []), e[i].push(n[t]);
688
- }
689
- return e;
690
- }
691
- renderColumns() {
692
- const { column: r, columnAttrs: e = {}, columnClassName: n } = this.props, t = this.itemsInColumns(), i = `${100 / t.length}%`;
693
- let l = n;
694
- l && typeof l != "string" && (this.logDeprecated("The property \"columnClassName\" requires a string"), typeof l > "u" && (l = "my-masonry-grid_column"));
695
- const h = we(we(we({}, r), e), {}, {
696
- style: we(we({}, e.style), {}, { width: i }),
697
- className: l
698
- });
699
- return t.map((C, p) => o.default.createElement("div", Oe({}, h, { key: p }), C));
700
- }
701
- logDeprecated(r) {}
702
- render() {
703
- const r = this.props, { children: e, breakpointCols: n, columnClassName: t, columnAttrs: i, column: l, className: h } = r, C = Lt(r, [
704
- "children",
705
- "breakpointCols",
706
- "columnClassName",
707
- "columnAttrs",
708
- "column",
709
- "className"
710
- ]);
711
- let p = h;
712
- return typeof h != "string" && (this.logDeprecated("The property \"className\" requires a string"), typeof h > "u" && (p = "my-masonry-grid")), o.default.createElement("div", Oe({}, C, { className: p }), this.renderColumns());
713
- }
714
- };
715
- Ne.defaultProps = Tt;
716
- function Fe(r, e) {
717
- return r ? r.exhausted ? {
718
- ...r,
719
- src: null
720
- } : {
721
- ...r,
722
- src: r.src || e || null
723
- } : null;
724
- }
725
- function rt({ items: r, getItemId: e, getRequestUrl: n, createController: t }) {
726
- const [i, l] = (0, o.useState)({}), h = (0, o.useRef)(new Map()), C = (0, o.useCallback)((p) => {
727
- const b = e(p), j = n(p), m = `${b}:${j}`;
728
- if (h.current.has(m)) return {
729
- itemId: b,
730
- requestUrl: j,
731
- cacheKey: m,
732
- controller: h.current.get(m)
733
- };
734
- const v = t(j);
735
- return h.current.set(m, v), {
736
- itemId: b,
737
- requestUrl: j,
738
- cacheKey: m,
739
- controller: v
740
- };
741
- }, [
742
- t,
743
- e,
744
- n
745
- ]);
746
- return (0, o.useEffect)(() => {
747
- const p = new Set(), b = {}, j = r.map((m) => {
748
- const { itemId: v, cacheKey: A, controller: w } = C(m);
749
- p.add(A), b[v] = w.src;
750
- const T = Fe(w.handleChangeSrc?.(), w.src);
751
- return T?.changed && T.src && (b[v] = T.src), w.subscribeToSrcChange?.((g) => {
752
- const L = Fe(g, w.src);
753
- !L?.changed || !L.src || l((E) => E[v] === L.src ? E : {
754
- ...E,
755
- [v]: L.src
756
- });
757
- });
758
- }).filter(Boolean);
759
- return h.current.forEach((m, v) => {
760
- p.has(v) || h.current.delete(v);
761
- }), l(b), () => {
762
- j.forEach((m) => m?.());
763
- };
764
- }, [C, r]), {
765
- getDisplaySrc: (0, o.useCallback)((p) => {
766
- const { itemId: b, requestUrl: j, controller: m } = C(p);
767
- return i[b] || m.src || j;
768
- }, [i, C]),
769
- handleLoad: (0, o.useCallback)((p) => {
770
- C(p).controller.handleSuccess();
771
- }, [C]),
772
- handleError: (0, o.useCallback)((p) => {
773
- const { itemId: b, controller: j } = C(p), m = Fe(j.handleError(), j.src);
774
- m?.changed && m.src && l((v) => ({
775
- ...v,
776
- [b]: m.src
777
- }));
778
- }, [C])
779
- };
780
- }
781
- var nt = "blocks", Bt = ({ setCurrentImageLink: r, setModalHeight: e, setModalWidth: n, setImageStockList: t, imageStockList: i, currentReq: l, setCurrentReq: h, inputRef: C, setStockLink: p, customRequest: b }) => {
782
- const j = f.useAppConfig(), m = f.useIsStandalone(), [v, A] = (0, o.useState)(!1), [w, T] = (0, o.useState)(2), { __: g } = d.useI18n(), L = d.useNotification(), [E] = H.useLazyGetUnsplashImageQuery(), [F] = H.useLazyGetSearchImageQuery(), K = (0, o.useCallback)((a) => a instanceof Error || typeof a?.message == "string" && a.message ? a.message : typeof a?.error?.message == "string" && a.error.message ? a.error.message : g("Failed to load stock images through the configured proxy chain."), [g]), k = (0, o.useCallback)((a) => {
783
- L.error({
784
- id: "STOCK_IMAGES_SEARCH_FAILED",
785
- title: g("Failed to load stock images"),
786
- description: K(a)
787
- });
788
- }, [
789
- g,
790
- K,
791
- L
792
- ]), B = async () => {
793
- v || (A(!0), F({
794
- query: l,
795
- page: w
796
- }).then((a) => {
797
- if (a?.error) {
798
- k(a.error), A(!1);
799
- return;
800
- }
801
- const y = a?.data?.results || [];
802
- t((W) => [...W, ...y]), A(!1), T((W) => W + 1);
803
- }).catch(() => {
804
- A(!1);
805
- }));
806
- };
807
- (0, o.useEffect)(() => {
808
- l.keywords !== "" && G();
809
- }, [l.color, l.orientation]);
810
- const G = async () => {
811
- const a = await F({
812
- query: l,
813
- page: 1
814
- });
815
- if (a?.error) {
816
- k(a.error), t([]);
817
- return;
818
- }
819
- const y = a?.data?.results || [];
820
- y.length > 0 ? (t(y), setTimeout(() => {
821
- n(1060), e("84vh");
822
- }, 0)) : t([]);
823
- }, [Z, O] = (0, o.useState)(null), M = (0, o.useCallback)((a, y, W) => `${a}${a.includes("?") ? "&" : "?"}w=${y}&q=${W}`, []), R = (0, o.useCallback)((a) => f.getProxiedUrl(a, {
824
- config: j,
825
- standalone: m,
826
- resourceType: "stockImages",
827
- intent: "display"
828
- }), [j, m]), { getDisplaySrc: S, handleLoad: z, handleError: D } = rt({
829
- items: i,
830
- getItemId: (0, o.useCallback)((a) => a.id, []),
831
- getRequestUrl: (0, o.useCallback)((a) => M(a.urls.raw, 644, 96), [M]),
832
- createController: R
833
- }), _ = (a) => (y) => {
834
- z(a), y.target.parentNode.classList.add("loaded");
835
- }, X = (a) => () => {
836
- D(a);
837
- }, Y = (a, y, W) => {
838
- E(y.download_location), O(W), setTimeout(() => O(null), 2e3), p(`${a.raw}&w=1200&q=96`), r(`${a.raw}&w=1200&q=96`), b(`${a.raw}&w=1200&q=96`);
839
- };
840
- return (0, s.jsxs)("div", {
841
- className: "stock-tab",
842
- children: [(0, s.jsxs)(d.Form, {
843
- onValuesChange: G,
844
- className: i.length > 0 ? "serach-results" : "",
845
- children: [(0, s.jsxs)(d.Row, {
846
- gutter: 24,
847
- children: [(0, s.jsx)(d.Col, {
848
- span: i.length > 0 ? "" : 24,
849
- children: (0, s.jsx)(d.Form.Item, {
850
- className: "stock-search-input",
851
- children: (0, s.jsx)(d.SearchInput, {
852
- onSearch: G,
853
- allowClear: !0,
854
- size: i.length > 0 ? "medium" : "large",
855
- placeholder: g("Search image"),
856
- value: l.keywords,
857
- onChange: (a) => h((y) => ({
858
- ...y,
859
- keywords: a.target.value
860
- })),
861
- ref: C,
862
- spellCheck: "false",
863
- enterButton: !1
864
- })
865
- })
866
- }), i.length > 0 && (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(d.Col, { children: (0, s.jsxs)(d.Radio.Group, {
867
- defaultValue: "",
868
- onChange: (a) => h((y) => ({
869
- ...y,
870
- orientation: a.target.value
871
- })),
872
- children: [
873
- (0, s.jsx)(d.Tooltip, {
874
- title: g("All"),
875
- placement: "top",
876
- children: (0, s.jsx)(d.Radio.Button, {
877
- value: "",
878
- children: (0, s.jsx)(U.EmIcons, { icon: "MixedView" })
879
- })
880
- }),
881
- (0, s.jsx)(d.Tooltip, {
882
- title: g("Landscape"),
883
- placement: "top",
884
- children: (0, s.jsx)(d.Radio.Button, {
885
- value: "landscape",
886
- children: (0, s.jsx)(U.EmIcons, { icon: "LandscapeView" })
887
- })
888
- }),
889
- (0, s.jsx)(d.Tooltip, {
890
- title: g("Portrait"),
891
- placement: "top",
892
- children: (0, s.jsx)(d.Radio.Button, {
893
- value: "portrait",
894
- children: (0, s.jsx)(U.EmIcons, { icon: "PortraitView" })
895
- })
896
- }),
897
- (0, s.jsx)(d.Tooltip, {
898
- title: g("Squarish"),
899
- placement: "top",
900
- children: (0, s.jsx)(d.Radio.Button, {
901
- value: "squarish",
902
- children: (0, s.jsx)(U.EmIcons, { icon: "SquareView" })
903
- })
904
- })
905
- ]
906
- }) }), (0, s.jsx)(d.Col, { children: (0, s.jsx)(d.RadioColorFilter, {
907
- defaultValue: "",
908
- onChange: (a) => h((y) => ({
909
- ...y,
910
- color: a.target.value
911
- })),
912
- options: [
913
- {
914
- value: "",
915
- colorClass: "all-colors",
916
- label: g("All")
917
- },
918
- {
919
- value: "black",
920
- colorClass: "black-color",
921
- label: g("Black")
922
- },
923
- {
924
- value: "black_and_white",
925
- colorClass: "bw-color",
926
- label: g("Black and White")
927
- },
928
- {
929
- value: "white",
930
- colorClass: "white-color",
931
- label: g("White")
932
- },
933
- {
934
- value: "orange",
935
- colorClass: "orange-color",
936
- label: g("Orange")
937
- },
938
- {
939
- value: "red",
940
- colorClass: "red-color",
941
- label: g("Red")
942
- },
943
- {
944
- value: "purple",
945
- colorClass: "purple-color",
946
- label: g("Purple")
947
- },
948
- {
949
- value: "magenta",
950
- colorClass: "magenta-color",
951
- label: g("Magenta")
952
- },
953
- {
954
- value: "green",
955
- colorClass: "green-color",
956
- label: g("Green")
957
- },
958
- {
959
- value: "teal",
960
- colorClass: "teal-color",
961
- label: g("Teal")
962
- },
963
- {
964
- value: "blue",
965
- colorClass: "blue-color",
966
- label: g("Blue")
967
- }
968
- ],
969
- tooltipPlacement: "top"
970
- }) })] })]
971
- }), i.length > 0 && (0, s.jsx)("div", {
972
- className: "blocks-search__divider-wrapper",
973
- children: (0, s.jsx)("div", {
974
- className: "ant-divider ant-divider-horizontal",
975
- role: "separator"
976
- })
977
- })]
978
- }), (0, s.jsx)("div", {
979
- className: "serach-output-wrapper",
980
- style: { marginRight: -10 },
981
- children: i.length > 0 && (0, s.jsx)("div", {
982
- id: "scrollableDiv",
983
- style: {
984
- width: "100%",
985
- height: "calc(84vh - 148px)",
986
- overflow: "auto",
987
- paddingTop: 24,
988
- paddingRight: 14,
989
- paddingLeft: 24,
990
- marginLeft: -24,
991
- lineHeight: "0",
992
- boxSizing: "unset"
993
- },
994
- children: (0, s.jsx)(et, {
995
- dataLength: i && i.length,
996
- next: B,
997
- hasMore: i,
998
- endMessage: (0, s.jsxs)(d.Divider, {
999
- plain: !0,
1000
- children: [g("That`s all we could find."), " 🤐"]
1001
- }),
1002
- scrollableTarget: "scrollableDiv",
1003
- style: { overflow: "visible" },
1004
- loader: null,
1005
- children: (0, s.jsx)(Ne, {
1006
- breakpointCols: { default: 3 },
1007
- className: "my-masonry-grid",
1008
- columnClassName: "my-masonry-grid_column",
1009
- children: i.map((a) => (0, s.jsxs)("div", {
1010
- className: "list-item",
1011
- onClick: () => Y(a.urls, a.links, a.id),
1012
- children: [
1013
- (0, s.jsx)("img", {
1014
- className: Z === a.id ? "loaded-image" : "",
1015
- width: "322px",
1016
- src: S(a),
1017
- alt: a.description,
1018
- onLoad: _(a),
1019
- onError: X(a)
1020
- }),
1021
- (0, s.jsxs)("p", {
1022
- className: "creator-info",
1023
- onClick: (y) => y.stopPropagation(),
1024
- children: [
1025
- "Photo by",
1026
- " ",
1027
- (0, s.jsx)("a", {
1028
- target: "_blank",
1029
- href: `${a.user.links.html}?utm_source=${nt}&utm_medium=referral`,
1030
- rel: "noreferrer",
1031
- children: a.user.name
1032
- }),
1033
- " ",
1034
- "on",
1035
- " ",
1036
- (0, s.jsx)("a", {
1037
- target: "_blank",
1038
- href: `https://unsplash.com/?utm_source=${nt}&utm_medium=referral`,
1039
- rel: "noreferrer",
1040
- children: "Unsplash"
1041
- })
1042
- ]
1043
- }),
1044
- Z === a.id && (0, s.jsx)(d.Spin, {
1045
- className: "ant-spin",
1046
- size: "small"
1047
- })
1048
- ]
1049
- }, a.id))
1050
- })
1051
- })
1052
- })
1053
- })]
1054
- });
1055
- }, Mt = ({ images: r, transitionDuration: e = 1e3 }) => {
1056
- const [n, t] = (0, o.useState)([]);
1057
- return (0, o.useEffect)(() => {
1058
- if (r.length > 0) {
1059
- const i = r[r.length - 1];
1060
- t((l) => [...l, {
1061
- src: i,
1062
- opacity: 0
1063
- }]), setTimeout(() => {
1064
- t((l) => l.map((h, C) => C === l.length - 1 ? {
1065
- ...h,
1066
- opacity: 1
1067
- } : h));
1068
- }, 1e3);
1069
- }
1070
- }, [r]), (0, s.jsx)("div", {
1071
- className: "slideshow-container",
1072
- children: n.map((i, l) => (0, s.jsx)("img", {
1073
- src: `data:image/jpeg;base64, ${i.src}`,
1074
- alt: `Slide ${l + 1}`,
1075
- className: "slideshow-image",
1076
- style: {
1077
- opacity: i.opacity,
1078
- transition: `opacity ${e}ms linear`
1079
- }
1080
- }, l))
1081
- });
1082
- };
1083
- function Ut({ setModalHeight: r, customRequest: e, aiTabRef: n, isImageUploaded: t, setIsImageUploaded: i, aiImageRequest: l, imageAiList: h, setImageAiList: C, isLoadingAi: p, setIsLoadingAi: b, onPluginAiImageLimitExceeded: j, onImageGenerateLimitExceeded: m }) {
1084
- const { __: v } = d.useI18n(), A = f.useAppConfig(), w = d.useNotification(), T = f.usePushToDataLayer(), { emailId: g, blockId: L, projectId: E } = (0, Me.useParams)(), [F] = H.useLazySendAiImageRequestQuery(), [K, { data: k = [] }] = H.useLazyGetAiImageSSEQuery(), [B] = H.useLazyGetLimitsStatsByTypeQuery(), G = A?.sendAIImageRequest || F, Z = A?.trigger || K, O = A?.handleLimitUsageEmitter || f.useEventEmitter(f.events.ON_LIMIT_ID), [M, R] = (0, o.useState)(0), [S, z] = (0, o.useState)(null), [D, _] = (0, o.useState)(!1), [X, Y] = (0, o.useState)(v("Evaluating the task")), [a, y] = (0, o.useState)(!1), W = g || L, { limits: ue } = A?.limits ? A : { limits: { ai_img_limit: 0 } }, { ai_img_limit: $ } = ue, de = $ > 0 && M >= $, P = !!(A.limits && A.counters) && f.PLUGIN.isPlugin, J = (0, o.useCallback)(() => {
1085
- O.fire({
1086
- name: "AiImgCount",
1087
- count: M + 1
1088
- });
1089
- }, [O, M]), te = (0, o.useMemo)(() => !de && (!P || $ === 0 || M < $), [
1090
- de,
1091
- P,
1092
- M,
1093
- $
1094
- ]), Ae = (0, o.useCallback)(async () => {
1095
- Y(v("Evaluating the task")), l !== "" && !p && (b(!0), y(!0), C([]), T({
1096
- event: "submit_form",
1097
- action: "ai_image_generation",
1098
- entity_id: g,
1099
- project_id: E
1100
- }), G({ body: {
1101
- project_id: E,
1102
- request: "create-image",
1103
- connection: "midjourney",
1104
- message: l
1105
- } }).then(({ data: I, error: ne }) => {
1106
- if (ne) throw ne;
1107
- if (I.data.status === 401) throw new Error(f.ERROR);
1108
- I?.data.status === 200 ? (I?.data.task.id && (Y(I.data.task.message), z(I.data.task.id)), I.message && w.success({
1109
- id: "AI_IMAGE_SEND_SUCCESS",
1110
- title: I.message,
1111
- placement: "bottomRight",
1112
- data: l
1113
- }), Z({
1114
- task_id: I?.data.task.id,
1115
- entity_id: W
1116
- })) : (b(!1), y(!1), w.error({
1117
- id: "AI_IMAGE_SEND_ERROR",
1118
- title: I?.message || v("Something went wrong, please try again"),
1119
- placement: "bottomRight",
1120
- data: l,
1121
- innerException: I
1122
- }));
1123
- }).catch((I) => {
1124
- b(!1), y(!1), (I?.error || I?.data) && w.fromError("AI_IMAGE_SEND_ERROR", l, I.error || I);
1125
- }));
1126
- }, [
1127
- l,
1128
- p,
1129
- b,
1130
- y,
1131
- C,
1132
- T,
1133
- g,
1134
- E,
1135
- G,
1136
- w,
1137
- Z,
1138
- W,
1139
- v
1140
- ]), Re = (0, o.useCallback)(async () => {
1141
- if (te) {
1142
- if (!P) {
1143
- const I = U.resolveLimitActionPreflightExceededForType("image_generate", (await B("image_generate")).data?.stats);
1144
- if (I) {
1145
- m?.(I);
1146
- return;
1147
- }
1148
- }
1149
- P && (R((I) => I + 1), J()), Ae();
1150
- } else P && (j ? j() : w.error({
1151
- title: v("The usage limit has been exceeded"),
1152
- description: v(`The maximum number of requests for the current subscription period has been reached.
1153
- Select the appropriate plan to fulfil more requests`),
1154
- placement: "bottomRight"
1155
- }));
1156
- }, [
1157
- te,
1158
- P,
1159
- B,
1160
- m,
1161
- R,
1162
- J,
1163
- Ae,
1164
- w,
1165
- v,
1166
- j
1167
- ]);
1168
- (0, o.useEffect)(() => {
1169
- P && R(A?.counters?.ai_img_counter || 0);
1170
- }, [A, P]);
1171
- const ie = (0, o.useCallback)((I) => {
1172
- if (!t) {
1173
- i(!0);
1174
- try {
1175
- const ne = Xe(I);
1176
- e({ file: new File([ne], "image.jpeg", { type: ne.type || "image/jpeg" }) });
1177
- } catch {
1178
- i(!1);
1179
- }
1180
- }
1181
- }, [
1182
- t,
1183
- i,
1184
- e
1185
- ]), me = (0, o.useCallback)((I) => {
1186
- I.status !== "error" && I.status !== "Canceled" ? I.images ? (Y(I.status), I.progress === 100 && (C(I.images), Y(v("Evaluating the task")), z(null), y(!1))) : (C([I.data]), b(!1)) : (b(!1), y(!1), w.error({
1187
- id: "AI_IMAGE_GET_ERROR",
1188
- title: v("Something went wrong, please try again"),
1189
- placement: "bottomRight",
1190
- data: S
1191
- }));
1192
- }, [
1193
- C,
1194
- Y,
1195
- v,
1196
- b,
1197
- r,
1198
- S,
1199
- w,
1200
- y
1201
- ]);
1202
- return (0, o.useEffect)(() => {
1203
- k.length > 1 && me(k[k.length - 1]);
1204
- }, [k, me]), (0, o.useEffect)(() => {
1205
- (p || h.length > 0) && setTimeout(() => {
1206
- let I = 550;
1207
- n.current && (I = n.current.offsetHeight + 68), r(I);
1208
- }, 0);
1209
- }, [
1210
- n,
1211
- k,
1212
- h.length,
1213
- p,
1214
- r
1215
- ]), {
1216
- aiImageCounter: M,
1217
- setAiImageCounter: R,
1218
- currentAiImgLimits: $,
1219
- isFieldsDisabled: de,
1220
- canGenerateImage: te,
1221
- aiImageRequest: l,
1222
- imageAiList: h,
1223
- setImageAiList: C,
1224
- isLoadingAi: p,
1225
- setIsLoadingAi: b,
1226
- loadingDuringGeneration: a,
1227
- setLoadingDuringGeneration: y,
1228
- requestStatus: X,
1229
- setRequestStatus: Y,
1230
- handleGenerate: Re,
1231
- handleLimitAiImgCount: J,
1232
- convertBase64ToFile: ie,
1233
- isShiftPressed: D,
1234
- setIsShiftPressed: _,
1235
- currentReqId: S,
1236
- setCurrentReqId: z,
1237
- limitsInPlugin: P
1238
- };
1239
- }
1240
- var Pt = ({ setModalHeight: r, customRequest: e, aiTabRef: n, inputAiRef: t, isImageUploaded: i, setIsImageUploaded: l, aiImageRequest: h, setAiImageRequest: C, imageAiList: p, setImageAiList: b, isLoadingAi: j, setIsLoadingAi: m }) => {
1241
- const v = (0, Me.useNavigate)(), A = f.useDispatch(), { __: w, _n: T } = d.useI18n(), g = f.useAppConfig(), [L, E] = (0, o.useState)(!1), [F, K] = (0, o.useState)(null), { aiImageCounter: k, currentAiImgLimits: B, loadingDuringGeneration: G, requestStatus: Z, handleGenerate: O, convertBase64ToFile: M, isShiftPressed: R, setIsShiftPressed: S, limitsInPlugin: z } = Ut({
1242
- setModalHeight: r,
1243
- customRequest: e,
1244
- aiTabRef: n,
1245
- isImageUploaded: i,
1246
- setIsImageUploaded: l,
1247
- aiImageRequest: h,
1248
- imageAiList: p,
1249
- setImageAiList: b,
1250
- isLoadingAi: j,
1251
- setIsLoadingAi: m,
1252
- onPluginAiImageLimitExceeded: () => E(!0),
1253
- onImageGenerateLimitExceeded: K
1254
- }), D = L && B > 0 ? q.getAiTariffUpgradeStep(B) : null, _ = D ? U.getLimitUpgradePresetDefinition(D.presetId) : null, X = F ? U.getLimitUpgradePresetDefinition(F.presetId) : null, [Y, a] = (0, o.useState)(!1), y = (0, o.useCallback)(() => a(!0), []), W = (0, o.useCallback)(() => a(!1), []), ue = (0, o.useCallback)((J) => C(J.target.value), [C]), $ = (0, o.useCallback)((J) => {
1255
- J.key === "Shift" ? S(!0) : J.key === "Enter" && !R && (J.preventDefault(), O());
1256
- }, [
1257
- R,
1258
- O,
1259
- S
1260
- ]), de = (0, o.useCallback)((J) => {
1261
- J.key === "Shift" && S(!1);
1262
- }, [S]), P = p[p.length - 1];
1263
- return (0, s.jsxs)("div", {
1264
- className: "image-ai",
1265
- children: [
1266
- _ && D ? (0, s.jsx)(U.LimitUpgradeModal, {
1267
- open: !0,
1268
- onClose: () => E(!1),
1269
- title: w(_.titleKey),
1270
- subtitle: w(_.subtitleKey),
1271
- usageResource: _.usageResource,
1272
- previousDisplay: U.presetLimitDisplay(D.previousLimit),
1273
- nextDisplay: U.presetLimitDisplay(D.nextLimit),
1274
- onChangePlan: () => {
1275
- E(!1), document.body.classList.remove("editor"), v("/billing"), A(H.openModal(f.MODALS.SWITCH_TO_PLAN_MODAL));
1276
- }
1277
- }) : null,
1278
- X && F ? (0, s.jsx)(U.LimitUpgradeModal, {
1279
- open: !0,
1280
- onClose: () => K(null),
1281
- title: w(X.titleKey),
1282
- subtitle: w(X.subtitleKey),
1283
- usageResource: X.usageResource,
1284
- previousDisplay: U.presetLimitDisplay(F.previousLimit),
1285
- nextDisplay: U.presetLimitDisplay(F.nextLimit),
1286
- onChangePlan: () => {
1287
- K(null), document.body.classList.remove("editor"), v("/billing"), A(H.openModal(f.MODALS.SWITCH_TO_PLAN_MODAL));
1288
- }
1289
- }) : null,
1290
- z && (0, s.jsx)(d.LimitsCounter, {
1291
- text: `${k} ${w("of")} ${B > 0 ? B : "∞"} images ${T("was used", "were used", k)}`,
1292
- exceeded: B > 0 && k >= B,
1293
- style: { marginTop: -25 },
1294
- extra: (0, s.jsx)("span", {
1295
- style: {
1296
- textDecoration: "underline",
1297
- cursor: "pointer"
1298
- },
1299
- onClick: () => v(g.billingPageUrl || f.APP_ROUTES.billing),
1300
- children: w("Need more?")
1301
- })
1302
- }),
1303
- (0, s.jsx)(d.Row, {
1304
- gutter: 24,
1305
- className: "image-ai__row",
1306
- children: (0, s.jsx)(d.Col, {
1307
- span: 24,
1308
- children: (0, s.jsx)(d.Form.Item, {
1309
- style: { margin: 0 },
1310
- children: (0, s.jsxs)("span", {
1311
- className: `ant-input-affix-wrapper ant-input-affix-wrapper-lg image-ai__input-affix-wrapper${Y ? " ant-input-affix-wrapper-focused" : ""}`,
1312
- children: [(0, s.jsx)(d.TextArea, {
1313
- ref: t,
1314
- onKeyDown: $,
1315
- onKeyUp: de,
1316
- onFocus: y,
1317
- onBlur: W,
1318
- autoSize: !0,
1319
- allowClear: !0,
1320
- className: "text-area-input-hybrid image-ai__textarea",
1321
- placeholder: w("Generate image"),
1322
- value: h,
1323
- onChange: ue,
1324
- spellCheck: "false"
1325
- }), (0, s.jsx)("span", {
1326
- className: "ant-input-suffix image-ai__input-suffix",
1327
- children: j || G ? (0, s.jsx)(U.EmIcons, {
1328
- icon: "LoadingOutlined",
1329
- className: "input-icon image-ai__input-icon",
1330
- spin: !0
1331
- }) : (0, s.jsx)(U.EmIcons, {
1332
- icon: "AI",
1333
- className: "input-icon image-ai__input-icon",
1334
- onClick: O
1335
- })
1336
- })]
1337
- })
1338
- })
1339
- })
1340
- }),
1341
- (j || p.length > 0) && (0, s.jsxs)("div", {
1342
- className: "image-ai__preview",
1343
- children: [j && p.length === 0 && (0, s.jsx)("div", {
1344
- className: "image-ai__loading",
1345
- children: (0, s.jsxs)("div", {
1346
- className: "spin",
1347
- children: [(0, s.jsx)(U.EmIcons, {
1348
- icon: "LoadingOutlined",
1349
- style: { fontSize: 48 },
1350
- spin: !0
1351
- }), (0, s.jsx)("p", {
1352
- className: "status",
1353
- children: Z
1354
- })]
1355
- })
1356
- }), p.length > 0 && (0, s.jsxs)("div", {
1357
- className: "image-ai__image-item",
1358
- children: [(0, s.jsx)(Mt, { images: p }), (0, s.jsx)("div", {
1359
- className: "buttons",
1360
- children: (0, s.jsx)(d.Button, {
1361
- onClick: () => M(`data:image/jpeg;base64, ${P}`),
1362
- icon: (0, s.jsx)(U.EmIcons, { icon: "CheckOutlined" }),
1363
- children: w("Use this one")
1364
- })
1365
- })]
1366
- })]
1367
- })
1368
- ]
1369
- });
1370
- }, Nt = ({ setNewLink: r, setCurrentImageLink: e, setModalHeight: n, setModalWidth: t, setImageGifList: i, imageGifList: l, currentReqGif: h, setCurrentReqGif: C, inputRef: p, setStockLink: b, customRequest: j }) => {
1371
- const { __: m } = d.useI18n(), v = f.useAppConfig(), A = f.useIsStandalone(), w = d.useNotification(), [T, g] = (0, o.useState)(null), [L, E] = (0, o.useState)(!1), [F, K] = (0, o.useState)(25), [k] = H.useLazyGetSearchGifQuery(), B = (0, o.useCallback)((a) => a instanceof Error || typeof a?.message == "string" && a.message ? a.message : typeof a?.error?.message == "string" && a.error.message ? a.error.message : m("Failed to load GIFs through the configured proxy chain."), [m]), G = (0, o.useCallback)((a) => {
1372
- w.error({
1373
- id: "STOCK_GIFS_SEARCH_FAILED",
1374
- title: m("Failed to load GIFs"),
1375
- description: B(a)
1376
- });
1377
- }, [
1378
- m,
1379
- B,
1380
- w
1381
- ]), Z = async () => {
1382
- L || (E(!0), k({
1383
- query: h,
1384
- page: F
1385
- }).then((a) => {
1386
- if (a?.error) {
1387
- G(a.error), E(!1);
1388
- return;
1389
- }
1390
- i((y) => [...y, ...a.data.data]), E(!1), K((y) => y + 25);
1391
- }).catch(() => {
1392
- E(!1);
1393
- }));
1394
- }, O = async () => {
1395
- const a = await k({
1396
- query: h,
1397
- page: 0
1398
- });
1399
- if (a?.error) {
1400
- G(a.error), i([]);
1401
- return;
1402
- }
1403
- a?.data?.data?.length > 0 && (i(a.data.data), setTimeout(() => {
1404
- n("84vh"), t(1060);
1405
- }, 0));
1406
- }, M = (a, y) => {
1407
- g(y), setTimeout(() => {
1408
- g(null);
1409
- }, 2e3), b(`${a}`), e(`${a}`), j(`${a}`);
1410
- }, R = { default: 3 }, S = (0, o.useCallback)((a) => f.getProxiedUrl(a, {
1411
- config: v,
1412
- standalone: A,
1413
- resourceType: "generic",
1414
- intent: "display"
1415
- }), [v, A]), { getDisplaySrc: z, handleLoad: D, handleError: _ } = rt({
1416
- items: l,
1417
- getItemId: (0, o.useCallback)((a) => a.id, []),
1418
- getRequestUrl: (0, o.useCallback)((a) => a.images.downsized.url, []),
1419
- createController: S
1420
- }), X = (a) => (y) => {
1421
- D(a), y.target.parentNode.classList.add("loaded");
1422
- }, Y = (a) => () => {
1423
- _(a);
1424
- };
1425
- return (0, s.jsxs)("div", {
1426
- className: "stock-tab",
1427
- children: [(0, s.jsxs)(d.Form, {
1428
- onValuesChange: O,
1429
- className: l.length > 0 ? "serach-results" : "",
1430
- children: [(0, s.jsx)(d.Row, {
1431
- gutter: 24,
1432
- children: (0, s.jsx)(d.Col, {
1433
- span: l.length > 0 ? "" : 24,
1434
- children: (0, s.jsx)(d.Form.Item, {
1435
- className: "stock-search-input",
1436
- children: (0, s.jsx)(d.SearchInput, {
1437
- onSearch: O,
1438
- allowClear: !0,
1439
- size: l.length > 0 ? "medium" : "large",
1440
- placeholder: m("Search GIFs"),
1441
- value: h.keywords,
1442
- onChange: (a) => C((y) => ({
1443
- ...y,
1444
- keywords: a.target.value
1445
- })),
1446
- ref: p,
1447
- spellCheck: "false",
1448
- enterButton: !1
1449
- })
1450
- })
1451
- })
1452
- }), l.length > 0 && (0, s.jsx)("div", {
1453
- className: "blocks-search__divider-wrapper",
1454
- children: (0, s.jsx)("div", {
1455
- className: "ant-divider ant-divider-horizontal",
1456
- role: "separator"
1457
- })
1458
- })]
1459
- }), (0, s.jsx)("div", {
1460
- className: "serach-output-wrapper",
1461
- style: { marginRight: -10 },
1462
- children: l.length > 0 && (0, s.jsx)("div", {
1463
- id: "scrollableDiv",
1464
- style: {
1465
- width: "100%",
1466
- height: "calc(84vh - 148px)",
1467
- overflow: "auto",
1468
- paddingTop: 24,
1469
- paddingRight: 14,
1470
- paddingLeft: 24,
1471
- marginLeft: -24,
1472
- lineHeight: "0",
1473
- boxSizing: "unset"
1474
- },
1475
- children: (0, s.jsx)(et, {
1476
- dataLength: l && l.length,
1477
- next: Z,
1478
- hasMore: l,
1479
- endMessage: (0, s.jsxs)(d.Divider, {
1480
- plain: !0,
1481
- children: [m("That`s all we could find."), " 🤐"]
1482
- }),
1483
- scrollableTarget: "scrollableDiv",
1484
- style: { overflow: "visible" },
1485
- loader: (0, s.jsx)(d.Spin, { size: "small" }),
1486
- children: (0, s.jsx)(Ne, {
1487
- breakpointCols: R,
1488
- className: "my-masonry-grid",
1489
- columnClassName: "my-masonry-grid_column",
1490
- children: l.map((a, y) => (0, s.jsxs)("div", {
1491
- className: "list-item",
1492
- onClick: () => M(a.images.downsized.url, a.id),
1493
- children: [
1494
- (0, s.jsx)("img", {
1495
- className: T === a.id ? "loaded-image" : "",
1496
- width: "322px",
1497
- src: z(a),
1498
- alt: a.title,
1499
- onLoad: X(a),
1500
- onError: Y(a)
1501
- }),
1502
- (0, s.jsx)("a", {
1503
- rel: "noreferrer",
1504
- href: "https://giphy.com/",
1505
- target: "_blank",
1506
- onClick: (W) => W.stopPropagation(),
1507
- children: (0, s.jsx)("div", {
1508
- className: "overlay-image",
1509
- style: { backgroundImage: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAkCAYAAAB/up84AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABSBJREFUeNrsWjFv2zoQVoMW8BZ18xaN3qLRW9QtW9OtW92to98vaPoP3K1b1S1b3c2jvWlUNm3lw1s8Mpu3PAo4Iocr70jKlp0COuCQlpKPx/t43x1pv3h8fEwGeT5yNoTgeclLZvza6NgxXoNaGRktjE6MpjC2NVqh92bwt4HxBI1ro0s0dgN2tvD5a8a/9vkq0M+xYKdG81A7Gp6pyBjZddrnO6N36Hkbqyn8u4L3vYC0hjLHeAbPVhC4TwAK/ewNvLsEhyxgFXLK2l/D4tvnOVrUiPEh1k/JjvLYyWENdeTcKazBBr6AdY4AqBTmbkIzhO4gvMumYLxAYKzgPTvhBBajYNwCksHYhOyYiow1KONaKYlfO8bPEWyGEfi5Iu+Vjizg7EzB3xvwWTMxWkHG4mDnMF6BnSnYncLzHWGG4BqiwZkKQMC7I0cOVTCJhvRUKNgNCmCOxhNmrBEWzwGi0Y6rIihbsnOH/JgE2hshKrLZv4Px9yhj1twafRlid/UIGWvlFdlVLirIkIM12nETGLeO2tTPECBUZuT/a7JBMpSxUybYLjulUCN2iEpHQoyuGWZJUCa8R/VGSZvGB0iOdjAO9n8EtC2zUxICSIoW0ICTmA53DCDKQzWZg89XAXZ2B2iMavBnjDKpBX6B1tnAM5aqQgGhnU2D6GmHuqw7AkaOPmP/bsHpFC1kTLqVhglS6fFNgX1MCXUHO1zR1h5AFOoSc1jjmKx/An/1PoBQasBSoZZ3hpyaOrg0IW2sRkG8JsU8CaCaLckAhfi6AG0cmeuzkyMQMtL+SiySkY3oA/EgGeICK0UOZYQKVsQpDAjm2BpsaAGQLMKnMdok3yLtpKS70yT7OUBcm7UTHb5grk5y1Csrj40MqUbUpgW7NXo+RunckODkQvdXM37iwm7b1VA7lAaVB4jUUZOUIzNxfOougAwy3GUN0qWG2IJJ09V2NcvIFE8c54nQelEHFM6C6chUhI+WZjjffDQkrenPhqmlrAC9Naof/aLhXZeNNfMZOk+MtPOVRjNmTpfcCut0+biGZ3PBj1ywWTOfqV3v+yjLFuDPRs8Ddu05vLtmsuHQ0s73wehvR0t7aGkPevfCM5fcGr0MbOW9NSSFwF52cP5KcLIv+X4EUGbCemcOqpoz73/haE4CZNkRjAR20vwENXHRc2bWEMyQuUuGVe4hc6K6rBmg7pKN0XdGX7dts9E3Rr8afUATFl1PqgLAG6T3AoX1nSVtMP9l5r5FVyiu+D14/YssRHOheGVQYNMeinrhsMcV2WVPRR1rIRT4QmiA5r4G6oxp0y6ZzFh4LvhmB84MHz1xta9vWQMrcFR/3iF+7DmEu2YoyTshRbuMvGE9hnwGPQR1tdR04aCueKrqAIgiu/AqcCf1JXPhfuoYosGHn4Hgqa6AnCK4IfSkCa1eCJRxLGnn+mX0rfDOJok4AsQAUpwQlND2++HIgNiOVO1LVRIgtXDPs0bpunEU08vktHLMpoJS1/d9qEo6h6gAzq7RRaPV+QmBeICzUUh2fIHzk0s3HedXwkEy2ReQmjn4XDzDjqkN4D/J04/y/np5KbSrrtbwAyx+kTxdf9tfpvSZIW9O3FScHJAF8PEFc5F2lQzSi5wJheoG3U/t0xYOcgBAcOHuAkr7mY9ditoAiCz2q8uvEcD8gJpSDuGNl5hfnaTJ0/fpheMUr4CitHCO6fqdesj359xh1tWiqggfdUCmcz9ZivZ7+BnQM5P/BRgABx8sJWqTxoYAAAAASUVORK5CYII=)" }
1510
- })
1511
- }),
1512
- T === a.id && (0, s.jsx)(d.Spin, {
1513
- className: "ant-spin",
1514
- size: "small"
1515
- })
1516
- ]
1517
- }, a.id + y))
1518
- })
1519
- })
1520
- })
1521
- })]
1522
- });
1523
- };
1524
- function Ft(r) {
1525
- if (!(r == null || r === "")) return r;
1526
- }
1527
- async function Gt(r, e) {
1528
- if (r) {
1529
- if (r.url) return r.url;
1530
- if (typeof e.getFileById == "function" && r.id) {
1531
- const n = await e.getFileById(r.id);
1532
- if (n?.url) return n.url;
1533
- if (n?.thumbnailUrl) return n.thumbnailUrl;
1534
- if (n?.thumbnail) return n.thumbnail;
1535
- }
1536
- if (typeof e.getFileUrl == "function" && r.folderId !== void 0 && r.name) {
1537
- const n = await e.getFileUrl(r.folderId || "", r.name);
1538
- if (n) return n;
1539
- }
1540
- if (typeof e.getUrl == "function" && r.name) {
1541
- const n = await e.getUrl(r);
1542
- if (n) return n;
1543
- }
1544
- return r.thumbnail || r.thumbnailUrl;
1545
- }
1546
- }
1547
- function zt(r) {
1548
- if (!(!r?.success || !Array.isArray(r.detailed))) return r.detailed.find((e) => e?.success && e.data)?.data;
1549
- }
1550
- function Ht(r, e, n) {
1551
- if (r) return {
1552
- id: r.id,
1553
- name: r.name || e.name,
1554
- size: r.size ?? e.size,
1555
- type: r.type || e.type,
1556
- folderId: r.folderId ?? n ?? "",
1557
- url: r.url,
1558
- thumbnail: r.thumbnail,
1559
- thumbnailUrl: r.thumbnailUrl,
1560
- date: r.date,
1561
- dimensions: r.dimensions,
1562
- aspectRatio: r.aspectRatio,
1563
- extension: r.extension,
1564
- selected: r.selected,
1565
- isFolder: r.isFolder,
1566
- lastEdited: r.lastEdited,
1567
- childrenCount: r.childrenCount
1568
- };
1569
- }
1570
- async function Kt(r, e, n) {
1571
- if (!e) return;
1572
- const t = Ft(n ?? e.rootId);
1573
- let i;
1574
- typeof e.uploadFiles == "function" ? i = zt(await e.uploadFiles({
1575
- folderId: t,
1576
- items: [{
1577
- name: r.name,
1578
- size: r.size,
1579
- type: r.type,
1580
- folderId: t,
1581
- data: r
1582
- }]
1583
- })) : typeof e.uploadFile == "function" && (i = Ht(await e.uploadFile({
1584
- name: r.name,
1585
- size: r.size,
1586
- type: r.type,
1587
- folderId: t,
1588
- data: r
1589
- }), r, t));
1590
- const l = await Gt(i, e);
1591
- return l ? {
1592
- item: i,
1593
- url: l
1594
- } : void 0;
1595
- }
1596
- var st = "IMG", ot = "BACKGROUND", Wt = "GALLERY", he = "EDITOR", oe = "UPLOAD", Ge = "STOCK", ze = "GIF", He = "AI", _t = { mode: "select" }, Yt = { mode: "save" }, { Dragger: Vt } = d.Upload, Qt = (r, e = "image") => {
1597
- try {
1598
- const n = new URL(r).pathname.split("/").pop();
1599
- return n && decodeURIComponent(n) || e;
1600
- } catch {
1601
- return e;
1602
- }
1603
- }, be = q.normalizeImageFormatForDisplay, qt = (r, e) => {
1604
- const n = be(e);
1605
- return !n || r.includes(".") ? r : `${r}.${n}`;
1606
- }, Zt = (r, e) => new File([r], qt(Qt(e), r.type), { type: r.type || "application/octet-stream" }), at = ({ dataProvider: r }) => {
1607
- const e = f.useAppConfig(), n = f.useIsStandalone(), { __: t } = d.useI18n(), i = f.useDispatch(), { projectId: l } = (0, Me.useParams)(), [h] = H.useLazyGetImageInfoQuery(), { modal: C } = d.App.useApp(), p = d.useNotification(), b = f.useSelector(f.selectedIsUserPaySmth), j = f.useSelector(f.selectedCurrentUser), m = f.useSelector(H.selectActiveModal), { request: v, resolveImagePicker: A } = U.useImagePicker(), [w, T] = (0, o.useState)(""), [g, L] = (0, o.useState)(""), [E, F] = (0, o.useState)(""), [K, k] = (0, o.useState)(""), [B, G] = (0, o.useState)(oe), [Z, O] = (0, o.useState)({
1608
- width: "",
1609
- height: "",
1610
- size: "",
1611
- format: ""
1612
- }), [M, R] = (0, o.useState)("success"), [S, z] = (0, o.useState)(!1), D = o.default.useRef(null), _ = o.default.useRef(null), X = o.default.useRef(null), Y = o.default.useRef(null), a = o.default.useRef(null), y = o.default.useRef(null), W = o.default.useRef(null), ue = o.default.useRef(null), $ = o.default.useRef(null), [de, P] = (0, o.useState)("auto"), [J, te] = (0, o.useState)(572), [Ae, Re] = (0, o.useState)(!1), [ie, me] = (0, o.useState)({
1613
- keywords: "",
1614
- color: "",
1615
- orientation: ""
1616
- }), [I, ne] = (0, o.useState)({ keywords: "" }), [it, lt] = (0, o.useState)([]), [ct, ge] = (0, o.useState)([]), [ut, Xt] = (0, o.useState)([]), [dt, ft] = (0, o.useState)(!1), [pt, Ke] = (0, o.useState)(""), [Jt, Se] = (0, o.useState)(!1), [$t, Le] = (0, o.useState)(0), We = f.useSelector(f.selectProject), ht = We?.id !== void 0 ? String(We.id) : l || "", mt = f.useEventEmitter(f.events.UPLOAD_EVENT_ID), Ie = o.default.useRef(q.createImageUrlBlobResolver()), _e = o.default.useRef(""), fe = o.default.useRef(0), ye = o.default.useRef(""), [er, gt] = (0, o.useState)(""), [tr, yt] = (0, o.useState)(null), [rr, Ye] = (0, o.useState)(""), ke = (0, o.useCallback)((c) => {
1617
- if (!(c instanceof Blob)) return;
1618
- ye.current && URL.revokeObjectURL(ye.current);
1619
- const u = URL.createObjectURL(c);
1620
- ye.current = u, gt(u), yt(c);
1621
- }, []), ae = (0, o.useCallback)(() => {
1622
- ye.current && (URL.revokeObjectURL(ye.current), ye.current = ""), gt(""), yt(null);
1623
- }, []), re = (0, o.useCallback)(() => {
1624
- Ye("");
1625
- }, []);
1626
- let le = !(b || j.id?.toString() !== We?.members?.owner.ID);
1627
- const nr = (c) => {
1628
- L(c.target.value);
1629
- }, De = (0, o.useCallback)((c, u, x = t("The image could not be uploaded.")) => {
1630
- const N = u instanceof Error ? u.message : x;
1631
- p.error({
1632
- id: "IMAGE_UPLOAD_ERROR",
1633
- data: c,
1634
- title: t("Upload failed"),
1635
- description: N
1636
- });
1637
- }, [t, p]), sr = (0, o.useCallback)(async (c) => U.pickUploadImageUrlFromFireResults(await mt.fire({
1638
- file: c,
1639
- project: ht
1640
- })), [ht, mt]), xe = q.useImageBlobFetch(), Te = async (c) => {
1641
- if (c) try {
1642
- const u = await or(c);
1643
- u && Qe(u) ? await je({ file: u }) : u || De({ url: c }, null, t("Failed to download image from URL."));
1644
- } catch (u) {
1645
- De({ url: c }, u, t("Failed to process image URL."));
1646
- }
1647
- }, vt = o.default.useRef(Te);
1648
- vt.current = Te, o.default.useEffect(() => {
1649
- if (B !== oe || !K) return;
1650
- const c = g.trim();
1651
- if (!c || !c.toLowerCase().startsWith("http")) return;
1652
- const u = setTimeout(() => {
1653
- vt.current(c);
1654
- }, 1e3);
1655
- return () => {
1656
- clearTimeout(u);
1657
- };
1658
- }, [
1659
- g,
1660
- B,
1661
- K
1662
- ]);
1663
- const or = async (c) => {
1664
- try {
1665
- const u = q.canonicalImageUrlKey(c);
1666
- return Zt(await Ie.current.resolve(u, void 0, xe), u);
1667
- } catch {}
1668
- };
1669
- document.onpaste = function(c) {
1670
- const u = c.clipboardData?.items?.[0];
1671
- if (B === oe && K) {
1672
- if (u?.type?.indexOf("image") === 0 && e.imageCenterLocalUploadEnabled !== !1) {
1673
- const N = u.getAsFile();
1674
- Qe(N);
1675
- const Q = { file: N };
1676
- L(""), je(Q);
1677
- return;
1678
- }
1679
- const x = c.clipboardData?.getData("text/plain");
1680
- if (x && x.trim().toLowerCase().startsWith("http")) {
1681
- c.preventDefault(), c.stopPropagation(), L(x.trim());
1682
- return;
1683
- }
1684
- u?.type?.indexOf("text") === 0 && u.getAsString((N) => {
1685
- if (N.trim().toLowerCase().startsWith("http")) L(N.trim());
1686
- else if (N.toString().slice(1, 5) === "meta") {
1687
- const Q = N.toString().split("\"")[1];
1688
- Q && L(Q);
1689
- }
1690
- });
1691
- }
1692
- }, (0, o.useEffect)(() => {
1693
- const c = (u) => {
1694
- let x = null;
1695
- v?.kind === "background" ? (x = ot, k(ot)) : v?.kind === "img" && (k(st), x = st), v?.currentUrl && x && (T(v.currentUrl), G(u));
1696
- };
1697
- m === f.MODALS.UPLOAD_IMAGE_MODAL || m === f.MODALS.UPLOAD_BACKGROUND_MODAL ? c(he) : m === f.MODALS.UPLOAD_IMAGE_MODAL_AI || m === f.MODALS.UPLOAD_BACKGROUND_MODAL_AI ? (le ? (Se(!0), Le(2)) : c(He), setTimeout(() => $.current?.focus({ cursor: "start" }), 100)) : m === f.MODALS.UPLOAD_IMAGE_MODAL_UPLOAD || m === f.MODALS.UPLOAD_BACKGROUND_MODAL_UPLOAD ? (c(oe), setTimeout(() => y.current?.focus({ cursor: "start" }), 100)) : m === f.MODALS.UPLOAD_IMAGE_MODAL_STOCK || m === f.MODALS.UPLOAD_BACKGROUND_MODAL_STOCK ? (le ? (Se(!0), Le(3)) : c(Ge), setTimeout(() => ue.current?.focus({ cursor: "start" }), 100)) : m === f.MODALS.UPLOAD_IMAGE_MODAL_GIF || m === f.MODALS.UPLOAD_BACKGROUND_MODAL_GIF ? (le ? (Se(!0), Le(3)) : c(ze), setTimeout(() => W.current?.focus({ cursor: "start" }), 100)) : m === f.MODALS.UPLOAD_IMAGE_MODAL_EDIT || m === f.MODALS.UPLOAD_BACKGROUND_MODAL_EDIT ? (le ? (Se(!0), Le(5)) : c(he), i(H.openSecondModal(f.MODALS.IMAGE_EDITOR_MODAL))) : k("");
1698
- }, [
1699
- m,
1700
- i,
1701
- le,
1702
- v
1703
- ]);
1704
- const Ve = (0, o.useCallback)(({ url: c = w || "", meta: u = _t }) => {
1705
- T(c), A({
1706
- url: c,
1707
- meta: u
1708
- }), setTimeout(() => {
1709
- re(), ae(), me({
1710
- keywords: "",
1711
- color: "",
1712
- orientation: ""
1713
- }), ne({ keywords: "" }), ge([]), lt([]), k(""), Ke(""), ft(!1), F(""), L(""), G(oe);
1714
- }, 200), i(H.closeModal()), i(H.closeSecondModal());
1715
- }, [
1716
- w,
1717
- re,
1718
- i,
1719
- A,
1720
- ae
1721
- ]), Ct = (0, o.useCallback)((c, u) => (P("auto"), z(!1), Ve({
1722
- url: c,
1723
- meta: Yt
1724
- }), p.success({
1725
- id: "IMAGE_UPLOAD_SUCCESS",
1726
- data: u,
1727
- title: t("The image was successfully uploaded.")
1728
- }), c), [
1729
- t,
1730
- Ve,
1731
- p
1732
- ]);
1733
- (0, o.useEffect)(() => {
1734
- const c = g || E, u = q.canonicalImageUrlKey(c);
1735
- if (!c || !u) {
1736
- R(""), _e.current = "", re(), ae(), Ie.current.invalidateAll();
1737
- return;
1738
- }
1739
- const x = _e.current;
1740
- x && x !== u && (Ie.current.abandonKey(x), re(), ae()), _e.current = u;
1741
- const N = new AbortController(), Q = g ? 800 : 0, V = ++fe.current, qe = setTimeout(async () => {
1742
- try {
1743
- const ve = async () => {
1744
- const se = await Ie.current.resolve(u, N.signal, xe);
1745
- if (V !== fe.current) return;
1746
- const { width: ce, height: cr } = await q.getImageDimensionsFromBlob(se);
1747
- V === fe.current && (O({
1748
- width: ce,
1749
- height: cr,
1750
- size: (se.size / 1024).toFixed(2),
1751
- format: be(se.type)
1752
- }), re(), ke(se));
1753
- };
1754
- if (n) await ve();
1755
- else {
1756
- const se = await q.resolveDataProviderPreview(r, u);
1757
- if (se?.previewUrl && V === fe.current) {
1758
- Ye(se.previewUrl), ae();
1759
- try {
1760
- const { data: ce } = await h(u);
1761
- if (V !== fe.current) return;
1762
- ce ? O({
1763
- width: ce?.width,
1764
- height: ce?.height,
1765
- size: ce?.fileSize != null ? (ce.fileSize / 1024).toFixed(2) : "",
1766
- format: be(ce?.format)
1767
- }) : await ve();
1768
- } catch {
1769
- await ve();
1770
- }
1771
- } else await ve();
1772
- }
1773
- if (V !== fe.current) return;
1774
- R("success"), T(c), te(572), setTimeout(() => {
1775
- let se = 0;
1776
- _.current && (se = _.current.offsetHeight + 62), P(se);
1777
- }, 0);
1778
- } catch (ve) {
1779
- if (ve?.name === "AbortError" || N.signal.aborted || V !== fe.current) return;
1780
- re(), ae(), R("error");
1781
- }
1782
- }, Q);
1783
- return () => {
1784
- clearTimeout(qe), N.abort();
1785
- };
1786
- }, [
1787
- g,
1788
- E,
1789
- n,
1790
- re,
1791
- xe,
1792
- h,
1793
- ae,
1794
- r,
1795
- ke
1796
- ]), (0, o.useEffect)(() => {
1797
- if (!w || g || E) return;
1798
- const c = q.canonicalImageUrlKey(w), u = new AbortController();
1799
- let x = !1;
1800
- const N = async () => {
1801
- const Q = await Ie.current.resolve(c, u.signal, xe);
1802
- if (x) return;
1803
- const { width: V, height: qe } = await q.getImageDimensionsFromBlob(Q);
1804
- x || (re(), ke(Q), O({
1805
- width: V,
1806
- height: qe,
1807
- size: (Q.size / 1024).toFixed(2),
1808
- format: be(Q.type)
1809
- }));
1810
- };
1811
- return (async () => {
1812
- try {
1813
- if (!n) {
1814
- const Q = await q.resolveDataProviderPreview(r, c);
1815
- if (Q?.previewUrl && !x) {
1816
- Ye(Q.previewUrl), ae();
1817
- try {
1818
- const { data: V } = await h(c);
1819
- if (x) return;
1820
- V ? O({
1821
- width: V?.width,
1822
- height: V?.height,
1823
- size: V?.fileSize != null ? (V.fileSize / 1024).toFixed(2) : "",
1824
- format: be(V?.format)
1825
- }) : await N();
1826
- return;
1827
- } catch {
1828
- await N();
1829
- }
1830
- }
1831
- }
1832
- await N();
1833
- } catch {
1834
- x || re();
1835
- }
1836
- })(), () => {
1837
- x = !0, u.abort();
1838
- };
1839
- }, [
1840
- n,
1841
- re,
1842
- w,
1843
- xe,
1844
- h,
1845
- r,
1846
- g,
1847
- E,
1848
- ke
1849
- ]);
1850
- const ar = () => {
1851
- i(H.closeModal()), setTimeout(() => {
1852
- re(), ae(), T(""), L(""), ge([]), ge([]), me({
1853
- keywords: "",
1854
- color: "",
1855
- orientation: ""
1856
- }), ne({ keywords: "" }), P("auto"), !dt && Ke(""), te(572), G(oe);
1857
- }, 200);
1858
- }, ir = (c) => {
1859
- c === Wt ? C.success({
1860
- mask: { closable: !0 },
1861
- centered: !0,
1862
- title: t("Coming soon"),
1863
- content: t("The feature is under development."),
1864
- okText: t("Ok. I'll be waiting"),
1865
- onOk: () => {}
1866
- }) : c === he && w === "" ? C.warning({
1867
- mask: { closable: !0 },
1868
- centered: !0,
1869
- title: t(""),
1870
- content: t("To preview and edit the uploaded image"),
1871
- okText: t("Upload Image"),
1872
- onOk: () => {
1873
- G(oe);
1874
- }
1875
- }) : (setTimeout(() => {
1876
- let u = 0, x = 0;
1877
- c === oe && D.current ? (ie.keywords === "" && y.current?.focus({ cursor: "start" }), u = 300, x = 572) : c === he && _.current ? (u = _.current.offsetHeight + 62, x = 572) : c === Ge && X.current ? (ie.keywords === "" && ue.current?.focus({ cursor: "start" }), u = 130, x = 572, ct.length > 0 && (x = 1060, u = "84vh")) : c === ze && Y.current ? (ie.keywords === "" && W.current?.focus({ cursor: "start" }), u = 130, x = 572, it.length > 0 && (x = 1060, u = "84vh")) : c === He && a.current && (pt === "" && ut.length === 0 ? ($.current?.focus({ cursor: "start" }), u = 130) : u = a.current.offsetHeight + 82, x = 572), P(u), te(x);
1878
- }, 0), G(c));
1879
- };
1880
- (0, o.useEffect)(() => {
1881
- ie.keywords === "" && (y?.current?.focus({ cursor: "start" }), ge([]), setTimeout(() => {
1882
- P("auto"), te(572);
1883
- }, 0));
1884
- }, [
1885
- ie,
1886
- ge,
1887
- P,
1888
- te
1889
- ]);
1890
- const Qe = (c) => {
1891
- const u = c.type === "image/jpeg" || c.type === "image/png" || c.type === "image/jpg" || c.type === "image/webp" || c.type === "image/gif" || c.type === "image/svg+xml";
1892
- return u || p.error({
1893
- id: "IMAGE_UPLOAD_WRONG_FORMAT",
1894
- data: c,
1895
- title: "Upload",
1896
- description: "You can only upload JPG/JPEG/PNG/WEBP/GIF/SVG file!"
1897
- }), u;
1898
- }, je = async ({ file: c }) => {
1899
- try {
1900
- Re(!0);
1901
- const u = await q.prepareImageForEditorUpload(c, e), x = await sr(u);
1902
- if (x) return Ct(x, u), x;
1903
- const N = await Kt(u, r);
1904
- if (N?.url) return Ct(N.url, u), N.url;
1905
- De(u, null);
1906
- return;
1907
- } catch (u) {
1908
- De(c, u);
1909
- return;
1910
- } finally {
1911
- Re(!1);
1912
- }
1913
- }, lr = (c) => je({ file: c });
1914
- let Ee = [{
1915
- label: t("Upload"),
1916
- key: oe,
1917
- children: (0, s.jsxs)("div", {
1918
- ref: D,
1919
- style: { paddingBottom: 24 },
1920
- children: [e.imageCenterLocalUploadEnabled !== !1 && (0, s.jsxs)(Vt, {
1921
- showUploadList: !1,
1922
- name: "Image",
1923
- beforeUpload: Qe,
1924
- customRequest: je,
1925
- style: { marginBottom: 10 },
1926
- multiple: !1,
1927
- accept: "image/png, image/jpeg, image/jpg, image/webp, image/gif, image/svg+xml",
1928
- children: [
1929
- (0, s.jsx)("p", {
1930
- className: "ant-upload-drag-icon",
1931
- children: (0, s.jsx)(U.EmIcons, { icon: "InboxOutlined" })
1932
- }),
1933
- (0, s.jsx)("p", {
1934
- className: "ant-upload-text",
1935
- children: t("Click to select, paste from the clipboard, or drag and drop")
1936
- }),
1937
- (0, s.jsx)("p", {
1938
- className: "ant-upload-hint",
1939
- children: t("Accepted formats: PNG, JPG, WEBP, SVG or GIF.")
1940
- })
1941
- ]
1942
- }), (0, s.jsx)(d.Form, {
1943
- style: { padding: "0 2px 0 2px" },
1944
- children: (0, s.jsx)(d.Form.Item, {
1945
- validateStatus: M,
1946
- children: (0, s.jsx)(d.Input, {
1947
- ref: y,
1948
- allowClear: !0,
1949
- size: "large",
1950
- placeholder: t("Paste image URL here"),
1951
- value: g,
1952
- onChange: nr,
1953
- spellCheck: "false"
1954
- })
1955
- })
1956
- })]
1957
- })
1958
- }];
1959
- return e.imageCenterStockEnabled && !le && Ee.push({
1960
- label: t("Stock"),
1961
- key: Ge,
1962
- children: (0, s.jsx)("div", {
1963
- ref: X,
1964
- style: { paddingBottom: 24 },
1965
- children: (0, s.jsx)(Bt, {
1966
- currentReq: ie,
1967
- setCurrentReq: me,
1968
- imageStockList: ct,
1969
- setImageStockList: ge,
1970
- setModalWidth: te,
1971
- setModalHeight: P,
1972
- setStockLink: F,
1973
- setCurrentImageLink: T,
1974
- inputRef: ue,
1975
- customRequest: Te
1976
- })
1977
- })
1978
- }), e.imageCenterGifEnabled && !le && Ee.push({
1979
- label: t("GIF"),
1980
- key: ze,
1981
- children: (0, s.jsx)("div", {
1982
- ref: Y,
1983
- style: { paddingBottom: 24 },
1984
- children: (0, s.jsx)(Nt, {
1985
- currentReqGif: I,
1986
- setCurrentReqGif: ne,
1987
- imageGifList: it,
1988
- setImageGifList: lt,
1989
- setModalWidth: te,
1990
- setModalHeight: P,
1991
- setStockLink: F,
1992
- setCurrentImageLink: T,
1993
- inputRef: W,
1994
- customRequest: Te
1995
- })
1996
- })
1997
- }), e.elementAIimageEnabled && !le && Ee.push({
1998
- label: t("AI"),
1999
- key: He,
2000
- children: (0, s.jsx)("div", {
2001
- ref: a,
2002
- style: { paddingBottom: 24 },
2003
- children: (0, s.jsx)(Pt, {
2004
- setModalHeight: P,
2005
- customRequest: je,
2006
- aiImageRequest: pt,
2007
- setAiImageRequest: Ke,
2008
- imageAiList: ut,
2009
- setImageAiList: Xt,
2010
- isLoadingAi: dt,
2011
- setIsLoadingAi: ft,
2012
- aiTabRef: a,
2013
- inputAiRef: $,
2014
- isImageUploaded: S,
2015
- setIsImageUploaded: z
2016
- })
2017
- })
2018
- }), e.imageCenterEditorEnabled && Ee.push({
2019
- label: "",
2020
- key: he,
2021
- children: (0, s.jsx)("div", {
2022
- ref: _,
2023
- children: (0, s.jsx)(Et, {
2024
- currentImageLink: w,
2025
- newLink: g,
2026
- previewDisplayUrl: rr,
2027
- resolvedPreviewObjectUrl: er,
2028
- resolvedPreviewBlob: tr,
2029
- imageSize: Z,
2030
- onSave: lr,
2031
- uploadImageResultIsLoading: Ae || !1
2032
- })
2033
- })
2034
- }), (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(d.Modal, {
2035
- width: J,
2036
- className: "image-center",
2037
- title: t("Image Center"),
2038
- style: { minHeight: 390 },
2039
- open: !!K,
2040
- onOk: Ve,
2041
- onCancel: ar,
2042
- footer: B === he ? (0, s.jsx)(s.Fragment, {}) : null,
2043
- children: (0, s.jsx)(d.Spin, {
2044
- spinning: Ae,
2045
- children: (0, s.jsx)(d.Tabs, {
2046
- activeKey: B,
2047
- onChange: ir,
2048
- items: Ee,
2049
- className: "modal-tabs",
2050
- style: {
2051
- height: de,
2052
- minHeight: 130
2053
- }
2054
- })
2055
- })
2056
- }), (0, s.jsx)(U.ModalToChangeConfigOnFree, {
2057
- open: Jt,
2058
- onCancel: () => Se(!1),
2059
- initialSlide: $t
2060
- })] });
2061
- };
2062
- at.propTypes = { dataProvider: Be.default.object }, wt.default = at;
2063
- });