@contentful/experiences-visual-editor-react 1.11.1 → 1.11.2-beta.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.js +17 -26
- package/dist/index.js.map +1 -1
- package/dist/renderApp.js +17 -26
- package/dist/renderApp.js.map +1 -1
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -3616,13 +3616,13 @@ const getUnboundValues = ({ key, fallback, unboundValues, }) => {
|
|
|
3616
3616
|
return get$1(unboundValues, lodashPath, fallback);
|
|
3617
3617
|
};
|
|
3618
3618
|
|
|
3619
|
-
const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, renderDropzone, definition, userIsDragging,
|
|
3619
|
+
const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, renderDropzone, definition, userIsDragging, }) => {
|
|
3620
3620
|
const unboundValues = useEditorStore((state) => state.unboundValues);
|
|
3621
3621
|
const hyperlinkPattern = useEditorStore((state) => state.hyperLinkPattern);
|
|
3622
3622
|
const locale = useEditorStore((state) => state.locale);
|
|
3623
3623
|
const dataSource = useEditorStore((state) => state.dataSource);
|
|
3624
3624
|
const entityStore = useEntityStore((state) => state.entityStore);
|
|
3625
|
-
const isEmptyZone = !node.children.
|
|
3625
|
+
const isEmptyZone = !node.children.length;
|
|
3626
3626
|
const props = useMemo(() => {
|
|
3627
3627
|
const propsBase = {
|
|
3628
3628
|
cfSsrClassName: node.data.props.cfSsrClassName
|
|
@@ -3642,14 +3642,14 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
|
|
|
3642
3642
|
};
|
|
3643
3643
|
}
|
|
3644
3644
|
if (variableMapping.type === 'DesignValue') {
|
|
3645
|
-
const
|
|
3645
|
+
const valuesByBreakpoint = resolveDesignValue(variableMapping.valuesByBreakpoint, variableName);
|
|
3646
3646
|
const designValue = variableName === 'cfHeight'
|
|
3647
3647
|
? calculateNodeDefaultHeight({
|
|
3648
3648
|
blockId: node.data.blockId,
|
|
3649
3649
|
children: node.children,
|
|
3650
|
-
value:
|
|
3650
|
+
value: valuesByBreakpoint,
|
|
3651
3651
|
})
|
|
3652
|
-
:
|
|
3652
|
+
: valuesByBreakpoint;
|
|
3653
3653
|
return {
|
|
3654
3654
|
...acc,
|
|
3655
3655
|
[variableName]: designValue,
|
|
@@ -3943,7 +3943,7 @@ const MissingComponentPlacehoder = ({ blockId }) => {
|
|
|
3943
3943
|
"'"));
|
|
3944
3944
|
};
|
|
3945
3945
|
|
|
3946
|
-
const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userIsDragging,
|
|
3946
|
+
const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userIsDragging, }) => {
|
|
3947
3947
|
const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
|
|
3948
3948
|
const entityStore = useEntityStore((state) => state.entityStore);
|
|
3949
3949
|
const node = useMemo(() => {
|
|
@@ -3977,7 +3977,6 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
|
|
|
3977
3977
|
renderDropzone,
|
|
3978
3978
|
definition: componentRegistration?.definition,
|
|
3979
3979
|
userIsDragging,
|
|
3980
|
-
slotId,
|
|
3981
3980
|
});
|
|
3982
3981
|
const elementToRender = (props) => {
|
|
3983
3982
|
if (!componentRegistration) {
|
|
@@ -4067,12 +4066,8 @@ const calcNewComponentStyles = (params) => {
|
|
|
4067
4066
|
const [horizontalPadding, verticalPadding] = getPaddingOffset(dropzone);
|
|
4068
4067
|
const width = isHorizontal ? DRAGGABLE_WIDTH : dropzoneSizes.width - horizontalPadding;
|
|
4069
4068
|
const height = isHorizontal ? dropzoneSizes.height - verticalPadding : DRAGGABLE_HEIGHT;
|
|
4070
|
-
const top = isHorizontal
|
|
4071
|
-
|
|
4072
|
-
: -height;
|
|
4073
|
-
const left = isHorizontal
|
|
4074
|
-
? -width
|
|
4075
|
-
: calcOffsetLeft(element.parentElement, width, elementSizes.width);
|
|
4069
|
+
const top = isHorizontal ? calcOffsetTop(element, height, elementSizes.height) : -height;
|
|
4070
|
+
const left = isHorizontal ? -width : calcOffsetLeft(element, width, elementSizes.width);
|
|
4076
4071
|
return {
|
|
4077
4072
|
width,
|
|
4078
4073
|
height,
|
|
@@ -4106,12 +4101,8 @@ const calcMovementStyles = (params) => {
|
|
|
4106
4101
|
const [horizontalPadding, verticalPadding] = getPaddingOffset(dropzone);
|
|
4107
4102
|
const width = isHorizontal ? draggableSizes.width : dropzoneSizes.width - horizontalPadding;
|
|
4108
4103
|
const height = isHorizontal ? dropzoneSizes.height - verticalPadding : draggableSizes.height;
|
|
4109
|
-
const top = isHorizontal
|
|
4110
|
-
|
|
4111
|
-
: -height;
|
|
4112
|
-
const left = isHorizontal
|
|
4113
|
-
? -width
|
|
4114
|
-
: calcOffsetLeft(element.parentElement, width, elementSizes.width);
|
|
4104
|
+
const top = isHorizontal ? calcOffsetTop(element, height, elementSizes.height) : -height;
|
|
4105
|
+
const left = isHorizontal ? -width : calcOffsetLeft(element, width, elementSizes.width);
|
|
4115
4106
|
return {
|
|
4116
4107
|
width,
|
|
4117
4108
|
height,
|
|
@@ -4156,6 +4147,7 @@ const Placeholder = (props) => {
|
|
|
4156
4147
|
}),
|
|
4157
4148
|
backgroundColor: 'rgba(var(--exp-builder-blue300-rgb), 0.5)',
|
|
4158
4149
|
position: 'absolute',
|
|
4150
|
+
pointerEvents: 'none',
|
|
4159
4151
|
} })));
|
|
4160
4152
|
};
|
|
4161
4153
|
|
|
@@ -4375,8 +4367,8 @@ const getTooltipPositions = ({ previewSize, tooltipRect, coordinates, }) => {
|
|
|
4375
4367
|
return newTooltipStyles;
|
|
4376
4368
|
};
|
|
4377
4369
|
|
|
4378
|
-
var css_248z$1 = ".styles-module_DraggableComponent__oyE7Q {\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 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_Dropzone__3R-sm.styles-module_isAssembly__HstYv {\n width: 100%;\n}\n\n.styles-
|
|
4379
|
-
var styles$1 = {"DraggableComponent":"styles-module_DraggableComponent__oyE7Q","
|
|
4370
|
+
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_Dropzone__3R-sm.styles-module_isAssembly__HstYv {\n width: 100%;\n}\n\n.styles-module_DraggableComponent__oyE7Q:is(.styles-module_Dropzone__3R-sm).styles-module_isDragging__hldL4 {\n pointer-events: all;\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}\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;\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_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_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";
|
|
4371
|
+
var styles$1 = {"DraggableComponent":"styles-module_DraggableComponent__oyE7Q","Dropzone":"styles-module_Dropzone__3R-sm","isSlot":"styles-module_isSlot__HI9yO","isDragging":"styles-module_isDragging__hldL4","isAssembly":"styles-module_isAssembly__HstYv","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"};
|
|
4380
4372
|
styleInject(css_248z$1);
|
|
4381
4373
|
|
|
4382
4374
|
const Tooltip = ({ coordinates, id, label, isAssemblyBlock, isContainer }) => {
|
|
@@ -4452,7 +4444,6 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index,
|
|
|
4452
4444
|
resolveDesignValue,
|
|
4453
4445
|
renderDropzone,
|
|
4454
4446
|
userIsDragging,
|
|
4455
|
-
slotId,
|
|
4456
4447
|
});
|
|
4457
4448
|
const { isSingleColumn, isWrapped } = useSingleColumn(node, resolveDesignValue);
|
|
4458
4449
|
const setDomRect = useDraggedItemStore((state) => state.setDomRect);
|
|
@@ -4523,9 +4514,8 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index,
|
|
|
4523
4514
|
},
|
|
4524
4515
|
className: classNames(styles$1.DraggableComponent, {
|
|
4525
4516
|
[styles$1.isAssemblyBlock]: isAssemblyBlock,
|
|
4526
|
-
[styles$1.isDragging]: snapshot?.isDragging,
|
|
4517
|
+
[styles$1.isDragging]: snapshot?.isDragging || userIsDragging,
|
|
4527
4518
|
[styles$1.isSelected]: isSelected,
|
|
4528
|
-
[styles$1.userIsDragging]: userIsDragging,
|
|
4529
4519
|
[styles$1.isHoveringComponent]: isHoveredComponent,
|
|
4530
4520
|
}),
|
|
4531
4521
|
style: getStyle$1(provided.draggableProps.style, snapshot),
|
|
@@ -4724,14 +4714,15 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
|
|
|
4724
4714
|
dragProps.innerRef(refNode);
|
|
4725
4715
|
}
|
|
4726
4716
|
provided?.innerRef(refNode);
|
|
4727
|
-
}, id: zoneId, "data-ctfl-zone-id": zoneId, className: classNames(dragProps?.className, styles$1.Dropzone, className, {
|
|
4717
|
+
}, id: zoneId, "data-ctfl-zone-id": zoneId, "data-ctfl-slot-id": slotId, className: classNames(dragProps?.className, styles$1.Dropzone, className, {
|
|
4728
4718
|
[styles$1.isEmptyCanvas]: isEmptyCanvas,
|
|
4729
4719
|
[styles$1.isDragging]: userIsDragging,
|
|
4730
4720
|
[styles$1.isDestination]: isDestination && !isAssembly,
|
|
4731
4721
|
[styles$1.isRoot]: isRootZone,
|
|
4732
4722
|
[styles$1.isEmptyZone]: !content.length,
|
|
4733
4723
|
[styles$1.isAssembly]: isRootAssembly,
|
|
4734
|
-
|
|
4724
|
+
[styles$1.isSlot]: Boolean(slotId),
|
|
4725
|
+
}) },
|
|
4735
4726
|
isEmptyCanvas ? (React.createElement(EmptyContainer, { isDragging: isRootZone && userIsDragging })) : (content
|
|
4736
4727
|
.filter((node) => node.data.slotId === slotId)
|
|
4737
4728
|
.map((item, i) => (React.createElement(EditorBlock, { placeholder: {
|