MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/components/app/Heading.svelte
View File

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

4
packages/client/src/components/app/Link.svelte
View File

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

4
packages/client/src/components/app/Text.svelte
View File

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