WIP: Use JSpreadsheet instead of Importabular

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

@@ -46,7 +46,10 @@ export default apiInitializer("0.11.1", (api) => {
 
         showModal("table-editor-modal", {
           model: attrs,
-        }).set("tableHtml", tempTable);
+        }).setProperties({
+          tableHtml: tempTable,
+          submitOnEnter: false,
+        });
         return result.raw;
       })
       .catch(popupAjaxError);

javascripts/discourse/controllers/table-editor-modal.js

@@ -8,7 +8,7 @@ export default class extends Controller {
     // ? TODO move to component (read about not allowing Controllers to do DOM manipulation)
     this._super(...arguments);
 
-    loadScript(settings.theme_uploads.importabular).then(() => {
+    loadScript(settings.theme_uploads.jspreadsheet).then(() => {
       this.buildTable(this.tableHtml);
     });
   }
@@ -29,17 +29,18 @@ export default class extends Controller {
 
     const columns = headings.map((heading) => {
       return {
-        label: heading,
+        title: heading,
+        width: "100", // TODO make based on string length?
       };
     });
 
-    // eslint-disable-next-line no-unused-vars, no-undef
-    const sheet = new Importabular({
-      node: document.getElementById("table-editor-spreadsheet"),
-      columns,
+    this.spreadsheet = jspreadsheet(document.getElementById("spreadsheet"), {
       data: tableData,
-      width: "100vw",
+      columns,
     });
+
+    const originalData = this.spreadsheet.getData();
+    console.log("Original Data:", originalData);
   }
 
   @action
@@ -50,6 +51,7 @@ export default class extends Controller {
   @action
   editTable() {
     // TODO: insert table edit submission logic
+    console.log("New Data:", this.spreadsheet.getData());
     this.send("closeModal");
   }
 }

javascripts/discourse/templates/modal/table-editor-modal.hbs

@@ -6,13 +6,14 @@
   {{! TODO: Fix instances where multiple tables in a single post }}
 
   {{! TODO better id name }}
-  <div class="table-spreadsheet-container" id="table-editor-spreadsheet"></div>
+  <div id="spreadsheet" tabindex="1" class="jexcel_container"></div>
 
 </DModalBody>
 
 <div class="modal-footer">
+  {{! TODO Fix submitOnEnter property always true before adding back "btn-primary" class to edit button}}
   <DButton
-    @class="btn-primary btn-edit-table"
+    @class="btn btn-edit-table"
     @label={{theme-prefix "discourse_table_builder.edit.modal.create"}}
     @icon="pencil-alt"
     @action={{action "editTable"}}