@contentful/experiences-visual-editor-react 1.12.0 → 1.13.0-beta.0

package/dist/index.js

@@ -806,6 +806,7 @@ const HyperlinkValueSchema = z
     .object({
     type: z.literal('HyperlinkValue'),
     linkTargetKey: z.string(),
+    /** Allows to override parts of the URL, e.g. the locale */
     overrides: z.object({}).optional(),
 })
     .strict();
@@ -1427,7 +1428,7 @@ const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpoint
     if (valuesByBreakpoint instanceof Object) {
         // Assume that the values are sorted by media query to apply the cascading CSS logic
         for (let index = activeBreakpointIndex; index >= 0; index--) {
-            const breakpointId = breakpoints[index].id;
+            const breakpointId = breakpoints[index]?.id;
             if (valuesByBreakpoint[breakpointId]) {
                 // If the value is defined, we use it and stop the breakpoints cascade
                 return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
@@ -1435,8 +1436,10 @@ const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpoint
         }
         // If no breakpoint matched, we search and apply the fallback breakpoint
         const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
-        const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex].id;
-        return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
+        const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex]?.id;
+        if (valuesByBreakpoint[fallbackBreakpointId]) {
+            return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
+        }
     }
     else {
         // Old design properties did not support breakpoints, keep for backward compatibility
@@ -4029,8 +4032,22 @@ class ImportedComponentError extends Error {
         this.name = 'ImportedComponentError';
     }
 }
+/** Use this error class (inside visual-editor) if you want to make sure that the error
+ * is tracked via Sentry. Currently, the `ImportedComponentErrorBoundary` is swallowing
+ * more errors than intended, so this way we make sure that the errors are being tracked. */
+class SDKVisualEditorError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'SDKVisualEditorError';
+    }
+}
 class ImportedComponentErrorBoundary extends React.Component {
     componentDidCatch(error, _errorInfo) {
+        if (error instanceof SDKVisualEditorError) {
+            // Turning it into ImportedComponentError skips it during error tracking. By explicitly creating
+            // a SDKVisualEditorError, we can make sure that errors in visual-editor are still being tracked.
+            throw error;
+        }
         const err = new ImportedComponentError(error.message);
         err.stack = error.stack;
         throw err;
@@ -4475,7 +4492,7 @@ const getTooltipPositions = ({ previewSize, tooltipRect, coordinates, }) => {
     return newTooltipStyles;
 };
 
-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";
+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_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";
 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"};
 styleInject(css_248z$1);
 
@@ -4547,7 +4564,7 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index,
     const ref = useRef(null);
     const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
     const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
-    const { node, componentId, elementToRender } = useComponent({
+    const { node, componentId, elementToRender, definition } = useComponent({
         node: rawNode,
         resolveDesignValue,
         renderDropzone,
@@ -4557,7 +4574,7 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index,
     const setDomRect = useDraggedItemStore((state) => state.setDomRect);
     const isHoveredComponent = useDraggedItemStore((state) => state.hoveredComponentId === componentId);
     const coordinates = useSelectedInstanceCoordinates({ node });
-    const displayName = node.data.displayName;
+    const displayName = node.data.displayName || rawNode.data.displayName || definition?.name;
     const testId = `draggable-${node.data.blockId ?? 'node'}`;
     const isSelected = node.data.id === selectedNodeId;
     const isContainer = node.data.blockId === CONTENTFUL_COMPONENTS.container.id;
@@ -4607,7 +4624,7 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index,
         setDomRect(e.currentTarget.getBoundingClientRect());
     };
     const ToolTipAndPlaceholder = (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { id: componentId, coordinates: coordinates, isAssemblyBlock: isAssemblyBlock, isContainer: isContainer, label: displayName || 'No label specified' }),
+        React.createElement(Tooltip, { id: componentId, coordinates: coordinates, isAssemblyBlock: isAssemblyBlock || isAssembly, isContainer: isContainer, label: displayName || 'No label specified' }),
         React.createElement(Placeholder, { ...placeholder, id: componentId }),
         isStructureComponent && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, isEmptyZone: isEmptyZone }))));
     return (React.createElement(Draggable, { key: componentId, draggableId: componentId, index: index, isDragDisabled: isDragDisabled, disableInteractiveElementBlocking: true }, (provided, snapshot) => elementToRender({
@@ -4621,7 +4638,7 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index,
                 ref.current = refNode;
             },
             className: classNames(styles$1.DraggableComponent, {
-                [styles$1.isAssemblyBlock]: isAssemblyBlock,
+                [styles$1.isAssemblyBlock]: isAssemblyBlock || isAssembly,
                 [styles$1.isDragging]: snapshot?.isDragging || userIsDragging,
                 [styles$1.isSelected]: isSelected,
                 [styles$1.isHoveringComponent]: isHoveredComponent,