@contentful/experiences-visual-editor-react 1.35.1 → 1.36.0-beta.1
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.js +27 -8
- package/dist/index.js.map +1 -1
- package/dist/renderApp.js +27 -8
- package/dist/renderApp.js.map +1 -1
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -4077,11 +4077,11 @@ function useEditorSubscriber() {
|
|
|
4077
4077
|
return;
|
|
4078
4078
|
}
|
|
4079
4079
|
const eventData = tryParseMessage(event);
|
|
4080
|
+
console.debug(`[experiences-sdk-react::onMessage] Received message [${eventData.eventType}]`, eventData);
|
|
4080
4081
|
if (eventData.eventType === PostMessageMethods$2.REQUESTED_ENTITIES) {
|
|
4081
4082
|
// Expected message: This message is handled in the EntityStore to store fetched entities
|
|
4082
4083
|
return;
|
|
4083
4084
|
}
|
|
4084
|
-
console.debug(`[experiences-sdk-react::onMessage] Received message [${eventData.eventType}]`, eventData);
|
|
4085
4085
|
switch (eventData.eventType) {
|
|
4086
4086
|
case INCOMING_EVENTS.ExperienceUpdated: {
|
|
4087
4087
|
const { tree, locale, changedNode, changedValueType, assemblies } = eventData.payload;
|
|
@@ -4646,6 +4646,9 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
4646
4646
|
if (!definition || node.type === ASSEMBLY_NODE_TYPE) {
|
|
4647
4647
|
return propsBase;
|
|
4648
4648
|
}
|
|
4649
|
+
// Note, that here we iterate over DEFINITION variables, not the actual node variables
|
|
4650
|
+
// this means that node may have "orphan" props, or some "newborn" props will be initialized
|
|
4651
|
+
// with the default values.
|
|
4649
4652
|
const extractedProps = Object.entries(definition.variables).reduce((acc, [variableName, variableDefinition]) => {
|
|
4650
4653
|
const variableMapping = node.data.props[variableName];
|
|
4651
4654
|
if (!variableMapping) {
|
|
@@ -4748,6 +4751,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
4748
4751
|
renderDropzone,
|
|
4749
4752
|
]);
|
|
4750
4753
|
const cfStyles = useMemo(() => buildCfStyles(props), [props]);
|
|
4754
|
+
const cfVisibility = props['cfVisibility'];
|
|
4751
4755
|
const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
|
|
4752
4756
|
const isSingleColumn = node?.data.blockId === CONTENTFUL_COMPONENTS$1.columns.id;
|
|
4753
4757
|
const isStructureComponent = isContentfulStructureComponent(node?.data.blockId);
|
|
@@ -4757,13 +4761,18 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
4757
4761
|
const overrideStyles = {};
|
|
4758
4762
|
const wrapperStyles = { width: options?.wrapContainerWidth };
|
|
4759
4763
|
if (requiresDragWrapper) {
|
|
4760
|
-
|
|
4764
|
+
// when element is marked by user as not-visible, on that element the node `display: none !important`
|
|
4765
|
+
// will be set and it will disappear. However, when such a node has a wrapper div, the wrapper
|
|
4766
|
+
// should not have any css properties (at least not ones which force size), as such div should
|
|
4767
|
+
// simply be a zero height wrapper around element with `display: none !important`.
|
|
4768
|
+
// Hence we guard all wrapperStyles with `cfVisibility` check.
|
|
4769
|
+
if (cfVisibility && cfStyles.width)
|
|
4761
4770
|
wrapperStyles.width = cfStyles.width;
|
|
4762
|
-
if (cfStyles.height)
|
|
4771
|
+
if (cfVisibility && cfStyles.height)
|
|
4763
4772
|
wrapperStyles.height = cfStyles.height;
|
|
4764
|
-
if (cfStyles.maxWidth)
|
|
4773
|
+
if (cfVisibility && cfStyles.maxWidth)
|
|
4765
4774
|
wrapperStyles.maxWidth = cfStyles.maxWidth;
|
|
4766
|
-
if (cfStyles.margin)
|
|
4775
|
+
if (cfVisibility && cfStyles.margin)
|
|
4767
4776
|
wrapperStyles.margin = cfStyles.margin;
|
|
4768
4777
|
}
|
|
4769
4778
|
// Override component styles to fill the wrapper
|
|
@@ -4798,6 +4807,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
4798
4807
|
node.data.id,
|
|
4799
4808
|
draggingId,
|
|
4800
4809
|
nodeRect,
|
|
4810
|
+
cfVisibility,
|
|
4801
4811
|
]);
|
|
4802
4812
|
// Styles that will be applied to the component element
|
|
4803
4813
|
// This has to be memoized to avoid recreating the styles in useEditorModeClassName on every render
|
|
@@ -5365,8 +5375,8 @@ const getTooltipPositions = ({ previewSize, tooltipRect, coordinates, }) => {
|
|
|
5365
5375
|
return newTooltipStyles;
|
|
5366
5376
|
};
|
|
5367
5377
|
|
|
5368
|
-
var css_248z$1 = ".styles-module_DraggableComponent__oyE7Q,\n.styles-module_Dropzone__3R-sm:not(.styles-module_isSlot__HI9yO) {\n position: relative;\n transition: background-color 0.2s;\n pointer-events: all;\n box-sizing: border-box;\n cursor: grab;\n}\n\n.styles-module_DraggableComponent__oyE7Q:before,\n.styles-module_Dropzone__3R-sm:not(.styles-module_isSlot__HI9yO):before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n outline-offset: -2px;\n outline: 2px solid transparent;\n z-index: 1;\n transition: outline 0.2s;\n pointer-events: none;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4.styles-module_Dropzone__3R-sm:before {\n outline-offset: -1px;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4.styles-module_Dropzone__3R-sm {\n pointer-events: all;\n}\n\n.styles-module_Dropzone__3R-sm.styles-
|
|
5369
|
-
var styles$1 = {"DraggableComponent":"styles-module_DraggableComponent__oyE7Q","Dropzone":"styles-module_Dropzone__3R-sm","isSlot":"styles-module_isSlot__HI9yO","isDragging":"styles-module_isDragging__hldL4","
|
|
5378
|
+
var css_248z$1 = ".styles-module_DraggableComponent__oyE7Q,\n.styles-module_Dropzone__3R-sm:not(.styles-module_isSlot__HI9yO) {\n position: relative;\n transition: background-color 0.2s;\n pointer-events: all;\n box-sizing: border-box;\n cursor: grab;\n}\n\n.styles-module_DraggableComponent__oyE7Q:before,\n.styles-module_Dropzone__3R-sm:not(.styles-module_isSlot__HI9yO):before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n outline-offset: -2px;\n outline: 2px solid transparent;\n z-index: 1;\n transition: outline 0.2s;\n pointer-events: none;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4.styles-module_Dropzone__3R-sm:before {\n outline-offset: -1px;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4.styles-module_Dropzone__3R-sm {\n pointer-events: all;\n}\n\n.styles-module_Dropzone__3R-sm.styles-module_fullHeight__afMfT {\n height: 100%;\n}\n\n.styles-module_Dropzone__3R-sm.styles-module_fullWidth__Od117 {\n width: 100%;\n}\n\n.styles-module_isRoot__c-c-x,\n.styles-module_isEmptyCanvas__Mm6Al {\n flex: 1;\n}\n\n.styles-module_isEmptyZone__XZ1Ej {\n min-height: 80px;\n min-width: 80px;\n}\n\n.styles-module_isDragging__hldL4:not(.styles-module_isRoot__c-c-x):not(.styles-module_DraggableClone__CdKIH):before {\n outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_Dropzone__3R-sm.styles-module_isDestination__sE70P:not(.styles-module_isRoot__c-c-x):before {\n transition:\n outline 0.2s,\n background-color 0.2s;\n outline: 2px dashed var(--exp-builder-blue400);\n background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n z-index: 2;\n}\n\n.styles-module_DraggableClone__CdKIH:before {\n outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DropzoneClone__xiT8j,\n.styles-module_DraggableClone__CdKIH,\n.styles-module_DropzoneClone__xiT8j *,\n.styles-module_DraggableClone__CdKIH * {\n pointer-events: none !important;\n}\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4) :not(.styles-module_DraggableComponent__oyE7Q) {\n pointer-events: none;\n}\n\n.styles-module_isDraggingThisComponent__yCZTp {\n overflow: hidden;\n}\n\n.styles-module_isSelected__c2QEJ:before {\n outline: 2px solid transparent !important;\n}\n\n.styles-module_tooltipWrapper__kqvmR {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n z-index: 10;\n pointer-events: none;\n}\n\n.styles-module_DraggableComponent__oyE7Q.styles-module_isDragging__hldL4 .styles-module_tooltipWrapper__kqvmR {\n display: none;\n}\n\n.styles-module_overlay__knwhE {\n position: absolute;\n display: flex;\n align-items: center;\n min-width: max-content;\n height: 24px;\n z-index: 2;\n font-family: var(--exp-builder-font-stack-primary);\n font-size: 14px;\n font-weight: 500;\n background-color: var(--exp-builder-gray500);\n color: var(--exp-builder-color-white);\n padding: 4px 12px 4px 12px;\n transition: opacity 0.1s;\n opacity: 0;\n text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__lUsiC {\n opacity: 0;\n}\n\n.styles-module_overlayAssembly__3BKl4 {\n background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_isDragging__hldL4 > .styles-module_overlay__knwhE,\n.styles-module_isDragging__hldL4 > .styles-module_overlayContainer__lUsiC {\n opacity: 0 !important;\n}\n\n.styles-module_isDragging__hldL4:not(.styles-module_Dropzone__3R-sm):before {\n outline: 2px solid transparent !important;\n}\n\n.styles-module_isHoveringComponent__f7G5m > div > .styles-module_overlay__knwhE,\n.styles-module_DraggableComponent__oyE7Q:hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)) > div > .styles-module_overlay__knwhE {\n opacity: 1;\n}\n\n/* hovering related component in layers tab */\n\n.styles-module_DraggableComponent__oyE7Q:has(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z):before,\n.styles-module_DraggableComponent__oyE7Q:has(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z) .styles-module_DraggableComponent__oyE7Q:not(.styles-module_isHoveringComponent__f7G5m):not(.styles-module_isAssemblyBlock__goT9z):before,\n.styles-module_isHoveringComponent__f7G5m:not(.styles-module_isAssemblyBlock__goT9z) .styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):before,\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):not(.styles-module_isDragging__hldL4):hover:before,\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4):hover .styles-module_DraggableComponent__oyE7Q:before {\n outline: 2px dashed var(--exp-builder-gray500);\n}\n\n/* hovering component in layers tab */\n\n.styles-module_isHoveringComponent__f7G5m:not(.styles-module_isAssemblyBlock__goT9z):before,\n\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isAssemblyBlock__goT9z):not(.styles-module_isDragging__hldL4):hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)):before {\n outline: 2px solid var(--exp-builder-gray500);\n}\n\n/* hovering related pattern in layers tab */\n\n.styles-module_isAssemblyBlock__goT9z:has(.styles-module_isHoveringComponent__f7G5m):before,\n.styles-module_isAssemblyBlock__goT9z:has(.styles-module_isHoveringComponent__f7G5m) .styles-module_isAssemblyBlock__goT9z:not(.styles-module_isHoveringComponent__f7G5m):before,\n.styles-module_isHoveringComponent__f7G5m .styles-module_isAssemblyBlock__goT9z:before,\n\n.styles-module_isAssemblyBlock__goT9z:hover:before,\n.styles-module_isAssemblyBlock__goT9z:hover .styles-module_DraggableComponent__oyE7Q:before,\n.styles-module_DraggableComponent__oyE7Q:not(.styles-module_isDragging__hldL4):hover .styles-module_isAssemblyBlock__goT9z:before {\n outline: 2px dashed var(--exp-builder-purple600);\n}\n\n/* hovering pattern in layers tab */\n\n.styles-module_isAssemblyBlock__goT9z.styles-module_isHoveringComponent__f7G5m:before,\n\n.styles-module_isAssemblyBlock__goT9z:hover:not(:has(.styles-module_DraggableComponent__oyE7Q:hover)):before {\n outline: 2px solid var(--exp-builder-purple600);\n}\n";
|
|
5379
|
+
var styles$1 = {"DraggableComponent":"styles-module_DraggableComponent__oyE7Q","Dropzone":"styles-module_Dropzone__3R-sm","isSlot":"styles-module_isSlot__HI9yO","isDragging":"styles-module_isDragging__hldL4","fullHeight":"styles-module_fullHeight__afMfT","fullWidth":"styles-module_fullWidth__Od117","isRoot":"styles-module_isRoot__c-c-x","isEmptyCanvas":"styles-module_isEmptyCanvas__Mm6Al","isEmptyZone":"styles-module_isEmptyZone__XZ1Ej","DraggableClone":"styles-module_DraggableClone__CdKIH","isDestination":"styles-module_isDestination__sE70P","DropzoneClone":"styles-module_DropzoneClone__xiT8j","isDraggingThisComponent":"styles-module_isDraggingThisComponent__yCZTp","isSelected":"styles-module_isSelected__c2QEJ","tooltipWrapper":"styles-module_tooltipWrapper__kqvmR","overlay":"styles-module_overlay__knwhE","overlayContainer":"styles-module_overlayContainer__lUsiC","overlayAssembly":"styles-module_overlayAssembly__3BKl4","isHoveringComponent":"styles-module_isHoveringComponent__f7G5m","isAssemblyBlock":"styles-module_isAssemblyBlock__goT9z"};
|
|
5370
5380
|
styleInject(css_248z$1);
|
|
5371
5381
|
|
|
5372
5382
|
const Tooltip = ({ coordinates, id, label, isAssemblyBlock, isContainer, isSelected, }) => {
|
|
@@ -5720,6 +5730,14 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
|
|
|
5720
5730
|
if (!resolveDesignValue) {
|
|
5721
5731
|
return null;
|
|
5722
5732
|
}
|
|
5733
|
+
const isPatternWrapperComponentFullHeight = isRootAssembly
|
|
5734
|
+
? node.children.length === 1 &&
|
|
5735
|
+
resolveDesignValue(node?.children[0]?.data.props.cfHeight?.valuesByBreakpoint ?? {}, 'cfHeight') === '100%'
|
|
5736
|
+
: false;
|
|
5737
|
+
const isPatternWrapperComponentFullWidth = isRootAssembly
|
|
5738
|
+
? node.children.length === 1 &&
|
|
5739
|
+
resolveDesignValue(node?.children[0]?.data.props.cfWidth?.valuesByBreakpoint ?? {}, 'cfWidth') === '100%'
|
|
5740
|
+
: false;
|
|
5723
5741
|
return (React.createElement(Droppable, { droppableId: zoneId, direction: direction, isDropDisabled: !isDropzoneEnabled, renderClone: (provided, snapshot, rubic) => (React.createElement(EditorBlockClone, { node: content[rubic.source.index], resolveDesignValue: resolveDesignValue, provided: provided, snapshot: snapshot, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds })) }, (provided, snapshot) => {
|
|
5724
5742
|
return (React.createElement(WrapperComponent, { ...(provided || { droppableProps: {} }).droppableProps, ...htmlDraggableProps, ...htmlProps, ref: (refNode) => {
|
|
5725
5743
|
if (dragProps?.innerRef) {
|
|
@@ -5732,8 +5750,9 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
|
|
|
5732
5750
|
[styles$1.isDestination]: isDestination && !isAssembly,
|
|
5733
5751
|
[styles$1.isRoot]: isRootZone,
|
|
5734
5752
|
[styles$1.isEmptyZone]: !content.length,
|
|
5735
|
-
[styles$1.isAssembly]: isRootAssembly,
|
|
5736
5753
|
[styles$1.isSlot]: Boolean(slotId),
|
|
5754
|
+
[styles$1.fullHeight]: isPatternWrapperComponentFullHeight,
|
|
5755
|
+
[styles$1.fullWidth]: isPatternWrapperComponentFullWidth,
|
|
5737
5756
|
}) },
|
|
5738
5757
|
isEmptyCanvas ? (React.createElement(EmptyContainer, { isDragging: isRootZone && userIsDragging })) : (content
|
|
5739
5758
|
.filter((node) => node.data.slotId === slotId)
|