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 { styleable, builderStore } = getContext("sdk")
|
||||||
const component = getContext("component")
|
const component = getContext("component")
|
||||||
|
|
||||||
let handlingOnClick = false
|
|
||||||
|
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
export let text = ""
|
export let text = ""
|
||||||
export let onClick
|
export let onClick
|
||||||
|
@ -19,17 +17,9 @@
|
||||||
// For internal use only for now - not defined in the manifest
|
// For internal use only for now - not defined in the manifest
|
||||||
export let active = false
|
export let active = false
|
||||||
|
|
||||||
const handleOnClick = async () => {
|
|
||||||
handlingOnClick = true
|
|
||||||
|
|
||||||
if (onClick) {
|
|
||||||
await onClick()
|
|
||||||
}
|
|
||||||
|
|
||||||
handlingOnClick = false
|
|
||||||
}
|
|
||||||
|
|
||||||
let node
|
let node
|
||||||
|
let touched = false
|
||||||
|
let handlingOnClick = false
|
||||||
|
|
||||||
$: $component.editing && node?.focus()
|
$: $component.editing && node?.focus()
|
||||||
$: componentText = getComponentText(text, $builderStore, $component)
|
$: componentText = getComponentText(text, $builderStore, $component)
|
||||||
|
@ -42,7 +32,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateText = e => {
|
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>
|
</script>
|
||||||
|
|
||||||
|
@ -57,6 +58,7 @@
|
||||||
on:blur={$component.editing ? updateText : null}
|
on:blur={$component.editing ? updateText : null}
|
||||||
bind:this={node}
|
bind:this={node}
|
||||||
class:active
|
class:active
|
||||||
|
on:input={() => (touched = true)}
|
||||||
>
|
>
|
||||||
{#if icon}
|
{#if icon}
|
||||||
<i class="{icon} {size}" />
|
<i class="{icon} {size}" />
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
export let size
|
export let size
|
||||||
|
|
||||||
let node
|
let node
|
||||||
|
let touched = false
|
||||||
|
|
||||||
$: $component.editing && node?.focus()
|
$: $component.editing && node?.focus()
|
||||||
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
|
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
|
||||||
|
@ -47,7 +48,10 @@
|
||||||
|
|
||||||
// Convert contenteditable HTML to text and save
|
// Convert contenteditable HTML to text and save
|
||||||
const updateText = e => {
|
const updateText = e => {
|
||||||
builderStore.actions.updateProp("text", e.target.textContent)
|
if (touched) {
|
||||||
|
builderStore.actions.updateProp("text", e.target.textContent)
|
||||||
|
}
|
||||||
|
touched = false
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -62,6 +66,7 @@
|
||||||
class:underline
|
class:underline
|
||||||
class="spectrum-Heading {sizeClass} {alignClass}"
|
class="spectrum-Heading {sizeClass} {alignClass}"
|
||||||
on:blur={$component.editing ? updateText : null}
|
on:blur={$component.editing ? updateText : null}
|
||||||
|
on:input={() => (touched = true)}
|
||||||
>
|
>
|
||||||
{componentText}
|
{componentText}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
export let size
|
export let size
|
||||||
|
|
||||||
let node
|
let node
|
||||||
|
let touched = false
|
||||||
|
|
||||||
$: $component.editing && node?.focus()
|
$: $component.editing && node?.focus()
|
||||||
$: externalLink = url && typeof url === "string" && !url.startsWith("/")
|
$: externalLink = url && typeof url === "string" && !url.startsWith("/")
|
||||||
|
@ -62,7 +63,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateText = e => {
|
const updateText = e => {
|
||||||
builderStore.actions.updateProp("text", e.target.textContent)
|
if (touched) {
|
||||||
|
builderStore.actions.updateProp("text", e.target.textContent)
|
||||||
|
}
|
||||||
|
touched = false
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -76,6 +80,7 @@
|
||||||
class:underline
|
class:underline
|
||||||
class="align--{align || 'left'} size--{size || 'M'}"
|
class="align--{align || 'left'} size--{size || 'M'}"
|
||||||
on:blur={$component.editing ? updateText : null}
|
on:blur={$component.editing ? updateText : null}
|
||||||
|
on:input={() => (touched = true)}
|
||||||
>
|
>
|
||||||
{componentText}
|
{componentText}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
export let size
|
export let size
|
||||||
|
|
||||||
let node
|
let node
|
||||||
|
let touched = false
|
||||||
|
|
||||||
$: $component.editing && node?.focus()
|
$: $component.editing && node?.focus()
|
||||||
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
|
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
|
||||||
|
@ -46,7 +47,10 @@
|
||||||
|
|
||||||
// Convert contenteditable HTML to text and save
|
// Convert contenteditable HTML to text and save
|
||||||
const updateText = e => {
|
const updateText = e => {
|
||||||
builderStore.actions.updateProp("text", e.target.textContent)
|
if (touched) {
|
||||||
|
builderStore.actions.updateProp("text", e.target.textContent)
|
||||||
|
}
|
||||||
|
touched = false
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -61,6 +65,7 @@
|
||||||
class:underline
|
class:underline
|
||||||
class="spectrum-Body {sizeClass} {alignClass}"
|
class="spectrum-Body {sizeClass} {alignClass}"
|
||||||
on:blur={$component.editing ? updateText : null}
|
on:blur={$component.editing ? updateText : null}
|
||||||
|
on:input={() => (touched = true)}
|
||||||
>
|
>
|
||||||
{componentText}
|
{componentText}
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -26,6 +26,10 @@
|
||||||
// Register field with form
|
// Register field with form
|
||||||
const formApi = formContext?.formApi
|
const formApi = formContext?.formApi
|
||||||
const labelPos = fieldGroupContext?.labelPosition || "above"
|
const labelPos = fieldGroupContext?.labelPosition || "above"
|
||||||
|
|
||||||
|
let touched = false
|
||||||
|
let labelNode
|
||||||
|
|
||||||
$: formStep = formStepContext ? $formStepContext || 1 : 1
|
$: formStep = formStepContext ? $formStepContext || 1 : 1
|
||||||
$: formField = formApi?.registerField(
|
$: formField = formApi?.registerField(
|
||||||
field,
|
field,
|
||||||
|
@ -36,14 +40,12 @@
|
||||||
validation,
|
validation,
|
||||||
formStep
|
formStep
|
||||||
)
|
)
|
||||||
|
|
||||||
$: schemaType =
|
$: schemaType =
|
||||||
fieldSchema?.type !== "formula" && fieldSchema?.type !== "bigint"
|
fieldSchema?.type !== "formula" && fieldSchema?.type !== "bigint"
|
||||||
? fieldSchema?.type
|
? fieldSchema?.type
|
||||||
: "string"
|
: "string"
|
||||||
|
|
||||||
// Focus label when editing
|
// Focus label when editing
|
||||||
let labelNode
|
|
||||||
$: $component.editing && labelNode?.focus()
|
$: $component.editing && labelNode?.focus()
|
||||||
|
|
||||||
// Update form properties in parent component on every store change
|
// Update form properties in parent component on every store change
|
||||||
|
@ -57,7 +59,10 @@
|
||||||
$: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
|
$: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
|
||||||
|
|
||||||
const updateLabel = e => {
|
const updateLabel = e => {
|
||||||
builderStore.actions.updateProp("label", e.target.textContent)
|
if (touched) {
|
||||||
|
builderStore.actions.updateProp("label", e.target.textContent)
|
||||||
|
}
|
||||||
|
touched = false
|
||||||
}
|
}
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
|
@ -79,6 +84,7 @@
|
||||||
bind:this={labelNode}
|
bind:this={labelNode}
|
||||||
contenteditable={$component.editing}
|
contenteditable={$component.editing}
|
||||||
on:blur={$component.editing ? updateLabel : null}
|
on:blur={$component.editing ? updateLabel : null}
|
||||||
|
on:input={() => (touched = true)}
|
||||||
class:hidden={!label}
|
class:hidden={!label}
|
||||||
class:readonly
|
class:readonly
|
||||||
for={fieldState?.fieldId}
|
for={fieldState?.fieldId}
|
||||||
|
|
Loading…
Reference in a new issue