From 930b0b774f85f8781e7eee971ac14ff9e20f6e0d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 16:04:42 +0100
Subject: [PATCH] Fix embed showing undefined, add size styles and add
 placeholder

---
 packages/standard-components/manifest.json    |  1 +
 .../src/BackgroundImage.svelte                |  2 --
 packages/standard-components/src/Embed.svelte | 20 ++++++++++++-------
 packages/standard-components/src/Image.svelte |  2 --
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 63c801f289..28b82fe67d 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1071,6 +1071,7 @@
     "icon": "Code",
     "description": "Embed content from 3rd party sources",
     "illegalChildren": ["section"],
+    "styles": ["size"],
     "settings": [
       {
         "type": "text",
diff --git a/packages/standard-components/src/BackgroundImage.svelte b/packages/standard-components/src/BackgroundImage.svelte
index 96befe560a..909e0fd3fd 100644
--- a/packages/standard-components/src/BackgroundImage.svelte
+++ b/packages/standard-components/src/BackgroundImage.svelte
@@ -51,7 +51,5 @@
   .placeholder {
     display: grid;
     place-items: center;
-    height: 75px;
-    width: 300px;
   }
 </style>
diff --git a/packages/standard-components/src/Embed.svelte b/packages/standard-components/src/Embed.svelte
index 350255a8f5..5abd4acf93 100644
--- a/packages/standard-components/src/Embed.svelte
+++ b/packages/standard-components/src/Embed.svelte
@@ -1,23 +1,29 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let embed
 </script>
 
-<div use:styleable={$component.styles}>
-  {@html embed}
-</div>
+{#if embed}
+  <div class="embed" use:styleable={$component.styles}>
+    {@html embed}
+  </div>
+{:else if $builderStore.inBuilder}
+  <div use:styleable={{ ...$component.styles, empty: true }}>
+    <Placeholder />
+  </div>
+{/if}
 
 <style>
-  div {
+  .embed {
     position: relative;
   }
-  div :global(> *) {
+  .embed :global(> *) {
     width: 100%;
     height: 100%;
-    position: absolute;
   }
 </style>
diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte
index 9619a16f5b..519b96d424 100644
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@@ -23,7 +23,5 @@
   .placeholder {
     display: grid;
     place-items: center;
-    height: 75px;
-    width: 150px;
   }
 </style>