@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/renderApp.js
CHANGED
|
@@ -58991,11 +58991,11 @@ function useEditorSubscriber() {
|
|
|
58991
58991
|
return;
|
|
58992
58992
|
}
|
|
58993
58993
|
const eventData = tryParseMessage(event);
|
|
58994
|
+
console.debug(`[experiences-sdk-react::onMessage] Received message [${eventData.eventType}]`, eventData);
|
|
58994
58995
|
if (eventData.eventType === PostMessageMethods$2.REQUESTED_ENTITIES) {
|
|
58995
58996
|
// Expected message: This message is handled in the EntityStore to store fetched entities
|
|
58996
58997
|
return;
|
|
58997
58998
|
}
|
|
58998
|
-
console.debug(`[experiences-sdk-react::onMessage] Received message [${eventData.eventType}]`, eventData);
|
|
58999
58999
|
switch (eventData.eventType) {
|
|
59000
59000
|
case INCOMING_EVENTS.ExperienceUpdated: {
|
|
59001
59001
|
const { tree, locale, changedNode, changedValueType, assemblies } = eventData.payload;
|
|
@@ -59615,6 +59615,9 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
59615
59615
|
if (!definition || node.type === ASSEMBLY_NODE_TYPE) {
|
|
59616
59616
|
return propsBase;
|
|
59617
59617
|
}
|
|
59618
|
+
// Note, that here we iterate over DEFINITION variables, not the actual node variables
|
|
59619
|
+
// this means that node may have "orphan" props, or some "newborn" props will be initialized
|
|
59620
|
+
// with the default values.
|
|
59618
59621
|
const extractedProps = Object.entries(definition.variables).reduce((acc, [variableName, variableDefinition]) => {
|
|
59619
59622
|
const variableMapping = node.data.props[variableName];
|
|
59620
59623
|
if (!variableMapping) {
|
|
@@ -59717,6 +59720,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
59717
59720
|
renderDropzone,
|
|
59718
59721
|
]);
|
|
59719
59722
|
const cfStyles = reactExports.useMemo(() => buildCfStyles(props), [props]);
|
|
59723
|
+
const cfVisibility = props['cfVisibility'];
|
|
59720
59724
|
const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
|
|
59721
59725
|
const isSingleColumn = node?.data.blockId === CONTENTFUL_COMPONENTS$1.columns.id;
|
|
59722
59726
|
const isStructureComponent = isContentfulStructureComponent(node?.data.blockId);
|
|
@@ -59726,13 +59730,18 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
59726
59730
|
const overrideStyles = {};
|
|
59727
59731
|
const wrapperStyles = { width: options?.wrapContainerWidth };
|
|
59728
59732
|
if (requiresDragWrapper) {
|
|
59729
|
-
|
|
59733
|
+
// when element is marked by user as not-visible, on that element the node `display: none !important`
|
|
59734
|
+
// will be set and it will disappear. However, when such a node has a wrapper div, the wrapper
|
|
59735
|
+
// should not have any css properties (at least not ones which force size), as such div should
|
|
59736
|
+
// simply be a zero height wrapper around element with `display: none !important`.
|
|
59737
|
+
// Hence we guard all wrapperStyles with `cfVisibility` check.
|
|
59738
|
+
if (cfVisibility && cfStyles.width)
|
|
59730
59739
|
wrapperStyles.width = cfStyles.width;
|
|
59731
|
-
if (cfStyles.height)
|
|
59740
|
+
if (cfVisibility && cfStyles.height)
|
|
59732
59741
|
wrapperStyles.height = cfStyles.height;
|
|
59733
|
-
if (cfStyles.maxWidth)
|
|
59742
|
+
if (cfVisibility && cfStyles.maxWidth)
|
|
59734
59743
|
wrapperStyles.maxWidth = cfStyles.maxWidth;
|
|
59735
|
-
if (cfStyles.margin)
|
|
59744
|
+
if (cfVisibility && cfStyles.margin)
|
|
59736
59745
|
wrapperStyles.margin = cfStyles.margin;
|
|
59737
59746
|
}
|
|
59738
59747
|
// Override component styles to fill the wrapper
|
|
@@ -59767,6 +59776,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
59767
59776
|
node.data.id,
|
|
59768
59777
|
draggingId,
|
|
59769
59778
|
nodeRect,
|
|
59779
|
+
cfVisibility,
|
|
59770
59780
|
]);
|
|
59771
59781
|
// Styles that will be applied to the component element
|
|
59772
59782
|
// This has to be memoized to avoid recreating the styles in useEditorModeClassName on every render
|
|
@@ -60408,8 +60418,8 @@ var classnames = {exports: {}};
|
|
|
60408
60418
|
var classnamesExports = classnames.exports;
|
|
60409
60419
|
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
60410
60420
|
|
|
60411
|
-
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-
|
|
60412
|
-
var styles$1 = {"DraggableComponent":"styles-module_DraggableComponent__oyE7Q","Dropzone":"styles-module_Dropzone__3R-sm","isSlot":"styles-module_isSlot__HI9yO","isDragging":"styles-module_isDragging__hldL4","
|
|
60421
|
+
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";
|
|
60422
|
+
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"};
|
|
60413
60423
|
styleInject(css_248z$1);
|
|
60414
60424
|
|
|
60415
60425
|
const Tooltip = ({ coordinates, id, label, isAssemblyBlock, isContainer, isSelected, }) => {
|
|
@@ -60763,6 +60773,14 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
|
|
|
60763
60773
|
if (!resolveDesignValue) {
|
|
60764
60774
|
return null;
|
|
60765
60775
|
}
|
|
60776
|
+
const isPatternWrapperComponentFullHeight = isRootAssembly
|
|
60777
|
+
? node.children.length === 1 &&
|
|
60778
|
+
resolveDesignValue(node?.children[0]?.data.props.cfHeight?.valuesByBreakpoint ?? {}, 'cfHeight') === '100%'
|
|
60779
|
+
: false;
|
|
60780
|
+
const isPatternWrapperComponentFullWidth = isRootAssembly
|
|
60781
|
+
? node.children.length === 1 &&
|
|
60782
|
+
resolveDesignValue(node?.children[0]?.data.props.cfWidth?.valuesByBreakpoint ?? {}, 'cfWidth') === '100%'
|
|
60783
|
+
: false;
|
|
60766
60784
|
return (React$1.createElement(ConnectedDroppable$1, { droppableId: zoneId, direction: direction, isDropDisabled: !isDropzoneEnabled, renderClone: (provided, snapshot, rubic) => (React$1.createElement(EditorBlockClone, { node: content[rubic.source.index], resolveDesignValue: resolveDesignValue, provided: provided, snapshot: snapshot, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds })) }, (provided, snapshot) => {
|
|
60767
60785
|
return (React$1.createElement(WrapperComponent, { ...(provided || { droppableProps: {} }).droppableProps, ...htmlDraggableProps, ...htmlProps, ref: (refNode) => {
|
|
60768
60786
|
if (dragProps?.innerRef) {
|
|
@@ -60775,8 +60793,9 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
|
|
|
60775
60793
|
[styles$1.isDestination]: isDestination && !isAssembly,
|
|
60776
60794
|
[styles$1.isRoot]: isRootZone,
|
|
60777
60795
|
[styles$1.isEmptyZone]: !content.length,
|
|
60778
|
-
[styles$1.isAssembly]: isRootAssembly,
|
|
60779
60796
|
[styles$1.isSlot]: Boolean(slotId),
|
|
60797
|
+
[styles$1.fullHeight]: isPatternWrapperComponentFullHeight,
|
|
60798
|
+
[styles$1.fullWidth]: isPatternWrapperComponentFullWidth,
|
|
60780
60799
|
}) },
|
|
60781
60800
|
isEmptyCanvas ? (React$1.createElement(EmptyContainer, { isDragging: isRootZone && userIsDragging })) : (content
|
|
60782
60801
|
.filter((node) => node.data.slotId === slotId)
|