DEV: Trigger modal from Edit Table Button

Triggers modal after clicking Edit Table from selection. Data from post is then passed to the modal.

common/common.scss

@@ -75,3 +75,8 @@
     }
   }
 }
+
+// EDIT BUTTON RELATED (TODO move to partials)
+.quote-button {
+  flex-direction: row;
+}

javascripts/discourse/connectors/quote-button-after/edit-table-button.hbs

@@ -0,0 +1,9 @@
+{{#if context._canEditPost}}
+  <DButton
+    @class="btn-flat"
+    @title={{theme-prefix "discourse_table_builder.edit.btn_edit"}}
+    @label={{theme-prefix "discourse_table_builder.edit.btn_edit"}}
+    @icon="pencil-alt"
+    @action={{action "showEditTableModal"}}
+  />
+{{/if}}

javascripts/discourse/connectors/quote-button-after/edit-table-button.js

@@ -0,0 +1,32 @@
+import { action } from "@ember/object";
+import showModal from "discourse/lib/show-modal";
+
+export default {
+  setupComponent(args, component) {
+    console.log(args, component, this);
+  },
+
+  @action
+  showEditTableModal() {
+    const selection = window.getSelection();
+    const selectedTable = selection.focusNode;
+    const { context } = this.args;
+
+    // TODO: Improve table checking logic AND change so it only shows button when selected content is a table
+    if (
+      selectedTable.nodeName === "DIV" &&
+      selectedTable.classList.contains("md-table")
+    ) {
+      // ? TODO: simply pass quoteState object only?
+      const attrs = {
+        table: context.quoteState.buffer,
+        postId: context.quoteState.postId,
+      };
+      showModal("table-editor-modal", {
+        model: attrs,
+      });
+    } else {
+      console.warn("This is not a table:", selection);
+    }
+  },
+};

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

@@ -0,0 +1,18 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import { A } from "@ember/array";
+
+export default class extends Controller {
+  @action
+  cancelTableEdit() {
+    this.send("closeModal");
+  }
+
+  @action
+  editTable() {
+    // TODO: insert table edit submission logic
+    console.log("Table has been successfully edited");
+    this.send("closeModal");
+  }
+}

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

@@ -0,0 +1,23 @@
+<DModalBody
+  @title={{theme-prefix "discourse_table_builder.edit.modal.title"}}
+  @class="table-editor-modal"
+>
+  {{! TODO: Parse .md to json and fill table }}
+  {{model.table}}
+
+</DModalBody>
+
+<div class="modal-footer">
+  <DButton
+    @class="btn-primary btn-edit-table"
+    @label={{theme-prefix "discourse_table_builder.edit.modal.create"}}
+    @icon="plus"
+    @action={{action "editTable"}}
+  />
+
+  <DButton
+    @class="btn-flat"
+    @label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
+    @action={{action "cancelTableEdit"}}
+  />
+</div>

locales/en.yml

@@ -17,5 +17,11 @@ en:
         align_left: "Align Left"
         align_center: "Align Center"
         align_right: "Align Right"
+    edit:
+      btn_edit: "Edit Table"
+      modal:
+        title: "Edit Table"
+        cancel: "cancel"
+        create: "Edit Table"
   theme_metadata:
     description: "Adds a button to the composer to easily build tables in markdown"