diff --git a/common/common.scss b/common/common.scss
index d8bd9d3..1f2bf64 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -75,3 +75,8 @@
}
}
}
+
+// EDIT BUTTON RELATED (TODO move to partials)
+.quote-button {
+ flex-direction: row;
+}
diff --git a/javascripts/discourse/connectors/quote-button-after/edit-table-button.hbs b/javascripts/discourse/connectors/quote-button-after/edit-table-button.hbs
new file mode 100644
index 0000000..e50eafa
--- /dev/null
+++ b/javascripts/discourse/connectors/quote-button-after/edit-table-button.hbs
@@ -0,0 +1,9 @@
+{{#if context._canEditPost}}
+
+{{/if}}
\ No newline at end of file
diff --git a/javascripts/discourse/connectors/quote-button-after/edit-table-button.js b/javascripts/discourse/connectors/quote-button-after/edit-table-button.js
new file mode 100644
index 0000000..71d474b
--- /dev/null
+++ b/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);
+ }
+ },
+};
diff --git a/javascripts/discourse/controllers/table-editor-modal.js b/javascripts/discourse/controllers/table-editor-modal.js
new file mode 100644
index 0000000..aa05053
--- /dev/null
+++ b/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");
+ }
+}
diff --git a/javascripts/discourse/templates/modal/table-editor-modal.hbs b/javascripts/discourse/templates/modal/table-editor-modal.hbs
new file mode 100644
index 0000000..ba5e9bf
--- /dev/null
+++ b/javascripts/discourse/templates/modal/table-editor-modal.hbs
@@ -0,0 +1,23 @@
+
+ {{! TODO: Parse .md to json and fill table }}
+ {{model.table}}
+
+
+
+
\ No newline at end of file
diff --git a/locales/en.yml b/locales/en.yml
index 1db2d72..4e37c3c 100644
--- a/locales/en.yml
+++ b/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"