FIX: Only update table portion from raw post

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

@@ -31,6 +31,7 @@ export default apiInitializer("0.11.1", (api) => {
   function generateModal(event) {
     const table = event.target.parentNode.lastElementChild;
     const tempTable = table.cloneNode(true);
+    const tableId = event.target.getAttribute("data-table-id");
 
     return ajax(`/posts/${this.id}`, { type: "GET" })
       .then((post) => {
@@ -38,19 +39,20 @@ export default apiInitializer("0.11.1", (api) => {
           model: post,
         }).setProperties({
           tableHtml: tempTable,
-          submitOnEnter: false,
+          tableId,
         });
       })
       .catch(popupAjaxError);
   }
 
   function generatePopups(tables, attrs) {
-    tables.forEach((table) => {
+    tables.forEach((table, index) => {
       if (site.isMobileDevice) {
         return;
       }
 
       const popupBtn = createButton();
+      popupBtn.setAttribute("data-table-id", index);
       table.parentNode.classList.add("fullscreen-table-wrapper");
       const expandBtn = document.querySelector(".open-popup-link");
 
@@ -59,6 +61,7 @@ export default apiInitializer("0.11.1", (api) => {
       } else {
         table.parentNode.insertBefore(popupBtn, table);
       }
+
       popupBtn.addEventListener("click", generateModal.bind(attrs), false);
     });
   }

javascripts/discourse/components/spreadsheet-editor.js

@@ -5,6 +5,7 @@ import { arrayToTable, tableToObj } from "../lib/utilities";
 import Component from "@ember/component";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import { findTableRegex } from "../lib/utilities";
 
 export default Component.extend({
   tagName: "",
@@ -53,9 +54,6 @@ export default Component.extend({
       data: tableData,
       columns,
     });
-
-    const originalData = this.spreadsheet.getData();
-    console.log("Original Data:", originalData);
   },
 
   @action
@@ -74,7 +72,6 @@ export default Component.extend({
 
   @action
   editTable() {
-    // TODO: insert table edit submission logic
     const updatedHeaders = this.spreadsheet.getHeaders().split(","); // keys
     const updatedData = this.spreadsheet.getData(); // values
 
@@ -83,8 +80,20 @@ export default Component.extend({
     const newRaw = markdownTable;
     const editReason =
       this.get("editReason") || "Update Table with Table Editor";
+    const tableId = this.get("tableId");
 
-    this.updateTable(postId, newRaw, editReason);
+    const raw = this.model.raw;
+    const tableToEdit = raw.match(findTableRegex());
+
+    let editedTable;
+
+    if (tableToEdit.length > 1) {
+      editedTable = raw.replace(tableToEdit[tableId], newRaw);
+    } else {
+      editedTable = raw.replace(findTableRegex(), newRaw);
+    }
+
+    this.updateTable(postId, editedTable, editReason);
   },
 
   updateTable(postId, raw, edit_reason) {

javascripts/discourse/lib/utilities.js

@@ -85,3 +85,7 @@ export function arrayToTable(array, columns, alignment = "center") {
   // Return table
   return table;
 }
+
+export function findTableRegex() {
+  return /((\r?){2}|^)([^\r\n]*\|[^\r\n]*(\r?\n)?)+(?=(\r?\n){2}|$)/gm;
+}

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

@@ -1,6 +1,6 @@
 <SpreadsheetEditor
   @model={{this.model}}
   @tableHtml={{this.tableHtml}}
+  @tableId={{this.tableId}}
   @triggerModalClose={{action "closeEditModal"}}
-  @submitOnClose="false"
 />