@pexelize/react-editor 1.0.5 → 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 +111 -304
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +109 -303
- package/dist/index.js.map +1 -1
- package/package.json +7 -4
package/dist/index.js
CHANGED
|
@@ -5,354 +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
|
-
/**
|
|
23
|
-
* Check if SDK is available at the global scope
|
|
24
|
-
* UMD build creates window.PexelizeSDK namespace with:
|
|
25
|
-
* - PexelizeSDK: the class constructor
|
|
26
|
-
* - pexelize: the singleton instance
|
|
27
|
-
*/
|
|
28
|
-
function isSDKAvailable() {
|
|
29
|
-
const win = window;
|
|
30
|
-
// Check for UMD namespace (window.PexelizeSDK.pexelize)
|
|
31
|
-
if (win.PexelizeSDK && win.PexelizeSDK.pexelize) {
|
|
32
|
-
return true;
|
|
33
|
-
}
|
|
34
|
-
// Fallback: check for direct pexelize global (legacy)
|
|
35
|
-
if (win.pexelize) {
|
|
36
|
-
return true;
|
|
37
|
-
}
|
|
38
|
-
return false;
|
|
39
|
-
}
|
|
40
|
-
function loadSDKFromCDN(url) {
|
|
41
|
-
if (sdkLoadPromise && isSDKAvailable()) {
|
|
10
|
+
function loadSDK() {
|
|
11
|
+
if (sdkLoadPromise)
|
|
42
12
|
return sdkLoadPromise;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
if (isSDKAvailable()) {
|
|
46
|
-
return Promise.resolve();
|
|
13
|
+
if (typeof window !== "undefined" && window.pexelize) {
|
|
14
|
+
return Promise.resolve(window.pexelize);
|
|
47
15
|
}
|
|
48
16
|
sdkLoadPromise = new Promise((resolve, reject) => {
|
|
49
|
-
const script = document.createElement(
|
|
50
|
-
script.src =
|
|
17
|
+
const script = document.createElement("script");
|
|
18
|
+
script.src = SDK_CDN_URL;
|
|
51
19
|
script.async = true;
|
|
52
20
|
script.onload = () => {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
console.log('[Pexelize React] SDK loaded from CDN');
|
|
56
|
-
resolve();
|
|
21
|
+
if (window.pexelize) {
|
|
22
|
+
resolve(window.pexelize);
|
|
57
23
|
}
|
|
58
24
|
else {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
console.error('[Pexelize React] window.PexelizeSDK:', window.PexelizeSDK);
|
|
62
|
-
console.error('[Pexelize React] window.pexelize:', window.pexelize);
|
|
63
|
-
reject(new Error('SDK loaded but pexelize global not found. Check CDN URL and SDK build.'));
|
|
25
|
+
sdkLoadPromise = null;
|
|
26
|
+
reject(new Error("Failed to load Pexelize SDK"));
|
|
64
27
|
}
|
|
65
28
|
};
|
|
66
29
|
script.onerror = () => {
|
|
67
30
|
sdkLoadPromise = null;
|
|
68
|
-
reject(new Error(
|
|
31
|
+
reject(new Error("Failed to load Pexelize SDK"));
|
|
69
32
|
};
|
|
70
33
|
document.head.appendChild(script);
|
|
71
34
|
});
|
|
72
35
|
return sdkLoadPromise;
|
|
73
36
|
}
|
|
74
|
-
/**
|
|
75
|
-
* Get SDK singleton instance from global
|
|
76
|
-
* Handles both UMD namespace (window.PexelizeSDK.pexelize) and legacy (window.pexelize)
|
|
77
|
-
*/
|
|
78
|
-
function getSDK() {
|
|
79
|
-
const win = window;
|
|
80
|
-
// UMD namespace: window.PexelizeSDK.pexelize (preferred)
|
|
81
|
-
if (win.PexelizeSDK && win.PexelizeSDK.pexelize) {
|
|
82
|
-
return win.PexelizeSDK.pexelize;
|
|
83
|
-
}
|
|
84
|
-
// Fallback: direct pexelize global (legacy)
|
|
85
|
-
if (win.pexelize) {
|
|
86
|
-
return win.pexelize;
|
|
87
|
-
}
|
|
88
|
-
return null;
|
|
89
|
-
}
|
|
90
|
-
// ============================================================================
|
|
91
|
-
// Component
|
|
92
|
-
// ============================================================================
|
|
93
|
-
/**
|
|
94
|
-
* PexelizeEditor React Component
|
|
95
|
-
*
|
|
96
|
-
* @example
|
|
97
|
-
* ```tsx
|
|
98
|
-
* import { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';
|
|
99
|
-
*
|
|
100
|
-
* function MyEditor() {
|
|
101
|
-
* const editorRef = useRef<PexelizeEditorRef>(null);
|
|
102
|
-
*
|
|
103
|
-
* const handleSave = () => {
|
|
104
|
-
* editorRef.current?.saveDesign((design) => {
|
|
105
|
-
* console.log('Design:', design);
|
|
106
|
-
* });
|
|
107
|
-
* };
|
|
108
|
-
*
|
|
109
|
-
* return (
|
|
110
|
-
* <div>
|
|
111
|
-
* <button onClick={handleSave}>Save</button>
|
|
112
|
-
* <PexelizeEditor
|
|
113
|
-
* ref={editorRef}
|
|
114
|
-
* editorMode="email"
|
|
115
|
-
* onReady={() => console.log('Ready!')}
|
|
116
|
-
* onChange={({ design }) => console.log('Changed:', design)}
|
|
117
|
-
* />
|
|
118
|
-
* </div>
|
|
119
|
-
* );
|
|
120
|
-
* }
|
|
121
|
-
* ```
|
|
122
|
-
*/
|
|
123
37
|
const PexelizeEditor = react.forwardRef((props, ref) => {
|
|
124
|
-
const {
|
|
38
|
+
const { editorId, apiKey, templateId, design, editorMode, contentType, ai, height, options = {}, className, style, minHeight = "600px", onReady, onLoad, onChange, onError, } = props;
|
|
125
39
|
const containerRef = react.useRef(null);
|
|
126
|
-
const
|
|
40
|
+
const editorInstanceRef = react.useRef(null);
|
|
127
41
|
const containerId = react.useRef(`pexelize-editor-${Math.random().toString(36).substr(2, 9)}`);
|
|
128
|
-
const
|
|
129
|
-
const
|
|
130
|
-
const
|
|
131
|
-
|
|
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);
|
|
132
47
|
react.useEffect(() => {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
loadSDKFromCDN(url)
|
|
136
|
-
.then(() => setSdkLoaded(true))
|
|
137
|
-
.catch((err) => setError(err.message));
|
|
138
|
-
}, [props.sdkUrl]);
|
|
139
|
-
// Initialize SDK once loaded
|
|
48
|
+
onReadyRef.current = onReady;
|
|
49
|
+
}, [onReady]);
|
|
140
50
|
react.useEffect(() => {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
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);
|
|
147
64
|
}
|
|
148
|
-
|
|
149
|
-
sdkRef.current = pexelize;
|
|
150
|
-
// Initialize
|
|
151
|
-
pexelize.init({
|
|
152
|
-
id: containerId.current,
|
|
153
|
-
editorMode: editorMode || displayMode || 'email',
|
|
154
|
-
...config,
|
|
155
|
-
});
|
|
156
|
-
// Clean up on unmount
|
|
157
|
-
return () => {
|
|
158
|
-
pexelize.destroy();
|
|
159
|
-
sdkRef.current = null;
|
|
160
|
-
setIsEditorReady(false);
|
|
161
|
-
};
|
|
162
|
-
}, [sdkLoaded]);
|
|
163
|
-
// Handle ready event
|
|
65
|
+
}, []);
|
|
164
66
|
react.useEffect(() => {
|
|
165
|
-
|
|
166
|
-
if (!sdk)
|
|
67
|
+
if (!containerRef.current)
|
|
167
68
|
return;
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
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);
|
|
173
97
|
}
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
98
|
+
catch (err) {
|
|
99
|
+
if (!mounted)
|
|
100
|
+
return;
|
|
101
|
+
const error = err instanceof Error ? err : new Error(String(err));
|
|
102
|
+
onErrorRef.current?.(error);
|
|
177
103
|
}
|
|
178
|
-
// Load initial design if provided
|
|
179
|
-
if (design) {
|
|
180
|
-
sdk.loadDesign(design);
|
|
181
|
-
}
|
|
182
|
-
// Call onReady callback
|
|
183
|
-
onReady?.();
|
|
184
104
|
};
|
|
185
|
-
|
|
186
|
-
return unsubscribe;
|
|
187
|
-
}, [sdkLoaded, design, mergeTags, displayConditions, onReady]);
|
|
188
|
-
// Handle design loaded event
|
|
189
|
-
react.useEffect(() => {
|
|
190
|
-
const sdk = sdkRef.current;
|
|
191
|
-
if (!sdk || !onLoad)
|
|
192
|
-
return;
|
|
193
|
-
const unsubscribe = sdk.addEventListener('design:loaded', onLoad);
|
|
194
|
-
return unsubscribe;
|
|
195
|
-
}, [sdkLoaded, onLoad]);
|
|
196
|
-
// Handle design updated event
|
|
197
|
-
react.useEffect(() => {
|
|
198
|
-
const sdk = sdkRef.current;
|
|
199
|
-
if (!sdk || !onChange)
|
|
200
|
-
return;
|
|
201
|
-
const unsubscribe = sdk.addEventListener('design:updated', onChange);
|
|
202
|
-
return unsubscribe;
|
|
203
|
-
}, [sdkLoaded, onChange]);
|
|
204
|
-
// Handle content modified event
|
|
205
|
-
react.useEffect(() => {
|
|
206
|
-
const sdk = sdkRef.current;
|
|
207
|
-
if (!sdk || !onContentModified)
|
|
208
|
-
return;
|
|
209
|
-
const unsubscribe = sdk.addEventListener('content:modified', onContentModified);
|
|
210
|
-
return unsubscribe;
|
|
211
|
-
}, [sdkLoaded, onContentModified]);
|
|
212
|
-
// Handle element selected event
|
|
213
|
-
react.useEffect(() => {
|
|
214
|
-
const sdk = sdkRef.current;
|
|
215
|
-
if (!sdk || !onSelect)
|
|
216
|
-
return;
|
|
217
|
-
const unsubscribe = sdk.addEventListener('element:selected', onSelect);
|
|
218
|
-
return unsubscribe;
|
|
219
|
-
}, [sdkLoaded, onSelect]);
|
|
220
|
-
// Handle element deselected event
|
|
221
|
-
react.useEffect(() => {
|
|
222
|
-
const sdk = sdkRef.current;
|
|
223
|
-
if (!sdk || !onDeselect)
|
|
224
|
-
return;
|
|
225
|
-
const unsubscribe = sdk.addEventListener('element:deselected', onDeselect);
|
|
226
|
-
return unsubscribe;
|
|
227
|
-
}, [sdkLoaded, onDeselect]);
|
|
228
|
-
// Register callbacks
|
|
229
|
-
react.useEffect(() => {
|
|
230
|
-
const sdk = sdkRef.current;
|
|
231
|
-
if (!sdk)
|
|
232
|
-
return;
|
|
233
|
-
if (onImage) {
|
|
234
|
-
sdk.registerCallback('image', onImage);
|
|
235
|
-
}
|
|
236
|
-
if (onLinkClick) {
|
|
237
|
-
sdk.registerCallback('linkClick', onLinkClick);
|
|
238
|
-
}
|
|
239
|
-
if (onSave) {
|
|
240
|
-
sdk.registerCallback('save', onSave);
|
|
241
|
-
}
|
|
105
|
+
initEditor();
|
|
242
106
|
return () => {
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
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();
|
|
247
119
|
}
|
|
120
|
+
catch {
|
|
121
|
+
// ignore
|
|
122
|
+
}
|
|
123
|
+
editorInstanceRef.current = null;
|
|
124
|
+
setIsEditorReady(false);
|
|
248
125
|
};
|
|
249
|
-
}, [
|
|
250
|
-
// Expose SDK methods via ref
|
|
126
|
+
}, [editorId, apiKey, handleReady]);
|
|
251
127
|
react.useImperativeHandle(ref, () => ({
|
|
252
|
-
|
|
253
|
-
loadBlank: () => sdkRef.current?.loadBlank(),
|
|
254
|
-
saveDesign: (callback) => sdkRef.current?.saveDesign(callback),
|
|
255
|
-
getDesign: () => sdkRef.current?.getDesign(),
|
|
256
|
-
exportHtml: (callback) => sdkRef.current?.exportHtml(callback),
|
|
257
|
-
exportHtmlAsync: () => sdkRef.current?.exportHtmlAsync(),
|
|
258
|
-
save: () => sdkRef.current?.save(),
|
|
259
|
-
undo: () => sdkRef.current?.undo(),
|
|
260
|
-
redo: () => sdkRef.current?.redo(),
|
|
261
|
-
getState: () => sdkRef.current?.getState(),
|
|
128
|
+
editor: editorInstanceRef.current,
|
|
262
129
|
isReady: () => isEditorReady,
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
// Compute styles
|
|
130
|
+
}), [isEditorReady]);
|
|
131
|
+
const effectiveHeight = height ?? minHeight;
|
|
266
132
|
const containerStyle = {
|
|
267
|
-
width:
|
|
268
|
-
height: typeof
|
|
133
|
+
width: "100%",
|
|
134
|
+
height: typeof effectiveHeight === "number"
|
|
135
|
+
? `${effectiveHeight}px`
|
|
136
|
+
: effectiveHeight,
|
|
269
137
|
...style,
|
|
270
138
|
};
|
|
271
|
-
|
|
272
|
-
if (error) {
|
|
273
|
-
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 })] }) }));
|
|
274
|
-
}
|
|
275
|
-
// Show loading state
|
|
276
|
-
if (!sdkLoaded) {
|
|
277
|
-
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..." })] }) }));
|
|
278
|
-
}
|
|
279
|
-
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%" } }) }));
|
|
280
140
|
});
|
|
281
|
-
PexelizeEditor.displayName =
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
*
|
|
285
|
-
* @example
|
|
286
|
-
* ```tsx
|
|
287
|
-
* function MyComponent() {
|
|
288
|
-
* const { sdk, isReady, error } = usePexelizeSDK({
|
|
289
|
-
* containerId: 'my-editor',
|
|
290
|
-
* editorMode: 'email',
|
|
291
|
-
* });
|
|
292
|
-
*
|
|
293
|
-
* const handleExport = () => {
|
|
294
|
-
* if (isReady && sdk) {
|
|
295
|
-
* sdk.exportHtml((data) => console.log(data.html));
|
|
296
|
-
* }
|
|
297
|
-
* };
|
|
298
|
-
*
|
|
299
|
-
* return (
|
|
300
|
-
* <div>
|
|
301
|
-
* <div id="my-editor" style={{ height: '600px' }} />
|
|
302
|
-
* <button onClick={handleExport} disabled={!isReady}>Export</button>
|
|
303
|
-
* </div>
|
|
304
|
-
* );
|
|
305
|
-
* }
|
|
306
|
-
* ```
|
|
307
|
-
*/
|
|
308
|
-
function usePexelizeSDK(config) {
|
|
309
|
-
const sdkRef = react.useRef(null);
|
|
141
|
+
PexelizeEditor.displayName = "PexelizeEditor";
|
|
142
|
+
function usePexelizeEditor() {
|
|
143
|
+
const ref = react.useRef(null);
|
|
310
144
|
const [isReady, setIsReady] = react.useState(false);
|
|
311
|
-
const [sdkLoaded, setSdkLoaded] = react.useState(false);
|
|
312
|
-
const [error, setError] = react.useState(null);
|
|
313
|
-
// Load SDK from CDN
|
|
314
|
-
react.useEffect(() => {
|
|
315
|
-
loadSDKFromCDN(SDK_CDN_URL)
|
|
316
|
-
.then(() => setSdkLoaded(true))
|
|
317
|
-
.catch((err) => setError(err.message));
|
|
318
|
-
}, []);
|
|
319
|
-
// Initialize SDK
|
|
320
145
|
react.useEffect(() => {
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
if (!pexelize) {
|
|
325
|
-
setError('Pexelize SDK not found');
|
|
326
|
-
return;
|
|
327
|
-
}
|
|
328
|
-
sdkRef.current = pexelize;
|
|
329
|
-
pexelize.init({
|
|
330
|
-
id: config.containerId,
|
|
331
|
-
editorMode: config.editorMode || config.displayMode || 'email',
|
|
332
|
-
...config,
|
|
333
|
-
});
|
|
334
|
-
const unsubscribe = pexelize.addEventListener('editor:ready', () => {
|
|
335
|
-
setIsReady(true);
|
|
336
|
-
});
|
|
337
|
-
return () => {
|
|
338
|
-
unsubscribe();
|
|
339
|
-
pexelize.destroy();
|
|
340
|
-
sdkRef.current = null;
|
|
341
|
-
setIsReady(false);
|
|
146
|
+
const checkReady = () => {
|
|
147
|
+
const ready = ref.current?.isReady() ?? false;
|
|
148
|
+
setIsReady(ready);
|
|
342
149
|
};
|
|
343
|
-
|
|
150
|
+
checkReady();
|
|
151
|
+
const interval = setInterval(checkReady, 100);
|
|
152
|
+
return () => clearInterval(interval);
|
|
153
|
+
}, []);
|
|
344
154
|
return {
|
|
345
|
-
|
|
155
|
+
ref,
|
|
156
|
+
editor: ref.current?.editor ?? null,
|
|
346
157
|
isReady,
|
|
347
|
-
isLoading: !sdkLoaded && !error,
|
|
348
|
-
error,
|
|
349
158
|
};
|
|
350
159
|
}
|
|
351
|
-
// Export SDK CDN URL for reference
|
|
352
|
-
const PEXELIZE_SDK_CDN = SDK_CDN_URL;
|
|
353
160
|
|
|
354
|
-
exports.PEXELIZE_SDK_CDN = PEXELIZE_SDK_CDN;
|
|
355
161
|
exports.PexelizeEditor = PexelizeEditor;
|
|
356
162
|
exports.default = PexelizeEditor;
|
|
357
|
-
exports.
|
|
163
|
+
exports.usePexelizeEditor = usePexelizeEditor;
|
|
358
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",
|