@atlaskit/editor-plugin-table 10.8.0 → 10.8.2

package/dist/es2019/nodeviews/toDOM.js

@@ -52,7 +52,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
       }]];
       if (!config.tableResizingEnabled) {
         return ['div', {
-          class: 'tableView-content-wrap'
+          class: 'tableView-content-wrap',
+          'data-prosemirror-initial-toDOM-render': 'true'
         }, tableContainerDiv];
       }
       const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
@@ -79,7 +80,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
         class: 'resizer-hover-zone'
       }, tableContainerDiv]]]];
       return ['div', {
-        class: 'tableView-content-wrap'
+        class: 'tableView-content-wrap',
+        'data-prosemirror-initial-toDOM-render': 'true'
       }, tableResizingDiv];
     }
   };

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/nodeviews/TableRow.js

@@ -24,7 +24,7 @@ import TableNodeView from './TableNodeViewBase';
 // limit scroll event calls
 var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 
-// timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
+// timeout for resetting the scroll class - if it's too long then users won't be able to click on the header cells,
 // if too short it would trigger too many dom updates.
 var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 var TableRow = /*#__PURE__*/function (_TableNodeView) {
@@ -137,6 +137,9 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
         }
         this.emitOff(true);
       }
+      if (this.tableContainerObserver) {
+        this.tableContainerObserver.disconnect();
+      }
     }
   }, {
     key: "ignoreMutation",
@@ -245,26 +248,29 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
         this.resizeObserver.observe(this.editorScrollableElement);
       }
       window.requestAnimationFrame(function () {
-        var _getTree;
+        var getTableContainer = function getTableContainer() {
+          var _getTree;
+          return (_getTree = getTree(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
+        };
+
         // we expect tree to be defined after animation frame
-        var tableContainer = (_getTree = getTree(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
+        var tableContainer = getTableContainer();
         if (tableContainer) {
           var getSentinelTop = function getSentinelTop() {
-            return (
-              // Ignored via go/ees005
-              // eslint-disable-next-line @atlaskit/editor/no-as-casting
-              tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP).item(0)
-            );
+            return tableContainer &&
+            // Ignored via go/ees005
+            // eslint-disable-next-line @atlaskit/editor/no-as-casting
+            tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
           };
           var getSentinelBottom = function getSentinelBottom() {
             // Multiple bottom sentinels may be found if there are nested tables.
             // We need to make sure we get the last one which will belong to the parent table.
-            var bottomSentinels = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM);
+            var bottomSentinels = tableContainer && tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM);
             // Ignored via go/ees005
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
             return fg('platform_editor_nested_tables_bottom_sentinel') ?
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
-            bottomSentinels.item(bottomSentinels.length - 1) :
+            bottomSentinels && bottomSentinels.item(bottomSentinels.length - 1) : tableContainer &&
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
             tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
           };
@@ -284,26 +290,60 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
               }
             });
           };
-          if (sentinelsInDom()) {
-            // great - DOM ready, observe as normal
-            observeStickySentinels();
-          } else {
-            // concurrent loading issue - here TableRow is too eager trying to
-            // observe sentinels before they are in the DOM, use MutationObserver
-            // to wait for sentinels to be added to the parent Table node DOM
-            // then attach the IntersectionObserver
-            var tableContainerObserver = new MutationObserver(function () {
-              if (sentinelsInDom()) {
-                observeStickySentinels();
-                tableContainerObserver.disconnect();
+          if (fg('platform_editor_table_initial_load_fix')) {
+            var isInitialProsemirrorToDomRender = tableContainer.hasAttribute('data-prosemirror-initial-toDOM-render');
+
+            // Sentinels may be in the DOM but they're part of the prosemirror placeholder structure which is replaced with the fully rendered React node.
+            if (sentinelsInDom() && !isInitialProsemirrorToDomRender) {
+              // great - DOM ready, observe as normal
+              observeStickySentinels();
+            } else {
+              // concurrent loading issue - here TableRow is too eager trying to
+              // observe sentinels before they are in the DOM, use MutationObserver
+              // to wait for sentinels to be added to the parent Table node DOM
+              // then attach the IntersectionObserver
+              _this2.tableContainerObserver = new MutationObserver(function () {
+                // Check if the tableContainer is still connected to the DOM. It can become disconnected when the placholder
+                // prosemirror node is replaced with the fully rendered React node (see _handleTableRef).
+                if (!tableContainer || !tableContainer.isConnected) {
+                  tableContainer = getTableContainer();
+                }
+                if (sentinelsInDom()) {
+                  var _this2$tableContainer;
+                  observeStickySentinels();
+                  (_this2$tableContainer = _this2.tableContainerObserver) === null || _this2$tableContainer === void 0 || _this2$tableContainer.disconnect();
+                }
+              });
+              var mutatingNode = tableContainer;
+              if (mutatingNode && _this2.tableContainerObserver) {
+                _this2.tableContainerObserver.observe(mutatingNode, {
+                  subtree: true,
+                  childList: true
+                });
               }
-            });
-            var mutatingNode = tableContainer;
-            if (mutatingNode) {
-              tableContainerObserver.observe(mutatingNode, {
-                subtree: true,
-                childList: true
+            }
+          } else {
+            if (sentinelsInDom()) {
+              // great - DOM ready, observe as normal
+              observeStickySentinels();
+            } else {
+              // concurrent loading issue - here TableRow is too eager trying to
+              // observe sentinels before they are in the DOM, use MutationObserver
+              // to wait for sentinels to be added to the parent Table node DOM
+              // then attach the IntersectionObserver
+              var tableContainerObserver = new MutationObserver(function () {
+                if (sentinelsInDom()) {
+                  observeStickySentinels();
+                  tableContainerObserver.disconnect();
+                }
               });
+              var _mutatingNode = tableContainer;
+              if (_mutatingNode) {
+                tableContainerObserver.observe(_mutatingNode, {
+                  subtree: true,
+                  childList: true
+                });
+              }
             }
           }
         }

package/dist/esm/nodeviews/table.js

@@ -61,7 +61,7 @@ var handleInlineTableWidth = function handleInlineTableWidth(table, width) {
   table.style.setProperty('width', "".concat(width, "px"));
 };
 
-// Leave as a fallback incase the table's NodeSpec.toDOM is not defined.
+// Remove after removing the platform_editor_table_initial_load_fix flag.
 var toDOM = function toDOM(node, props) {
   var colgroup = '';
   if (props.allowColumnResizing) {

package/dist/esm/nodeviews/toDOM.js

@@ -61,7 +61,8 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
       }]];
       if (!config.tableResizingEnabled) {
         return ['div', {
-          class: 'tableView-content-wrap'
+          class: 'tableView-content-wrap',
+          'data-prosemirror-initial-toDOM-render': 'true'
         }, tableContainerDiv];
       }
       var tableWidthAttribute = node.attrs.width ? "".concat(node.attrs.width, "px") : "100%";
@@ -88,7 +89,8 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         class: 'resizer-hover-zone'
       }, tableContainerDiv]]]];
       return ['div', {
-        class: 'tableView-content-wrap'
+        class: 'tableView-content-wrap',
+        'data-prosemirror-initial-toDOM-render': 'true'
       }, tableResizingDiv];
     }
   });

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;