@pexelize/react-editor 1.0.4 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +574 -64
- package/dist/index.d.ts +201 -215
- package/dist/index.esm.js +110 -270
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +108 -269
- package/dist/index.js.map +1 -1
- package/package.json +7 -4
package/dist/index.js
CHANGED
|
@@ -5,321 +5,160 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var react = require('react');
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
// SDK CDN Configuration
|
|
10
|
-
// ============================================================================
|
|
11
|
-
/**
|
|
12
|
-
* Use Cloudflare CDN for SDK.
|
|
13
|
-
* You can use https://sdk.pexelize.com/latest/pexelize-sdk.min.js directly.
|
|
14
|
-
* No need to add a trailing slash or extra path—just use as shown.
|
|
15
|
-
*/
|
|
16
|
-
const SDK_CDN_URL = 'https://sdk.pexelize.com/latest/pexelize-sdk.min.js';
|
|
17
|
-
// Global SDK reference (loaded from CDN)
|
|
8
|
+
const SDK_CDN_URL = "https://sdk.pexelize.com/latest/pexelize-sdk.min.js";
|
|
18
9
|
let sdkLoadPromise = null;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
*/
|
|
22
|
-
function loadSDKFromCDN(url) {
|
|
23
|
-
if (sdkLoadPromise && window.pexelize) {
|
|
10
|
+
function loadSDK() {
|
|
11
|
+
if (sdkLoadPromise)
|
|
24
12
|
return sdkLoadPromise;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
if (window.pexelize) {
|
|
28
|
-
return Promise.resolve();
|
|
13
|
+
if (typeof window !== "undefined" && window.pexelize) {
|
|
14
|
+
return Promise.resolve(window.pexelize);
|
|
29
15
|
}
|
|
30
16
|
sdkLoadPromise = new Promise((resolve, reject) => {
|
|
31
|
-
const script = document.createElement(
|
|
32
|
-
script.src =
|
|
17
|
+
const script = document.createElement("script");
|
|
18
|
+
script.src = SDK_CDN_URL;
|
|
33
19
|
script.async = true;
|
|
34
20
|
script.onload = () => {
|
|
35
21
|
if (window.pexelize) {
|
|
36
|
-
|
|
37
|
-
resolve();
|
|
22
|
+
resolve(window.pexelize);
|
|
38
23
|
}
|
|
39
24
|
else {
|
|
40
|
-
|
|
25
|
+
sdkLoadPromise = null;
|
|
26
|
+
reject(new Error("Failed to load Pexelize SDK"));
|
|
41
27
|
}
|
|
42
28
|
};
|
|
43
29
|
script.onerror = () => {
|
|
44
30
|
sdkLoadPromise = null;
|
|
45
|
-
reject(new Error(
|
|
31
|
+
reject(new Error("Failed to load Pexelize SDK"));
|
|
46
32
|
};
|
|
47
33
|
document.head.appendChild(script);
|
|
48
34
|
});
|
|
49
35
|
return sdkLoadPromise;
|
|
50
36
|
}
|
|
51
|
-
/**
|
|
52
|
-
* Get SDK instance from global
|
|
53
|
-
*/
|
|
54
|
-
function getSDK() {
|
|
55
|
-
return window.pexelize;
|
|
56
|
-
}
|
|
57
|
-
// ============================================================================
|
|
58
|
-
// Component
|
|
59
|
-
// ============================================================================
|
|
60
|
-
/**
|
|
61
|
-
* PexelizeEditor React Component
|
|
62
|
-
*
|
|
63
|
-
* @example
|
|
64
|
-
* ```tsx
|
|
65
|
-
* import { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';
|
|
66
|
-
*
|
|
67
|
-
* function MyEditor() {
|
|
68
|
-
* const editorRef = useRef<PexelizeEditorRef>(null);
|
|
69
|
-
*
|
|
70
|
-
* const handleSave = () => {
|
|
71
|
-
* editorRef.current?.saveDesign((design) => {
|
|
72
|
-
* console.log('Design:', design);
|
|
73
|
-
* });
|
|
74
|
-
* };
|
|
75
|
-
*
|
|
76
|
-
* return (
|
|
77
|
-
* <div>
|
|
78
|
-
* <button onClick={handleSave}>Save</button>
|
|
79
|
-
* <PexelizeEditor
|
|
80
|
-
* ref={editorRef}
|
|
81
|
-
* editorMode="email"
|
|
82
|
-
* onReady={() => console.log('Ready!')}
|
|
83
|
-
* onChange={({ design }) => console.log('Changed:', design)}
|
|
84
|
-
* />
|
|
85
|
-
* </div>
|
|
86
|
-
* );
|
|
87
|
-
* }
|
|
88
|
-
* ```
|
|
89
|
-
*/
|
|
90
37
|
const PexelizeEditor = react.forwardRef((props, ref) => {
|
|
91
|
-
const {
|
|
38
|
+
const { editorId, apiKey, templateId, design, editorMode, contentType, ai, height, options = {}, className, style, minHeight = "600px", onReady, onLoad, onChange, onError, } = props;
|
|
92
39
|
const containerRef = react.useRef(null);
|
|
93
|
-
const
|
|
40
|
+
const editorInstanceRef = react.useRef(null);
|
|
94
41
|
const containerId = react.useRef(`pexelize-editor-${Math.random().toString(36).substr(2, 9)}`);
|
|
95
|
-
const
|
|
96
|
-
const
|
|
97
|
-
const
|
|
98
|
-
|
|
42
|
+
const eventUnsubscribersRef = react.useRef([]);
|
|
43
|
+
const onReadyRef = react.useRef(onReady);
|
|
44
|
+
const onLoadRef = react.useRef(onLoad);
|
|
45
|
+
const onChangeRef = react.useRef(onChange);
|
|
46
|
+
const onErrorRef = react.useRef(onError);
|
|
99
47
|
react.useEffect(() => {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
loadSDKFromCDN(url)
|
|
103
|
-
.then(() => setSdkLoaded(true))
|
|
104
|
-
.catch((err) => setError(err.message));
|
|
105
|
-
}, [props.sdkUrl]);
|
|
106
|
-
// Initialize SDK once loaded
|
|
48
|
+
onReadyRef.current = onReady;
|
|
49
|
+
}, [onReady]);
|
|
107
50
|
react.useEffect(() => {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
51
|
+
onLoadRef.current = onLoad;
|
|
52
|
+
}, [onLoad]);
|
|
53
|
+
react.useEffect(() => {
|
|
54
|
+
onChangeRef.current = onChange;
|
|
55
|
+
}, [onChange]);
|
|
56
|
+
react.useEffect(() => {
|
|
57
|
+
onErrorRef.current = onError;
|
|
58
|
+
}, [onError]);
|
|
59
|
+
const [isEditorReady, setIsEditorReady] = react.useState(false);
|
|
60
|
+
const handleReady = react.useCallback(() => {
|
|
61
|
+
setIsEditorReady(true);
|
|
62
|
+
if (editorInstanceRef.current) {
|
|
63
|
+
onReadyRef.current?.(editorInstanceRef.current);
|
|
114
64
|
}
|
|
115
|
-
|
|
116
|
-
sdkRef.current = pexelize;
|
|
117
|
-
// Initialize
|
|
118
|
-
pexelize.init({
|
|
119
|
-
id: containerId.current,
|
|
120
|
-
editorMode: editorMode || displayMode || 'email',
|
|
121
|
-
...config,
|
|
122
|
-
});
|
|
123
|
-
// Clean up on unmount
|
|
124
|
-
return () => {
|
|
125
|
-
pexelize.destroy();
|
|
126
|
-
sdkRef.current = null;
|
|
127
|
-
setIsEditorReady(false);
|
|
128
|
-
};
|
|
129
|
-
}, [sdkLoaded]);
|
|
130
|
-
// Handle ready event
|
|
65
|
+
}, []);
|
|
131
66
|
react.useEffect(() => {
|
|
132
|
-
|
|
133
|
-
if (!sdk)
|
|
67
|
+
if (!containerRef.current)
|
|
134
68
|
return;
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
69
|
+
let mounted = true;
|
|
70
|
+
const initEditor = async () => {
|
|
71
|
+
try {
|
|
72
|
+
const pexelize = await loadSDK();
|
|
73
|
+
if (!mounted)
|
|
74
|
+
return;
|
|
75
|
+
const editorConfig = contentType === "module"
|
|
76
|
+
? { ...options.editor, contentType, minRows: 1, maxRows: 1 }
|
|
77
|
+
: options.editor;
|
|
78
|
+
const config = {
|
|
79
|
+
containerId: containerId.current,
|
|
80
|
+
editorId,
|
|
81
|
+
apiKey,
|
|
82
|
+
...options,
|
|
83
|
+
...(templateId !== undefined && { templateId }),
|
|
84
|
+
...(design !== undefined && { design }),
|
|
85
|
+
...(editorMode !== undefined && { editorMode }),
|
|
86
|
+
...(ai !== undefined && { ai }),
|
|
87
|
+
...(editorConfig && { editor: editorConfig }),
|
|
88
|
+
};
|
|
89
|
+
pexelize.init(config);
|
|
90
|
+
editorInstanceRef.current = pexelize;
|
|
91
|
+
const unsubscribeReady = pexelize.addEventListener("editor:ready", handleReady);
|
|
92
|
+
eventUnsubscribersRef.current.push(unsubscribeReady);
|
|
93
|
+
const unsubscribeLoad = pexelize.addEventListener("design:loaded", () => onLoadRef.current?.());
|
|
94
|
+
eventUnsubscribersRef.current.push(unsubscribeLoad);
|
|
95
|
+
const unsubscribeChange = pexelize.addEventListener("design:updated", (data) => onChangeRef.current?.(data));
|
|
96
|
+
eventUnsubscribersRef.current.push(unsubscribeChange);
|
|
144
97
|
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
98
|
+
catch (err) {
|
|
99
|
+
if (!mounted)
|
|
100
|
+
return;
|
|
101
|
+
const error = err instanceof Error ? err : new Error(String(err));
|
|
102
|
+
onErrorRef.current?.(error);
|
|
148
103
|
}
|
|
149
|
-
// Call onReady callback
|
|
150
|
-
onReady?.();
|
|
151
104
|
};
|
|
152
|
-
|
|
153
|
-
return unsubscribe;
|
|
154
|
-
}, [sdkLoaded, design, mergeTags, displayConditions, onReady]);
|
|
155
|
-
// Handle design loaded event
|
|
156
|
-
react.useEffect(() => {
|
|
157
|
-
const sdk = sdkRef.current;
|
|
158
|
-
if (!sdk || !onLoad)
|
|
159
|
-
return;
|
|
160
|
-
const unsubscribe = sdk.addEventListener('design:loaded', onLoad);
|
|
161
|
-
return unsubscribe;
|
|
162
|
-
}, [sdkLoaded, onLoad]);
|
|
163
|
-
// Handle design updated event
|
|
164
|
-
react.useEffect(() => {
|
|
165
|
-
const sdk = sdkRef.current;
|
|
166
|
-
if (!sdk || !onChange)
|
|
167
|
-
return;
|
|
168
|
-
const unsubscribe = sdk.addEventListener('design:updated', onChange);
|
|
169
|
-
return unsubscribe;
|
|
170
|
-
}, [sdkLoaded, onChange]);
|
|
171
|
-
// Handle content modified event
|
|
172
|
-
react.useEffect(() => {
|
|
173
|
-
const sdk = sdkRef.current;
|
|
174
|
-
if (!sdk || !onContentModified)
|
|
175
|
-
return;
|
|
176
|
-
const unsubscribe = sdk.addEventListener('content:modified', onContentModified);
|
|
177
|
-
return unsubscribe;
|
|
178
|
-
}, [sdkLoaded, onContentModified]);
|
|
179
|
-
// Handle element selected event
|
|
180
|
-
react.useEffect(() => {
|
|
181
|
-
const sdk = sdkRef.current;
|
|
182
|
-
if (!sdk || !onSelect)
|
|
183
|
-
return;
|
|
184
|
-
const unsubscribe = sdk.addEventListener('element:selected', onSelect);
|
|
185
|
-
return unsubscribe;
|
|
186
|
-
}, [sdkLoaded, onSelect]);
|
|
187
|
-
// Handle element deselected event
|
|
188
|
-
react.useEffect(() => {
|
|
189
|
-
const sdk = sdkRef.current;
|
|
190
|
-
if (!sdk || !onDeselect)
|
|
191
|
-
return;
|
|
192
|
-
const unsubscribe = sdk.addEventListener('element:deselected', onDeselect);
|
|
193
|
-
return unsubscribe;
|
|
194
|
-
}, [sdkLoaded, onDeselect]);
|
|
195
|
-
// Register callbacks
|
|
196
|
-
react.useEffect(() => {
|
|
197
|
-
const sdk = sdkRef.current;
|
|
198
|
-
if (!sdk)
|
|
199
|
-
return;
|
|
200
|
-
if (onImage) {
|
|
201
|
-
sdk.registerCallback('image', onImage);
|
|
202
|
-
}
|
|
203
|
-
if (onLinkClick) {
|
|
204
|
-
sdk.registerCallback('linkClick', onLinkClick);
|
|
205
|
-
}
|
|
206
|
-
if (onSave) {
|
|
207
|
-
sdk.registerCallback('save', onSave);
|
|
208
|
-
}
|
|
105
|
+
initEditor();
|
|
209
106
|
return () => {
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
107
|
+
mounted = false;
|
|
108
|
+
eventUnsubscribersRef.current.forEach((unsub) => {
|
|
109
|
+
try {
|
|
110
|
+
unsub();
|
|
111
|
+
}
|
|
112
|
+
catch {
|
|
113
|
+
// ignore
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
eventUnsubscribersRef.current = [];
|
|
117
|
+
try {
|
|
118
|
+
editorInstanceRef.current?.destroy();
|
|
214
119
|
}
|
|
120
|
+
catch {
|
|
121
|
+
// ignore
|
|
122
|
+
}
|
|
123
|
+
editorInstanceRef.current = null;
|
|
124
|
+
setIsEditorReady(false);
|
|
215
125
|
};
|
|
216
|
-
}, [
|
|
217
|
-
// Expose SDK methods via ref
|
|
126
|
+
}, [editorId, apiKey, handleReady]);
|
|
218
127
|
react.useImperativeHandle(ref, () => ({
|
|
219
|
-
|
|
220
|
-
loadBlank: () => sdkRef.current?.loadBlank(),
|
|
221
|
-
saveDesign: (callback) => sdkRef.current?.saveDesign(callback),
|
|
222
|
-
getDesign: () => sdkRef.current?.getDesign(),
|
|
223
|
-
exportHtml: (callback) => sdkRef.current?.exportHtml(callback),
|
|
224
|
-
exportHtmlAsync: () => sdkRef.current?.exportHtmlAsync(),
|
|
225
|
-
save: () => sdkRef.current?.save(),
|
|
226
|
-
undo: () => sdkRef.current?.undo(),
|
|
227
|
-
redo: () => sdkRef.current?.redo(),
|
|
228
|
-
getState: () => sdkRef.current?.getState(),
|
|
128
|
+
editor: editorInstanceRef.current,
|
|
229
129
|
isReady: () => isEditorReady,
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
// Compute styles
|
|
130
|
+
}), [isEditorReady]);
|
|
131
|
+
const effectiveHeight = height ?? minHeight;
|
|
233
132
|
const containerStyle = {
|
|
234
|
-
width:
|
|
235
|
-
height: typeof
|
|
133
|
+
width: "100%",
|
|
134
|
+
height: typeof effectiveHeight === "number"
|
|
135
|
+
? `${effectiveHeight}px`
|
|
136
|
+
: effectiveHeight,
|
|
236
137
|
...style,
|
|
237
138
|
};
|
|
238
|
-
|
|
239
|
-
if (error) {
|
|
240
|
-
return (jsxRuntime.jsx("div", { style: { ...containerStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fee', color: '#c00' }, children: jsxRuntime.jsxs("div", { style: { textAlign: 'center' }, children: [jsxRuntime.jsx("div", { style: { fontSize: '24px', marginBottom: '8px' }, children: "\u26A0\uFE0F" }), jsxRuntime.jsx("div", { children: "Failed to load Pexelize Editor" }), jsxRuntime.jsx("div", { style: { fontSize: '12px', marginTop: '4px' }, children: error })] }) }));
|
|
241
|
-
}
|
|
242
|
-
// Show loading state
|
|
243
|
-
if (!sdkLoaded) {
|
|
244
|
-
return (jsxRuntime.jsx("div", { style: { ...containerStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f5f5f5' }, children: jsxRuntime.jsxs("div", { style: { textAlign: 'center' }, children: [jsxRuntime.jsx("div", { style: { fontSize: '24px', marginBottom: '8px' }, children: "\u23F3" }), jsxRuntime.jsx("div", { children: "Loading Pexelize Editor..." })] }) }));
|
|
245
|
-
}
|
|
246
|
-
return (jsxRuntime.jsx("div", { id: containerId.current, ref: containerRef, className: className, style: containerStyle }));
|
|
139
|
+
return (jsxRuntime.jsx("div", { className: className, style: containerStyle, children: jsxRuntime.jsx("div", { id: containerId.current, ref: containerRef, style: { width: "100%", height: "100%" } }) }));
|
|
247
140
|
});
|
|
248
|
-
PexelizeEditor.displayName =
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
*
|
|
252
|
-
* @example
|
|
253
|
-
* ```tsx
|
|
254
|
-
* function MyComponent() {
|
|
255
|
-
* const { sdk, isReady, error } = usePexelizeSDK({
|
|
256
|
-
* containerId: 'my-editor',
|
|
257
|
-
* editorMode: 'email',
|
|
258
|
-
* });
|
|
259
|
-
*
|
|
260
|
-
* const handleExport = () => {
|
|
261
|
-
* if (isReady && sdk) {
|
|
262
|
-
* sdk.exportHtml((data) => console.log(data.html));
|
|
263
|
-
* }
|
|
264
|
-
* };
|
|
265
|
-
*
|
|
266
|
-
* return (
|
|
267
|
-
* <div>
|
|
268
|
-
* <div id="my-editor" style={{ height: '600px' }} />
|
|
269
|
-
* <button onClick={handleExport} disabled={!isReady}>Export</button>
|
|
270
|
-
* </div>
|
|
271
|
-
* );
|
|
272
|
-
* }
|
|
273
|
-
* ```
|
|
274
|
-
*/
|
|
275
|
-
function usePexelizeSDK(config) {
|
|
276
|
-
const sdkRef = react.useRef(null);
|
|
141
|
+
PexelizeEditor.displayName = "PexelizeEditor";
|
|
142
|
+
function usePexelizeEditor() {
|
|
143
|
+
const ref = react.useRef(null);
|
|
277
144
|
const [isReady, setIsReady] = react.useState(false);
|
|
278
|
-
const [sdkLoaded, setSdkLoaded] = react.useState(false);
|
|
279
|
-
const [error, setError] = react.useState(null);
|
|
280
|
-
// Load SDK from CDN
|
|
281
145
|
react.useEffect(() => {
|
|
282
|
-
|
|
283
|
-
.
|
|
284
|
-
|
|
285
|
-
}, []);
|
|
286
|
-
// Initialize SDK
|
|
287
|
-
react.useEffect(() => {
|
|
288
|
-
if (!sdkLoaded)
|
|
289
|
-
return;
|
|
290
|
-
const pexelize = getSDK();
|
|
291
|
-
if (!pexelize) {
|
|
292
|
-
setError('Pexelize SDK not found');
|
|
293
|
-
return;
|
|
294
|
-
}
|
|
295
|
-
sdkRef.current = pexelize;
|
|
296
|
-
pexelize.init({
|
|
297
|
-
id: config.containerId,
|
|
298
|
-
editorMode: config.editorMode || config.displayMode || 'email',
|
|
299
|
-
...config,
|
|
300
|
-
});
|
|
301
|
-
const unsubscribe = pexelize.addEventListener('editor:ready', () => {
|
|
302
|
-
setIsReady(true);
|
|
303
|
-
});
|
|
304
|
-
return () => {
|
|
305
|
-
unsubscribe();
|
|
306
|
-
pexelize.destroy();
|
|
307
|
-
sdkRef.current = null;
|
|
308
|
-
setIsReady(false);
|
|
146
|
+
const checkReady = () => {
|
|
147
|
+
const ready = ref.current?.isReady() ?? false;
|
|
148
|
+
setIsReady(ready);
|
|
309
149
|
};
|
|
310
|
-
|
|
150
|
+
checkReady();
|
|
151
|
+
const interval = setInterval(checkReady, 100);
|
|
152
|
+
return () => clearInterval(interval);
|
|
153
|
+
}, []);
|
|
311
154
|
return {
|
|
312
|
-
|
|
155
|
+
ref,
|
|
156
|
+
editor: ref.current?.editor ?? null,
|
|
313
157
|
isReady,
|
|
314
|
-
isLoading: !sdkLoaded && !error,
|
|
315
|
-
error,
|
|
316
158
|
};
|
|
317
159
|
}
|
|
318
|
-
// Export SDK CDN URL for reference
|
|
319
|
-
const PEXELIZE_SDK_CDN = SDK_CDN_URL;
|
|
320
160
|
|
|
321
|
-
exports.PEXELIZE_SDK_CDN = PEXELIZE_SDK_CDN;
|
|
322
161
|
exports.PexelizeEditor = PexelizeEditor;
|
|
323
162
|
exports.default = PexelizeEditor;
|
|
324
|
-
exports.
|
|
163
|
+
exports.usePexelizeEditor = usePexelizeEditor;
|
|
325
164
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":[null],"names":["forwardRef","useRef","useState","
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":[null],"names":["forwardRef","useRef","useEffect","useState","useCallback","useImperativeHandle","_jsx"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pexelize/react-editor",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"description": "React wrapper component for the Pexelize Editor",
|
|
5
|
+
"description": "React wrapper component for the Pexelize Editor - thin wrapper that exposes raw SDK for maximum flexibility",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.esm.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -35,8 +35,10 @@
|
|
|
35
35
|
"react",
|
|
36
36
|
"react-component",
|
|
37
37
|
"template-editor",
|
|
38
|
-
"
|
|
39
|
-
"
|
|
38
|
+
"template-builder",
|
|
39
|
+
"drag-and-drop",
|
|
40
|
+
"web page builder",
|
|
41
|
+
"page-builder"
|
|
40
42
|
],
|
|
41
43
|
"author": "Pexelize",
|
|
42
44
|
"license": "MIT",
|
|
@@ -72,6 +74,7 @@
|
|
|
72
74
|
"eslint": "^8.55.0",
|
|
73
75
|
"react": "^18.2.0",
|
|
74
76
|
"react-dom": "^18.2.0",
|
|
77
|
+
"rimraf": "^5.0.5",
|
|
75
78
|
"rollup": "^4.9.0",
|
|
76
79
|
"rollup-plugin-dts": "^6.1.0",
|
|
77
80
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|