Focus contenteditable node when starting editing a component in the preview

packages/client/src/components/app/Heading.svelte

@@ -13,6 +13,9 @@
   export let underline
   export let size
 
+  let node
+
+  $: $component.editing && node?.focus()
   $: placeholder = $builderStore.inBuilder && !text && !$component.editing
   $: componentText = getComponentText(text, $builderStore, $component)
   $: sizeClass = `spectrum-Heading--size${size || "M"}`
@@ -55,6 +58,7 @@
 </script>
 
 <div
+  bind:this={node}
   contenteditable={$component.editing}
   use:styleable={styles}
   class:placeholder

packages/client/src/components/app/Link.svelte

@@ -14,6 +14,9 @@
   export let underline
   export let size
 
+  let node
+
+  $: $component.editing && node?.focus()
   $: externalLink = url && typeof url === "string" && !url.startsWith("/")
   $: target = openInNewTab ? "_blank" : "_self"
   $: placeholder = $builderStore.inBuilder && !text
@@ -57,6 +60,7 @@
 
 {#if $component.editing}
   <div
+    bind:this={node}
     contenteditable
     use:styleable={styles}
     class:bold

packages/client/src/components/app/Text.svelte

@@ -12,6 +12,9 @@
   export let underline
   export let size
 
+  let node
+
+  $: $component.editing && node?.focus()
   $: placeholder = $builderStore.inBuilder && !text && !$component.editing
   $: componentText = getComponentText(text, $builderStore, $component)
   $: sizeClass = `spectrum-Body--size${size || "M"}`
@@ -54,6 +57,7 @@
 </script>
 
 <div
+  bind:this={node}
   contenteditable={$component.editing}
   use:styleable={styles}
   class:placeholder