FIX: Table editing sometimes not working (#50)

We were relying on the `event.target`, and sometimes that target was not the button element with the `table-id` data attribute, but the svg. 

This commit makes a few changes: 

- renames `tableId` to `tableIndex`
- passes the index as part of the attributes to the `generateModal` function

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

@@ -30,19 +30,19 @@ export default apiInitializer("0.11.1", (api) => {
     return openPopupBtn;
   }
 
-  function generateModal(event) {
-    const tableId = event.target.getAttribute("data-table-id");
+  function generateModal() {
+    const tableIndex = this.tableIndex;
 
     return ajax(`/posts/${this.id}`, { type: "GET" })
       .then((post) =>
         parseAsync(post.raw).then((tokens) => {
           const allTables = tokenRange(tokens, "table_open", "table_close");
-          const tableTokens = allTables[tableId];
+          const tableTokens = allTables[tableIndex];
 
           showModal("insert-table-modal", {
             model: post,
           }).setProperties({
-            tableId,
+            tableIndex,
             tableTokens,
           });
         })
@@ -53,7 +53,7 @@ export default apiInitializer("0.11.1", (api) => {
   function generatePopups(tables, attrs) {
     tables.forEach((table, index) => {
       const popupBtn = createButton();
-      popupBtn.setAttribute("data-table-id", index); // sets a table id so each table can be distinctly edited
+      table.parentNode.setAttribute("data-table-index", index);
       table.parentNode.classList.add("fullscreen-table-wrapper");
       const expandBtn = table.parentNode.querySelector(".open-popup-link");
 
@@ -66,7 +66,11 @@ export default apiInitializer("0.11.1", (api) => {
         table.parentNode.insertBefore(buttonWrapper, table);
       }
 
-      popupBtn.addEventListener("click", generateModal.bind(attrs), false);
+      popupBtn.addEventListener(
+        "click",
+        generateModal.bind({ tableIndex: index, ...attrs }),
+        false
+      );
     });
   }
 

javascripts/discourse/components/spreadsheet-editor.js

@@ -19,16 +19,9 @@ export default class SpreadsheetEditor extends Component {
   @tracked loading = null;
   spreadsheet = null;
   defaultColWidth = 150;
+  isEditingTable = !!this.args.tableTokens;
 
   // Getters:
-  get isEditingTable() {
-    if (this.args.tableTokens) {
-      return true;
-    }
-
-    return false;
-  }
-
   get modalAttributes() {
     if (this.isEditingTable) {
       return {
@@ -196,12 +189,12 @@ export default class SpreadsheetEditor extends Component {
     });
   }
 
-  buildUpdatedPost(tableId, raw, newRaw) {
+  buildUpdatedPost(tableIndex, raw, newRaw) {
     const tableToEdit = raw.match(findTableRegex());
     let editedTable;
 
     if (tableToEdit.length) {
-      editedTable = raw.replace(tableToEdit[tableId], newRaw);
+      editedTable = raw.replace(tableToEdit[tableIndex], newRaw);
     } else {
       return raw;
     }
@@ -212,7 +205,7 @@ export default class SpreadsheetEditor extends Component {
   }
 
   updateTable(markdownTable) {
-    const tableId = this.args.tableId;
+    const tableIndex = this.args.tableIndex;
     const postId = this.args.model.id;
     const newRaw = markdownTable;
 
@@ -220,7 +213,7 @@ export default class SpreadsheetEditor extends Component {
       this.editReason ||
       I18n.t(themePrefix("discourse_table_builder.edit.default_edit_reason"));
     const raw = this.args.model.raw;
-    const newPostRaw = this.buildUpdatedPost(tableId, raw, newRaw);
+    const newPostRaw = this.buildUpdatedPost(tableIndex, raw, newRaw);
 
     return this.sendTableUpdate(postId, newPostRaw, editReason);
   }

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

@@ -1,7 +1,7 @@
 <SpreadsheetEditor
   @model={{this.model}}
   @tableTokens={{this.tableTokens}}
-  @tableId={{this.tableId}}
+  @tableIndex={{this.tableIndex}}
   @triggerModalClose={{action "closeEditModal"}}
   @toolbarEvent={{this.toolbarEvent}}
 />