From 90b3e2a16d419139ef405b02f5f4966ccf22ea03 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 18 Nov 2021 20:32:57 +0000
Subject: [PATCH] Update editable components to trim whitespace when editing
 inline

---
 packages/client/src/components/app/Button.svelte      | 2 +-
 packages/client/src/components/app/Heading.svelte     | 2 +-
 packages/client/src/components/app/Link.svelte        | 2 +-
 packages/client/src/components/app/Text.svelte        | 2 +-
 packages/client/src/components/app/forms/Field.svelte | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte
index f00b114b2b..5b06475b30 100644
--- a/packages/client/src/components/app/Button.svelte
+++ b/packages/client/src/components/app/Button.svelte
@@ -25,7 +25,7 @@
   }
 
   const updateText = e => {
-    builderStore.actions.updateProp("text", e.target.textContent)
+    builderStore.actions.updateProp("text", e.target.textContent.trim())
   }
 </script>
 
diff --git a/packages/client/src/components/app/Heading.svelte b/packages/client/src/components/app/Heading.svelte
index 0450d2d11d..b27862f164 100644
--- a/packages/client/src/components/app/Heading.svelte
+++ b/packages/client/src/components/app/Heading.svelte
@@ -47,7 +47,7 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
+    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n").trim()
     builderStore.actions.updateProp("text", sanitized)
   }
 </script>
diff --git a/packages/client/src/components/app/Link.svelte b/packages/client/src/components/app/Link.svelte
index 9587b34f11..851b2f0b66 100644
--- a/packages/client/src/components/app/Link.svelte
+++ b/packages/client/src/components/app/Link.svelte
@@ -47,7 +47,7 @@
   }
 
   const updateText = e => {
-    builderStore.actions.updateProp("text", e.target.textContent)
+    builderStore.actions.updateProp("text", e.target.textContent.trim())
   }
 </script>
 
diff --git a/packages/client/src/components/app/Text.svelte b/packages/client/src/components/app/Text.svelte
index 14681ebbaf..679434edeb 100644
--- a/packages/client/src/components/app/Text.svelte
+++ b/packages/client/src/components/app/Text.svelte
@@ -46,7 +46,7 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
+    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n").trim()
     builderStore.actions.updateProp("text", sanitized)
   }
 </script>
diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte
index 3ef184c4a9..79de01351a 100644
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/packages/client/src/components/app/forms/Field.svelte
@@ -49,7 +49,7 @@
   $: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
 
   const updateLabel = e => {
-    builderStore.actions.updateProp("label", e.target.textContent)
+    builderStore.actions.updateProp("label", e.target.textContent.trim())
   }
 </script>