diff --git a/packages/client/manifest.json b/packages/client/manifest.json index a793023531..ca5e7ca35f 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -7990,7 +7990,7 @@ "textv2": { "name": "Text", "description": "A component for displaying text", - "icon": "TextParagraph", + "icon": "Text", "size": { "width": 400, "height": 24 @@ -7998,14 +7998,51 @@ "settings": [ { "type": "text/multiline", - "label": "Text", - "key": "text" + "label": "Text (Markdown supported)", + "key": "text", + "wide": true }, { "type": "color", "label": "Color", "key": "color", - "showInBar": true + "showInBar": true, + "wide": true + }, + { + "type": "select", + "label": "Alignment", + "key": "align", + "defaultValue": "left", + "showInBar": true, + "wide": true, + "barStyle": "buttons", + "options": [ + { + "label": "Left", + "value": "left", + "barIcon": "TextAlignLeft", + "barTitle": "Align left" + }, + { + "label": "Center", + "value": "center", + "barIcon": "TextAlignCenter", + "barTitle": "Align center" + }, + { + "label": "Right", + "value": "right", + "barIcon": "TextAlignRight", + "barTitle": "Align right" + }, + { + "label": "Justify", + "value": "justify", + "barIcon": "TextAlignJustify", + "barTitle": "Justify text" + } + ] } ] } diff --git a/packages/client/src/components/app/Text.svelte b/packages/client/src/components/app/Text.svelte index 519708876d..6c30392f1a 100644 --- a/packages/client/src/components/app/Text.svelte +++ b/packages/client/src/components/app/Text.svelte @@ -4,22 +4,30 @@ export let text: string = "" export let color: string | undefined = undefined + export let align: "left" | "center" | "right" | "justify" = "left" const component = getContext("component") const { styleable } = getContext("sdk") // Add in certain settings to styles - $: styles = enrichStyles($component.styles, color) + $: styles = enrichStyles($component.styles, color, align) - const enrichStyles = (styles: any, color: string | undefined) => { - if (!color) { - return styles + const enrichStyles = ( + styles: any, + colorStyle: typeof color, + alignStyle: typeof align + ) => { + let additions: Record = { + "text-align": alignStyle, + } + if (colorStyle) { + additions.color = colorStyle } return { ...styles, normal: { - ...styles?.normal, - color, + ...styles.normal, + ...additions, }, } } @@ -30,4 +38,7 @@