Don't update text settings when editing inline unless the value actually changes, to prevent losing HBS or JS expressions
This commit is contained in:
parent
cbb3c9aa93
commit
8563471aea
5 changed files with 42 additions and 19 deletions
|
@ -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,8 +32,19 @@
|
|||
}
|
||||
|
||||
const updateText = e => {
|
||||
if (touched) {
|
||||
builderStore.actions.updateProp("text", e.target.textContent)
|
||||
}
|
||||
touched = false
|
||||
}
|
||||
|
||||
const handleOnClick = async () => {
|
||||
handlingOnClick = true
|
||||
if (onClick) {
|
||||
await onClick()
|
||||
}
|
||||
handlingOnClick = false
|
||||
}
|
||||
</script>
|
||||
|
||||
{#key $component.editing}
|
||||
|
@ -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}" />
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
export let size
|
||||
|
||||
let node
|
||||
let touched = false
|
||||
|
||||
$: $component.editing && node?.focus()
|
||||
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
|
||||
|
@ -47,8 +48,11 @@
|
|||
|
||||
// Convert contenteditable HTML to text and save
|
||||
const updateText = e => {
|
||||
if (touched) {
|
||||
builderStore.actions.updateProp("text", e.target.textContent)
|
||||
}
|
||||
touched = false
|
||||
}
|
||||
</script>
|
||||
|
||||
{#key $component.editing}
|
||||
|
@ -62,6 +66,7 @@
|
|||
class:underline
|
||||
class="spectrum-Heading {sizeClass} {alignClass}"
|
||||
on:blur={$component.editing ? updateText : null}
|
||||
on:input={() => (touched = true)}
|
||||
>
|
||||
{componentText}
|
||||
</h1>
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
export let size
|
||||
|
||||
let node
|
||||
let touched = false
|
||||
|
||||
$: $component.editing && node?.focus()
|
||||
$: externalLink = url && typeof url === "string" && !url.startsWith("/")
|
||||
|
@ -62,8 +63,11 @@
|
|||
}
|
||||
|
||||
const updateText = e => {
|
||||
if (touched) {
|
||||
builderStore.actions.updateProp("text", e.target.textContent)
|
||||
}
|
||||
touched = false
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $component.editing}
|
||||
|
@ -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>
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
export let size
|
||||
|
||||
let node
|
||||
let touched = false
|
||||
|
||||
$: $component.editing && node?.focus()
|
||||
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
|
||||
|
@ -46,8 +47,11 @@
|
|||
|
||||
// Convert contenteditable HTML to text and save
|
||||
const updateText = e => {
|
||||
if (touched) {
|
||||
builderStore.actions.updateProp("text", e.target.textContent)
|
||||
}
|
||||
touched = false
|
||||
}
|
||||
</script>
|
||||
|
||||
{#key $component.editing}
|
||||
|
@ -61,6 +65,7 @@
|
|||
class:underline
|
||||
class="spectrum-Body {sizeClass} {alignClass}"
|
||||
on:blur={$component.editing ? updateText : null}
|
||||
on:input={() => (touched = true)}
|
||||
>
|
||||
{componentText}
|
||||
</p>
|
||||
|
|
|
@ -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,8 +59,11 @@
|
|||
$: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
|
||||
|
||||
const updateLabel = e => {
|
||||
if (touched) {
|
||||
builderStore.actions.updateProp("label", e.target.textContent)
|
||||
}
|
||||
touched = false
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
fieldApi?.deregister()
|
||||
|
@ -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}
|
||||
|
|
Loading…
Reference in a new issue