From 8563471aeac7c6b78da7f5fde1427bc2672285d7 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 31 May 2024 16:21:21 +0100 Subject: [PATCH] Don't update text settings when editing inline unless the value actually changes, to prevent losing HBS or JS expressions --- .../client/src/components/app/Button.svelte | 28 ++++++++++--------- .../client/src/components/app/Heading.svelte | 7 ++++- .../client/src/components/app/Link.svelte | 7 ++++- .../client/src/components/app/Text.svelte | 7 ++++- .../src/components/app/forms/Field.svelte | 12 ++++++-- 5 files changed, 42 insertions(+), 19 deletions(-) diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte index c43face1bb..29bdd46a70 100644 --- a/packages/client/src/components/app/Button.svelte +++ b/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 } @@ -57,6 +58,7 @@ on:blur={$component.editing ? updateText : null} bind:this={node} class:active + on:input={() => (touched = true)} > {#if icon} diff --git a/packages/client/src/components/app/Heading.svelte b/packages/client/src/components/app/Heading.svelte index 4adec59e2b..103ac31a93 100644 --- a/packages/client/src/components/app/Heading.svelte +++ b/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 } @@ -62,6 +66,7 @@ class:underline class="spectrum-Heading {sizeClass} {alignClass}" on:blur={$component.editing ? updateText : null} + on:input={() => (touched = true)} > {componentText} diff --git a/packages/client/src/components/app/Link.svelte b/packages/client/src/components/app/Link.svelte index 6cabcec7df..7eddcc6fe5 100644 --- a/packages/client/src/components/app/Link.svelte +++ b/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 } @@ -76,6 +80,7 @@ class:underline class="align--{align || 'left'} size--{size || 'M'}" on:blur={$component.editing ? updateText : null} + on:input={() => (touched = true)} > {componentText} diff --git a/packages/client/src/components/app/Text.svelte b/packages/client/src/components/app/Text.svelte index 1037725ff8..fa15868d0f 100644 --- a/packages/client/src/components/app/Text.svelte +++ b/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 } @@ -61,6 +65,7 @@ class:underline class="spectrum-Body {sizeClass} {alignClass}" on:blur={$component.editing ? updateText : null} + on:input={() => (touched = true)} > {componentText}

diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte index 74ff5442a9..9210b6ea8f 100644 --- a/packages/client/src/components/app/forms/Field.svelte +++ b/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}