FIX: Make the table builder respect table alignment specifications (#27709)

* FIX: Table Builder editor eradicates column alignment specification

Currently, when you use the table builder to edit an existing table, the table builder does not observe the text-align property of the original table. This results in the original table alignment being lost after editing and reset to no alignment.

This commit fixed this issue

related meta topic: https://meta.discourse.org/t/table-builder-editor-eradicates-column-alignment-specification/299577

app/assets/javascripts/discourse/app/components/modal/spreadsheet-editor.gjs

@@ -27,6 +27,7 @@ export default class SpreadsheetEditor extends Component {
   spreadsheet = null;
   defaultColWidth = 150;
   isEditingTable = !!this.args.model.tableTokens;
+  alignments = null;
 
   constructor() {
     super(...arguments);
@@ -174,6 +175,25 @@ export default class SpreadsheetEditor extends Component {
       .map((t) => t.content);
   }
 
+  extractTableAlignments(data) {
+    return data
+      .flat()
+      .filter((t) => t.type === "td_open")
+      .map((t) => {
+        for (const attr of t.attrs?.flat() ?? []) {
+          switch (attr) {
+            case "text-align:left":
+              return "left";
+            case "text-align:center":
+              return "center";
+            case "text-align:right":
+              return "right";
+          }
+        }
+        return null; // default
+      });
+  }
+
   buildPopulatedTable(tableTokens) {
     const contentRows = tokenRange(tableTokens, "tr_open", "tr_close");
     const rows = [];
@@ -190,15 +210,19 @@ export default class SpreadsheetEditor extends Component {
               heading.length * rowWidthFactor,
               this.defaultColWidth
             ),
-            align: "left",
           };
         });
       } else {
+        if (this.alignments == null) {
+          this.alignments = this.extractTableAlignments(row);
+        }
         // rows:
         rows.push(this.extractTableContent(row));
       }
     });
 
+    headings.forEach((h, i) => (h.align = this.alignments?.[i] ?? "left"));
+
     return this.buildSpreadsheet(rows, headings);
   }
 
@@ -276,7 +300,7 @@ export default class SpreadsheetEditor extends Component {
       table.push(result);
     });
 
-    return arrayToTable(table, headers);
+    return arrayToTable(table, headers, "col", this.alignments);
   }
 
   localeMapping() {

app/assets/javascripts/discourse/app/lib/utilities.js

@@ -632,13 +632,14 @@ export function getCaretPosition(element, options) {
  * Generate markdown table from an array of objects
  * Inspired by https://github.com/Ygilany/array-to-table
  *
- * @param  {Array} array       Array of objects
- * @param  {Array} columns     Column headings
- * @param  {String} colPrefix  Table column prefix
+ * @param  {Array<Record<string, string | undefined>>}          array       Array of objects
+ * @param  {String[]}                                           columns     Column headings
+ * @param  {String}                                             colPrefix   Table column prefix
+ * @param  {("left" | "center" | "right" | null)[] | undefined} alignments  Table alignments
  *
  * @return {String} Markdown table
  */
-export function arrayToTable(array, cols, colPrefix = "col") {
+export function arrayToTable(array, cols, colPrefix = "col", alignments) {
   let table = "";
 
   // Generate table headers
@@ -646,11 +647,15 @@ export function arrayToTable(array, cols, colPrefix = "col") {
   table += cols.join(" | ");
   table += "|\r\n|";
 
+  const alignMap = {
+    left: ":--",
+    center: ":-:",
+    right: "--:",
+  };
+
   // Generate table header separator
   table += cols
-    .map(function () {
-      return "---";
-    })
+    .map((_, index) => alignMap[String(alignments?.[index])] || "---")
     .join(" | ");
   table += "|\r\n";
 

app/assets/javascripts/discourse/tests/unit/lib/utilities-test.js

@@ -412,6 +412,24 @@ module("Unit | Utilities | table-builder", function (hooks) {
     );
   });
 
+  test("arrayToTable with alignment specification", function (assert) {
+    const tableData = [
+      { col0: "left", col1: "center", col2: "right", col3: "unspecificated" },
+      { col0: "111", col1: "222", col2: "333", col3: "444" },
+    ];
+    const alignment = ["left", "center", "right", null];
+    assert.strictEqual(
+      arrayToTable(
+        tableData,
+        ["Col 1", "Col 2", "Col 3", "Col 4"],
+        "col",
+        alignment
+      ),
+      "|Col 1 | Col 2 | Col 3 | Col 4|\r\n|:-- | :-: | --: | ---|\r\n|left | center | right | unspecificated|\r\n|111 | 222 | 333 | 444|\r\n",
+      "it creates a valid table"
+    );
+  });
+
   test("findTableRegex", function (assert) {
     const oneTable = `|Make|Model|Year|\r\n|--- | --- | ---|\r\n|Toyota|Supra|1998|`;