@uniformdev/canvas-react 18.33.0 → 18.34.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/dist/index.d.ts +3 -12
- package/dist/index.esm.js +202 -155
- package/dist/index.js +203 -159
- package/dist/index.mjs +202 -155
- package/package.json +5 -5
package/dist/index.d.ts
CHANGED
|
@@ -86,7 +86,6 @@ declare const createApiEnhancer: ({ apiUrl }: {
|
|
|
86
86
|
connectedData?: {
|
|
87
87
|
pointer: string;
|
|
88
88
|
syntax: "jptr";
|
|
89
|
-
required?: boolean | undefined;
|
|
90
89
|
} | undefined;
|
|
91
90
|
};
|
|
92
91
|
} | undefined;
|
|
@@ -106,7 +105,6 @@ declare const createApiEnhancer: ({ apiUrl }: {
|
|
|
106
105
|
connectedData?: {
|
|
107
106
|
pointer: string;
|
|
108
107
|
syntax: "jptr";
|
|
109
|
-
required?: boolean | undefined;
|
|
110
108
|
} | undefined;
|
|
111
109
|
};
|
|
112
110
|
} | undefined;
|
|
@@ -146,7 +144,6 @@ declare const createApiEnhancer: ({ apiUrl }: {
|
|
|
146
144
|
connectedData?: {
|
|
147
145
|
pointer: string;
|
|
148
146
|
syntax: "jptr";
|
|
149
|
-
required?: boolean | undefined;
|
|
150
147
|
} | undefined;
|
|
151
148
|
};
|
|
152
149
|
} | undefined;
|
|
@@ -183,7 +180,6 @@ declare const createApiEnhancer: ({ apiUrl }: {
|
|
|
183
180
|
connectedData?: {
|
|
184
181
|
pointer: string;
|
|
185
182
|
syntax: "jptr";
|
|
186
|
-
required?: boolean | undefined;
|
|
187
183
|
} | undefined;
|
|
188
184
|
};
|
|
189
185
|
} | undefined;
|
|
@@ -219,7 +215,6 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
|
|
|
219
215
|
connectedData?: {
|
|
220
216
|
pointer: string;
|
|
221
217
|
syntax: "jptr";
|
|
222
|
-
required?: boolean | undefined;
|
|
223
218
|
} | undefined;
|
|
224
219
|
};
|
|
225
220
|
} | undefined;
|
|
@@ -239,7 +234,6 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
|
|
|
239
234
|
connectedData?: {
|
|
240
235
|
pointer: string;
|
|
241
236
|
syntax: "jptr";
|
|
242
|
-
required?: boolean | undefined;
|
|
243
237
|
} | undefined;
|
|
244
238
|
};
|
|
245
239
|
} | undefined;
|
|
@@ -279,7 +273,6 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
|
|
|
279
273
|
connectedData?: {
|
|
280
274
|
pointer: string;
|
|
281
275
|
syntax: "jptr";
|
|
282
|
-
required?: boolean | undefined;
|
|
283
276
|
} | undefined;
|
|
284
277
|
};
|
|
285
278
|
} | undefined;
|
|
@@ -316,7 +309,6 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
|
|
|
316
309
|
connectedData?: {
|
|
317
310
|
pointer: string;
|
|
318
311
|
syntax: "jptr";
|
|
319
|
-
required?: boolean | undefined;
|
|
320
312
|
} | undefined;
|
|
321
313
|
};
|
|
322
314
|
} | undefined;
|
|
@@ -330,6 +322,7 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
|
|
|
330
322
|
variants?: boolean | undefined;
|
|
331
323
|
} | undefined;
|
|
332
324
|
} | undefined;
|
|
325
|
+
isContextualEditing: boolean;
|
|
333
326
|
};
|
|
334
327
|
/** @deprecated use useUniformContextualEditing instead */
|
|
335
328
|
declare const useContextualEditing: ({ initialCompositionValue, enhance, }: UseUniformContextualEditingProps) => {
|
|
@@ -342,7 +335,6 @@ declare const useContextualEditing: ({ initialCompositionValue, enhance, }: UseU
|
|
|
342
335
|
connectedData?: {
|
|
343
336
|
pointer: string;
|
|
344
337
|
syntax: "jptr";
|
|
345
|
-
required?: boolean | undefined;
|
|
346
338
|
} | undefined;
|
|
347
339
|
};
|
|
348
340
|
} | undefined;
|
|
@@ -362,7 +354,6 @@ declare const useContextualEditing: ({ initialCompositionValue, enhance, }: UseU
|
|
|
362
354
|
connectedData?: {
|
|
363
355
|
pointer: string;
|
|
364
356
|
syntax: "jptr";
|
|
365
|
-
required?: boolean | undefined;
|
|
366
357
|
} | undefined;
|
|
367
358
|
};
|
|
368
359
|
} | undefined;
|
|
@@ -402,7 +393,6 @@ declare const useContextualEditing: ({ initialCompositionValue, enhance, }: UseU
|
|
|
402
393
|
connectedData?: {
|
|
403
394
|
pointer: string;
|
|
404
395
|
syntax: "jptr";
|
|
405
|
-
required?: boolean | undefined;
|
|
406
396
|
} | undefined;
|
|
407
397
|
};
|
|
408
398
|
} | undefined;
|
|
@@ -439,7 +429,6 @@ declare const useContextualEditing: ({ initialCompositionValue, enhance, }: UseU
|
|
|
439
429
|
connectedData?: {
|
|
440
430
|
pointer: string;
|
|
441
431
|
syntax: "jptr";
|
|
442
|
-
required?: boolean | undefined;
|
|
443
432
|
} | undefined;
|
|
444
433
|
};
|
|
445
434
|
} | undefined;
|
|
@@ -453,6 +442,7 @@ declare const useContextualEditing: ({ initialCompositionValue, enhance, }: UseU
|
|
|
453
442
|
variants?: boolean | undefined;
|
|
454
443
|
} | undefined;
|
|
455
444
|
} | undefined;
|
|
445
|
+
isContextualEditing: boolean;
|
|
456
446
|
};
|
|
457
447
|
/** @deprecated use UseUniformContextualEditingProps instead */
|
|
458
448
|
type UseContextualEditingProps = UseUniformContextualEditingProps;
|
|
@@ -466,6 +456,7 @@ type UniformCompositionContextValue = {
|
|
|
466
456
|
data: UniformCompositionProps['data'] | undefined;
|
|
467
457
|
resolveRenderer?: UniformCompositionProps['resolveRenderer'];
|
|
468
458
|
behaviorTracking?: UniformCompositionProps['behaviorTracking'];
|
|
459
|
+
isContextualEditing: boolean;
|
|
469
460
|
};
|
|
470
461
|
/**
|
|
471
462
|
* Gets the data of the closest `<UniformComposition />` ancestor.
|
package/dist/index.esm.js
CHANGED
|
@@ -36,7 +36,7 @@ import {
|
|
|
36
36
|
CANVAS_ENRICHMENT_TAG_PARAM
|
|
37
37
|
} from "@uniformdev/canvas";
|
|
38
38
|
import { Track, TrackFragment, useUniformContext } from "@uniformdev/context-react";
|
|
39
|
-
import
|
|
39
|
+
import React6, { createContext as createContext2, useContext as useContext2 } from "react";
|
|
40
40
|
|
|
41
41
|
// src/convertComponentToProps.ts
|
|
42
42
|
function convertComponentToProps(component) {
|
|
@@ -70,7 +70,8 @@ var createComponentStore = () => {
|
|
|
70
70
|
};
|
|
71
71
|
var createComponentStoreResolver = ({ store, defaultComponent = DefaultNotImplementedComponent }) => {
|
|
72
72
|
return (component) => {
|
|
73
|
-
|
|
73
|
+
var _a;
|
|
74
|
+
const resolved = (_a = store.get(getTypeWithVariant(component.type, component.variant))) != null ? _a : store.get(getTypeWithVariant(component.type));
|
|
74
75
|
return resolved || defaultComponent;
|
|
75
76
|
};
|
|
76
77
|
};
|
|
@@ -94,15 +95,12 @@ var componentStoreResolver = createComponentStoreResolver({
|
|
|
94
95
|
|
|
95
96
|
// src/components/UniformSlot.tsx
|
|
96
97
|
import {
|
|
97
|
-
CANVAS_LOCALE_TAG_PARAM,
|
|
98
98
|
CANVAS_PERSONALIZE_SLOT,
|
|
99
99
|
CANVAS_PERSONALIZE_TYPE,
|
|
100
100
|
CANVAS_TEST_SLOT,
|
|
101
|
-
CANVAS_TEST_TYPE
|
|
102
|
-
IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
|
|
103
|
-
PLACEHOLDER_ID
|
|
101
|
+
CANVAS_TEST_TYPE
|
|
104
102
|
} from "@uniformdev/canvas";
|
|
105
|
-
import
|
|
103
|
+
import React5 from "react";
|
|
106
104
|
|
|
107
105
|
// src/defaultSystemComponentResolver.tsx
|
|
108
106
|
import {
|
|
@@ -145,6 +143,178 @@ var defaultSystemComponentResolver = {
|
|
|
145
143
|
}
|
|
146
144
|
};
|
|
147
145
|
|
|
146
|
+
// src/components/ContextualEditingComponentWrapper.tsx
|
|
147
|
+
import {
|
|
148
|
+
CANVAS_LOCALE_TAG_PARAM,
|
|
149
|
+
IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
|
|
150
|
+
IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
|
|
151
|
+
PLACEHOLDER_ID
|
|
152
|
+
} from "@uniformdev/canvas";
|
|
153
|
+
import React4 from "react";
|
|
154
|
+
|
|
155
|
+
// src/components/UniformComposition.tsx
|
|
156
|
+
import React3, { createContext, useContext } from "react";
|
|
157
|
+
|
|
158
|
+
// src/hooks/useUniformContextualEditing.ts
|
|
159
|
+
import {
|
|
160
|
+
createCanvasChannel,
|
|
161
|
+
createUniformApiEnhancer,
|
|
162
|
+
EMPTY_COMPOSITION,
|
|
163
|
+
IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
|
|
164
|
+
IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
|
|
165
|
+
isUpdateCompositionMessage
|
|
166
|
+
} from "@uniformdev/canvas";
|
|
167
|
+
import { useEffect, useMemo, useState } from "react";
|
|
168
|
+
var createApiEnhancer = createUniformApiEnhancer;
|
|
169
|
+
var registeredCompositionIds = /* @__PURE__ */ new Set();
|
|
170
|
+
var useUniformContextualEditing = ({
|
|
171
|
+
initialCompositionValue,
|
|
172
|
+
enhance = (message) => message.composition
|
|
173
|
+
}) => {
|
|
174
|
+
const [contextualComposition, setContextualComposition] = useState();
|
|
175
|
+
const channel = useMemo(() => {
|
|
176
|
+
var _a;
|
|
177
|
+
if (!isInContextEditingMode()) {
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
const channel2 = createCanvasChannel({
|
|
181
|
+
broadcastTo: [(_a = window.opener) != null ? _a : window.top],
|
|
182
|
+
listenTo: [window]
|
|
183
|
+
});
|
|
184
|
+
return channel2;
|
|
185
|
+
}, []);
|
|
186
|
+
useEffect(() => {
|
|
187
|
+
if ((contextualComposition == null ? void 0 : contextualComposition._id) && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== EMPTY_COMPOSITION._id && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== (contextualComposition == null ? void 0 : contextualComposition._id)) {
|
|
188
|
+
setContextualComposition(void 0);
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
if (!channel || registeredCompositionIds.has(initialCompositionValue == null ? void 0 : initialCompositionValue._id)) {
|
|
192
|
+
return;
|
|
193
|
+
}
|
|
194
|
+
const unsubscribeFromCompositionUpdates = channel.on("update-composition", async (message) => {
|
|
195
|
+
if (!isUpdateCompositionMessage(message)) {
|
|
196
|
+
return;
|
|
197
|
+
}
|
|
198
|
+
const enhancedComposition = await enhance(message);
|
|
199
|
+
setContextualComposition(enhancedComposition);
|
|
200
|
+
});
|
|
201
|
+
registeredCompositionIds.add(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
|
|
202
|
+
return () => {
|
|
203
|
+
unsubscribeFromCompositionUpdates();
|
|
204
|
+
registeredCompositionIds.delete(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
|
|
205
|
+
};
|
|
206
|
+
}, [channel, enhance, initialCompositionValue == null ? void 0 : initialCompositionValue._id, contextualComposition == null ? void 0 : contextualComposition._id]);
|
|
207
|
+
useEffect(() => {
|
|
208
|
+
if (!isInContextEditingMode()) {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
const existingScript = document.getElementById(IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
|
|
212
|
+
if (existingScript) {
|
|
213
|
+
return;
|
|
214
|
+
}
|
|
215
|
+
window.__UNIFORM_CONTEXTUAL_EDITING__ = {
|
|
216
|
+
framework: "React",
|
|
217
|
+
// Make sure to also update the value in canvas-vue
|
|
218
|
+
version: 1
|
|
219
|
+
};
|
|
220
|
+
const script = document.createElement("script");
|
|
221
|
+
script.id = IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
|
|
222
|
+
script.src = getCanvasInContextEmbedScriptUrl();
|
|
223
|
+
script.async = true;
|
|
224
|
+
document.head.appendChild(script);
|
|
225
|
+
}, [initialCompositionValue == null ? void 0 : initialCompositionValue._id]);
|
|
226
|
+
return {
|
|
227
|
+
composition: contextualComposition != null ? contextualComposition : initialCompositionValue,
|
|
228
|
+
isContextualEditing: Boolean(contextualComposition)
|
|
229
|
+
};
|
|
230
|
+
};
|
|
231
|
+
function getCanvasInContextEmbedScriptUrl() {
|
|
232
|
+
const scriptUrl = `${window.document.referrer}files/canvas-in-context-embed/index.js`;
|
|
233
|
+
return scriptUrl;
|
|
234
|
+
}
|
|
235
|
+
function isInContextEditingMode() {
|
|
236
|
+
if (typeof window === "undefined") {
|
|
237
|
+
return false;
|
|
238
|
+
}
|
|
239
|
+
const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
|
|
240
|
+
IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
|
|
241
|
+
);
|
|
242
|
+
const isAllowlistedReferrer = Boolean(
|
|
243
|
+
window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
|
|
244
|
+
);
|
|
245
|
+
return isOpenedByInContextEditor && isAllowlistedReferrer;
|
|
246
|
+
}
|
|
247
|
+
var useContextualEditing = useUniformContextualEditing;
|
|
248
|
+
|
|
249
|
+
// src/components/UniformComposition.tsx
|
|
250
|
+
var UniformCompositionContext = createContext({
|
|
251
|
+
data: void 0,
|
|
252
|
+
isContextualEditing: false
|
|
253
|
+
});
|
|
254
|
+
function useUniformCurrentComposition() {
|
|
255
|
+
return useContext(UniformCompositionContext);
|
|
256
|
+
}
|
|
257
|
+
function UniformComposition({
|
|
258
|
+
data,
|
|
259
|
+
behaviorTracking = "onView",
|
|
260
|
+
children,
|
|
261
|
+
resolveRenderer,
|
|
262
|
+
contextualEditingEnhancer
|
|
263
|
+
}) {
|
|
264
|
+
const { composition, isContextualEditing } = useUniformContextualEditing({
|
|
265
|
+
initialCompositionValue: data,
|
|
266
|
+
enhance: contextualEditingEnhancer
|
|
267
|
+
});
|
|
268
|
+
return /* @__PURE__ */ React3.createElement(
|
|
269
|
+
UniformCompositionContext.Provider,
|
|
270
|
+
{
|
|
271
|
+
value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
|
|
272
|
+
},
|
|
273
|
+
/* @__PURE__ */ React3.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React3.createElement(
|
|
274
|
+
UniformComponent,
|
|
275
|
+
{
|
|
276
|
+
data: composition,
|
|
277
|
+
behaviorTracking,
|
|
278
|
+
resolveRenderer
|
|
279
|
+
},
|
|
280
|
+
children
|
|
281
|
+
))
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
var useComposition = useUniformCurrentComposition;
|
|
285
|
+
var Composition = UniformComposition;
|
|
286
|
+
|
|
287
|
+
// src/components/ContextualEditingComponentWrapper.tsx
|
|
288
|
+
function ContextualEditingComponentWrapper({
|
|
289
|
+
component,
|
|
290
|
+
parentComponent,
|
|
291
|
+
slotName,
|
|
292
|
+
indexInSlot,
|
|
293
|
+
slotChildrenCount,
|
|
294
|
+
emptyPlaceholder,
|
|
295
|
+
children
|
|
296
|
+
}) {
|
|
297
|
+
var _a, _b, _c, _d;
|
|
298
|
+
const isPlaceholder = (component == null ? void 0 : component._id) === PLACEHOLDER_ID;
|
|
299
|
+
const { isContextualEditing } = useUniformCurrentComposition();
|
|
300
|
+
return !isContextualEditing ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, children) : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
|
|
301
|
+
"script",
|
|
302
|
+
{
|
|
303
|
+
"data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
|
|
304
|
+
"data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
|
|
305
|
+
"data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
|
|
306
|
+
"data-component-id": component == null ? void 0 : component._id,
|
|
307
|
+
"data-slot-name": slotName != null ? slotName : "",
|
|
308
|
+
"data-component-index": indexInSlot != null ? indexInSlot : "",
|
|
309
|
+
"data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
|
|
310
|
+
"data-component-name": component == null ? void 0 : component.type,
|
|
311
|
+
"data-is-placeholder": isPlaceholder ? "true" : void 0,
|
|
312
|
+
"data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
|
|
313
|
+
"data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
|
|
314
|
+
}
|
|
315
|
+
), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children, /* @__PURE__ */ React4.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
|
|
316
|
+
}
|
|
317
|
+
|
|
148
318
|
// src/components/UniformSlot.tsx
|
|
149
319
|
function UniformSlot({
|
|
150
320
|
name,
|
|
@@ -182,9 +352,9 @@ function UniformSlot({
|
|
|
182
352
|
emptyPlaceholder
|
|
183
353
|
});
|
|
184
354
|
const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
|
|
185
|
-
return
|
|
355
|
+
return React5.createElement(React5.Fragment, { key: index }, elements);
|
|
186
356
|
});
|
|
187
|
-
return
|
|
357
|
+
return React5.createElement(React5.Fragment, void 0, finalChildren);
|
|
188
358
|
}
|
|
189
359
|
function renderComponent({
|
|
190
360
|
component,
|
|
@@ -197,14 +367,13 @@ function renderComponent({
|
|
|
197
367
|
slotChildrenCount,
|
|
198
368
|
emptyPlaceholder
|
|
199
369
|
}) {
|
|
200
|
-
var _a, _b, _c, _d;
|
|
201
370
|
const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
|
|
202
371
|
if (component.type === CANVAS_TEST_TYPE) {
|
|
203
372
|
return resolveSystem.test(
|
|
204
373
|
component,
|
|
205
374
|
key,
|
|
206
375
|
(variantComponent, key2) => {
|
|
207
|
-
var
|
|
376
|
+
var _a, _b;
|
|
208
377
|
return renderComponent({
|
|
209
378
|
component: variantComponent,
|
|
210
379
|
resolveRenderer,
|
|
@@ -212,8 +381,8 @@ function renderComponent({
|
|
|
212
381
|
key: key2,
|
|
213
382
|
parentComponent: component,
|
|
214
383
|
slotName: CANVAS_TEST_SLOT,
|
|
215
|
-
slotChildrenCount: (
|
|
216
|
-
indexInSlot: (
|
|
384
|
+
slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_TEST_SLOT].length,
|
|
385
|
+
indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_TEST_SLOT].findIndex(
|
|
217
386
|
({ _id }) => variantComponent._id === _id
|
|
218
387
|
)
|
|
219
388
|
});
|
|
@@ -224,7 +393,7 @@ function renderComponent({
|
|
|
224
393
|
component,
|
|
225
394
|
key,
|
|
226
395
|
(variantComponent, key2) => {
|
|
227
|
-
var
|
|
396
|
+
var _a, _b;
|
|
228
397
|
return renderComponent({
|
|
229
398
|
component: variantComponent,
|
|
230
399
|
resolveRenderer,
|
|
@@ -232,8 +401,8 @@ function renderComponent({
|
|
|
232
401
|
key: key2,
|
|
233
402
|
parentComponent: component,
|
|
234
403
|
slotName: CANVAS_PERSONALIZE_SLOT,
|
|
235
|
-
slotChildrenCount: (
|
|
236
|
-
indexInSlot: (
|
|
404
|
+
slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_PERSONALIZE_SLOT].length,
|
|
405
|
+
indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_PERSONALIZE_SLOT].findIndex(
|
|
237
406
|
({ _id }) => variantComponent._id === _id
|
|
238
407
|
)
|
|
239
408
|
});
|
|
@@ -241,25 +410,18 @@ function renderComponent({
|
|
|
241
410
|
);
|
|
242
411
|
} else if (RenderComponent) {
|
|
243
412
|
const props = convertComponentToProps(component);
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
return /* @__PURE__ */ React3.createElement(UniformComponent, { key, data: component, resolveRenderer }, !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ React3.createElement(
|
|
247
|
-
"script",
|
|
413
|
+
return /* @__PURE__ */ React5.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ React5.createElement(
|
|
414
|
+
ContextualEditingComponentWrapper,
|
|
248
415
|
{
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
"data-is-placeholder": isPlaceholder ? "true" : void 0,
|
|
259
|
-
"data-is-localized": ((_a = component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
|
|
260
|
-
"data-component-title": (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : ""
|
|
261
|
-
}
|
|
262
|
-
), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : /* @__PURE__ */ React3.createElement(RenderComponent, { ...props }), !shouldRenderContextualEditingTags ? null : /* @__PURE__ */ React3.createElement("script", { "data-role": "component-end" }));
|
|
416
|
+
component,
|
|
417
|
+
parentComponent,
|
|
418
|
+
slotName,
|
|
419
|
+
indexInSlot,
|
|
420
|
+
slotChildrenCount,
|
|
421
|
+
emptyPlaceholder
|
|
422
|
+
},
|
|
423
|
+
/* @__PURE__ */ React5.createElement(RenderComponent, { ...props })
|
|
424
|
+
));
|
|
263
425
|
} else if (process.env.NODE_ENV !== "production") {
|
|
264
426
|
console.warn(
|
|
265
427
|
`[canvas] found component of type '${component.type}'${component.variant ? ` with variant '${component.variant}'` : ""}. Nothing will be rendered. Check your resolveRenderer function or add registerUniformComponent to your component.
|
|
@@ -272,9 +434,9 @@ function renderComponent({
|
|
|
272
434
|
var Slot = UniformSlot;
|
|
273
435
|
|
|
274
436
|
// src/components/UniformComponent.tsx
|
|
275
|
-
var UniformComponentContext =
|
|
437
|
+
var UniformComponentContext = createContext2({});
|
|
276
438
|
function useUniformCurrentComponent() {
|
|
277
|
-
return
|
|
439
|
+
return useContext2(UniformComponentContext);
|
|
278
440
|
}
|
|
279
441
|
function UniformComponent({
|
|
280
442
|
data,
|
|
@@ -304,9 +466,9 @@ function UniformComponent({
|
|
|
304
466
|
hasParentLayout: Boolean(parentData.data),
|
|
305
467
|
resolveRenderer: contextValue.resolveRenderer
|
|
306
468
|
});
|
|
307
|
-
return /* @__PURE__ */
|
|
469
|
+
return /* @__PURE__ */ React6.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
|
|
308
470
|
/* auto-track behavior signals when in a Canvas context */
|
|
309
|
-
/* @__PURE__ */
|
|
471
|
+
/* @__PURE__ */ React6.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
|
|
310
472
|
) : resolvedChildren);
|
|
311
473
|
}
|
|
312
474
|
function resolveChildren({
|
|
@@ -319,135 +481,20 @@ function resolveChildren({
|
|
|
319
481
|
if (!children && !hasParentLayout) {
|
|
320
482
|
const topLevelComponent = resolveRenderer({ type: data.type });
|
|
321
483
|
if (topLevelComponent) {
|
|
322
|
-
children =
|
|
484
|
+
children = React6.createElement(topLevelComponent, convertComponentToProps(data));
|
|
323
485
|
} else {
|
|
324
486
|
if (Object.keys((_a = data.slots) != null ? _a : {}).length > 1 && process.env.NODE_ENV === "development") {
|
|
325
487
|
console.warn(
|
|
326
488
|
`[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`
|
|
327
489
|
);
|
|
328
490
|
}
|
|
329
|
-
children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */
|
|
491
|
+
children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ React6.createElement(UniformSlot, { key: slotName, name: slotName }));
|
|
330
492
|
}
|
|
331
493
|
}
|
|
332
494
|
const renderChildren = typeof children === "function" ? children(convertComponentToProps(data)) : children;
|
|
333
495
|
return renderChildren;
|
|
334
496
|
}
|
|
335
497
|
|
|
336
|
-
// src/components/UniformComposition.tsx
|
|
337
|
-
import React5, { createContext as createContext2, useContext as useContext2 } from "react";
|
|
338
|
-
|
|
339
|
-
// src/hooks/useUniformContextualEditing.ts
|
|
340
|
-
import {
|
|
341
|
-
createCanvasChannel,
|
|
342
|
-
createUniformApiEnhancer,
|
|
343
|
-
IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
|
|
344
|
-
IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
|
|
345
|
-
isUpdateCompositionMessage
|
|
346
|
-
} from "@uniformdev/canvas";
|
|
347
|
-
import { useEffect, useMemo, useState } from "react";
|
|
348
|
-
var createApiEnhancer = createUniformApiEnhancer;
|
|
349
|
-
var registeredCompositionIds = /* @__PURE__ */ new Set();
|
|
350
|
-
var useUniformContextualEditing = ({
|
|
351
|
-
initialCompositionValue,
|
|
352
|
-
enhance = (message) => message.composition
|
|
353
|
-
}) => {
|
|
354
|
-
const [contextualComposition, setContextualComposition] = useState();
|
|
355
|
-
const channel = useMemo(() => {
|
|
356
|
-
var _a;
|
|
357
|
-
if (!isInContextEditingMode()) {
|
|
358
|
-
return;
|
|
359
|
-
}
|
|
360
|
-
const channel2 = createCanvasChannel({
|
|
361
|
-
broadcastTo: [(_a = window.opener) != null ? _a : window.top],
|
|
362
|
-
listenTo: [window]
|
|
363
|
-
});
|
|
364
|
-
return channel2;
|
|
365
|
-
}, []);
|
|
366
|
-
useEffect(() => {
|
|
367
|
-
if (!channel || registeredCompositionIds.has(initialCompositionValue == null ? void 0 : initialCompositionValue._id)) {
|
|
368
|
-
return;
|
|
369
|
-
}
|
|
370
|
-
const unsubscribe = channel.on("update-composition", async (message) => {
|
|
371
|
-
if (!isUpdateCompositionMessage(message)) {
|
|
372
|
-
return;
|
|
373
|
-
}
|
|
374
|
-
const enhancedComposition = await enhance(message);
|
|
375
|
-
setContextualComposition(enhancedComposition);
|
|
376
|
-
});
|
|
377
|
-
registeredCompositionIds.add(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
|
|
378
|
-
return () => {
|
|
379
|
-
unsubscribe();
|
|
380
|
-
registeredCompositionIds.delete(initialCompositionValue == null ? void 0 : initialCompositionValue._id);
|
|
381
|
-
};
|
|
382
|
-
}, [channel, enhance, initialCompositionValue == null ? void 0 : initialCompositionValue._id]);
|
|
383
|
-
useEffect(() => {
|
|
384
|
-
if (!isInContextEditingMode()) {
|
|
385
|
-
return;
|
|
386
|
-
}
|
|
387
|
-
const existingScript = document.getElementById(IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID);
|
|
388
|
-
if (existingScript) {
|
|
389
|
-
return;
|
|
390
|
-
}
|
|
391
|
-
window.__UNIFORM_CONTEXTUAL_EDITING__ = {
|
|
392
|
-
framework: "React"
|
|
393
|
-
};
|
|
394
|
-
const script = document.createElement("script");
|
|
395
|
-
script.id = IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID;
|
|
396
|
-
script.src = getCanvasInContextEmbedScriptUrl();
|
|
397
|
-
script.async = true;
|
|
398
|
-
document.head.appendChild(script);
|
|
399
|
-
}, []);
|
|
400
|
-
return {
|
|
401
|
-
composition: contextualComposition != null ? contextualComposition : initialCompositionValue
|
|
402
|
-
};
|
|
403
|
-
};
|
|
404
|
-
function getCanvasInContextEmbedScriptUrl() {
|
|
405
|
-
const scriptUrl = `${window.document.referrer}files/canvas-in-context-embed/index.js`;
|
|
406
|
-
return scriptUrl;
|
|
407
|
-
}
|
|
408
|
-
function isInContextEditingMode() {
|
|
409
|
-
if (typeof window === "undefined") {
|
|
410
|
-
return false;
|
|
411
|
-
}
|
|
412
|
-
const isOpenedByInContextEditor = new URLSearchParams(window.location.search).has(
|
|
413
|
-
IN_CONTEXT_EDITOR_QUERY_STRING_PARAM
|
|
414
|
-
);
|
|
415
|
-
const isAllowlistedReferrer = Boolean(
|
|
416
|
-
window.document.referrer.match(/(^https:\/\/|\.)(uniform.app|uniform.wtf|localhost:\d{4})\//)
|
|
417
|
-
);
|
|
418
|
-
return isOpenedByInContextEditor && isAllowlistedReferrer;
|
|
419
|
-
}
|
|
420
|
-
var useContextualEditing = useUniformContextualEditing;
|
|
421
|
-
|
|
422
|
-
// src/components/UniformComposition.tsx
|
|
423
|
-
var UniformCompositionContext = createContext2({ data: void 0 });
|
|
424
|
-
function useUniformCurrentComposition() {
|
|
425
|
-
return useContext2(UniformCompositionContext);
|
|
426
|
-
}
|
|
427
|
-
function UniformComposition({
|
|
428
|
-
data,
|
|
429
|
-
behaviorTracking = "onView",
|
|
430
|
-
children,
|
|
431
|
-
resolveRenderer,
|
|
432
|
-
contextualEditingEnhancer
|
|
433
|
-
}) {
|
|
434
|
-
const { composition } = useUniformContextualEditing({
|
|
435
|
-
initialCompositionValue: data,
|
|
436
|
-
enhance: contextualEditingEnhancer
|
|
437
|
-
});
|
|
438
|
-
return /* @__PURE__ */ React5.createElement(UniformCompositionContext.Provider, { value: { data: composition, behaviorTracking, resolveRenderer } }, /* @__PURE__ */ React5.createElement(
|
|
439
|
-
UniformComponent,
|
|
440
|
-
{
|
|
441
|
-
data: composition,
|
|
442
|
-
behaviorTracking,
|
|
443
|
-
resolveRenderer
|
|
444
|
-
},
|
|
445
|
-
children
|
|
446
|
-
));
|
|
447
|
-
}
|
|
448
|
-
var useComposition = useUniformCurrentComposition;
|
|
449
|
-
var Composition = UniformComposition;
|
|
450
|
-
|
|
451
498
|
// src/hooks/useCompositionEventEffect.ts
|
|
452
499
|
import {
|
|
453
500
|
CANVAS_DRAFT_STATE,
|