From 21fc7ec5b0dc89807f90a6f5ef3991ac3324639e Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:09:50 +0200
Subject: [PATCH] Trim children string inspector inputs (#5874)

**Problem:**

Children text string inputs in the inspector can contain non-trimmed
strings.

**Fix:**

Trim them if defined.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

Fixes #5871
---
 .../component-section-children.tsx             |  2 +-
 .../property-control-controls.tsx              | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/editor/src/components/inspector/sections/component-section/component-section-children.tsx b/editor/src/components/inspector/sections/component-section/component-section-children.tsx
index 39f178fe109f..95a61d76cd38 100644
--- a/editor/src/components/inspector/sections/component-section/component-section-children.tsx
+++ b/editor/src/components/inspector/sections/component-section/component-section-children.tsx
@@ -82,7 +82,7 @@ export function useChildrenPropOverride(
               ? props.controlDescription
               : {
                   control: 'string-input',
-                  label: 'hey',
+                  label: 'children',
                 }
           }
         />
diff --git a/editor/src/components/inspector/sections/component-section/property-control-controls.tsx b/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
index 5c33c6966ea4..bc6f23f668ec 100644
--- a/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
+++ b/editor/src/components/inspector/sections/component-section/property-control-controls.tsx
@@ -551,11 +551,19 @@ export const StringInputPropertyControl = React.memo(
             element.element.value.children.length > 0
           ) {
             const child = element.element.value.children[0]
-            switch (child.type) {
-              case 'ATTRIBUTE_OTHER_JAVASCRIPT':
-                return child.originalJavascript
-              case 'JSX_TEXT_BLOCK':
-                return child.text
+            function getChildText(): string | null {
+              switch (child.type) {
+                case 'ATTRIBUTE_OTHER_JAVASCRIPT':
+                  return child.originalJavascript
+                case 'JSX_TEXT_BLOCK':
+                  return child.text
+                default:
+                  return null
+              }
+            }
+            const maybeText = getChildText()
+            if (maybeText != null) {
+              return maybeText.trim()
             }
           }
           return undefined