Fix embed showing undefined, add size styles and add placeholder

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",

packages/standard-components/src/BackgroundImage.svelte

@@ -51,7 +51,5 @@
   .placeholder {
     display: grid;
     place-items: center;
-    height: 75px;
-    width: 300px;
   }
 </style>

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}>
+{#if embed}
-  {@html embed}
+  <div class="embed" use:styleable={$component.styles}>
-</div>
+    {@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>

packages/standard-components/src/Image.svelte

@@ -23,7 +23,5 @@
   .placeholder {
     display: grid;
     place-items: center;
-    height: 75px;
-    width: 150px;
   }
 </style>