@contentful/experiences-visual-editor-react 1.7.2-dev-20240613T0816-4d3b2da.0 → 1.8.0-beta.0

package/dist/index.js

@@ -2434,7 +2434,7 @@ function getStyle$2(style, snapshot) {
         transitionDuration: `0.001s`,
     };
 }
-const DraggableComponent = ({ children, id, index, isAssemblyBlock = false, isSelected = false, onClick = () => null, onMouseOver = () => null, coordinates, userIsDragging, style, wrapperProps, isContainer, blockId, isDragDisabled = false, placeholder, definition, displayName, ...rest }) => {
+const DraggableComponent = ({ children, id, index, isAssemblyBlock = false, isSelected = false, onClick = () => null, onMouseOver = () => null, coordinates, userIsDragging, style, wrapperProps, isContainer, blockId, isDragDisabled = false, placeholder, displayName, ...rest }) => {
     const ref = useRef(null);
     const setDomRect = useDraggedItemStore((state) => state.setDomRect);
     const isHoveredComponent = useDraggedItemStore((state) => state.hoveredComponentId === id);
@@ -2462,7 +2462,7 @@ const DraggableComponent = ({ children, id, index, isAssemblyBlock = false, isSe
             e.stopPropagation();
             setDomRect(e.currentTarget.getBoundingClientRect());
         }, onMouseOver: onMouseOver, onClick: onClick },
-        React.createElement(Tooltip, { id: id, coordinates: coordinates, isAssemblyBlock: isAssemblyBlock, isContainer: isContainer, label: displayName || definition.name || 'No label specified' }),
+        React.createElement(Tooltip, { id: id, coordinates: coordinates, isAssemblyBlock: isAssemblyBlock, isContainer: isContainer, label: displayName || 'No label specified' }),
         React.createElement(Placeholder, { ...placeholder, id: id }),
         children))));
 };
@@ -2828,9 +2828,12 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         node,
         renderDropzone,
         ...omit(props, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName']),
-        ...(definition.children ? { children: renderDropzone(node) } : {}),
+        ...(definition?.children ? { children: renderDropzone(node) } : {}),
+    };
+    return {
+        componentProps,
+        wrapperProps,
     };
-    return { componentProps, wrapperProps };
 };
 const addExtraDropzonePadding = (padding) => padding
     .split(' ')
@@ -3068,7 +3071,8 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
             });
         }
         if (!registration) {
-            throw Error(`Component registration not found for component with id: "${node.data.blockId}". The component might of been removed. To proceed, remove the component manually from the layers tab.`);
+            console.warn(`Component registration not found for component with id: "${node.data.blockId}". The component might of been removed. To proceed, remove the component manually from the layers tab.`);
+            return undefined;
         }
         return registration;
     }, [node]);
@@ -3078,24 +3082,40 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
         areEntitiesFetched,
         resolveDesignValue,
         renderDropzone,
-        definition: componentRegistration.definition,
+        definition: componentRegistration?.definition,
         userIsDragging,
         slotId,
     });
     // Only pass editor props to built-in components
     const { editorMode, renderDropzone: _renderDropzone, ...otherComponentProps } = componentProps;
-    const elementToRender = builtInComponents.includes(node.data.blockId || '')
-        ? (dragProps) => React.createElement(componentRegistration.component, { ...dragProps, ...componentProps })
-        : node.type === ASSEMBLY_NODE_TYPE
-            ? // Assembly.tsx requires renderDropzone and editorMode as well
-                () => React.createElement(componentRegistration.component, componentProps)
-            : () => React.createElement(ImportedComponentErrorBoundary, null, React.createElement(componentRegistration.component, otherComponentProps));
+    const createElementToRender = (componentRegistration) => {
+        if (builtInComponents.includes(node.data.blockId || '')) {
+            // eslint-disable-next-line react/display-name
+            return (dragProps) => React.createElement(componentRegistration.component, {
+                ...dragProps,
+                ...componentProps,
+            });
+        }
+        if (node.type === ASSEMBLY_NODE_TYPE) {
+            // Assembly.tsx requires renderDropzone and editorMode as well
+            // eslint-disable-next-line react/display-name
+            return () => React.createElement(componentRegistration.component, componentProps);
+        }
+        return function createComponentWrappedInErrorBoundary() {
+            const elementToWrap = React.createElement(componentRegistration.component, otherComponentProps);
+            return React.createElement(ImportedComponentErrorBoundary, null, elementToWrap);
+        };
+    };
+    const elementToRender = componentRegistration
+        ? createElementToRender(componentRegistration)
+        : null;
     return {
+        isComponentMissing: !componentRegistration,
         node,
         componentId,
         elementToRender,
         wrapperProps,
-        definition: componentRegistration.definition,
+        definition: componentRegistration?.definition,
     };
 };
 
