@contentful/experiences-visual-editor-react 1.0.5 → 1.0.6-beta.0

package/dist/index.js

@@ -2768,6 +2768,23 @@ const resolveAssembly = ({ node, entityStore, }) => {
     return deserializedNode;
 };
 
+class ImportedComponentError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'ImportedComponentError';
+    }
+}
+class ImportedComponentErrorBoundary extends React.Component {
+    componentDidCatch(error, _errorInfo) {
+        const err = new ImportedComponentError(error.message);
+        err.stack = error.stack;
+        throw err;
+    }
+    render() {
+        return this.props.children;
+    }
+}
+
 const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userIsDragging, }) => {
     const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
     const entityStore = useEntityStore((state) => state.entityStore);
@@ -2809,7 +2826,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
         : node.type === ASSEMBLY_NODE_TYPE
             ? // Assembly.tsx requires renderDropzone and editorMode as well
                 () => React.createElement(componentRegistration.component, componentProps)
-            : () => React.createElement(componentRegistration.component, otherComponentProps);
+            : () => React.createElement(ImportedComponentErrorBoundary, null, React.createElement(componentRegistration.component, otherComponentProps));
     return {
         node,
         componentId,
@@ -4471,8 +4488,6 @@ const RootRenderer = ({ onChange }) => {
     const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
     const breakpoints = useTreeStore((state) => state.breakpoints);
     const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
-    const draggableSourceId = useDraggedItemStore((state) => state.draggedItem?.source.droppableId);
-    const draggingNewComponent = !!draggableSourceId?.startsWith(COMPONENT_LIST_ID);
     const containerRef = useRef(null);
     const { resolveDesignValue } = useBreakpoints(breakpoints);
     const [containerStyles, setContainerStyles] = useState({});
@@ -4538,9 +4553,9 @@ const RootRenderer = ({ onChange }) => {
     return (React.createElement(DNDProvider, null,
         dragItem && React.createElement(DraggableContainer, { id: dragItem }),
         React.createElement("div", { "data-ctfl-root": true, className: styles.container, ref: containerRef, style: containerStyles },
-            userIsDragging && draggingNewComponent && (React.createElement("div", { className: styles.hitbox, "data-ctfl-zone-id": ROOT_ID })),
+            userIsDragging && React.createElement("div", { "data-ctfl-zone-id": ROOT_ID, className: styles.hitbox }),
             React.createElement(Dropzone, { zoneId: ROOT_ID, resolveDesignValue: resolveDesignValue }),
-            userIsDragging && draggingNewComponent && (React.createElement("div", { "data-ctfl-zone-id": ROOT_ID, className: styles.hitboxLower }))),
+            userIsDragging && React.createElement("div", { "data-ctfl-zone-id": ROOT_ID, className: styles.hitboxLower })),
         React.createElement("div", { "data-ctfl-hitboxes": true })));
 };