fix columnar alignment on tables

instructure · Mar 1, 2024 · 2efc5b1 · 2efc5b1
1 parent 5c0a593
commit 2efc5b1
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/isp-site/src/components/mdtoui.jsx b/isp-site/src/components/mdtoui.jsx
@@ -23,6 +23,14 @@ const filterChildrenProps = (props) => {
 	);
 };
 
+const alignStr = (p) => {
+	return (
+		p?.style?.textAlign.replace(/\b(left|right)\b/, (s) =>
+			s === "left" ? "start" : "end",
+		) ?? "start"
+	);
+};
+
 const mdtoui = {
 	hr: ({ node, ...props }) => (
 		<View
@@ -180,6 +188,7 @@ const mdtoui = {
 													<Table.ColHeader
 														key={child.key}
 														id={child.key}
+														textAlign={alignStr(child.props)}
 														{...child.props}
 													/>
 												);
@@ -197,7 +206,12 @@ const mdtoui = {
 								return (
 									<Table.Row {...tbrProps}>
 										{Children.map(children, (child) => {
-											return <Table.Cell {...child.props} />;
+											return (
+												<Table.Cell
+													textAlign={alignStr(child.props)}
+													{...child.props}
+												/>
+											);
 										})}
 									</Table.Row>
 								);