FIX: Incorrect param type in comment

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

app/assets/javascripts/discourse/app/initializers/post-decorations.js

@@ -10,13 +10,32 @@ import { withPluginApi } from "discourse/lib/plugin-api";
 import { create } from "virtual-dom";
 import showModal from "discourse/lib/show-modal";
 
+export function createTableWrapperButton(label, icon, classes, event) {
+  const openPopupBtn = document.createElement("button");
+  const defaultClasses = [
+    "open-popup-link",
+    "btn-default",
+    "btn",
+    "btn-icon-text",
+  ];
+  openPopupBtn.classList.add(...defaultClasses);
+  openPopupBtn.classList.add(...classes);
+  const expandIcon = create(iconNode(icon));
+  const openPopupText = document.createTextNode(I18n.t(label));
+  openPopupBtn.append(expandIcon, openPopupText);
+  openPopupBtn.addEventListener("click", event, false);
+  return openPopupBtn;
+}
+
+export const apiExtraTableWrapperButtons = [];
+
 export default {
   name: "post-decorations",
   initialize(container) {
     withPluginApi("0.1", (api) => {
       const siteSettings = container.lookup("service:site-settings");
       const session = container.lookup("service:session");
-      const site = container.lookup("service:site");
+      // const site = container.lookup("service:site");
       api.decorateCookedElement(
         (elem) => {
           return highlightSyntax(elem, siteSettings, session);
@@ -135,52 +154,55 @@ export default {
         { id: "discourse-video-codecs" }
       );
 
-      function _createButton() {
-        const openPopupBtn = document.createElement("button");
-        openPopupBtn.classList.add(
-          "open-popup-link",
-          "btn-default",
-          "btn",
-          "btn-icon-text"
-        );
-        const expandIcon = create(
-          iconNode("discourse-expand", { class: "expand-table-icon" })
-        );
-        const openPopupText = document.createTextNode(
-          I18n.t("fullscreen_table.expand_btn")
-        );
-        openPopupBtn.append(expandIcon, openPopupText);
-        return openPopupBtn;
-      }
-
+      // eslint-disable-next-line no-unused-vars
       function isOverflown({ clientWidth, scrollWidth }) {
         return scrollWidth > clientWidth;
       }
 
       function generateModal(event) {
-        const table = event.target.nextElementSibling;
+        const table = event.target.parentElement.nextElementSibling;
         const tempTable = table.cloneNode(true);
 
         showModal("fullscreen-table").set("tableHtml", tempTable);
       }
 
       function generatePopups(tables) {
-        tables.forEach((table) => {
-          if (!isOverflown(table.parentNode)) {
+        tables.forEach((table, index) => {
+          const tableButtons = generateButtons(table);
+
+          if (tableButtons.length === 0) {
             return;
           }
 
-          if (site.isMobileDevice) {
-            return;
-          }
-
-          const popupBtn = _createButton();
+          table.parentNode.setAttribute("data-table-id", index);
           table.parentNode.classList.add("fullscreen-table-wrapper");
-          table.parentNode.insertBefore(popupBtn, table);
-          popupBtn.addEventListener("click", generateModal, false);
+          const buttonWrapper = document.createElement("div");
+          buttonWrapper.classList.add("fullscreen-table-wrapper-buttons");
+          // eslint-disable-next-line no-console
+          console.log(index, buttonWrapper, table, tableButtons);
+          buttonWrapper.append(...tableButtons);
+          table.parentNode.insertBefore(buttonWrapper, table);
         });
       }
 
+      // eslint-disable-next-line no-unused-vars
+      function generateButtons(table) {
+        const buttons = [];
+
+        // if (isOverflown(table.parentNode) && !site.isMobileDevice) { // temporarily disabled
+        const expandButton = createTableWrapperButton(
+          "fullscreen_table.expand_btn",
+          "discourse-expand",
+          ["btn-expand-table"],
+          generateModal
+        );
+        buttons.push(expandButton);
+        // }
+
+        buttons.push(...apiExtraTableWrapperButtons);
+        return buttons;
+      }
+
       api.decorateCookedElement(
         (post) => {
           schedule("afterRender", () => {
@@ -193,6 +215,16 @@ export default {
           id: "fullscreen-table",
         }
       );
+
+      // * TEMP for testing
+      api.addTableWrapperButton(
+        "drafts.label",
+        "pencil-alt",
+        ["btn-test-table"],
+        () =>
+          // eslint-disable-next-line no-console
+          console.log("clicked edit table")
+      );
     });
   },
 };

app/assets/javascripts/discourse/app/lib/plugin-api.js

@@ -105,12 +105,16 @@ import { registerNotificationTypeRenderer } from "discourse/lib/notification-typ
 import { registerUserMenuTab } from "discourse/lib/user-menu/tab";
 import { registerModelTransformer } from "discourse/lib/model-transformers";
 import { registerHashtagSearchParam } from "discourse/lib/hashtag-autocomplete";
+import {
+  apiExtraTableWrapperButtons,
+  createTableWrapperButton,
+} from "discourse/initializers/post-decorations";
 
 // If you add any methods to the API ensure you bump up the version number
 // based on Semantic Versioning 2.0.0. Please update the changelog at
 // docs/CHANGELOG-JAVASCRIPT-PLUGIN-API.md whenever you change the version
 // using the format described at https://keepachangelog.com/en/1.0.0/.
-const PLUGIN_API_VERSION = "1.4.0";
+const PLUGIN_API_VERSION = "1.5.0";
 
 // This helper prevents us from applying the same `modifyClass` over and over in test mode.
 function canModify(klass, type, resolverName, changes) {
@@ -2014,6 +2018,31 @@ class PluginApi {
   registerHashtagSearchParam(param, context, priority) {
     registerHashtagSearchParam(param, context, priority);
   }
+
+  /**
+   * Add a new button to be overlaid ontop of a table appearing in a post.
+   * On wider tables the button will be appending along with the Expand table button.
+   *
+   * Example usage:
+   *
+   *  api.addTableWrapperButton(
+   *    themePrefix("discourse_table_builder.edit.btn_edit"),
+   *    "pencil-alt",
+   *    ["btn-edit-table"],
+   *    generateModalEvent
+   * );
+   *
+   * @param {string} label - An i18n key for the button label
+   * @param {string} icon - An icon name from fontawesome
+   * @param {array} classes - An array of strings to be added as classes to the button
+   * @param {function} event - A function that returns an event to be dispatched when the button is clicked
+   *
+   */
+  addTableWrapperButton(label, icon, classes, event) {
+    apiExtraTableWrapperButtons.push(
+      createTableWrapperButton(label, icon, classes, event)
+    );
+  }
 }
 
 // from http://stackoverflow.com/questions/6832596/how-to-compare-software-version-number-using-js-only-number

app/assets/javascripts/discourse/tests/acceptance/post-table-wrapper-test.js

@@ -0,0 +1,49 @@
+import { test } from "qunit";
+import { click, visit } from "@ember/test-helpers";
+import {
+  acceptance,
+  exists,
+  query,
+} from "discourse/tests/helpers/qunit-helpers";
+
+acceptance("Post Table Wrapper Test", function () {
+  test("fullscreen table wrapper appears on post with large table", async function (assert) {
+    await visit("/t/54081");
+    const postWithLargeTable = ".post-stream .topic-post:first-child";
+    assert.ok(
+      exists(`${postWithLargeTable} .fullscreen-table-wrapper`),
+      "The wrapper is present on the post with the large table"
+    );
+
+    assert.ok(
+      exists(
+        `${postWithLargeTable} .fullscreen-table-wrapper .fullscreen-table-wrapper-buttons .open-popup-link`
+      ),
+      "buttons for the table wrapper appear inside a separate div"
+    );
+
+    const fullscreenButtonWrapper = query(
+      `${postWithLargeTable} .fullscreen-table-wrapper .fullscreen-table-wrapper-buttons`
+    );
+
+    assert.strictEqual(
+      window
+        .getComputedStyle(fullscreenButtonWrapper)
+        .getPropertyValue("position"),
+      "absolute",
+      "the wrapper buttons should not be in the cooked post's flow"
+    );
+
+    await click(
+      `${postWithLargeTable} .fullscreen-table-wrapper .btn-expand-table`
+    );
+    assert.ok(
+      exists(".fullscreen-table-modal"),
+      "The fullscreen table modal appears"
+    );
+    assert.ok(
+      exists(".fullscreen-table-modal table"),
+      "The table is present inside the modal"
+    );
+  });
+});

app/assets/javascripts/discourse/tests/fixtures/topic.js

@@ -6736,4 +6736,292 @@ export default {
     ],
     tags: null,
   },
+  "/t/54081.json": {
+    pending_posts: [],
+    post_stream: {
+      posts: [
+      {
+        id: 18,
+        username: "eviltrout",
+        avatar_template: "/images/avatar.png",
+        name: "Evil Trout",
+        uploaded_avatar_id: 9,
+        created_at: "2015-08-13T14:49:11.840Z",
+        cooked:
+          '<div class=\"md-table\">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Year</th>\n<th>Price</th>\n<th>Drivetrain</th>\n<th>Engine</th>\n<th>Power</th>\n<th>Type</th>\n<th>Seats</th>\n<th>Wheels</th>\n<th>Mileage</th>\n<th>Induction</th>\n<th>Intake</th>\n<th>Ranking</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Toyota</td>\n<td>Supra</td>\n<td>1998</td>\n<td>50k</td>\n<td>RWD</td>\n<td>I6</td>\n<td>400HP</td>\n<td>Coupe</td>\n<td>4</td>\n<td>Enkei PF01</td>\n<td>100,000</td>\n<td>Twin Turbo</td>\n<td>Yes</td>\n<td>1</td>\n</tr>\n<tr>\n<td>Nissan</td>\n<td>Skyline</td>\n<td>1999</td>\n<td>100k</td>\n<td>4WD</td>\n<td>I6</td>\n<td>350HP</td>\n<td>Coupe</td>\n<td>4</td>\n<td>TE37</td>\n<td>80,000</td>\n<td>Single Turbo</td>\n<td>No</td>\n<td>2</td>\n</tr>\n<tr>\n<td>Honda</td>\n<td>S2000</td>\n<td>2001</td>\n<td>30k</td>\n<td>RWD</td>\n<td>I4</td>\n<td>230HP</td>\n<td>Roadster</td>\n<td>2</td>\n<td>RPF1</td>\n<td>110,000</td>\n<td>Naturally Aspirated</td>\n<td>No</td>\n<td>3</td>\n</tr>\n</tbody>\n</table>\n',
+        post_number: 1,
+        post_type: 1,
+        updated_at: "2015-08-13T14:49:11.840Z",
+        reply_count: 0,
+        reply_to_post_number: null,
+        quote_count: 0,
+        incoming_link_count: 0,
+        reads: 1,
+        score: 0,
+        yours: true,
+        topic_id: 9,
+        topic_slug: "this-is-a-test-topic",
+        display_username: "",
+        primary_group_name: null,
+        version: 1,
+        can_edit: true,
+        can_delete: false,
+        can_recover: true,
+        read: true,
+        user_title: null,
+        actions_summary: [
+          { id: 3, can_act: true },
+          { id: 4, can_act: true },
+          { id: 5, hidden: true, can_act: true },
+          { id: 7, can_act: true },
+          { id: 8, can_act: true },
+        ],
+        moderator: false,
+        admin: true,
+        staff: true,
+        user_id: 1,
+        hidden: false,
+        hidden_reason_id: null,
+        trust_level: 4,
+        deleted_at: null,
+        user_deleted: false,
+        edit_reason: null,
+        can_view_edit_history: true,
+        wiki: false,
+      },
+      {
+        id: 19,
+        username: "eviltrout",
+        avatar_template: "/images/avatar.png",
+        name: "Evil Trout",
+        uploaded_avatar_id: 9,
+        created_at: "2015-08-13T14:49:18.231Z",
+        cooked:
+          '<p>These are my favourite JDM cars:</p>\n<div class="md-table">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Year</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Toyota</td>\n<td>Supra</td>\n<td>1998</td>\n</tr>\n<tr>\n<td>Nissan</td>\n<td>Skyline</td>\n<td>1999</td>\n</tr>\n<tr>\n<td>Honda</td>\n<td>S2000</td>\n<td>2001</td>\n</tr>\n</tbody>\n</table>\n</div><p>These are my favourite Euro cars:</p>\n<div class="md-table">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Year</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Porsche</td>\n<td>964</td>\n<td>1998</td>\n</tr>\n<tr>\n<td>BMW</td>\n<td>M3</td>\n<td>2005</td>\n</tr>\n<tr>\n<td>Alfa Romeo</td>\n<td>Giulia</td>\n<td>2018</td>\n</tr>\n</tbody>\n</table>\n</div>',
+        post_number: 2,
+        post_type: 1,
+        updated_at: "2015-08-13T14:49:18.231Z",
+        reply_count: 0,
+        reply_to_post_number: null,
+        quote_count: 0,
+        incoming_link_count: 0,
+        reads: 1,
+        score: 0,
+        yours: true,
+        topic_id: 9,
+        topic_slug: "this-is-a-test-topic",
+        display_username: "",
+        primary_group_name: null,
+        version: 1,
+        can_edit: true,
+        can_delete: true,
+        can_recover: true,
+        read: true,
+        user_title: null,
+        actions_summary: [
+          { id: 3, can_act: true },
+          { id: 4, can_act: true },
+          { id: 5, hidden: true, can_act: true },
+          { id: 7, can_act: true },
+          { id: 8, can_act: true },
+        ],
+        moderator: false,
+        admin: true,
+        staff: true,
+        user_id: 1,
+        hidden: false,
+        hidden_reason_id: null,
+        trust_level: 4,
+        deleted_at: null,
+        user_deleted: false,
+        edit_reason: null,
+        can_view_edit_history: true,
+        wiki: false,
+      },
+      {
+        id: 20,
+        username: "eviltrout",
+        avatar_template: "/images/avatar.png",
+        name: "Evil Trout",
+        uploaded_avatar_id: 9,
+        created_at: "2015-08-13T14:49:23.927Z",
+        cooked:
+          '<div class="md-table">\n<table>\n<thead>\n<tr>\n<th>Make</th>\n<th>Model</th>\n<th>Price</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Toyota</td>\n<td>Supra</td>\n<td>$50,000</td>\n</tr>\n<tr>\n<td></td>\n<td>Celica</td>\n<td>$20,000</td>\n</tr>\n<tr>\n<td>Nissan</td>\n<td>GTR</td>\n<td>$80,000</td>\n</tr>\n</tbody>\n</table>\n</div>',
+        post_number: 3,
+        post_type: 1,
+        updated_at: "2015-08-13T14:49:23.927Z",
+        reply_count: 0,
+        reply_to_post_number: null,
+        quote_count: 0,
+        incoming_link_count: 0,
+        reads: 1,
+        score: 0,
+        yours: true,
+        topic_id: 9,
+        topic_slug: "this-is-a-test-topic",
+        display_username: "",
+        primary_group_name: null,
+        version: 1,
+        can_edit: true,
+        can_delete: true,
+        can_recover: true,
+        read: true,
+        user_title: null,
+        actions_summary: [
+          { id: 3, can_act: true },
+          { id: 4, can_act: true },
+          { id: 5, hidden: true, can_act: true },
+          { id: 7, can_act: true },
+          { id: 8, can_act: true },
+        ],
+        moderator: false,
+        admin: true,
+        staff: true,
+        user_id: 1,
+        hidden: false,
+        hidden_reason_id: null,
+        trust_level: 4,
+        deleted_at: null,
+        user_deleted: false,
+        edit_reason: null,
+        can_view_edit_history: true,
+        wiki: false,
+      },
+      ],
+      stream: [398, 419],
+      gaps: { before: {}, after: { 398: [419] } },
+    },
+    id: 54081,
+    title: "This is a topic with tables!",
+    fancy_title: "This is a topic with tables!",
+    posts_count: 2,
+    created_at: "2013-02-05T21:29:00.174Z",
+    views: 5211,
+    reply_count: 1,
+    participant_count: 2,
+    like_count: 135,
+    last_posted_at: "2015-03-04T15:07:10.487Z",
+    visible: true,
+    closed: false,
+    archived: false,
+    has_summary: false,
+    archetype: "regular",
+    slug: "short-topic-with-two-posts",
+    category_id: 2,
+    word_count: 300,
+    deleted_at: null,
+    draft: null,
+    draft_key: "topic_54079",
+    draft_sequence: 3,
+    posted: true,
+    unpinned: null,
+    pinned_globally: false,
+    pinned: false,
+    pinned_at: null,
+    details: {
+      can_publish_page: true,
+      can_invite_via_email: true,
+      can_toggle_topic_visibility: true,
+      can_pin_unpin_topic: true,
+      auto_close_at: null,
+      auto_close_hours: null,
+      auto_close_based_on_last_post: false,
+      created_by: {
+        id: 255,
+        username: "james_john",
+        uploaded_avatar_id: 5697,
+        avatar_template: "/images/avatar.png",
+      },
+      last_poster: {
+        id: 9,
+        username: "Tim Stone",
+        uploaded_avatar_id: 40181,
+        avatar_template: "/images/avatar.png",
+      },
+      participants: [
+        {
+          id: 9,
+          username: "tms",
+          uploaded_avatar_id: 40181,
+          avatar_template: "/images/avatar.png",
+          post_count: 2,
+        },
+        {
+          id: 255,
+          username: "james_john",
+          uploaded_avatar_id: 5697,
+          avatar_template: "/images/avatar.png",
+          post_count: 1,
+        },
+      ],
+      links: [],
+      notification_level: 2,
+      notifications_reason_id: 4,
+      can_move_posts: true,
+      can_edit: true,
+      can_delete: true,
+      can_recover: true,
+      can_remove_allowed_users: true,
+      can_invite_to: true,
+      can_create_post: true,
+      can_reply_as_new_topic: true,
+      can_flag_topic: true,
+    },
+    highest_post_number: 2,
+    last_read_post_number: 2,
+    deleted_by: null,
+    has_deleted: true,
+    actions_summary: [
+      { id: 4, count: 0, hidden: false, can_act: true },
+      { id: 7, count: 0, hidden: false, can_act: true },
+      { id: 8, count: 0, hidden: false, can_act: true },
+    ],
+    chunk_size: 20,
+    bookmarked: false,
+    bookmarks: [],
+    suggested_topics: [
+      {
+        id: 27331,
+        title: "Polls are still very buggy",
+        fancy_title: "Polls are still very buggy",
+        slug: "polls-are-still-very-buggy",
+        posts_count: 4,
+        reply_count: 1,
+        highest_post_number: 4,
+        image_url: "/uploads/default/_optimized/cd1/b8c/c162528887_690x401.png",
+        created_at: "2015-04-08T09:51:00.357Z",
+        last_posted_at: "2015-04-08T15:59:16.258Z",
+        bumped: true,
+        bumped_at: "2015-04-08T16:05:09.842Z",
+        unseen: false,
+        last_read_post_number: 3,
+        unread_posts: 1,
+        pinned: false,
+        unpinned: null,
+        visible: true,
+        closed: false,
+        archived: false,
+        notification_level: 2,
+        bookmarked: false,
+        bookmarks: [],
+        liked: false,
+        archetype: "regular",
+        like_count: 11,
+        views: 55,
+        category_id: 1,
+        posters: [
+          {
+            extras: "latest single",
+            description: "Original Poster, Most Recent Poster",
+            user: {
+              id: 1,
+              username: "test",
+              avatar_template: "/images/avatar.png",
+            },
+          },
+        ],
+      },
+    ],
+    tags: null,
+  },
 };

app/assets/stylesheets/common/base/topic-post.scss

@@ -1652,20 +1652,21 @@ a.mention-group {
 
 .open-popup-link {
   position: sticky;
-  left: 0.5rem;
-  top: 0.5rem;
+  left: 1rem;
   opacity: 0%;
   white-space: nowrap;
-  display: block;
 }
 
 .fullscreen-table-wrapper {
   transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   display: block;
-}
+  position: relative;
 
-.expand-table-icon {
-  margin-right: 4px;
+  &-buttons {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+  }
 }
 
 .fullscreen-table-modal .modal-inner-container,

docs/CHANGELOG-JAVASCRIPT-PLUGIN-API.md

@@ -7,6 +7,12 @@ in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.0] - 2022-11-01
+
+### Added
+
+- Adds `addTableWrapperButton`, which allows users to register a button that appears on top of posts with markdown tables. The button will appear on hover over a table that appears in a post. If the post's table is a very wide table, the button will be appended next to the Expand Table button.
+
 ## [1.4.0] - 2022-09-27
 
 ### Added