Add alignment setting

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"
+          }
+        ]
       }
     ]
   }

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<string, string> = {
+      "text-align": alignStyle,
+    }
+    if (colorStyle) {
+      additions.color = colorStyle
     }
     return {
       ...styles,
       normal: {
-        ...styles?.normal,
-        color,
+        ...styles.normal,
+        ...additions,
       },
     }
   }
@@ -30,4 +38,7 @@
 </div>
 
 <style>
+  div :global(img) {
+    max-width: 100%;
+  }
 </style>