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"