Don't update text settings when editing inline unless the value actually changes, to prevent losing HBS or JS expressions

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

@@ -5,8 +5,6 @@
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  let handlingOnClick = false
-
   export let disabled = false
   export let text = ""
   export let onClick
@@ -19,17 +17,9 @@
   // For internal use only for now - not defined in the manifest
   export let active = false
 
-  const handleOnClick = async () => {
-    handlingOnClick = true
-
-    if (onClick) {
-      await onClick()
-    }
-
-    handlingOnClick = false
-  }
-
   let node
+  let touched = false
+  let handlingOnClick = false
 
   $: $component.editing && node?.focus()
   $: componentText = getComponentText(text, $builderStore, $component)
@@ -42,7 +32,18 @@
   }
 
   const updateText = e => {
-    builderStore.actions.updateProp("text", e.target.textContent)
+    if (touched) {
+      builderStore.actions.updateProp("text", e.target.textContent)
+    }
+    touched = false
+  }
+
+  const handleOnClick = async () => {
+    handlingOnClick = true
+    if (onClick) {
+      await onClick()
+    }
+    handlingOnClick = false
   }
 </script>
 
@@ -57,6 +58,7 @@
     on:blur={$component.editing ? updateText : null}
     bind:this={node}
     class:active
+    on:input={() => (touched = true)}
   >
     {#if icon}
       <i class="{icon} {size}" />

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

@@ -14,6 +14,7 @@
   export let size
 
   let node
+  let touched = false
 
   $: $component.editing && node?.focus()
   $: placeholder = $builderStore.inBuilder && !text && !$component.editing
@@ -47,7 +48,10 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    builderStore.actions.updateProp("text", e.target.textContent)
+    if (touched) {
+      builderStore.actions.updateProp("text", e.target.textContent)
+    }
+    touched = false
   }
 </script>
 
@@ -62,6 +66,7 @@
     class:underline
     class="spectrum-Heading {sizeClass} {alignClass}"
     on:blur={$component.editing ? updateText : null}
+    on:input={() => (touched = true)}
   >
     {componentText}
   </h1>

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

@@ -16,6 +16,7 @@
   export let size
 
   let node
+  let touched = false
 
   $: $component.editing && node?.focus()
   $: externalLink = url && typeof url === "string" && !url.startsWith("/")
@@ -62,7 +63,10 @@
   }
 
   const updateText = e => {
-    builderStore.actions.updateProp("text", e.target.textContent)
+    if (touched) {
+      builderStore.actions.updateProp("text", e.target.textContent)
+    }
+    touched = false
   }
 </script>
 
@@ -76,6 +80,7 @@
     class:underline
     class="align--{align || 'left'} size--{size || 'M'}"
     on:blur={$component.editing ? updateText : null}
+    on:input={() => (touched = true)}
   >
     {componentText}
   </div>

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

@@ -13,6 +13,7 @@
   export let size
 
   let node
+  let touched = false
 
   $: $component.editing && node?.focus()
   $: placeholder = $builderStore.inBuilder && !text && !$component.editing
@@ -46,7 +47,10 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    builderStore.actions.updateProp("text", e.target.textContent)
+    if (touched) {
+      builderStore.actions.updateProp("text", e.target.textContent)
+    }
+    touched = false
   }
 </script>
 
@@ -61,6 +65,7 @@
     class:underline
     class="spectrum-Body {sizeClass} {alignClass}"
     on:blur={$component.editing ? updateText : null}
+    on:input={() => (touched = true)}
   >
     {componentText}
   </p>

packages/client/src/components/app/forms/Field.svelte

@@ -26,6 +26,10 @@
   // Register field with form
   const formApi = formContext?.formApi
   const labelPos = fieldGroupContext?.labelPosition || "above"
+
+  let touched = false
+  let labelNode
+
   $: formStep = formStepContext ? $formStepContext || 1 : 1
   $: formField = formApi?.registerField(
     field,
@@ -36,14 +40,12 @@
     validation,
     formStep
   )
-
   $: schemaType =
     fieldSchema?.type !== "formula" && fieldSchema?.type !== "bigint"
       ? fieldSchema?.type
       : "string"
 
   // Focus label when editing
-  let labelNode
   $: $component.editing && labelNode?.focus()
 
   // Update form properties in parent component on every store change
@@ -57,7 +59,10 @@
   $: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
 
   const updateLabel = e => {
-    builderStore.actions.updateProp("label", e.target.textContent)
+    if (touched) {
+      builderStore.actions.updateProp("label", e.target.textContent)
+    }
+    touched = false
   }
 
   onDestroy(() => {
@@ -79,6 +84,7 @@
       bind:this={labelNode}
       contenteditable={$component.editing}
       on:blur={$component.editing ? updateLabel : null}
+      on:input={() => (touched = true)}
       class:hidden={!label}
       class:readonly
       for={fieldState?.fieldId}