DOC-3326 - Document table picker fancymenuitem

modules/ROOT/examples/live-demos/custom-table-picker-menu-button/index.html

@@ -0,0 +1,22 @@
+<textarea id="custom-table-picker-menu-button">
+  {{logofordemoshtml}}
+  <h1 style="text-align: center; font-size: 1.75rem;">Tables for the workflow</h1>
+  <p style="text-align: center; color: #64748b;">Click the table button above. Hover the grid, pick the size, click to insert. No dialogs.</p>
+
+  <table style="border-collapse: collapse; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);" border="0">
+    <thead>
+      <tr style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: white;">
+        <th scope="col" style="padding: 12px 16px; text-align: left; font-weight: 600;">Contact</th>
+        <th scope="col" style="padding: 12px 16px; text-align: left; font-weight: 600;">Company</th>
+        <th scope="col" style="padding: 12px 16px; text-align: left; font-weight: 600;">Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style="background: #f8fafc; border-bottom: 1px solid #e2e8f0;"><td style="padding: 12px 16px;"><strong>Sarah Chen</strong></td><td style="padding: 12px 16px;">Acme Corp</td><td style="padding: 12px 16px;">Active</td></tr>
+      <tr style="background: white; border-bottom: 1px solid #e2e8f0;"><td style="padding: 12px 16px;"><strong>Marcus Webb</strong></td><td style="padding: 12px 16px;">TechStart</td><td style="padding: 12px 16px;">Follow-up</td></tr>
+      <tr style="background: #f8fafc;"><td style="padding: 12px 16px;"><strong>Elena Rodriguez</strong></td><td style="padding: 12px 16px;">Global Inc</td><td style="padding: 12px 16px;">New</td></tr>
+    </tbody>
+  </table>
+
+  <p style="text-align: center; margin-top: 1.5rem;">Add a table anywhere.</p>
+</textarea>

modules/ROOT/examples/live-demos/custom-table-picker-menu-button/index.js

@@ -0,0 +1,29 @@
+tinymce.init({
+  selector: 'textarea#custom-table-picker-menu-button',
+  height: 600,
+  plugins: 'table',
+  toolbar: 'inserttable',
+  menubar: false,
+
+  setup: (editor) => {
+    editor.ui.registry.addMenuButton('inserttable', {
+      icon: 'table',
+      tooltip: 'Insert table',
+      fetch: (callback) => {
+        callback([
+          {
+            type: 'fancymenuitem',
+            fancytype: 'inserttable',
+            onAction: (data) => {
+              editor.execCommand('mceInsertTable', false, {
+                rows: data.numRows,
+                columns: data.numColumns,
+                options: { headerRows: 1 }
+              });
+            }
+          }
+        ]);
+      }
+    });
+  }
+});

modules/ROOT/pages/custom-menu-toolbar-button.adoc

@@ -1,7 +1,7 @@
 = Creating custom Menu toolbar buttons
 :navtitle: Menu toolbar button
 :description: Creating custom Menu toolbar buttons for TinyMCE
-:keywords: toolbar, toolbarbuttons, buttons, toolbarbuttonsapi
+:keywords: toolbar, toolbarbuttons, buttons, toolbarbuttonsapi, fancymenuitem, inserttable, table picker
 
 A toolbar menu button is a toolbar button that opens a menu when clicked. This menu can also contain submenus. This is useful for grouping together actions that would otherwise be several buttons on the toolbar. It can also be used to reduce visual clutter and save UI space, as menubar menu items and some toolbar buttons could be moved into a toolbar menu button. Potentially, all menubar menu items could be moved into toolbar menu buttons, allowing for the editor to be used without a menubar at all.
 
@@ -39,7 +39,7 @@ include::partial$misc/admon-predefined-icons-only.adoc[]
 
 The following is a simple toolbar menu button example:
 
-liveDemo::custom-toolbar-menu-button[tab="js"]
+liveDemo::custom-toolbar-menu-button[]
 
 This example configures a toolbar menu button with the label `+My Button+` that opens the specified menu when clicked. The top-level menu contains two items. The first menu item inserts content when clicked and the second menu item opens a submenu containing two menu items which insert content when clicked.
 
@@ -56,10 +56,55 @@ The `+fetchContext+` is an object containing a single string property: `+pattern
 
 The following is a simple toolbar menu button example, where searching has been configured:
 
-liveDemo::custom-toolbar-menu-button-search[tab="js"]
+liveDemo::custom-toolbar-menu-button-search[]
 
 This example configures a toolbar menu button with the label `+My searchable button+` that opens the specified menu when clicked. The menu will contain a search input field because `+search+` is not `+false+`. The input field's https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder[placeholder attribute] will be `+Type...+`.
 
 Initially, when the menu opens, the search input field will be empty, and the `+fetch+` function is called with an empty `+pattern+` for its `+fetchContext+`. In that situation, `+fetch+` passes back an array of two items to be rendered in the drop-down menu. When the user types in the input field, `+fetch+` will be called again, except this time, the `+pattern+` property in `+fetchContext+` will reflect the value typed in the input field. For illustration purposes, this example then passes back an item that contains this pattern inside the item's text. In a more real-life example, the `+pattern+` could be used to filter which of the items are passed to the callback.
 
+[[table-picker-menu-item]]
+== Adding a table picker to a custom menu
+
+The built-in table grid picker can be added to a custom menu button using a `+fancymenuitem+` with `+fancytype: 'inserttable'+`. This displays the same interactive grid that appears in the Table plugin's menu when xref:table.adoc#table_grid[`+table_grid+`] is enabled.
+
+The `+onAction+` callback receives an object with `+numRows+` and `+numColumns+` properties. Pass these values to the `+mceInsertTable+` command to insert the table.
+
+NOTE: The table picker requires the `+table+` plugin.
+
+liveDemo::custom-table-picker-menu-button[]
+
+=== Example: adding a table picker menu button
+
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',
+  plugins: 'table',
+  toolbar: 'inserttable',
+  menubar: false,
+
+  setup: (editor) => {
+    editor.ui.registry.addMenuButton('inserttable', {
+      icon: 'table',
+      tooltip: 'Insert table',
+      fetch: (callback) => {
+        callback([
+          {
+            type: 'fancymenuitem',
+            fancytype: 'inserttable',
+            onAction: (data) => {
+              editor.execCommand('mceInsertTable', false, {
+                rows: data.numRows,
+                columns: data.numColumns,
+                options: { headerRows: 1 }
+              });
+            }
+          }
+        ]);
+      }
+    });
+  }
+});
+----
+
 include::partial$misc/onSetup.adoc[]