@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 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 React4, { createContext, useContext } from "react";
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
- const resolved = store.get(getTypeWithVariant(component.type, component.variant));
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 React3 from "react";
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 React3.createElement(React3.Fragment, { key: index }, elements);
355
+ return React5.createElement(React5.Fragment, { key: index }, elements);
186
356
  });
187
- return React3.createElement(React3.Fragment, void 0, finalChildren);
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 _a2, _b2;
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: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[CANVAS_TEST_SLOT].length,
216
- indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[CANVAS_TEST_SLOT].findIndex(
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 _a2, _b2;
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: (_a2 = component == null ? void 0 : component.slots) == null ? void 0 : _a2[CANVAS_PERSONALIZE_SLOT].length,
236
- indexInSlot: (_b2 = component == null ? void 0 : component.slots) == null ? void 0 : _b2[CANVAS_PERSONALIZE_SLOT].findIndex(
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
- const shouldRenderContextualEditingTags = Boolean(component._id);
245
- const isPlaceholder = component._id === PLACEHOLDER_ID;
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
- key,
250
- "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
251
- "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
252
- "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
253
- "data-component-id": component._id,
254
- "data-slot-name": slotName != null ? slotName : "",
255
- "data-component-index": indexInSlot != null ? indexInSlot : "",
256
- "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
257
- "data-component-name": component.type,
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 = createContext({});
437
+ var UniformComponentContext = createContext2({});
276
438
  function useUniformCurrentComponent() {
277
- return useContext(UniformComponentContext);
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__ */ React4.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
469
+ return /* @__PURE__ */ React6.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
308
470
  /* auto-track behavior signals when in a Canvas context */
309
- /* @__PURE__ */ React4.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
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 = React4.createElement(topLevelComponent, convertComponentToProps(data));
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__ */ React4.createElement(UniformSlot, { key: slotName, name: slotName }));
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,