FEATURE: Use spreadsheet editor for building tables

javascripts/discourse/templates/components/body-row.hbs

@@ -1,20 +0,0 @@
-<div class="body-row">
-  <TextField
-    @value={{bodyRowValue}}
-    @class="table-builder-input"
-    @placeholderKey={{theme-prefix "discourse_table_builder.modal.body"}}
-    {{on "change" this.addBodyValue}}
-  />
-  <DButton
-    @icon="plus"
-    @title={{theme-prefix "discourse_table_builder.modal.buttons.add_row"}}
-    @action={{action "addRow"}}
-  />
-  <DButton
-    @icon="trash-alt"
-    @class="btn-danger"
-    @title={{theme-prefix "discourse_table_builder.modal.buttons.remove_row"}}
-    @action={{action "removeRow"}}
-    @disabled={{this.disableRemoveRow}}
-  />
-</div>

javascripts/discourse/templates/components/header-column.hbs

@@ -1,62 +0,0 @@
-<div class="header-column">
-  <div class="header-row">
-    <TextField
-      @value={{columnHeaderValue}}
-      @class="table-builder-input"
-      @id="header-column-{{@columnId}}"
-      @placeholderKey={{theme-prefix "discourse_table_builder.modal.header"}}
-      {{on "change" this.addColumnHeader}}
-    />
-    <div class="body-inputs">
-      {{#each @column.rows as |item|}}
-        <BodyRow
-          @addRow={{this.addRow}}
-          @columnId={{@columnId}}
-          @allRows={{@column.rows}}
-          @row={{item}}
-          @removeRow={{this.removeRow}}
-          @setRowValue={{this.setRowValue}}
-        />
-      {{/each}}
-    </div>
-
-  </div>
-  <div class="column-action-buttons column-aligned-{{this.alignment}}">
-    <DButton
-      @icon="align-left"
-      @class="btn-align-left"
-      @title={{theme-prefix "discourse_table_builder.modal.buttons.align_left"}}
-      @action={{action "alignColumn" "left"}}
-    />
-    <DButton
-      @icon="align-center"
-      @class="btn-align-center"
-      @title={{theme-prefix
-        "discourse_table_builder.modal.buttons.align_center"
-      }}
-      @action={{action "alignColumn" "center"}}
-    />
-    <DButton
-      @icon="align-right"
-      @class="btn-align-right"
-      @title={{theme-prefix
-        "discourse_table_builder.modal.buttons.align_right"
-      }}
-      @action={{action "alignColumn" "right"}}
-    />
-    <DButton
-      @icon="trash-alt"
-      @class="btn-danger"
-      @action={{action "removeColumn"}}
-      @title={{theme-prefix
-        "discourse_table_builder.modal.buttons.remove_column"
-      }}
-      @disabled={{this.disableRemoveColumn}}
-    />
-    <DButton
-      @icon="plus"
-      @action={{action "addColumn"}}
-      @title={{theme-prefix "discourse_table_builder.modal.buttons.add_column"}}
-    />
-  </div>
-</div>

javascripts/discourse/templates/components/spreadsheet-editor.hbs

@@ -1,38 +1,62 @@
-<DModalBody
-  @title={{theme-prefix "discourse_table_builder.edit.modal.title"}}
-  @class="table-editor-modal"
->
-  <div class="edit-reason">
-    <DButton
-      @icon="info-circle"
-      @title={{theme-prefix
-        "discourse_table_builder.edit.modal.trigger_reason"
-      }}
-      @action={{action "showEditReasonField"}}
-      @class="btn btn-icon btn-flat no-text btn-edit-reason"
-    />
-    {{#if showEditReason}}
-      <TextField
-        @value={{this.editReason}}
-        @placeholderKey={{theme-prefix
-          "discourse_table_builder.edit.modal.reason"
+<DModalBody @title={{this.modalAttributes.title}} @class="insert-table-modal">
+  {{#if this.isEditingTable}}
+    <div class="edit-reason">
+      <DButton
+        @icon="info-circle"
+        @title={{theme-prefix
+          "discourse_table_builder.edit.modal.trigger_reason"
         }}
+        @action={{action "showEditReasonField"}}
+        @class="btn btn-icon btn-flat no-text btn-edit-reason"
       />
-    {{/if}}
-  </div>
+      {{#if showEditReason}}
+        <TextField
+          @value={{this.editReason}}
+          @placeholderKey={{theme-prefix
+            "discourse_table_builder.edit.modal.reason"
+          }}
+        />
+      {{/if}}
+    </div>
+  {{/if}}
+
   <div id="spreadsheet" tabindex="1" class="jexcel_container"></div>
 </DModalBody>
 
 <div class="modal-footer">
-  <DButton
-    @class="btn-edit-table"
-    @label={{theme-prefix "discourse_table_builder.edit.modal.create"}}
-    @icon="pencil-alt"
-    @action={{action "editTable"}}
-  />
-  <DButton
-    @class="btn-flat"
-    @label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
-    @action={{action "cancelTableEdit"}}
-  />
+  <div class="primary-actions">
+    <DButton
+      @class="btn-insert-table"
+      @label={{this.modalAttributes.insertTable.title}}
+      @icon={{this.modalAttributes.insertTable.icon}}
+      @action={{action "insertTable"}}
+    />
+    <DButton
+      @class="btn-flat"
+      @label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
+      @action={{action "cancelTableInsertion"}}
+    />
+  </div>
+
+  <div class="secondary-actions">
+    <DPopover>
+      <DButton class="trigger" @icon="question" />
+      <ul>
+        <h4>{{theme-i18n "discourse_table_builder.modal.help.title"}}</h4>
+        <li>
+          <kbd>
+            {{theme-i18n "discourse_table_builder.modal.help.enter_key"}}
+          </kbd>
+          {{theme-i18n "discourse_table_builder.modal.help.new_row"}}
+        </li>
+        <li>
+          <kbd>
+            {{theme-i18n "discourse_table_builder.modal.help.tab_key"}}
+          </kbd>
+          {{theme-i18n "discourse_table_builder.modal.help.new_col"}}
+        </li>
+        <li>{{theme-i18n "discourse_table_builder.modal.help.options"}}</li>
+      </ul>
+    </DPopover>
+  </div>
 </div>

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

@@ -3,4 +3,5 @@
   @tableHtml={{this.tableHtml}}
   @tableId={{this.tableId}}
   @triggerModalClose={{action "closeEditModal"}}
+  @toolbarEvent={{this.toolbarEvent}}
 />

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

@@ -1,40 +0,0 @@
-<DModalBody
-  @title={{theme-prefix "discourse_table_builder.modal.title"}}
-  @class="table-builder-modal"
->
-  <form id="insert-markdown-table-form" {{action "createTable" on="submit"}}>
-    <section class="header-section">
-      <div class="table-header-fields">
-        {{#each this.tableItems as |item|}}
-          <HeaderColumn
-            @column={{item}}
-            @columnId={{item.column}}
-            @tableItems={{this.tableItems}}
-            @addColumn={{this.addColumn}}
-            @removeColumn={{this.removeColumn}}
-            @setColumnHeader={{this.setColumnHeader}}
-            @addRow={{this.addRow}}
-            @removeRow={{this.removeRow}}
-            @setRowValue={{this.setRowValue}}
-            @alignColumn={{this.alignColumn}}
-          />
-        {{/each}}
-      </div>
-    </section>
-  </form>
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @class="btn-primary btn-build-table"
-    @label={{theme-prefix "discourse_table_builder.modal.create"}}
-    @icon="plus"
-    @action={{action "createTable"}}
-  />
-
-  <DButton
-    @class="btn-flat"
-    @label={{theme-prefix "discourse_table_builder.modal.cancel"}}
-    @action={{action "cancelTableCreation"}}
-  />
-</div>