@@ -3671,11 +3691,22 @@ const Hitboxes = ({ zoneId, parentZoneId, isEmptyZone }) => {
     return createPortal(ActiveHitboxes, hitboxContainer);
 };
 
+const MissingComponentPlacehoder = ({ blockId }) => {
+    return (React.createElement("div", { style: {
+            border: '1px solid red',
+            width: '100%',
+            height: '100%',
+        } },
+        "Missing component '",
+        blockId,
+        "'"));
+};
+
 const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index, zoneId, userIsDragging, placeholder, }) => {
     const { slotId } = parseZoneId(zoneId);
     const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
     const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
-    const { node, wrapperProps, definition, elementToRender } = useComponent({
+    const { node, wrapperProps, definition, elementToRender, isComponentMissing } = useComponent({
         node: rawNode,
         resolveDesignValue,
         renderDropzone,
@@ -3718,10 +3749,14 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index,
             nodeId: node.data.id,
         });
     };
+    if (isComponentMissing || !definition || !elementToRender) {
+        return (React.createElement(DraggableComponent, { placeholder: placeholder, id: node.data.id, index: index, isAssemblyBlock: isAssembly || isAssemblyBlock, isDragDisabled: false, isSelected: selectedNodeId === node.data.id, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick, onMouseOver: onMouseOver, displayName: displayName || definition?.name },
+            React.createElement(MissingComponentPlacehoder, { blockId: node.data.blockId })));
+    }
     if (isSingleColumn) {
         return (React.createElement(DraggableChildComponent, { elementToRender: elementToRender, id: node.data.id, index: index, isAssemblyBlock: isAssembly || isAssemblyBlock, isDragDisabled: true, isSelected: selectedNodeId === node.data.id, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick, onMouseOver: onMouseOver, definition: definition, displayName: displayName }));
     }
-    return (React.createElement(DraggableComponent, { placeholder: placeholder, definition: definition, id: node.data.id, index: index, isAssemblyBlock: isAssembly || isAssemblyBlock, isDragDisabled: isAssemblyBlock || isSlotComponent, isSelected: selectedNodeId === node.data.id, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick, onMouseOver: onMouseOver, displayName: displayName },
+    return (React.createElement(DraggableComponent, { placeholder: placeholder, id: node.data.id, index: index, isAssemblyBlock: isAssembly || isAssemblyBlock, isDragDisabled: isAssemblyBlock || isSlotComponent, isSelected: selectedNodeId === node.data.id, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick, onMouseOver: onMouseOver, displayName: displayName },
         elementToRender(),
         isStructureComponent && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: node.data.id, isEmptyZone: isEmptyZone }))));
 };
@@ -3784,7 +3819,7 @@ function getStyle$1(style = {}, snapshot) {
 }
 const EditorBlockClone = ({ node: rawNode, resolveDesignValue, snapshot, provided, renderDropzone, }) => {
     const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
-    const { node, wrapperProps, elementToRender } = useComponent({
+    const { isComponentMissing, node, wrapperProps, elementToRender } = useComponent({
         node: rawNode,
         resolveDesignValue,
         renderDropzone,
@@ -3792,6 +3827,14 @@ const EditorBlockClone = ({ node: rawNode, resolveDesignValue, snapshot, provide
     });
     const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
     const isSingleColumn = node.data.blockId === CONTENTFUL_COMPONENTS.singleColumn.id;
+    if (isComponentMissing || !elementToRender) {
+        // !elementToRender is for typescript
+        return (React.createElement("div", { ref: provided?.innerRef, "data-ctfl-dragging-element": true, ...wrapperProps, ...provided?.draggableProps, ...provided?.dragHandleProps, className: classNames(styles$3.DraggableComponent, wrapperProps.className, styles$3.DraggableClone, {
+                [styles$3.isAssemblyBlock]: isAssemblyBlock,
+                [styles$3.isDragging]: snapshot?.isDragging,
+            }), style: getStyle$1(provided?.draggableProps.style, snapshot) },
+            React.createElement(MissingComponentPlacehoder, { blockId: node.data.blockId })));
+    }
     if (isSingleColumn) {
         return elementToRender();
     }