FIX: Special character alignment issue (#10)

* DEV: Use alternate fork of `array-to-table`

* DEV: Add unit test for `arrayToTable()` method

* Move `arrayToTable` so it is available for unit tests

* DEV: Add assertion for creating a markdown table with special chars

When a table with special characters (such as `$`) is inserted in a cell to the right of a blank cell. The alignment of the table gets ruined if the table doesn't have surrounding pipes. This check ensures this alignment is correct.

Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>

javascripts/discourse-table-builder/lib/utilities.js

@@ -3,45 +3,41 @@
 /**
  * Generate markdown table from an array of objects
  *
- * @see {@link https://github.com/Nijikokun/array-to-table|GitHub}:
+ * @see {@link https://github.com/Ygilany/array-to-table|GitHub}:
  *
  * @param  {Array} array    Array of objects
- * @param  {Array} columns  Optional, table column names, otherwise taken from the keys of the first object
+ * @param  {String} columns  Optional, table column names, otherwise taken from the keys of the first object
- * @param  {String} alignment Optional table alignment. Can be 'center' (default), 'left' or 'right'
  *
  * @return {String} Markdown table
  */
-export function arrayToTable(array, columns, alignment = "center") {
+export function arrayToTable(array, columns) {
   var table = "";
-  var separator = {
-    left: ":---",
-    right: "---:",
-    center: "---",
-  };
 
   // Generate column list
   var cols = columns ? columns.split(",") : Object.keys(array[0]);
 
   // Generate table headers
+  table += "|";
   table += cols.join(" | ");
-  table += "\r\n";
+  table += "|\r\n|";
 
   // Generate table header seperator
   table += cols
     .map(function () {
-      return separator[alignment] || separator.center;
+      return "---";
     })
     .join(" | ");
-  table += "\r\n";
+  table += "|\r\n";
 
   // Generate table body
   array.forEach(function (item) {
+    table += "|";
     table +=
       cols
         .map(function (key) {
           return String(item[key] || "");
         })
-        .join(" | ") + "\r\n";
+        .join(" | ") + "|\r\n";
   });
 
   // Return table

javascripts/discourse/api-initializers/table-editor.js

@@ -9,7 +9,7 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import Session from "discourse/models/session";
 import loadScript from "discourse/lib/load-script";
 import PrettyText, { buildOptions } from "pretty-text/pretty-text";
-import { tokenRange } from "../lib/utilities";
+import { tokenRange } from "../discourse-table-builder/lib/utilities";
 export default apiInitializer("0.11.1", (api) => {
   const site = api.container.lookup("site:main"),
     siteSettings = api.container.lookup("site-settings:main");

javascripts/discourse/components/spreadsheet-editor.js

@@ -1,6 +1,10 @@
 import { action } from "@ember/object";
 import loadScript from "discourse/lib/load-script";
-import { arrayToTable, findTableRegex, tokenRange } from "../lib/utilities";
+import {
+  arrayToTable,
+  findTableRegex,
+  tokenRange,
+} from "../discourse-table-builder/lib/utilities";
 import GlimmerComponent from "discourse/components/glimmer";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";

test/fixtures/md-table-fixture.js

@@ -0,0 +1 @@
+export default `|Make | Model | Year|\r\n|--- | --- | ---|\r\n|Toyota | Supra | 1998|\r\n|Nissan | Skyline | 1999|\r\n|Honda | S2000 | 2001|\r\n`;

test/fixtures/md-table-special-chars-fixture.js

@@ -0,0 +1 @@
+export default `|Make | Model | Price|\r\n|--- | --- | ---|\r\n|Toyota | Supra | $50,000|\r\n| | Celica | $20,000|\r\n|Nissan | GTR | $80,000|\r\n`;

test/unit/lib/utilities-test.js

@@ -0,0 +1,57 @@
+import { discourseModule } from "discourse/tests/helpers/qunit-helpers";
+import { test } from "qunit";
+import mdTableFixture from "../../fixtures/md-table-fixture";
+import mdTableSpecialCharsFixture from "../../fixtures/md-table-special-chars-fixture";
+import { arrayToTable } from "../../../discourse-table-builder/lib/utilities";
+
+discourseModule("Unit | Utilities", function () {
+  test("arrayToTable", function (assert) {
+    const tableData = [
+      {
+        Make: "Toyota",
+        Model: "Supra",
+        Year: "1998",
+      },
+      {
+        Make: "Nissan",
+        Model: "Skyline",
+        Year: "1999",
+      },
+      {
+        Make: "Honda",
+        Model: "S2000",
+        Year: "2001",
+      },
+    ];
+
+    assert.strictEqual(
+      arrayToTable(tableData),
+      mdTableFixture,
+      "it creates a markdown table from an array of objects (with headers as keys)"
+    );
+
+    const specialCharsTableData = [
+      {
+        Make: "Toyota",
+        Model: "Supra",
+        Price: "$50,000",
+      },
+      {
+        Make: "",
+        Model: "Celica",
+        Price: "$20,000",
+      },
+      {
+        Make: "Nissan",
+        Model: "GTR",
+        Price: "$80,000",
+      },
+    ];
+
+    assert.strictEqual(
+      arrayToTable(specialCharsTableData),
+      mdTableSpecialCharsFixture,
+      "it creates a markdown table with special characters in correct alignment"
+    );
+  });
+});