From 01775f8186b70025491e0d0feb2c607914d6e510 Mon Sep 17 00:00:00 2001
From: Lorenz <lorenz.weis@gmail.com>
Date: Tue, 16 Apr 2024 11:36:37 +0200
Subject: [PATCH] refactor: add fallback component for missing components

---
 packages/test-app/src/eb-config.ts            | 28 +++++++++++++++++++
 .../src/components/Dropzone/Dropzone.tsx      | 13 +++++++++
 2 files changed, 41 insertions(+)

diff --git a/packages/test-app/src/eb-config.ts b/packages/test-app/src/eb-config.ts
index a49ae3699..76d23c8ad 100644
--- a/packages/test-app/src/eb-config.ts
+++ b/packages/test-app/src/eb-config.ts
@@ -37,4 +37,32 @@ defineComponents([
       },
     },
   },
+  {
+    component: CustomImageComponent,
+    definition: {
+      id: 'custom-image',
+      name: 'Custom Image',
+      category: 'Custom Components',
+      variables: {
+        src: {
+          displayName: 'SRC',
+          type: 'Media',
+        },
+      },
+    },
+  },
+  // {
+  //   component: CustomImageComponent,
+  //   definition: {
+  //     id: 'gonna-be-removed',
+  //     name: 'Gonna be removed',
+  //     category: 'Custom Components',
+  //     variables: {
+  //       src: {
+  //         displayName: 'SRC',
+  //         type: 'Media',
+  //       },
+  //     },
+  //   },
+  // },
 ]);
diff --git a/packages/visual-editor/src/components/Dropzone/Dropzone.tsx b/packages/visual-editor/src/components/Dropzone/Dropzone.tsx
index 996c008f2..aa77b16cc 100644
--- a/packages/visual-editor/src/components/Dropzone/Dropzone.tsx
+++ b/packages/visual-editor/src/components/Dropzone/Dropzone.tsx
@@ -17,6 +17,7 @@ import { ASSEMBLY_NODE_TYPES, CONTENTFUL_COMPONENTS } from '@contentful/experien
 import { RenderDropzoneFunction } from './Dropzone.types';
 import { EditorBlockClone } from './EditorBlockClone';
 import { DropzoneClone } from './DropzoneClone';
+import { componentRegistry } from '@/store/registries';
 
 type DropzoneProps = {
   zoneId: string;
@@ -159,6 +160,18 @@ export function Dropzone({
               content.map((item, i) => {
                 const componentId = item.data.id;
 
+                const registration = componentRegistry.get(item.data.blockId!);
+
+                if (!registration) {
+                  return (
+                    <div
+                      key={componentId}
+                      style={{ background: 'red', padding: '12px', color: 'white' }}>
+                      Component registration not found: {item.data.blockId}
+                    </div>
+                  );
+                }
+
                 return (
                   <EditorBlock
                     placeholder={{