Focus contenteditable node when starting editing a component in the preview

This commit is contained in:
Andrew Kingston 2021-10-28 13:28:43 +01:00
parent 9bf5d50d4f
commit d3839f2f91
3 changed files with 12 additions and 0 deletions

View File

@ -13,6 +13,9 @@
export let underline
export let size
let node
$: $component.editing && node?.focus()
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
$: componentText = getComponentText(text, $builderStore, $component)
$: sizeClass = `spectrum-Heading--size${size || "M"}`
@ -55,6 +58,7 @@
</script>
<div
bind:this={node}
contenteditable={$component.editing}
use:styleable={styles}
class:placeholder

View File

@ -14,6 +14,9 @@
export let underline
export let size
let node
$: $component.editing && node?.focus()
$: externalLink = url && typeof url === "string" && !url.startsWith("/")
$: target = openInNewTab ? "_blank" : "_self"
$: placeholder = $builderStore.inBuilder && !text
@ -57,6 +60,7 @@
{#if $component.editing}
<div
bind:this={node}
contenteditable
use:styleable={styles}
class:bold

View File

@ -12,6 +12,9 @@
export let underline
export let size
let node
$: $component.editing && node?.focus()
$: placeholder = $builderStore.inBuilder && !text && !$component.editing
$: componentText = getComponentText(text, $builderStore, $component)
$: sizeClass = `spectrum-Body--size${size || "M"}`
@ -54,6 +57,7 @@
</script>
<div
bind:this={node}
contenteditable={$component.editing}
use:styleable={styles}
class:placeholder