diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index c15fa23ebe..abb956c9d3 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -85,6 +85,10 @@ previewDevice: $store.previewDevice, messagePassing: $store.clientFeatures.messagePassing, navigation: $store.navigation, + hiddenComponentIds: + $store.componentToPaste?._id && $store.componentToPaste?.isCut + ? [$store.componentToPaste?._id] + : [], isBudibaseEvent: true, } diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js index def32dd45f..1c789d858e 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js @@ -65,7 +65,8 @@ export default ` theme, customTheme, previewDevice, - navigation + navigation, + hiddenComponentIds } = parsed // Set some flags so the app knows we're in the builder @@ -79,6 +80,7 @@ export default ` window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice window["##BUDIBASE_PREVIEW_NAVIGATION##"] = navigation + window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds // Initialise app try { diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 808bfdae07..d30e97fc6b 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -121,6 +121,8 @@ !isScreen && definition?.draggable !== false $: droppable = interactive && !isLayout && !isScreen + $: builderHidden = + $builderStore.inBuilder && $builderStore.hiddenComponentIds?.includes(id) // Empty components are those which accept children but do not have any. // Empty states can be shown for these components, but can be disabled @@ -434,7 +436,7 @@ }) -{#if constructor && initialSettings && (visible || inSelectedPath)} +{#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}