@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/renderApp.js
CHANGED
|
@@ -34864,7 +34864,7 @@ const builtInStyles = {
|
|
|
34864
34864
|
type: 'Text',
|
|
34865
34865
|
group: 'style',
|
|
34866
34866
|
description: 'The border of the section',
|
|
34867
|
-
defaultValue: '
|
|
34867
|
+
defaultValue: '0px solid rgba(0, 0, 0, 0)',
|
|
34868
34868
|
},
|
|
34869
34869
|
cfGap: {
|
|
34870
34870
|
displayName: 'Gap',
|
|
@@ -46168,7 +46168,7 @@ var classnames = {exports: {}};
|
|
|
46168
46168
|
var classnamesExports = classnames.exports;
|
|
46169
46169
|
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
46170
46170
|
|
|
46171
|
-
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
|
|
46171
|
+
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";
|
|
46172
46172
|
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"};
|
|
46173
46173
|
styleInject(css_248z$6);
|
|
46174
46174
|
|
|
@@ -50330,9 +50330,11 @@ const useSelectedInstanceCoordinates = ({ node }) => {
|
|
|
50330
50330
|
if (selectedNodeId !== node.data.id) {
|
|
50331
50331
|
return;
|
|
50332
50332
|
}
|
|
50333
|
+
// Allows the drop animation to finish before
|
|
50334
|
+
// calculating the components coordinates
|
|
50333
50335
|
setTimeout(() => {
|
|
50334
50336
|
sendSelectedComponentCoordinates(node.data.id);
|
|
50335
|
-
},
|
|
50337
|
+
}, 10);
|
|
50336
50338
|
}, [node, selectedNodeId]);
|
|
50337
50339
|
const selectedElement = node.data.id
|
|
50338
50340
|
? document.querySelector(`[data-cf-node-id="${selectedNodeId}"]`)
|
|
@@ -51368,7 +51370,7 @@ const DraggableChildComponent = (props) => {
|
|
|
51368
51370
|
})));
|
|
51369
51371
|
};
|
|
51370
51372
|
|
|
51371
|
-
var css_248z$2 = ".styles-module_container__te-1H {\n margin-left: auto;\n margin-right: auto;\n position: relative;\n height: 100%;\n
|
|
51373
|
+
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";
|
|
51372
51374
|
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"};
|
|
51373
51375
|
styleInject(css_248z$2);
|
|
51374
51376
|
|
|
@@ -53783,10 +53785,19 @@ const RootRenderer = ({ onChange }) => {
|
|
|
53783
53785
|
document.removeEventListener('click', handleClickOutside);
|
|
53784
53786
|
};
|
|
53785
53787
|
}, []);
|
|
53786
|
-
const handleClickOutside = () => {
|
|
53788
|
+
const handleClickOutside = (e) => {
|
|
53789
|
+
const element = e.target;
|
|
53790
|
+
const isRoot = element.getAttribute('data-ctfl-zone-id') === ROOT_ID;
|
|
53791
|
+
const clickedOnCanvas = element.closest(`[data-ctfl-root]`);
|
|
53792
|
+
if (clickedOnCanvas && !isRoot) {
|
|
53793
|
+
return;
|
|
53794
|
+
}
|
|
53787
53795
|
sendMessage(OUTGOING_EVENTS.OutsideCanvasClick, {
|
|
53788
53796
|
outsideCanvasClick: true,
|
|
53789
53797
|
});
|
|
53798
|
+
sendMessage(OUTGOING_EVENTS.ComponentSelected, {
|
|
53799
|
+
selectedId: '',
|
|
53800
|
+
});
|
|
53790
53801
|
};
|
|
53791
53802
|
const handleResizeCanvas = reactExports.useCallback(() => {
|
|
53792
53803
|
const parentElement = containerRef.current?.parentElement;
|