2019-09-19 15:35:40 +12:00
|
|
|
<script>
|
2020-11-19 08:18:18 +13:00
|
|
|
import { getContext } from "svelte"
|
|
|
|
|
2021-06-11 22:37:05 +12:00
|
|
|
const { styleable, builderStore } = getContext("sdk")
|
2020-11-25 00:02:10 +13:00
|
|
|
const component = getContext("component")
|
2020-11-18 03:06:43 +13:00
|
|
|
|
2021-06-11 22:37:05 +12:00
|
|
|
export let text
|
2021-06-08 19:00:54 +12:00
|
|
|
|
2021-06-11 22:37:05 +12:00
|
|
|
$: placeholder = $builderStore.inBuilder && !text
|
|
|
|
$: componentText = $builderStore.inBuilder
|
|
|
|
? text || "Placeholder text"
|
|
|
|
: text || ""
|
2019-09-19 15:35:40 +12:00
|
|
|
</script>
|
|
|
|
|
2021-06-11 22:37:05 +12:00
|
|
|
<p use:styleable={$component.styles} class:placeholder>
|
|
|
|
{componentText}
|
2021-06-08 19:00:54 +12:00
|
|
|
</p>
|
2020-10-16 20:34:17 +13:00
|
|
|
|
|
|
|
<style>
|
2021-02-23 23:04:07 +13:00
|
|
|
p {
|
2020-10-16 20:34:17 +13:00
|
|
|
display: inline-block;
|
2021-02-23 23:04:07 +13:00
|
|
|
white-space: pre-wrap;
|
2020-10-16 20:34:17 +13:00
|
|
|
}
|
2021-06-11 22:37:05 +12:00
|
|
|
|
|
|
|
.placeholder {
|
2021-06-08 19:00:54 +12:00
|
|
|
font-style: italic;
|
2021-06-11 22:37:05 +12:00
|
|
|
color: var(--grey-6);
|
2021-06-08 19:00:54 +12:00
|
|
|
}
|
2020-10-16 20:34:17 +13:00
|
|
|
</style>
|