2019-09-19 15:35:40 +12:00
|
|
|
<script>
|
2020-11-19 08:18:18 +13:00
|
|
|
import { getContext } from "svelte"
|
|
|
|
|
2020-11-20 22:50:10 +13:00
|
|
|
const { styleable } = getContext("sdk")
|
2020-11-25 00:02:10 +13:00
|
|
|
const component = getContext("component")
|
2020-11-18 03:06:43 +13:00
|
|
|
|
2020-02-15 00:51:45 +13:00
|
|
|
export let text = ""
|
|
|
|
export let className = ""
|
2020-05-20 04:00:53 +12:00
|
|
|
export let type = ""
|
2019-09-19 15:35:40 +12:00
|
|
|
|
2020-05-20 04:00:53 +12:00
|
|
|
const isTag = tag => type === tag
|
2019-09-19 15:35:40 +12:00
|
|
|
</script>
|
|
|
|
|
2020-02-26 04:21:23 +13:00
|
|
|
{#if isTag('none')}
|
2020-11-25 00:02:10 +13:00
|
|
|
<span use:styleable={$component.styles}>{text}</span>
|
2020-05-20 04:00:53 +12:00
|
|
|
{:else if isTag('bold')}
|
2020-11-25 00:02:10 +13:00
|
|
|
<b class={className} use:styleable={$component.styles}>{text}</b>
|
2020-05-20 04:00:53 +12:00
|
|
|
{:else if isTag('strong')}
|
2020-11-25 00:02:10 +13:00
|
|
|
<strong class={className} use:styleable={$component.styles}>{text}</strong>
|
2020-05-20 04:00:53 +12:00
|
|
|
{:else if isTag('italic')}
|
2020-11-25 00:02:10 +13:00
|
|
|
<i class={className} use:styleable={$component.styles}>{text}</i>
|
2020-05-20 04:00:53 +12:00
|
|
|
{:else if isTag('emphasis')}
|
2020-11-25 00:02:10 +13:00
|
|
|
<em class={className} use:styleable={$component.styles}>{text}</em>
|
2020-05-20 04:00:53 +12:00
|
|
|
{:else if isTag('mark')}
|
2020-11-25 00:02:10 +13:00
|
|
|
<mark class={className} use:styleable={$component.styles}>{text}</mark>
|
2020-05-20 04:00:53 +12:00
|
|
|
{:else if isTag('small')}
|
2020-11-25 00:02:10 +13:00
|
|
|
<small class={className} use:styleable={$component.styles}>{text}</small>
|
2020-05-20 04:00:53 +12:00
|
|
|
{:else if isTag('del')}
|
2020-11-25 00:02:10 +13:00
|
|
|
<del class={className} use:styleable={$component.styles}>{text}</del>
|
2020-05-20 04:00:53 +12:00
|
|
|
{:else if isTag('ins')}
|
2020-11-25 00:02:10 +13:00
|
|
|
<ins class={className} use:styleable={$component.styles}>{text}</ins>
|
2020-05-20 04:00:53 +12:00
|
|
|
{:else if isTag('sub')}
|
2020-11-25 00:02:10 +13:00
|
|
|
<sub class={className} use:styleable={$component.styles}>{text}</sub>
|
2020-05-20 04:00:53 +12:00
|
|
|
{:else if isTag('sup')}
|
2020-11-25 00:02:10 +13:00
|
|
|
<sup class={className} use:styleable={$component.styles}>{text}</sup>
|
|
|
|
{:else}<span use:styleable={$component.styles}>{text}</span>{/if}
|
2020-10-16 20:34:17 +13:00
|
|
|
|
|
|
|
<style>
|
|
|
|
span {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
</style>
|