@contentful/experiences-visual-editor-react 0.0.1-alpha.4 → 0.0.1-alpha.5
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 +16 -5
- package/dist/index.js.map +1 -1
- package/dist/renderApp.js +16 -5
- package/dist/renderApp.js.map +1 -1
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -520,7 +520,7 @@ const builtInStyles = {
|
|
|
520
520
|
type: 'Text',
|
|
521
521
|
group: 'style',
|
|
522
522
|
description: 'The border of the section',
|
|
523
|
-
defaultValue: '
|
|
523
|
+
defaultValue: '0px solid rgba(0, 0, 0, 0)',
|
|
524
524
|
},
|
|
525
525
|
cfGap: {
|
|
526
526
|
displayName: 'Gap',
|
|
@@ -1442,7 +1442,7 @@ function gatherDeepReferencesFromTree(startingNode, dataSource) {
|
|
|
1442
1442
|
return deepReferences;
|
|
1443
1443
|
}
|
|
1444
1444
|
|
|
1445
|
-
var css_248z$6 = ".styles-module_DraggableComponent__m5-dA {\n pointer-events: all;\n position: relative;\n transition: outline 0.2s;\n cursor: grab;\n outline-offset: -2px;\n outline: 2px solid transparent;\n
|
|
1445
|
+
var css_248z$6 = ".styles-module_DraggableComponent__m5-dA {\n pointer-events: all;\n position: relative;\n transition: outline 0.2s;\n cursor: grab;\n box-sizing: border-box;\n display: flex;\n}\n\n.styles-module_DraggableComponent__m5-dA: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}\n\n.styles-module_DraggableClone__X8zTA:before {\n outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DraggableComponent__m5-dA > * {\n pointer-events: none;\n}\n\n.styles-module_isDragging__WHjPU {\n overflow: hidden;\n}\n\n.styles-module_isDragging__WHjPU * {\n pointer-events: none !important;\n}\n\n.styles-module_isSelected__BzICQ:before {\n outline: 2px solid transparent !important;\n}\n\n.styles-module_overlay__r4th9 {\n position: absolute;\n display: flex;\n align-items: center;\n min-width: max-content;\n height: 24px;\n z-index: 1;\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 border-radius: 0 0 2px 0;\n padding: 4px 12px 4px 12px;\n transition: opacity 0.2s;\n opacity: 0;\n text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__eiX-5 {\n opacity: 0;\n}\n\n.styles-module_overlayAssembly__tOzZU {\n background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_userIsDragging__lqbjG > .styles-module_overlay__r4th9,\n.styles-module_userIsDragging__lqbjG > .styles-module_overlayContainer__eiX-5 {\n opacity: 0 !important;\n}\n\n.styles-module_userIsDragging__lqbjG:before {\n outline: 2px solid transparent !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)) > .styles-module_overlay__r4th9 {\n opacity: 1;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id]:before {\n outline: 2px dashed var(--exp-builder-gray500);\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n outline: 2px solid var(--exp-builder-gray500);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:before,\n.styles-module_isAssemblyBlock__Y3Avk:hover div[data-rfd-draggable-id]:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id][data-cf-node-block-type^='assembly']:before {\n outline: 2px dashed var(--exp-builder-purple600);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n outline: 2px solid var(--exp-builder-purple600);\n}\n";
|
|
1446
1446
|
var styles$3 = {"DraggableComponent":"styles-module_DraggableComponent__m5-dA","DraggableClone":"styles-module_DraggableClone__X8zTA","isDragging":"styles-module_isDragging__WHjPU","isSelected":"styles-module_isSelected__BzICQ","overlay":"styles-module_overlay__r4th9","overlayContainer":"styles-module_overlayContainer__eiX-5","overlayAssembly":"styles-module_overlayAssembly__tOzZU","userIsDragging":"styles-module_userIsDragging__lqbjG","isAssemblyBlock":"styles-module_isAssemblyBlock__Y3Avk"};
|
|
1447
1447
|
styleInject(css_248z$6);
|
|
1448
1448
|
|
|
@@ -2016,9 +2016,11 @@ const useSelectedInstanceCoordinates = ({ node }) => {
|
|
|
2016
2016
|
if (selectedNodeId !== node.data.id) {
|
|
2017
2017
|
return;
|
|
2018
2018
|
}
|
|
2019
|
+
// Allows the drop animation to finish before
|
|
2020
|
+
// calculating the components coordinates
|
|
2019
2021
|
setTimeout(() => {
|
|
2020
2022
|
sendSelectedComponentCoordinates(node.data.id);
|
|
2021
|
-
},
|
|
2023
|
+
}, 10);
|
|
2022
2024
|
}, [node, selectedNodeId]);
|
|
2023
2025
|
const selectedElement = node.data.id
|
|
2024
2026
|
? document.querySelector(`[data-cf-node-id="${selectedNodeId}"]`)
|
|
@@ -2511,7 +2513,7 @@ const DraggableChildComponent = (props) => {
|
|
|
2511
2513
|
})));
|
|
2512
2514
|
};
|
|
2513
2515
|
|
|
2514
|
-
var css_248z$2 = ".styles-module_container__te-1H {\n margin-left: auto;\n margin-right: auto;\n position: relative;\n height: 100%;\n
|
|
2516
|
+
var css_248z$2 = ".styles-module_container__te-1H {\n margin-left: auto;\n margin-right: auto;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: transparent;\n transition: background-color 0.2s;\n pointer-events: all;\n}\n\n.styles-module_container__te-1H:not(.styles-module_isRoot__5cn-i):before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n outline-offset: -1px;\n outline: 2px solid transparent;\n z-index: 1;\n transition: outline 0.2s;\n}\n\n.styles-module_isRoot__5cn-i,\n.styles-module_isEmptyCanvas__0XHZR {\n flex: 1;\n}\n\n.styles-module_isEmptyZone__zVpnZ {\n min-height: 80px;\n}\n\n.styles-module_isDragging__Gm8v5:not(.styles-module_isRoot__5cn-i):before {\n outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_isDestination__5sCQx:not(.styles-module_isRoot__5cn-i):before {\n transition: outline 0.2s, 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_hitbox__YQ-1Z {\n position: fixed;\n pointer-events: all !important;\n}\n";
|
|
2515
2517
|
var styles$2 = {"container":"styles-module_container__te-1H","isRoot":"styles-module_isRoot__5cn-i","isEmptyCanvas":"styles-module_isEmptyCanvas__0XHZR","isEmptyZone":"styles-module_isEmptyZone__zVpnZ","isDragging":"styles-module_isDragging__Gm8v5","isDestination":"styles-module_isDestination__5sCQx","hitbox":"styles-module_hitbox__YQ-1Z"};
|
|
2516
2518
|
styleInject(css_248z$2);
|
|
2517
2519
|
|
|
@@ -4159,10 +4161,19 @@ const RootRenderer = ({ onChange }) => {
|
|
|
4159
4161
|
document.removeEventListener('click', handleClickOutside);
|
|
4160
4162
|
};
|
|
4161
4163
|
}, []);
|
|
4162
|
-
const handleClickOutside = () => {
|
|
4164
|
+
const handleClickOutside = (e) => {
|
|
4165
|
+
const element = e.target;
|
|
4166
|
+
const isRoot = element.getAttribute('data-ctfl-zone-id') === ROOT_ID;
|
|
4167
|
+
const clickedOnCanvas = element.closest(`[data-ctfl-root]`);
|
|
4168
|
+
if (clickedOnCanvas && !isRoot) {
|
|
4169
|
+
return;
|
|
4170
|
+
}
|
|
4163
4171
|
sendMessage(OUTGOING_EVENTS.OutsideCanvasClick, {
|
|
4164
4172
|
outsideCanvasClick: true,
|
|
4165
4173
|
});
|
|
4174
|
+
sendMessage(OUTGOING_EVENTS.ComponentSelected, {
|
|
4175
|
+
selectedId: '',
|
|
4176
|
+
});
|
|
4166
4177
|
};
|
|
4167
4178
|
const handleResizeCanvas = useCallback(() => {
|
|
4168
4179
|
const parentElement = containerRef.current?.parentElement;
|