@atlaskit/editor-plugin-table 10.8.1 → 10.8.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 10.8.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.8.2
+
+### Patch Changes
+
+- [#142852](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142852)
+  [`ca0f841e860ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca0f841e860ab) -
+  [ux] [ED-27466] When table option in quick insert typeahead is selected, shows table size picker
+  allow user selecting the table size before inserting
+- Updated dependencies
+
 ## 10.8.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/table-size-selector.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = exports.createPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var pluginKey = exports.pluginKey = new _state.PluginKey('tableSizeSelectorPlugin');
+var createPlugin = exports.createPlugin = function createPlugin(dispatch) {
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          isSelectorOpen: false
+        };
+      },
+      apply: function apply(tr, currentPluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta) {
+          var keys = Object.keys(meta);
+          var changed = keys.some(function (key) {
+            return currentPluginState[key] !== meta[key];
+          });
+          if (changed) {
+            var newState = _objectSpread(_objectSpread({}, currentPluginState), meta);
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return currentPluginState;
+      }
+    }
+  });
+};

package/dist/cjs/tablePlugin.js

@@ -12,6 +12,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
+var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _icons = require("@atlaskit/editor-common/icons");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
@@ -48,6 +49,7 @@ var _plugin5 = require("./pm-plugins/table-resizing/plugin");
 var _pluginFactory2 = require("./pm-plugins/table-resizing/plugin-factory");
 var _pluginKey5 = require("./pm-plugins/table-resizing/plugin-key");
 var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
+var _tableSizeSelector = require("./pm-plugins/table-size-selector");
 var _tableWidth = require("./pm-plugins/table-width");
 var _tableWidthInCommentFix = require("./pm-plugins/table-width-in-comment-fix");
 var _create = require("./pm-plugins/utils/create");
@@ -59,6 +61,7 @@ var _FloatingDragMenu = _interopRequireDefault(require("./ui/FloatingDragMenu"))
 var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertButton"));
 var _FloatingToolbarLabel = require("./ui/FloatingToolbarLabel/FloatingToolbarLabel");
 var _globalStyles = require("./ui/global-styles");
+var _SizeSelector = require("./ui/SizeSelector");
 var _TableFullWidthLabel = require("./ui/TableFullWidthLabel");
 var _toolbar = require("./ui/toolbar");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -75,7 +78,7 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
  * from `@atlaskit/editor-core`.
  */
 var tablePlugin = function tablePlugin(_ref) {
-  var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _api$analytics2;
+  var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
   var options = _ref.config,
     api = _ref.api;
   var editorViewRef = {
@@ -92,6 +95,9 @@ var tablePlugin = function tablePlugin(_ref) {
   var isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 || (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
   var shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
   options === null || options === void 0 ? void 0 : options.isCommentEditor));
+  var isTableSelectorEnabled =
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  !(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 || (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_table_picker');
   return {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
@@ -395,6 +401,12 @@ var tablePlugin = function tablePlugin(_ref) {
             }
           });
         }
+      }, {
+        name: 'tableSizeSelectorPlugin',
+        plugin: function plugin(_ref19) {
+          var dispatch = _ref19.dispatch;
+          return isTableSelectorEnabled ? (0, _tableSizeSelector.createPlugin)(dispatch) : undefined;
+        }
       }];
 
       // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
@@ -409,13 +421,13 @@ var tablePlugin = function tablePlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref19) {
+    contentComponent: function contentComponent(_ref20) {
       var _api$featureFlags;
-      var editorView = _ref19.editorView,
-        popupsMountPoint = _ref19.popupsMountPoint,
-        popupsBoundariesElement = _ref19.popupsBoundariesElement,
-        popupsScrollableElement = _ref19.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref19.dispatchAnalyticsEvent;
+      var editorView = _ref20.editorView,
+        popupsMountPoint = _ref20.popupsMountPoint,
+        popupsBoundariesElement = _ref20.popupsBoundariesElement,
+        popupsScrollableElement = _ref20.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref20.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -431,34 +443,38 @@ var tablePlugin = function tablePlugin(_ref) {
           tableWidthPluginState: _tableWidth.pluginKey,
           tableResizingPluginState: _pluginKey5.pluginKey,
           stickyHeadersState: _pluginKey4.pluginKey,
-          dragAndDropState: _pluginKey2.pluginKey
+          dragAndDropState: _pluginKey2.pluginKey,
+          sizeSelectorPluginState: _tableSizeSelector.pluginKey
         },
-        render: function render(_ref20) {
-          var resizingPluginState = _ref20.tableResizingPluginState,
-            stickyHeadersState = _ref20.stickyHeadersState,
-            tablePluginState = _ref20.tablePluginState,
-            tableWidthPluginState = _ref20.tableWidthPluginState,
-            dragAndDropState = _ref20.dragAndDropState;
+        render: function render(_ref21) {
+          var _sizeSelectorPluginSt, _api$analytics3;
+          var resizingPluginState = _ref21.tableResizingPluginState,
+            stickyHeadersState = _ref21.stickyHeadersState,
+            tablePluginState = _ref21.tablePluginState,
+            tableWidthPluginState = _ref21.tableWidthPluginState,
+            dragAndDropState = _ref21.dragAndDropState,
+            sizeSelectorPluginState = _ref21.sizeSelectorPluginState;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
           var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           var isResizing = isColumnResizing || isTableResizing;
           var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          var _ref21 = tablePluginState,
-            tableNode = _ref21.tableNode,
-            tablePos = _ref21.tablePos,
-            targetCellPosition = _ref21.targetCellPosition,
-            isContextualMenuOpen = _ref21.isContextualMenuOpen,
-            tableRef = _ref21.tableRef,
-            pluginConfig = _ref21.pluginConfig,
-            insertColumnButtonIndex = _ref21.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref21.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref21.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref21.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref21.isDragAndDropEnabled,
-            tableWrapperTarget = _ref21.tableWrapperTarget,
-            isCellMenuOpenByKeyboard = _ref21.isCellMenuOpenByKeyboard;
+          var isSizeSelectorOpen = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen;
+          var _ref22 = tablePluginState,
+            tableNode = _ref22.tableNode,
+            tablePos = _ref22.tablePos,
+            targetCellPosition = _ref22.targetCellPosition,
+            isContextualMenuOpen = _ref22.isContextualMenuOpen,
+            tableRef = _ref22.tableRef,
+            pluginConfig = _ref22.pluginConfig,
+            insertColumnButtonIndex = _ref22.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref22.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref22.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref22.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref22.isDragAndDropEnabled,
+            tableWrapperTarget = _ref22.tableWrapperTarget,
+            isCellMenuOpenByKeyboard = _ref22.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _util.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
@@ -548,13 +564,20 @@ var tablePlugin = function tablePlugin(_ref) {
             forcePlacement: true,
             zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
             offset: [0, 10]
+          }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/_react.default.createElement(_SizeSelector.SizeSelector, {
+            api: api,
+            isOpenedByKeyboard: false,
+            popupsMountPoint: popupsMountPoint,
+            target: (_sizeSelectorPluginSt = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef) !== null && _sizeSelectorPluginSt !== void 0 ? _sizeSelectorPluginSt : (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent),
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsScrollableElement: popupsScrollableElement
           }));
         }
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref22) {
-        var formatMessage = _ref22.formatMessage;
+      quickInsert: function quickInsert(_ref23) {
+        var formatMessage = _ref23.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),
@@ -567,6 +590,14 @@ var tablePlugin = function tablePlugin(_ref) {
           },
           action: function action(insert, state) {
             var _api$table, _options$tableOptions6;
+            if (isTableSelectorEnabled) {
+              var _tr = insert('');
+              _tr.setMeta(_tableSizeSelector.pluginKey, {
+                isSelectorOpen: true
+              });
+              return _tr;
+            }
+
             // see comment on tablesPlugin.getSharedState on usage
             var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
             var tableNodeProps = {
@@ -617,8 +648,8 @@ var tablePlugin = function tablePlugin(_ref) {
         return editorViewRef.current;
       }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
     },
-    usePluginHook: function usePluginHook(_ref23) {
-      var editorView = _ref23.editorView;
+    usePluginHook: function usePluginHook(_ref24) {
+      var editorView = _ref24.editorView;
       var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode']),
         editorViewModeState = _useSharedPluginState.editorViewModeState;
       var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;

package/dist/cjs/ui/SizeSelector/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SizeSelector = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _ui = require("@atlaskit/editor-common/ui");
+var _tableSizeSelector = require("../../pm-plugins/table-size-selector");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+var DEFAULT_TABLE_SELECTOR_COLS = 3;
+var DEFAULT_TABLE_SELECTOR_ROWS = 3;
+var SizeSelector = exports.SizeSelector = function SizeSelector(_ref) {
+  var api = _ref.api,
+    target = _ref.target,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  var closeSelectorPopup = (0, _react.useCallback)(function () {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setMeta(_tableSizeSelector.pluginKey, {
+        isSelectorOpen: false
+      });
+      return tr;
+    });
+  }, [api]);
+  var onSelection = (0, _react.useCallback)(function (rowsCount, colsCount) {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      api === null || api === void 0 || api.table.commands.insertTableWithSize(rowsCount, colsCount)({
+        tr: tr
+      });
+      tr.setMeta(_tableSizeSelector.pluginKey, {
+        isSelectorOpen: false
+      });
+      return tr;
+    });
+  }, [api]);
+  var onUnmount = function onUnmount() {
+    api === null || api === void 0 || api.core.actions.focus();
+  };
+  return (0, _react2.jsx)(_ui.TableSelectorPopup, {
+    defaultSize: {
+      row: DEFAULT_TABLE_SELECTOR_ROWS,
+      col: DEFAULT_TABLE_SELECTOR_COLS
+    },
+    target: target,
+    onUnmount: onUnmount,
+    onSelection: onSelection,
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    popupsBoundariesElement: popupsBoundariesElement,
+    isOpenedByKeyboard: true,
+    handleClickOutside: closeSelectorPopup,
+    handleEscapeKeydown: closeSelectorPopup
+  });
+};

package/dist/es2019/pm-plugins/table-size-selector.js

@@ -0,0 +1,31 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('tableSizeSelectorPlugin');
+export const createPlugin = dispatch => {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: () => ({
+        isSelectorOpen: false
+      }),
+      apply: (tr, currentPluginState) => {
+        const meta = tr.getMeta(pluginKey);
+        if (meta) {
+          const keys = Object.keys(meta);
+          const changed = keys.some(key => {
+            return currentPluginState[key] !== meta[key];
+          });
+          if (changed) {
+            const newState = {
+              ...currentPluginState,
+              ...meta
+            };
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return currentPluginState;
+      }
+    }
+  });
+};

package/dist/es2019/tablePlugin.js

@@ -3,6 +3,7 @@ import { tableCell, tableCellWithNestedTable, tableHeader, tableHeaderWithNested
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
@@ -39,6 +40,7 @@ import { createPlugin as createFlexiResizingPlugin } from './pm-plugins/table-re
 import { getPluginState as getFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing/plugin-key';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
+import { createPlugin as createSizeSelectorPlugin, pluginKey as sizeSelectorPluginKey } from './pm-plugins/table-size-selector';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
 import { createTableWithWidth } from './pm-plugins/utils/create';
@@ -52,6 +54,7 @@ import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './ui/global-styles';
+import { SizeSelector } from './ui/SizeSelector';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getToolbarConfig } from './ui/toolbar';
 const defaultGetEditorFeatureFlags = () => ({});
@@ -64,7 +67,7 @@ const tablePlugin = ({
   config: options,
   api
 }) => {
-  var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _api$analytics2;
+  var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
   const editorViewRef = {
     current: null
   };
@@ -79,6 +82,9 @@ const tablePlugin = ({
   const isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 ? void 0 : (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
   const shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
   options === null || options === void 0 ? void 0 : options.isCommentEditor));
+  const isTableSelectorEnabled =
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  !(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 ? void 0 : (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_table_picker');
   return {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
@@ -383,6 +389,11 @@ const tablePlugin = ({
             }
           });
         }
+      }, {
+        name: 'tableSizeSelectorPlugin',
+        plugin: ({
+          dispatch
+        }) => isTableSelectorEnabled ? createSizeSelectorPlugin(dispatch) : undefined
       }];
 
       // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
@@ -420,21 +431,25 @@ const tablePlugin = ({
           tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
           stickyHeadersState: stickyHeadersPluginKey,
-          dragAndDropState: dragAndDropPluginKey
+          dragAndDropState: dragAndDropPluginKey,
+          sizeSelectorPluginState: sizeSelectorPluginKey
         },
         render: ({
           tableResizingPluginState: resizingPluginState,
           stickyHeadersState,
           tablePluginState,
           tableWidthPluginState,
-          dragAndDropState
+          dragAndDropState,
+          sizeSelectorPluginState
         }) => {
+          var _sizeSelectorPluginSt, _api$analytics3;
           const isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           const resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
           const resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           const isResizing = isColumnResizing || isTableResizing;
           const widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
+          const isSizeSelectorOpen = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen;
           const {
             tableNode,
             tablePos,
@@ -543,6 +558,13 @@ const tablePlugin = ({
             forcePlacement: true,
             zIndex: akEditorFloatingPanelZIndex,
             offset: [0, 10]
+          }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/React.createElement(SizeSelector, {
+            api: api,
+            isOpenedByKeyboard: false,
+            popupsMountPoint: popupsMountPoint,
+            target: (_sizeSelectorPluginSt = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef) !== null && _sizeSelectorPluginSt !== void 0 ? _sizeSelectorPluginSt : getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent),
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsScrollableElement: popupsScrollableElement
           }));
         }
       }));
@@ -560,6 +582,14 @@ const tablePlugin = ({
         icon: () => /*#__PURE__*/React.createElement(IconTable, null),
         action(insert, state) {
           var _api$table, _options$tableOptions6;
+          if (isTableSelectorEnabled) {
+            const tr = insert('');
+            tr.setMeta(sizeSelectorPluginKey, {
+              isSelectorOpen: true
+            });
+            return tr;
+          }
+
           // see comment on tablesPlugin.getSharedState on usage
           const tableState = api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
           const tableNodeProps = {

package/dist/es2019/ui/SizeSelector/index.js

@@ -0,0 +1,61 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { jsx } from '@emotion/react';
+import { TableSelectorPopup } from '@atlaskit/editor-common/ui';
+import { pluginKey } from '../../pm-plugins/table-size-selector';
+const DEFAULT_TABLE_SELECTOR_COLS = 3;
+const DEFAULT_TABLE_SELECTOR_ROWS = 3;
+export const SizeSelector = ({
+  api,
+  target,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement
+}) => {
+  const closeSelectorPopup = useCallback(() => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      tr.setMeta(pluginKey, {
+        isSelectorOpen: false
+      });
+      return tr;
+    });
+  }, [api]);
+  const onSelection = useCallback((rowsCount, colsCount) => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+      tr
+    }) => {
+      api === null || api === void 0 ? void 0 : api.table.commands.insertTableWithSize(rowsCount, colsCount)({
+        tr
+      });
+      tr.setMeta(pluginKey, {
+        isSelectorOpen: false
+      });
+      return tr;
+    });
+  }, [api]);
+  const onUnmount = () => {
+    api === null || api === void 0 ? void 0 : api.core.actions.focus();
+  };
+  return jsx(TableSelectorPopup, {
+    defaultSize: {
+      row: DEFAULT_TABLE_SELECTOR_ROWS,
+      col: DEFAULT_TABLE_SELECTOR_COLS
+    },
+    target: target,
+    onUnmount: onUnmount,
+    onSelection: onSelection,
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    popupsBoundariesElement: popupsBoundariesElement,
+    isOpenedByKeyboard: true,
+    handleClickOutside: closeSelectorPopup,
+    handleEscapeKeydown: closeSelectorPopup
+  });
+};

package/dist/esm/pm-plugins/table-size-selector.js

@@ -0,0 +1,33 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var pluginKey = new PluginKey('tableSizeSelectorPlugin');
+export var createPlugin = function createPlugin(dispatch) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          isSelectorOpen: false
+        };
+      },
+      apply: function apply(tr, currentPluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta) {
+          var keys = Object.keys(meta);
+          var changed = keys.some(function (key) {
+            return currentPluginState[key] !== meta[key];
+          });
+          if (changed) {
+            var newState = _objectSpread(_objectSpread({}, currentPluginState), meta);
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return currentPluginState;
+      }
+    }
+  });
+};

package/dist/esm/tablePlugin.js

@@ -6,6 +6,7 @@ import { tableCell, tableCellWithNestedTable, tableHeader, tableHeaderWithNested
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
@@ -42,6 +43,7 @@ import { createPlugin as createFlexiResizingPlugin } from './pm-plugins/table-re
 import { getPluginState as getFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing/plugin-key';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
+import { createPlugin as createSizeSelectorPlugin, pluginKey as sizeSelectorPluginKey } from './pm-plugins/table-size-selector';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
 import { createTableWithWidth } from './pm-plugins/utils/create';
@@ -55,6 +57,7 @@ import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './ui/global-styles';
+import { SizeSelector } from './ui/SizeSelector';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getToolbarConfig } from './ui/toolbar';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
@@ -66,7 +69,7 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
  * from `@atlaskit/editor-core`.
  */
 var tablePlugin = function tablePlugin(_ref) {
-  var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _api$analytics2;
+  var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
   var options = _ref.config,
     api = _ref.api;
   var editorViewRef = {
@@ -83,6 +86,9 @@ var tablePlugin = function tablePlugin(_ref) {
   var isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 || (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
   var shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
   options === null || options === void 0 ? void 0 : options.isCommentEditor));
+  var isTableSelectorEnabled =
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  !(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 || (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_table_picker');
   return {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
@@ -386,6 +392,12 @@ var tablePlugin = function tablePlugin(_ref) {
             }
           });
         }
+      }, {
+        name: 'tableSizeSelectorPlugin',
+        plugin: function plugin(_ref19) {
+          var dispatch = _ref19.dispatch;
+          return isTableSelectorEnabled ? createSizeSelectorPlugin(dispatch) : undefined;
+        }
       }];
 
       // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
@@ -400,13 +412,13 @@ var tablePlugin = function tablePlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref19) {
+    contentComponent: function contentComponent(_ref20) {
       var _api$featureFlags;
-      var editorView = _ref19.editorView,
-        popupsMountPoint = _ref19.popupsMountPoint,
-        popupsBoundariesElement = _ref19.popupsBoundariesElement,
-        popupsScrollableElement = _ref19.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref19.dispatchAnalyticsEvent;
+      var editorView = _ref20.editorView,
+        popupsMountPoint = _ref20.popupsMountPoint,
+        popupsBoundariesElement = _ref20.popupsBoundariesElement,
+        popupsScrollableElement = _ref20.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref20.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -422,34 +434,38 @@ var tablePlugin = function tablePlugin(_ref) {
           tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
           stickyHeadersState: stickyHeadersPluginKey,
-          dragAndDropState: dragAndDropPluginKey
+          dragAndDropState: dragAndDropPluginKey,
+          sizeSelectorPluginState: sizeSelectorPluginKey
         },
-        render: function render(_ref20) {
-          var resizingPluginState = _ref20.tableResizingPluginState,
-            stickyHeadersState = _ref20.stickyHeadersState,
-            tablePluginState = _ref20.tablePluginState,
-            tableWidthPluginState = _ref20.tableWidthPluginState,
-            dragAndDropState = _ref20.dragAndDropState;
+        render: function render(_ref21) {
+          var _sizeSelectorPluginSt, _api$analytics3;
+          var resizingPluginState = _ref21.tableResizingPluginState,
+            stickyHeadersState = _ref21.stickyHeadersState,
+            tablePluginState = _ref21.tablePluginState,
+            tableWidthPluginState = _ref21.tableWidthPluginState,
+            dragAndDropState = _ref21.dragAndDropState,
+            sizeSelectorPluginState = _ref21.sizeSelectorPluginState;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
           var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           var isResizing = isColumnResizing || isTableResizing;
           var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          var _ref21 = tablePluginState,
-            tableNode = _ref21.tableNode,
-            tablePos = _ref21.tablePos,
-            targetCellPosition = _ref21.targetCellPosition,
-            isContextualMenuOpen = _ref21.isContextualMenuOpen,
-            tableRef = _ref21.tableRef,
-            pluginConfig = _ref21.pluginConfig,
-            insertColumnButtonIndex = _ref21.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref21.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref21.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref21.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref21.isDragAndDropEnabled,
-            tableWrapperTarget = _ref21.tableWrapperTarget,
-            isCellMenuOpenByKeyboard = _ref21.isCellMenuOpenByKeyboard;
+          var isSizeSelectorOpen = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen;
+          var _ref22 = tablePluginState,
+            tableNode = _ref22.tableNode,
+            tablePos = _ref22.tablePos,
+            targetCellPosition = _ref22.targetCellPosition,
+            isContextualMenuOpen = _ref22.isContextualMenuOpen,
+            tableRef = _ref22.tableRef,
+            pluginConfig = _ref22.pluginConfig,
+            insertColumnButtonIndex = _ref22.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref22.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref22.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref22.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref22.isDragAndDropEnabled,
+            tableWrapperTarget = _ref22.tableWrapperTarget,
+            isCellMenuOpenByKeyboard = _ref22.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
@@ -539,13 +555,20 @@ var tablePlugin = function tablePlugin(_ref) {
             forcePlacement: true,
             zIndex: akEditorFloatingPanelZIndex,
             offset: [0, 10]
+          }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/React.createElement(SizeSelector, {
+            api: api,
+            isOpenedByKeyboard: false,
+            popupsMountPoint: popupsMountPoint,
+            target: (_sizeSelectorPluginSt = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef) !== null && _sizeSelectorPluginSt !== void 0 ? _sizeSelectorPluginSt : getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent),
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsScrollableElement: popupsScrollableElement
           }));
         }
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref22) {
-        var formatMessage = _ref22.formatMessage;
+      quickInsert: function quickInsert(_ref23) {
+        var formatMessage = _ref23.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),
@@ -558,6 +581,14 @@ var tablePlugin = function tablePlugin(_ref) {
           },
           action: function action(insert, state) {
             var _api$table, _options$tableOptions6;
+            if (isTableSelectorEnabled) {
+              var _tr = insert('');
+              _tr.setMeta(sizeSelectorPluginKey, {
+                isSelectorOpen: true
+              });
+              return _tr;
+            }
+
             // see comment on tablesPlugin.getSharedState on usage
             var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
             var tableNodeProps = {
@@ -608,8 +639,8 @@ var tablePlugin = function tablePlugin(_ref) {
         return editorViewRef.current;
       }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     },
-    usePluginHook: function usePluginHook(_ref23) {
-      var editorView = _ref23.editorView;
+    usePluginHook: function usePluginHook(_ref24) {
+      var editorView = _ref24.editorView;
       var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode']),
         editorViewModeState = _useSharedPluginState.editorViewModeState;
       var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;

package/dist/esm/ui/SizeSelector/index.js

@@ -0,0 +1,58 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { jsx } from '@emotion/react';
+import { TableSelectorPopup } from '@atlaskit/editor-common/ui';
+import { pluginKey } from '../../pm-plugins/table-size-selector';
+var DEFAULT_TABLE_SELECTOR_COLS = 3;
+var DEFAULT_TABLE_SELECTOR_ROWS = 3;
+export var SizeSelector = function SizeSelector(_ref) {
+  var api = _ref.api,
+    target = _ref.target,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  var closeSelectorPopup = useCallback(function () {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setMeta(pluginKey, {
+        isSelectorOpen: false
+      });
+      return tr;
+    });
+  }, [api]);
+  var onSelection = useCallback(function (rowsCount, colsCount) {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      api === null || api === void 0 || api.table.commands.insertTableWithSize(rowsCount, colsCount)({
+        tr: tr
+      });
+      tr.setMeta(pluginKey, {
+        isSelectorOpen: false
+      });
+      return tr;
+    });
+  }, [api]);
+  var onUnmount = function onUnmount() {
+    api === null || api === void 0 || api.core.actions.focus();
+  };
+  return jsx(TableSelectorPopup, {
+    defaultSize: {
+      row: DEFAULT_TABLE_SELECTOR_ROWS,
+      col: DEFAULT_TABLE_SELECTOR_COLS
+    },
+    target: target,
+    onUnmount: onUnmount,
+    onSelection: onSelection,
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    popupsBoundariesElement: popupsBoundariesElement,
+    isOpenedByKeyboard: true,
+    handleClickOutside: closeSelectorPopup,
+    handleEscapeKeydown: closeSelectorPopup
+  });
+};

package/dist/types/pm-plugins/table-size-selector.d.ts

@@ -0,0 +1,10 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type SizeSelectorPluginState = {
+    isSelectorOpen: boolean;
+    targetRef?: HTMLElement;
+};
+export declare const pluginKey: PluginKey<SizeSelectorPluginState>;
+export declare const createPlugin: (dispatch: Dispatch) => SafePlugin<SizeSelectorPluginState>;
+export {};

package/dist/types/ui/SizeSelector/index.d.ts

@@ -0,0 +1,9 @@
+import { jsx } from '@emotion/react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
+import { TablePlugin } from '../../tablePluginType';
+interface SizeSelectorProps extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {
+    api?: ExtractInjectionAPI<TablePlugin>;
+}
+export declare const SizeSelector: ({ api, target, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: SizeSelectorProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/pm-plugins/table-size-selector.d.ts

@@ -0,0 +1,10 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type SizeSelectorPluginState = {
+    isSelectorOpen: boolean;
+    targetRef?: HTMLElement;
+};
+export declare const pluginKey: PluginKey<SizeSelectorPluginState>;
+export declare const createPlugin: (dispatch: Dispatch) => SafePlugin<SizeSelectorPluginState>;
+export {};

package/dist/types-ts4.5/ui/SizeSelector/index.d.ts

@@ -0,0 +1,9 @@
+import { jsx } from '@emotion/react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
+import { TablePlugin } from '../../tablePluginType';
+interface SizeSelectorProps extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {
+    api?: ExtractInjectionAPI<TablePlugin>;
+}
+export declare const SizeSelector: ({ api, target, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: SizeSelectorProps) => jsx.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.8.1",
+	"version": "10.8.3",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,14 +32,14 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^103.9.0",
+		"@atlaskit/editor-common": "^103.12.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
-		"@atlaskit/editor-plugin-extension": "5.2.4",
+		"@atlaskit/editor-plugin-extension": "5.2.5",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.11.0",
+		"@atlaskit/tmp-editor-statsig": "^4.12.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
@@ -197,6 +197,12 @@
 		},
 		"platform_editor_controls_patch_4": {
 			"type": "boolean"
+		},
+		"platform_editor_tables_table_selector": {
+			"type": "boolean"
+		},
+		"platform_editor_controls_table_picker": {
+			"type": "boolean"
 		}
 	}
 }

package/src/pm-plugins/table-size-selector.ts

@@ -0,0 +1,39 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+
+type SizeSelectorPluginState = {
+	isSelectorOpen: boolean;
+	targetRef?: HTMLElement;
+};
+
+export const pluginKey = new PluginKey<SizeSelectorPluginState>('tableSizeSelectorPlugin');
+
+export const createPlugin = (dispatch: Dispatch) => {
+	return new SafePlugin<SizeSelectorPluginState>({
+		key: pluginKey,
+		state: {
+			init: () => ({
+				isSelectorOpen: false,
+			}),
+			apply: (tr, currentPluginState) => {
+				const meta = tr.getMeta(pluginKey);
+
+				if (meta) {
+					const keys = Object.keys(meta) as Array<keyof SizeSelectorPluginState>;
+					const changed = keys.some((key) => {
+						return currentPluginState[key] !== meta[key];
+					});
+
+					if (changed) {
+						const newState = { ...currentPluginState, ...meta };
+
+						dispatch(pluginKey, newState);
+						return newState;
+					}
+				}
+				return currentPluginState;
+			},
+		},
+	});
+};

package/src/tablePlugin.tsx

@@ -18,6 +18,7 @@ import {
 } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
@@ -61,6 +62,10 @@ import { createPlugin as createFlexiResizingPlugin } from './pm-plugins/table-re
 import { getPluginState as getFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing/plugin-key';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
+import {
+	createPlugin as createSizeSelectorPlugin,
+	pluginKey as sizeSelectorPluginKey,
+} from './pm-plugins/table-size-selector';
 import {
 	createPlugin as createTableWidthPlugin,
 	pluginKey as tableWidthPluginKey,
@@ -79,6 +84,7 @@ import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './ui/global-styles';
+import { SizeSelector } from './ui/SizeSelector';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getToolbarConfig } from './ui/toolbar';
 
@@ -109,6 +115,14 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 			// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
 			options?.isCommentEditor);
 
+	const isTableSelectorEnabled =
+		// eslint-disable-next-line @atlaskit/platform/no-preconditioning
+		!options?.isChromelessEditor &&
+		!options?.isCommentEditor &&
+		options?.getEditorFeatureFlags?.().tableSelector &&
+		editorExperiment('platform_editor_controls', 'variant1') &&
+		fg('platform_editor_controls_table_picker');
+
 	return {
 		name: 'table',
 
@@ -487,6 +501,11 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 						});
 					},
 				},
+				{
+					name: 'tableSizeSelectorPlugin',
+					plugin: ({ dispatch }) =>
+						isTableSelectorEnabled ? createSizeSelectorPlugin(dispatch) : undefined,
+				},
 			];
 
 			// Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
@@ -529,6 +548,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 							tableResizingPluginState: tableResizingPluginKey,
 							stickyHeadersState: stickyHeadersPluginKey,
 							dragAndDropState: dragAndDropPluginKey,
+							sizeSelectorPluginState: sizeSelectorPluginKey,
 						}}
 						render={({
 							tableResizingPluginState: resizingPluginState,
@@ -536,6 +556,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 							tablePluginState,
 							tableWidthPluginState,
 							dragAndDropState,
+							sizeSelectorPluginState,
 						}) => {
 							const isColumnResizing = resizingPluginState?.dragging;
 							const isTableResizing = tableWidthPluginState?.resizing;
@@ -543,6 +564,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 							const resizingTableRef = tableWidthPluginState?.tableRef;
 							const isResizing = isColumnResizing || isTableResizing;
 							const widthToWidest = tablePluginState?.widthToWidest;
+							const isSizeSelectorOpen = sizeSelectorPluginState?.isSelectorOpen;
 
 							const {
 								tableNode,
@@ -695,6 +717,24 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 												offset={[0, 10]}
 											/>
 										)}
+
+									{isTableSelectorEnabled && isSizeSelectorOpen && (
+										<SizeSelector
+											api={api}
+											isOpenedByKeyboard={false}
+											popupsMountPoint={popupsMountPoint}
+											target={
+												sizeSelectorPluginState?.targetRef ??
+												getDomRefFromSelection(
+													editorView,
+													ACTION_SUBJECT_ID.PICKER_TABLE_SIZE,
+													api?.analytics?.actions.fireAnalyticsEvent,
+												)
+											}
+											popupsBoundariesElement={popupsBoundariesElement}
+											popupsScrollableElement={popupsScrollableElement}
+										/>
+									)}
 								</>
 							);
 						}}
@@ -714,6 +754,15 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 					keyshortcut: tooltip(toggleTable),
 					icon: () => <IconTable />,
 					action(insert, state) {
+						if (isTableSelectorEnabled) {
+							const tr = insert('');
+							tr.setMeta(sizeSelectorPluginKey, {
+								isSelectorOpen: true,
+							});
+
+							return tr;
+						}
+
 						// see comment on tablesPlugin.getSharedState on usage
 						const tableState = api?.table?.sharedState.currentState();
 						const tableNodeProps = {

package/src/ui/SizeSelector/index.tsx

@@ -0,0 +1,74 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { jsx } from '@emotion/react';
+
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { TableSelectorPopup, type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
+
+import { pluginKey } from '../../pm-plugins/table-size-selector';
+import { TablePlugin } from '../../tablePluginType';
+
+interface SizeSelectorProps
+	extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {
+	api?: ExtractInjectionAPI<TablePlugin>;
+}
+
+const DEFAULT_TABLE_SELECTOR_COLS = 3;
+const DEFAULT_TABLE_SELECTOR_ROWS = 3;
+
+export const SizeSelector = ({
+	api,
+	target,
+	popupsMountPoint,
+	popupsBoundariesElement,
+	popupsScrollableElement,
+}: SizeSelectorProps) => {
+	const closeSelectorPopup = useCallback(() => {
+		api?.core.actions.execute(({ tr }) => {
+			tr.setMeta(pluginKey, {
+				isSelectorOpen: false,
+			});
+
+			return tr;
+		});
+	}, [api]);
+
+	const onSelection = useCallback(
+		(rowsCount: number, colsCount: number) => {
+			api?.core.actions.execute(({ tr }) => {
+				api?.table.commands.insertTableWithSize(rowsCount, colsCount)({ tr });
+
+				tr.setMeta(pluginKey, {
+					isSelectorOpen: false,
+				});
+
+				return tr;
+			});
+		},
+		[api],
+	);
+
+	const onUnmount = () => {
+		api?.core.actions.focus();
+	};
+
+	return (
+		<TableSelectorPopup
+			defaultSize={{ row: DEFAULT_TABLE_SELECTOR_ROWS, col: DEFAULT_TABLE_SELECTOR_COLS }}
+			target={target}
+			onUnmount={onUnmount}
+			onSelection={onSelection}
+			popupsMountPoint={popupsMountPoint}
+			popupsScrollableElement={popupsScrollableElement}
+			popupsBoundariesElement={popupsBoundariesElement}
+			isOpenedByKeyboard={true}
+			handleClickOutside={closeSelectorPopup}
+			handleEscapeKeydown={closeSelectorPopup}
+		/>
+	);
+};