From 234f53d37a806ae43ee08059ca40231d0c83d6a7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 28 Oct 2021 13:28:43 +0100
Subject: [PATCH] Focus contenteditable node when starting editing a component
 in the preview

---
 packages/client/src/components/app/Heading.svelte | 4 ++++
 packages/client/src/components/app/Link.svelte    | 4 ++++
 packages/client/src/components/app/Text.svelte    | 4 ++++
 3 files changed, 12 insertions(+)

diff --git a/packages/client/src/components/app/Heading.svelte b/packages/client/src/components/app/Heading.svelte
index 43ed0a066c..2647b608a5 100644
--- a/packages/client/src/components/app/Heading.svelte
+++ b/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
diff --git a/packages/client/src/components/app/Link.svelte b/packages/client/src/components/app/Link.svelte
index 3a6d7c2438..b002eb9e9d 100644
--- a/packages/client/src/components/app/Link.svelte
+++ b/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
diff --git a/packages/client/src/components/app/Text.svelte b/packages/client/src/components/app/Text.svelte
index 06e0f7a954..c14806050e 100644
--- a/packages/client/src/components/app/Text.svelte
+++ b/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