fix: multiline centered text (#125)

Author: QuiiBz

apps/dashboard/src/lib/__tests__/__snapshots__/export.test.ts.snap

@@ -20,6 +20,7 @@ exports[`elementsToReactElements > should ignore dynamic texts by default 1`] =
             "marginBottom": 0,
             "marginTop": 0,
             "position": "absolute",
+            "textAlign": "left",
             "top": "0px",
             "width": "100px",
           },
@@ -74,6 +75,7 @@ exports[`elementsToReactElements > should render text chidrens 1`] = `
             "marginBottom": 0,
             "marginTop": 0,
             "position": "absolute",
+            "textAlign": "left",
             "top": "0px",
             "width": "100px",
           },
@@ -143,6 +145,7 @@ exports[`elementsToReactElements > should replace dynamic texts if present 1`] =
             "marginBottom": 0,
             "marginTop": 0,
             "position": "absolute",
+            "textAlign": "left",
             "top": "0px",
             "width": "100px",
           },

apps/dashboard/src/lib/__tests__/elements.test.ts

@@ -319,6 +319,7 @@ describe("createElementStyle", () => {
           "marginBottom": 0,
           "marginTop": 0,
           "position": "absolute",
+          "textAlign": "left",
           "top": "20px",
           "width": "100px",
         }
@@ -369,6 +370,7 @@ describe("createElementStyle", () => {
           "marginBottom": 0,
           "marginTop": 0,
           "position": "absolute",
+          "textAlign": "left",
           "textShadow": "2px 2px 4px blue",
           "top": "20px",
           "width": "100px",
@@ -413,6 +415,7 @@ describe("createElementStyle", () => {
           "marginBottom": 0,
           "marginTop": 0,
           "position": "absolute",
+          "textAlign": "center",
           "top": "20px",
           "width": "100px",
         }
@@ -456,6 +459,7 @@ describe("createElementStyle", () => {
           "marginBottom": 0,
           "marginTop": 0,
           "position": "absolute",
+          "textAlign": "right",
           "top": "20px",
           "width": "100px",
         }

apps/dashboard/src/lib/elements.ts

@@ -189,6 +189,9 @@ export function createElementStyle(element: OGElement): CSSProperties {
       fontSize: `${element.fontSize}px`,
       lineHeight: element.lineHeight,
       letterSpacing: `${element.letterSpacing}px`,
+      // We need both textAlign and justifyContent to center the text
+      // so that it works with both single and multi-line text
+      textAlign: element.align,
       justifyContent:
         element.align === "center"
           ? "center"