@atlaskit/editor-plugin-table 22.4.14 → 22.4.16

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 22.4.16
+
+### Patch Changes
+
+- [`6291bc0777dc2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6291bc0777dc2) -
+  Converge updated table menu state behind the table menu experiment
+
+  Make table cell menu items interactive
+
+## 22.4.15
+
+### Patch Changes
+
+- [`122438a5ab2b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/122438a5ab2b7) -
+  Improve fit to content table column width distribution
+- Updated dependencies
+
 ## 22.4.14
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -41,7 +41,7 @@ var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
 var _scaleTable = require("../pm-plugins/table-resizing/utils/scale-table");
 var _nodes = require("../pm-plugins/utils/nodes");
 var _table2 = require("../pm-plugins/utils/table");
-var _tableMode = require("../pm-plugins/utils/tableMode");
+var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
 var _types = require("../types");
 var _eventHandlers = require("../ui/event-handlers");
 var _TableFloatingColumnControls = _interopRequireDefault(require("../ui/TableFloatingColumnControls"));
@@ -785,7 +785,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             // Deferred from setDomAttrs — remove only once colgroup is updated and table has left content mode.
             if ((_this$table7 = this.table) !== null && _this$table7 !== void 0 && _this$table7.hasAttribute('data-initial-width-mode') && !(0, _table.isTableInContentMode)({
               tableNode: currentTable,
-              isSupported: (0, _tableMode.isContentModeSupported)({
+              isSupported: (0, _isContentModeSupported.isContentModeSupported)({
                 allowColumnResizing: !!allowColumnResizing,
                 allowTableResizing: !!allowTableResizing,
                 isFullPageEditor: !((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor) && !((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isChromelessEditor)

package/dist/cjs/nodeviews/table.js

@@ -27,7 +27,7 @@ var _createPluginConfig = require("../pm-plugins/create-plugin-config");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _tableWidth = require("../pm-plugins/table-width");
 var _nodes = require("../pm-plugins/utils/nodes");
-var _tableMode = require("../pm-plugins/utils/tableMode");
+var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
 var _TableComponentWithSharedState = require("./TableComponentWithSharedState");
 var _toDOM = require("./toDOM");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -253,7 +253,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
       // fire exposure here
       if ((0, _table.isTableInContentMode)({
         tableNode: node,
-        isSupported: (0, _tableMode.isContentModeSupported)({
+        isSupported: (0, _isContentModeSupported.isContentModeSupported)({
           allowColumnResizing: !!this.reactComponentProps.allowColumnResizing,
           allowTableResizing: !!this.reactComponentProps.allowTableResizing,
           isFullPageEditor: !((_this$reactComponentP6 = this.reactComponentProps.options) !== null && _this$reactComponentP6 !== void 0 && _this$reactComponentP6.isCommentEditor) && !((_this$reactComponentP7 = this.reactComponentProps.options) !== null && _this$reactComponentP7 !== void 0 && _this$reactComponentP7.isChromelessEditor)

package/dist/cjs/nodeviews/toDOM.js

@@ -17,7 +17,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
 var _misc = require("../pm-plugins/table-resizing/utils/misc");
-var _tableMode = require("../pm-plugins/utils/tableMode");
+var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
 var _tableContainerStyles = require("./table-container-styles");
 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; }
@@ -28,7 +28,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
       var isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
       var isInContentMode = (0, _table.isTableInContentMode)({
         tableNode: node,
-        isSupported: (0, _tableMode.isContentModeSupported)({
+        isSupported: (0, _isContentModeSupported.isContentModeSupported)({
           allowColumnResizing: config.allowColumnResizing,
           allowTableResizing: config.tableResizingEnabled,
           isFullPageEditor: isFullPageEditor

package/dist/cjs/pm-plugins/commands/active-table-menu.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toggleActiveTableMenu = exports.closeActiveTableMenu = void 0;
+var _pluginFactory = require("../plugin-factory");
+var closeActiveTableMenu = exports.closeActiveTableMenu = function closeActiveTableMenu() {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+      activeTableMenu = _getPluginState.activeTableMenu;
+    if (!activeTableMenu || activeTableMenu.type === 'none') {
+      return false;
+    }
+    return {
+      type: 'SET_ACTIVE_TABLE_MENU',
+      data: {
+        activeTableMenu: {
+          type: 'none'
+        }
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};
+var isSameActiveTableMenu = function isSameActiveTableMenu(current, next) {
+  if (!current || current.type !== next.type) {
+    return false;
+  }
+  if (current.type === 'row' || current.type === 'column') {
+    return next.type === current.type && current.index === next.index;
+  }
+  return true;
+};
+var toggleActiveTableMenu = exports.toggleActiveTableMenu = function toggleActiveTableMenu(activeTableMenu) {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+      currentActiveTableMenu = _getPluginState2.activeTableMenu;
+    return {
+      type: 'SET_ACTIVE_TABLE_MENU',
+      data: {
+        activeTableMenu: isSameActiveTableMenu(currentActiveTableMenu, activeTableMenu) ? {
+          type: 'none'
+        } : activeTableMenu
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};

package/dist/cjs/pm-plugins/commands/commands-with-analytics.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapTableInExpandWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.toggleFixedColumnWidthsOptionAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setTableAlignmentWithTableContentWithPosWithAnalytics = exports.setTableAlignmentWithAnalytics = exports.setColorWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
+exports.wrapTableInExpandWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.toggleFixedColumnWidthsOptionAnalytics = exports.toggleActiveTableMenuWithAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setTableAlignmentWithTableContentWithPosWithAnalytics = exports.setTableAlignmentWithAnalytics = exports.setColorWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -18,6 +18,7 @@ var _deleteRows = require("../transforms/delete-rows");
 var _merge = require("../transforms/merge");
 var _analytics2 = require("../utils/analytics");
 var _nodes = require("../utils/nodes");
+var _activeTableMenu = require("./active-table-menu");
 var _clear = require("./clear");
 var _collapse = require("./collapse");
 var _columnResize = require("./column-resize");
@@ -30,7 +31,38 @@ var _splitCell = require("./split-cell");
 var _toggle = require("./toggle");
 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; }
-// #region Analytics wrappers
+var toggleActiveTableMenuWithAnalytics = exports.toggleActiveTableMenuWithAnalytics = function toggleActiveTableMenuWithAnalytics(editorAnalyticsAPI) {
+  return function (direction, index) {
+    var trigger = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'mouse';
+    return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
+      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+        previousActiveTableMenu = _getPluginState.activeTableMenu;
+      var isSameActiveMenu = (previousActiveTableMenu === null || previousActiveTableMenu === void 0 ? void 0 : previousActiveTableMenu.type) === direction && previousActiveTableMenu.index === index;
+      if (isSameActiveMenu) {
+        return undefined;
+      }
+      return {
+        action: _analytics.TABLE_ACTION.DRAG_MENU_OPENED,
+        actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          inputMethod: trigger === 'keyboard' ? _analytics.INPUT_METHOD.KEYBOARD : _analytics.INPUT_METHOD.MOUSE,
+          direction: direction
+        }
+      };
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        (0, _activeTableMenu.toggleActiveTableMenu)({
+          type: direction,
+          index: index,
+          openedBy: trigger
+        })(state, dispatch);
+      }
+      return true;
+    });
+  };
+};
 var emptyMultipleCellsWithAnalytics = exports.emptyMultipleCellsWithAnalytics = function emptyMultipleCellsWithAnalytics(editorAnalyticsAPI) {
   return function (inputMethod, targetCellPosition) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref) {
@@ -195,8 +227,8 @@ var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAn
         table = _getSelectedTableInfo2.table,
         totalRowCount = _getSelectedTableInfo2.totalRowCount,
         totalColumnCount = _getSelectedTableInfo2.totalColumnCount;
-      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-        colIndex = _getPluginState.hoveredCell.colIndex;
+      var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+        colIndex = _getPluginState2.hoveredCell.colIndex;
       return {
         action: _analytics.TABLE_ACTION.COLUMN_RESIZED,
         actionSubject: _analytics.ACTION_SUBJECT.TABLE,
@@ -316,8 +348,8 @@ var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteSelected
     }
     var selectionType = (0, _misc.getTableSelectionType)(selection);
     if (selectionType === 'row') {
-      var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
-        pluginConfig = _getPluginState2.pluginConfig;
+      var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+        pluginConfig = _getPluginState3.pluginConfig;
       var isHeaderRowRequired = pluginConfig.isHeaderRowRequired || false;
       return deleteRowsWithAnalytics(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT, rect, isHeaderRowRequired)(state, dispatch);
     } else if (selectionType === 'column') {
@@ -361,8 +393,8 @@ var toggleHeaderRowWithAnalytics = exports.toggleHeaderRowWithAnalytics = functi
     var _getSelectedTableInfo7 = (0, _analytics2.getSelectedTableInfo)(state.selection),
       totalRowCount = _getSelectedTableInfo7.totalRowCount,
       totalColumnCount = _getSelectedTableInfo7.totalColumnCount;
-    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
-      isHeaderRowEnabled = _getPluginState3.isHeaderRowEnabled;
+    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
+      isHeaderRowEnabled = _getPluginState4.isHeaderRowEnabled;
     return {
       action: _analytics.TABLE_ACTION.TOGGLED_HEADER_ROW,
       actionSubject: _analytics.ACTION_SUBJECT.TABLE,
@@ -381,8 +413,8 @@ var toggleHeaderColumnWithAnalytics = exports.toggleHeaderColumnWithAnalytics =
     var _getSelectedTableInfo8 = (0, _analytics2.getSelectedTableInfo)(state.selection),
       totalRowCount = _getSelectedTableInfo8.totalRowCount,
       totalColumnCount = _getSelectedTableInfo8.totalColumnCount;
-    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
-      isHeaderColumnEnabled = _getPluginState4.isHeaderColumnEnabled;
+    var _getPluginState5 = (0, _pluginFactory.getPluginState)(state),
+      isHeaderColumnEnabled = _getPluginState5.isHeaderColumnEnabled;
     return {
       action: _analytics.TABLE_ACTION.TOGGLED_HEADER_COLUMN,
       actionSubject: _analytics.ACTION_SUBJECT.TABLE,

package/dist/cjs/pm-plugins/commands/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "clearMultipleCells", {
     return _clear.clearMultipleCells;
   }
 });
+Object.defineProperty(exports, "closeActiveTableMenu", {
+  enumerable: true,
+  get: function get() {
+    return _activeTableMenu.closeActiveTableMenu;
+  }
+});
 Object.defineProperty(exports, "convertFirstRowToHeader", {
   enumerable: true,
   get: function get() {
@@ -219,6 +225,12 @@ Object.defineProperty(exports, "sortByColumn", {
     return _sort.sortByColumn;
   }
 });
+Object.defineProperty(exports, "toggleActiveTableMenu", {
+  enumerable: true,
+  get: function get() {
+    return _activeTableMenu.toggleActiveTableMenu;
+  }
+});
 Object.defineProperty(exports, "toggleContextualMenu", {
   enumerable: true,
   get: function get() {
@@ -270,6 +282,7 @@ Object.defineProperty(exports, "updateWidthToWidest", {
 var _hover = require("./hover");
 var _insert = require("./insert");
 var _toggle = require("./toggle");
+var _activeTableMenu = require("./active-table-menu");
 var _clear = require("./clear");
 var _misc = require("./misc");
 var _sort = require("./sort");

package/dist/cjs/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -153,6 +153,8 @@ var cloneSourceWithAnalytics = exports.cloneSourceWithAnalytics = function clone
     });
   };
 };
+
+// remove when 'platform_editor_table_menu_updates' is cleaned up
 var toggleDragMenuWithAnalytics = exports.toggleDragMenuWithAnalytics = function toggleDragMenuWithAnalytics(editorAnalyticsAPI) {
   return function (isDragMenuOpen, direction, index) {
     var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';

package/dist/cjs/pm-plugins/drag-and-drop/plugin.js

@@ -14,6 +14,7 @@ var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _activeTableMenu = require("../commands/active-table-menu");
 var _pluginFactory = require("../plugin-factory");
 var _pluginKey = require("../plugin-key");
 var _colgroup = require("../table-resizing/utils/colgroup");
@@ -93,6 +94,9 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, isTableScalin
         (_insm$session3 = _insm.insm.session) === null || _insm$session3 === void 0 || _insm$session3.startFeature('tableDragAndDrop');
       }
       (0, _commands.toggleDragMenu)(false)(editorView.state, editorView.dispatch);
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        (0, _activeTableMenu.closeActiveTableMenu)()(editorView.state, editorView.dispatch);
+      }
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
     },
     onDrag: function onDrag(event) {

package/dist/cjs/pm-plugins/handlers.js

@@ -10,6 +10,7 @@ var _customSteps = require("@atlaskit/custom-steps");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _defaultTableSelection = require("./default-table-selection");
 var _pluginKey = require("./table-resizing/plugin-key");
 var _collapse = require("./utils/collapse");
@@ -47,8 +48,14 @@ var updateTargetCellPosition = function updateTargetCellPosition(_ref) {
     if (pluginState.targetCellPosition === targetCellPosition) {
       return pluginState;
     }
+
+    // The updated table menu is anchored to the current target cell. When selection moves
+    // to another cell, close the active menu so render state cannot point at a stale anchor.
     return _objectSpread(_objectSpread({}, pluginState), {}, {
-      targetCellPosition: targetCellPosition
+      targetCellPosition: targetCellPosition,
+      activeTableMenu: pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none' && (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? {
+        type: 'none'
+      } : pluginState.activeTableMenu
     });
   };
 };

package/dist/cjs/pm-plugins/main.js

@@ -33,7 +33,8 @@ var _fixTables = require("./transforms/fix-tables");
 var _replaceTable = require("./transforms/replace-table");
 var _decoration = require("./utils/decoration");
 var _paste = require("./utils/paste");
-var _tableMode = require("./utils/tableMode");
+var _applyMeasuredWidthToAllTables = require("./utils/tableMode/apply-measured-width-to-all-tables");
+var _isContentModeSupported = require("./utils/tableMode/is-content-mode-supported");
 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 createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) {
@@ -140,7 +141,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       editorViewRef = editorView;
       var contentModeSizeTableId = null;
       var focusListenerBinding = null;
-      if ((pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) !== 'view' && (0, _tableMode.isContentModeSupported)({
+      if ((pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) !== 'view' && (0, _isContentModeSupported.isContentModeSupported)({
         allowColumnResizing: !!pluginConfig.allowColumnResizing,
         allowTableResizing: !!pluginConfig.allowTableResizing,
         isFullPageEditor: !isChromelessEditor && !isCommentEditor
@@ -155,7 +156,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
               if (!editorViewRef) {
                 return;
               }
-              (0, _tableMode.applyMeasuredWidthToAllTables)(editorViewRef, pluginInjectionApi);
+              (0, _applyMeasuredWidthToAllTables.applyMeasuredWidthToAllTables)(editorViewRef, pluginInjectionApi);
             });
           },
           options: {

package/dist/cjs/pm-plugins/reducer.js

@@ -33,6 +33,8 @@ var _default = exports.default = function _default(pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         isContextualMenuOpen: !pluginState.isContextualMenuOpen
       });
+    case 'SET_ACTIVE_TABLE_MENU':
+      return _objectSpread(_objectSpread({}, pluginState), action.data);
     case 'SHOW_INSERT_ROW_BUTTON':
       if (action.data.insertRowButtonIndex === pluginState.insertRowButtonIndex) {
         return pluginState;

package/dist/cjs/pm-plugins/table-width.js

@@ -16,7 +16,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("./table-resizing/utils/consts");
 var _alignment = require("./utils/alignment");
-var _tableMode = require("./utils/tableMode");
+var _isContentModeSupported = require("./utils/tableMode/is-content-mode-supported");
 var _excluded = ["width"];
 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; } /**
@@ -72,7 +72,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
         newState.doc.forEach(function (node, offset) {
           if ((0, _table.isTableInContentMode)({
             tableNode: node,
-            isSupported: (0, _tableMode.isContentModeSupported)({
+            isSupported: (0, _isContentModeSupported.isContentModeSupported)({
               allowColumnResizing: true,
               allowTableResizing: true,
               isFullPageEditor: true

package/dist/cjs/pm-plugins/transforms/content-mode.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableMeasurement = exports.applyTableMeasurement = void 0;
+exports.getTableMeasurement = exports.clampToEditorMaxWidth = exports.applyTableMeasurement = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -12,10 +12,11 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tableTransformUtils = require("./table-transform-utils");
 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 tableWidth = function tableWidth(contentWidth) {
+var clampToEditorMaxWidth = exports.clampToEditorMaxWidth = function clampToEditorMaxWidth(contentWidth) {
   var maxEditorWidth = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? _editorSharedStyles.akEditorMaxLayoutWidth : _editorSharedStyles.akEditorFullWidthLayoutWidth;
   return Math.min(maxEditorWidth, contentWidth);
 };
+var tableWidth = clampToEditorMaxWidth;
 var getTableMeasurement = exports.getTableMeasurement = function getTableMeasurement(tableRef) {
   var colWidths = getRenderedColgroupColumnWidths(tableRef);
   var totalContentWidth = colWidths.reduce(function (acc, current) {

package/dist/cjs/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyMeasuredWidthToAllTables = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _styles = require("@atlaskit/editor-common/styles");
+var _table = require("@atlaskit/editor-common/table");
+var _contentMode = require("../../transforms/content-mode");
+/**
+ * Iterates all top-level tables in the document, and for those in content mode,
+ * measures rendered column widths and sets colwidth + table width attributes
+ * in a single batched transaction.
+ */
+var applyMeasuredWidthToAllTables = exports.applyMeasuredWidthToAllTables = function applyMeasuredWidthToAllTables(view, pluginInjectionApi) {
+  var _view$state = view.state,
+    doc = _view$state.doc,
+    schema = _view$state.schema;
+  var tr = view.state.tr;
+  var table = schema.nodes.table;
+  var modified = false;
+  var measuredTables = [];
+
+  // modify only top-level tables
+  doc.forEach(function (node, offset) {
+    if (node.type !== table || (0, _table.hasTableBeenResized)(node) && node.attrs.layout !== 'align-start') {
+      return;
+    }
+    var domNode = view.domAtPos(offset + 1).node;
+    var tableWrapper = domNode instanceof HTMLElement ? domNode.closest(".".concat(_styles.TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP)) : null;
+    var tableRef = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.querySelector('table');
+    if (!tableRef) {
+      return;
+    }
+    measuredTables.push({
+      node: node,
+      offset: offset,
+      measurement: (0, _contentMode.getTableMeasurement)(tableRef)
+    });
+  });
+  measuredTables.forEach(function (_ref) {
+    var node = _ref.node,
+      offset = _ref.offset,
+      measurement = _ref.measurement;
+    tr = (0, _contentMode.applyTableMeasurement)(tr, node, measurement, offset);
+    modified = true;
+  });
+  if (modified) {
+    var _pluginInjectionApi$a, _pluginInjectionApi$w, _pluginInjectionApi$w2;
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.attachAnalyticsEvent({
+      action: _analytics.TABLE_ACTION.FIT_TO_CONTENT_AUTO_CONVERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+      actionSubjectId: null,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        editorContainerWidth: (_pluginInjectionApi$w = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 || (_pluginInjectionApi$w2 = _pluginInjectionApi$w2.sharedState.currentState()) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : _pluginInjectionApi$w2.width) !== null && _pluginInjectionApi$w !== void 0 ? _pluginInjectionApi$w : 0,
+        totalTablesResized: measuredTables.length,
+        measurements: measuredTables.map(function (_ref2) {
+          var measurement = _ref2.measurement;
+          return {
+            tableWidth: measurement.tableWidth,
+            totalColumnCount: measurement.colWidths.length
+          };
+        })
+      }
+    })(tr);
+    view.dispatch(tr.setMeta('addToHistory', false));
+  }
+};

package/dist/cjs/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyMeasuredWidthToSelectedTable = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _contentMode = require("../../transforms/content-mode");
+var _measureTableWithAutoLayout = require("./measure-table-with-auto-layout");
+/**
+ * Used to measure a selected table width with it's content being laid out natively by the browser
+ */
+var applyMeasuredWidthToSelectedTable = exports.applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
+  var _api$width, _api$analytics, _api$width$sharedStat, _api$width2;
+  var tableObject = (0, _utils.findTable)(view.state.selection);
+  if (!tableObject) {
+    return;
+  }
+  var node = tableObject.node,
+    pos = tableObject.pos;
+  var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
+  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
+    return;
+  }
+  var editorContainerWidth = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 || (_api$width = _api$width.sharedState.currentState()) === null || _api$width === void 0 ? void 0 : _api$width.width;
+  var measurement = (0, _measureTableWithAutoLayout.measureTableWithAutoLayout)(tableState.tableRef, editorContainerWidth);
+  var tr = (0, _contentMode.applyTableMeasurement)(view.state.tr, node, measurement, pos);
+  api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
+    action: _analytics.TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,
+    actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      editorContainerWidth: (_api$width$sharedStat = api === null || api === void 0 || (_api$width2 = api.width) === null || _api$width2 === void 0 || (_api$width2 = _api$width2.sharedState.currentState()) === null || _api$width2 === void 0 ? void 0 : _api$width2.width) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : 0,
+      tableWidth: measurement.tableWidth,
+      totalColumnCount: measurement.colWidths.length
+    }
+  })(tr);
+  view.dispatch(tr);
+};

package/dist/cjs/pm-plugins/utils/tableMode/is-content-mode-supported.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isContentModeSupported = void 0;
+var isContentModeSupported = exports.isContentModeSupported = function isContentModeSupported(_ref) {
+  var allowColumnResizing = _ref.allowColumnResizing,
+    allowTableResizing = _ref.allowTableResizing,
+    isFullPageEditor = _ref.isFullPageEditor;
+  return allowColumnResizing && allowTableResizing && isFullPageEditor;
+};