@atlaskit/editor-plugin-table 7.28.7 → 7.28.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 7.28.9
+
+### Patch Changes
+
+- [#150125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150125)
+  [`c9d8f549c024a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c9d8f549c024a) -
+  [ux] ED-24539 Fix live view toggle and column sorting in live view pages
+
+## 7.28.8
+
+### Patch Changes
+
+- [#150410](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150410)
+  [`aabd4874bd3a0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aabd4874bd3a0) -
+  set correct min-width value in table lazy load view
+
 ## 7.28.7
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -358,7 +358,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props$pluginInj, _this$table2, _this$table3;
+      var _this$table, _this$table2, _this$table3;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
@@ -367,12 +367,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
-      var _ref = ((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.editorViewMode) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.sharedState.currentState()) || {},
-        mode = _ref.mode;
-      if (mode === 'view') {
-        var _this$table;
-        this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
-      }
+      this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
       this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
       this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
@@ -647,8 +642,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isNoOfColumnsChanged = (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable);
       var isNoOfRowsChanged = (0, _utils5.tablesHaveDifferentNoOfRows)(currentTable, previousTable);
       if (isNoOfColumnsChanged || isNoOfRowsChanged) {
-        var _this$props$pluginInj2;
-        (_this$props$pluginInj2 = this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.accessibilityUtils) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.ariaNotify((0, _utils5.getAssistiveMessage)(previousTable, currentTable, this.props.intl), {
+        var _this$props$pluginInj;
+        (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.actions.ariaNotify((0, _utils5.getAssistiveMessage)(previousTable, currentTable, this.props.intl), {
           priority: 'important'
         });
       }

package/dist/cjs/plugin.js

@@ -275,7 +275,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableViewModeSort',
         plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api.editorViewMode) : undefined;
+          return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api) : undefined;
         }
       }, {
         name: 'tableLocalId',

package/dist/cjs/pm-plugins/table-resizing/utils/colgroup.js

@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isMinCellWidthTable = exports.insertColgroupFromNode = exports.hasTableColumnBeenResized = exports.hasTableBeenResized = exports.getColgroupChildrenLength = exports.getColWidthFix = exports.generateColgroup = void 0;
+exports.isMinCellWidthTable = exports.insertColgroupFromNode = exports.hasTableColumnBeenResized = exports.hasTableBeenResized = exports.getResizerMinWidth = exports.getColgroupChildrenLength = exports.getColWidthFix = exports.generateColgroup = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _consts = require("./consts");
 var _misc = require("./misc");
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
@@ -109,4 +110,11 @@ function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingP
 var getColgroupChildrenLength = exports.getColgroupChildrenLength = function getColgroupChildrenLength(table) {
   var map = _tableMap.TableMap.get(table);
   return map.width;
+};
+var getResizerMinWidth = exports.getResizerMinWidth = function getResizerMinWidth(node) {
+  var currentColumnCount = getColgroupChildrenLength(node);
+  var minColumnWidth = Math.min(3, currentColumnCount) * _consts.COLUMN_MIN_WIDTH;
+  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+  return minColumnWidth + 1;
 };

package/dist/cjs/pm-plugins/table-resizing/utils/index.js

@@ -81,6 +81,12 @@ Object.defineProperty(exports, "getResizeState", {
     return _resizeState.getResizeState;
   }
 });
+Object.defineProperty(exports, "getResizerMinWidth", {
+  enumerable: true,
+  get: function get() {
+    return _colgroup.getResizerMinWidth;
+  }
+});
 Object.defineProperty(exports, "getTableContainerElementWidth", {
   enumerable: true,
   get: function get() {

package/dist/cjs/pm-plugins/view-mode-sort/index.js

@@ -12,10 +12,10 @@ var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _table3 = require("@atlaskit/editor-common/table");
 var _types = require("@atlaskit/editor-common/types");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _SortingIconWrapper = require("../../ui/icons/SortingIconWrapper");
 var _pluginFactory = require("../plugin-factory");
 var _consts = require("./consts");
 var _pluginKey = require("./plugin-key");
@@ -29,7 +29,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Instead of making changes to the ProseMirror document, the plugin sorts the table rows in the DOM. This allows the sorting to be
  * visible to the user without affecting the document's content.
  */
-var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAPI) {
+var createPlugin = exports.createPlugin = function createPlugin(api) {
   return new _safePlugin.SafePlugin({
     state: {
       init: function init() {
@@ -40,9 +40,10 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
         };
       },
       apply: function apply(tr, pluginState, oldState) {
+        var _api$editorViewMode;
         // TODO - move this mode check to plugin creation if possible. Right now it's here because the initial state
         // does not appear correct when the plugin is created.
-        var _ref = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+        var _ref = ((_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState()) || {},
           mode = _ref.mode;
         if (mode !== 'view') {
           return pluginState;
@@ -101,7 +102,6 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
             var map = _tableMap.TableMap.get(tableNode);
             var hasMergedCells = new Set(map.map).size !== map.map.length;
             map.mapByRow[0].forEach(function (cell, index) {
-              // return pluginState;
               decs.push(_view.Decoration.widget(cell + pos + 2, function () {
                 var _sort$tableId;
                 var element = document.createElement('div');
@@ -121,11 +121,12 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
                   getIntl = _getPluginState.getIntl;
                 _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
                   value: getIntl()
-                }, /*#__PURE__*/(0, _react.createElement)(_table3.SortingIcon, {
+                }, /*#__PURE__*/(0, _react.createElement)(_SortingIconWrapper.SortingIconWrapper, {
                   isSortingAllowed: !hasMergedCells,
                   sortOrdered: sortOrdered,
                   onClick: function onClick() {},
-                  onKeyDown: function onKeyDown() {}
+                  onKeyDown: function onKeyDown() {},
+                  api: api
                 })), element);
                 return element;
               }));
@@ -152,9 +153,9 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
     },
     key: _pluginKey.tableViewModeSortPluginKey,
     appendTransaction: function appendTransaction(trs, oldState, newState) {
-      var _key$getState;
+      var _api$editorViewMode2, _key$getState;
       // return newState.tr;
-      var _ref8 = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+      var _ref8 = (api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState()) || {},
         mode = _ref8.mode;
       if (mode !== 'view') {
         return newState.tr;

package/dist/cjs/toDOM.js

@@ -33,6 +33,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           v = _ref2[1];
         return "".concat((0, _kebabCase.default)(k), ": ").concat((0, _kebabCase.default)(v));
       }).join(';');
+      var tableMinWidth = (0, _colgroup.getResizerMinWidth)(node);
       var attrs = _objectSpread({
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -91,7 +92,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           boxSizing: 'border-box',
           '--ak-editor-table-gutter-padding': "".concat(gutterPadding, "px"),
           '--ak-editor-table-max-width': "".concat(_consts.TABLE_MAX_WIDTH, "px"),
-          '--ak-editor-table-min-width': "145px",
+          '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
           width: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, ")")
@@ -100,7 +101,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           userSelect: 'auto',
           boxSizing: 'border-box',
           height: 'auto',
-          minWidth: '145px',
+          minWidth: "".concat(tableMinWidth, "px"),
           maxWidth: "".concat(editorWidthFromGetter, "px"),
           width: "".concat(editorWidthFromGetter, "px;")
         })

package/dist/cjs/ui/icons/SortingIconWrapper.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortingIconWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _table = require("@atlaskit/editor-common/table");
+var SortingIconWrapper = exports.SortingIconWrapper = function SortingIconWrapper(props) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_table.SortingIcon, props);
+};

package/dist/es2019/nodeviews/TableComponent.js

@@ -339,7 +339,7 @@ class TableComponent extends React.Component {
     }
   }
   componentDidMount() {
-    var _this$props$pluginInj, _this$props$pluginInj2, _this$table2, _this$table3;
+    var _this$table, _this$table2, _this$table3;
     const {
       allowColumnResizing,
       eventDispatcher,
@@ -349,13 +349,7 @@ class TableComponent extends React.Component {
       getEditorFeatureFlags,
       isTableScalingEnabled
     } = this.props;
-    const {
-      mode
-    } = ((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.editorViewMode) === null || _this$props$pluginInj2 === void 0 ? void 0 : _this$props$pluginInj2.sharedState.currentState()) || {};
-    if (mode === 'view') {
-      var _this$table;
-      this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
-    }
+    this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
     this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseout', this.handleMouseOut);
     this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.addEventListener('mouseover', this.handleMouseOver);
     const {
@@ -625,8 +619,8 @@ class TableComponent extends React.Component {
     const isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
     const isNoOfRowsChanged = tablesHaveDifferentNoOfRows(currentTable, previousTable);
     if (isNoOfColumnsChanged || isNoOfRowsChanged) {
-      var _this$props$pluginInj3, _this$props$pluginInj4;
-      (_this$props$pluginInj3 = this.props.pluginInjectionApi) === null || _this$props$pluginInj3 === void 0 ? void 0 : (_this$props$pluginInj4 = _this$props$pluginInj3.accessibilityUtils) === null || _this$props$pluginInj4 === void 0 ? void 0 : _this$props$pluginInj4.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
+      var _this$props$pluginInj, _this$props$pluginInj2;
+      (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj2 === void 0 ? void 0 : _this$props$pluginInj2.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
         priority: 'important'
       });
     }

package/dist/es2019/plugin.js

@@ -263,7 +263,7 @@ const tablesPlugin = ({
       }, {
         name: 'tableViewModeSort',
         plugin: () => {
-          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
+          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api) : undefined;
         }
       }, {
         name: 'tableLocalId',

package/dist/es2019/pm-plugins/table-resizing/utils/colgroup.js

@@ -2,6 +2,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { COLUMN_MIN_WIDTH } from './consts';
 import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './misc';
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
@@ -91,4 +92,11 @@ function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingP
 export const getColgroupChildrenLength = table => {
   const map = TableMap.get(table);
   return map.width;
+};
+export const getResizerMinWidth = node => {
+  const currentColumnCount = getColgroupChildrenLength(node);
+  const minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
+  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+  return minColumnWidth + 1;
 };

package/dist/es2019/pm-plugins/table-resizing/utils/index.js

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, getResizerMinWidth } from './colgroup';
 export { contentWidth } from './content-width';
 export { getCellsRefsInColumn, calculateColumnWidth } from './column-state';
 export { getResizeState, updateColgroup, evenAllColumnsWidths } from './resize-state';

package/dist/es2019/pm-plugins/view-mode-sort/index.js

@@ -8,15 +8,15 @@ import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { SortingIcon } from '@atlaskit/editor-common/table';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
 import { getPluginState } from '../plugin-factory';
 import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
 import { tableViewModeSortPluginKey as key } from './plugin-key';
 import { getTableElements, toggleSort } from './utils';
-export const createPlugin = editorViewModeAPI => {
+export const createPlugin = api => {
   return new SafePlugin({
     state: {
       init: () => ({
@@ -25,11 +25,12 @@ export const createPlugin = editorViewModeAPI => {
         allTables: []
       }),
       apply(tr, pluginState, oldState) {
+        var _api$editorViewMode;
         // TODO - move this mode check to plugin creation if possible. Right now it's here because the initial state
         // does not appear correct when the plugin is created.
         const {
           mode
-        } = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {};
+        } = ((_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState()) || {};
         if (mode !== 'view') {
           return pluginState;
         }
@@ -77,7 +78,6 @@ export const createPlugin = editorViewModeAPI => {
             const map = TableMap.get(tableNode);
             const hasMergedCells = new Set(map.map).size !== map.map.length;
             map.mapByRow[0].forEach((cell, index) => {
-              // return pluginState;
               decs.push(Decoration.widget(cell + pos + 2, () => {
                 var _sort$tableId;
                 const element = document.createElement('div');
@@ -98,11 +98,12 @@ export const createPlugin = editorViewModeAPI => {
                 } = getPluginState(oldState);
                 ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
                   value: getIntl()
-                }, /*#__PURE__*/createElement(SortingIcon, {
+                }, /*#__PURE__*/createElement(SortingIconWrapper, {
                   isSortingAllowed: !hasMergedCells,
                   sortOrdered,
                   onClick: () => {},
-                  onKeyDown: () => {}
+                  onKeyDown: () => {},
+                  api
                 })), element);
                 return element;
               }));
@@ -129,11 +130,11 @@ export const createPlugin = editorViewModeAPI => {
     },
     key,
     appendTransaction: (trs, oldState, newState) => {
-      var _key$getState;
+      var _api$editorViewMode2, _key$getState;
       // return newState.tr;
       const {
         mode
-      } = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {};
+      } = (api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState()) || {};
       if (mode !== 'view') {
         return newState.tr;
       }

package/dist/es2019/toDOM.js

@@ -5,7 +5,7 @@ import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAlignmentStyle } from './nodeviews/table-container-styles';
-import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+import { generateColgroup, getResizerMinWidth } from './pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from './pm-plugins/table-resizing/utils/consts';
 export const tableNodeSpecWithFixedToDOM = config => {
   if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
@@ -17,6 +17,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
       const gutterPadding = akEditorGutterPaddingDynamic() * 2;
       const editorWidthFromGetter = fg('platform_editor_breakout_use_css') ? undefined : Math.min(config.getEditorContainerWidth().width - gutterPadding, node.attrs.width);
       const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`).join(';');
+      const tableMinWidth = getResizerMinWidth(node);
       const attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -76,7 +77,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
           boxSizing: 'border-box',
           '--ak-editor-table-gutter-padding': `${gutterPadding}px`,
           '--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
-          '--ak-editor-table-min-width': `145px`,
+          '--ak-editor-table-min-width': `${tableMinWidth}px`,
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
           width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width})`
@@ -85,7 +86,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
           userSelect: 'auto',
           boxSizing: 'border-box',
           height: 'auto',
-          minWidth: '145px',
+          minWidth: `${tableMinWidth}px`,
           maxWidth: `${editorWidthFromGetter}px`,
           width: `${editorWidthFromGetter}px;`
         })

package/dist/es2019/ui/icons/SortingIconWrapper.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+export const SortingIconWrapper = props => {
+  const {
+    editorViewModeState
+  } = useSharedPluginState(props.api, ['editorViewMode']);
+  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(SortingIcon, props);
+};

package/dist/esm/nodeviews/TableComponent.js

@@ -351,7 +351,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   _createClass(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props$pluginInj, _this$table2, _this$table3;
+      var _this$table, _this$table2, _this$table3;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
@@ -360,12 +360,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
-      var _ref = ((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.editorViewMode) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.sharedState.currentState()) || {},
-        mode = _ref.mode;
-      if (mode === 'view') {
-        var _this$table;
-        this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
-      }
+      this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
       this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
       this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
@@ -640,8 +635,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
       var isNoOfRowsChanged = tablesHaveDifferentNoOfRows(currentTable, previousTable);
       if (isNoOfColumnsChanged || isNoOfRowsChanged) {
-        var _this$props$pluginInj2;
-        (_this$props$pluginInj2 = this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.accessibilityUtils) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
+        var _this$props$pluginInj;
+        (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
           priority: 'important'
         });
       }

package/dist/esm/plugin.js

@@ -268,7 +268,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableViewModeSort',
         plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
+          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api) : undefined;
         }
       }, {
         name: 'tableLocalId',

package/dist/esm/pm-plugins/table-resizing/utils/colgroup.js

@@ -3,6 +3,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { COLUMN_MIN_WIDTH } from './consts';
 import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './misc';
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
@@ -102,4 +103,11 @@ function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingP
 export var getColgroupChildrenLength = function getColgroupChildrenLength(table) {
   var map = TableMap.get(table);
   return map.width;
+};
+export var getResizerMinWidth = function getResizerMinWidth(node) {
+  var currentColumnCount = getColgroupChildrenLength(node);
+  var minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
+  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+  return minColumnWidth + 1;
 };

package/dist/esm/pm-plugins/table-resizing/utils/index.js

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, getResizerMinWidth } from './colgroup';
 export { contentWidth } from './content-width';
 export { getCellsRefsInColumn, calculateColumnWidth } from './column-state';
 export { getResizeState, updateColgroup, evenAllColumnsWidths } from './resize-state';

package/dist/esm/pm-plugins/view-mode-sort/index.js

@@ -16,15 +16,15 @@ import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { SortingIcon } from '@atlaskit/editor-common/table';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
 import { getPluginState } from '../plugin-factory';
 import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
 import { tableViewModeSortPluginKey as key } from './plugin-key';
 import { getTableElements, toggleSort } from './utils';
-export var createPlugin = function createPlugin(editorViewModeAPI) {
+export var createPlugin = function createPlugin(api) {
   return new SafePlugin({
     state: {
       init: function init() {
@@ -35,9 +35,10 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
         };
       },
       apply: function apply(tr, pluginState, oldState) {
+        var _api$editorViewMode;
         // TODO - move this mode check to plugin creation if possible. Right now it's here because the initial state
         // does not appear correct when the plugin is created.
-        var _ref = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+        var _ref = ((_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState()) || {},
           mode = _ref.mode;
         if (mode !== 'view') {
           return pluginState;
@@ -96,7 +97,6 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
             var map = TableMap.get(tableNode);
             var hasMergedCells = new Set(map.map).size !== map.map.length;
             map.mapByRow[0].forEach(function (cell, index) {
-              // return pluginState;
               decs.push(Decoration.widget(cell + pos + 2, function () {
                 var _sort$tableId;
                 var element = document.createElement('div');
@@ -116,11 +116,12 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
                   getIntl = _getPluginState.getIntl;
                 ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
                   value: getIntl()
-                }, /*#__PURE__*/createElement(SortingIcon, {
+                }, /*#__PURE__*/createElement(SortingIconWrapper, {
                   isSortingAllowed: !hasMergedCells,
                   sortOrdered: sortOrdered,
                   onClick: function onClick() {},
-                  onKeyDown: function onKeyDown() {}
+                  onKeyDown: function onKeyDown() {},
+                  api: api
                 })), element);
                 return element;
               }));
@@ -147,9 +148,9 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
     },
     key: key,
     appendTransaction: function appendTransaction(trs, oldState, newState) {
-      var _key$getState;
+      var _api$editorViewMode2, _key$getState;
       // return newState.tr;
-      var _ref8 = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+      var _ref8 = (api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState()) || {},
         mode = _ref8.mode;
       if (mode !== 'view') {
         return newState.tr;

package/dist/esm/toDOM.js

@@ -10,7 +10,7 @@ import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAlignmentStyle } from './nodeviews/table-container-styles';
-import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+import { generateColgroup, getResizerMinWidth } from './pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from './pm-plugins/table-resizing/utils/consts';
 export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
   if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
@@ -26,6 +26,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
           v = _ref2[1];
         return "".concat(kebabCase(k), ": ").concat(kebabCase(v));
       }).join(';');
+      var tableMinWidth = getResizerMinWidth(node);
       var attrs = _objectSpread({
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -84,7 +85,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
           boxSizing: 'border-box',
           '--ak-editor-table-gutter-padding': "".concat(gutterPadding, "px"),
           '--ak-editor-table-max-width': "".concat(TABLE_MAX_WIDTH, "px"),
-          '--ak-editor-table-min-width': "145px",
+          '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
           width: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, ")")
@@ -93,7 +94,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
           userSelect: 'auto',
           boxSizing: 'border-box',
           height: 'auto',
-          minWidth: '145px',
+          minWidth: "".concat(tableMinWidth, "px"),
           maxWidth: "".concat(editorWidthFromGetter, "px"),
           width: "".concat(editorWidthFromGetter, "px;")
         })

package/dist/esm/ui/icons/SortingIconWrapper.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+export var SortingIconWrapper = function SortingIconWrapper(props) {
+  var _useSharedPluginState = useSharedPluginState(props.api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(SortingIcon, props);
+};

package/dist/types/pm-plugins/table-resizing/utils/colgroup.d.ts

@@ -21,4 +21,5 @@ export declare const hasTableColumnBeenResized: (table: PmNode) => boolean;
  */
 export declare const isMinCellWidthTable: (table: PmNode) => boolean;
 export declare const getColgroupChildrenLength: (table: PmNode) => number;
+export declare const getResizerMinWidth: (node: PmNode) => number;
 export {};

package/dist/types/pm-plugins/table-resizing/utils/index.d.ts

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, getResizerMinWidth, } from './colgroup';
 export { contentWidth } from './content-width';
 export { getCellsRefsInColumn, calculateColumnWidth } from './column-state';
 export { getResizeState, updateColgroup, evenAllColumnsWidths } from './resize-state';

package/dist/types/pm-plugins/view-mode-sort/index.d.ts

@@ -7,4 +7,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type tablePlugin from '../../plugin';
 import type { ViewModeSortPluginState } from './types';
-export declare const createPlugin: (editorViewModeAPI: ExtractInjectionAPI<typeof tablePlugin>['editorViewMode']) => SafePlugin<ViewModeSortPluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>) => SafePlugin<ViewModeSortPluginState>;

package/dist/types/ui/icons/SortingIconWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TablePlugin } from '../../plugin';
+type SortingIconProps = React.ComponentProps<typeof SortingIcon>;
+type SortingIconWrapperProps = SortingIconProps & {
+    api: ExtractInjectionAPI<TablePlugin>;
+};
+export declare const SortingIconWrapper: (props: SortingIconWrapperProps) => JSX.Element | null;
+export {};

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/colgroup.d.ts

@@ -21,4 +21,5 @@ export declare const hasTableColumnBeenResized: (table: PmNode) => boolean;
  */
 export declare const isMinCellWidthTable: (table: PmNode) => boolean;
 export declare const getColgroupChildrenLength: (table: PmNode) => number;
+export declare const getResizerMinWidth: (node: PmNode) => number;
 export {};

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/index.d.ts

@@ -1,4 +1,4 @@
-export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, } from './colgroup';
+export { generateColgroup, insertColgroupFromNode, hasTableBeenResized, getColgroupChildrenLength, getResizerMinWidth, } from './colgroup';
 export { contentWidth } from './content-width';
 export { getCellsRefsInColumn, calculateColumnWidth } from './column-state';
 export { getResizeState, updateColgroup, evenAllColumnsWidths } from './resize-state';

package/dist/types-ts4.5/pm-plugins/view-mode-sort/index.d.ts

@@ -7,4 +7,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type tablePlugin from '../../plugin';
 import type { ViewModeSortPluginState } from './types';
-export declare const createPlugin: (editorViewModeAPI: ExtractInjectionAPI<typeof tablePlugin>['editorViewMode']) => SafePlugin<ViewModeSortPluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>) => SafePlugin<ViewModeSortPluginState>;

package/dist/types-ts4.5/ui/icons/SortingIconWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TablePlugin } from '../../plugin';
+type SortingIconProps = React.ComponentProps<typeof SortingIcon>;
+type SortingIconWrapperProps = SortingIconProps & {
+    api: ExtractInjectionAPI<TablePlugin>;
+};
+export declare const SortingIconWrapper: (props: SortingIconWrapperProps) => JSX.Element | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.28.7",
+	"version": "7.28.9",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^93.0.0",
+		"@atlaskit/editor-common": "^93.1.0",
 		"@atlaskit/editor-palette": "1.6.1",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.20.0",
+		"@atlaskit/icon": "^22.22.0",
 		"@atlaskit/menu": "^2.12.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.2.0",
+		"@atlaskit/tmp-editor-statsig": "^2.3.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",

package/src/nodeviews/TableComponent.tsx

@@ -228,11 +228,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			isTableScalingEnabled,
 		} = this.props;
 
-		const { mode } =
-			this.props.pluginInjectionApi?.editorViewMode?.sharedState.currentState() || {};
-		if (mode === 'view') {
-			this?.table?.addEventListener('mouseenter', this.handleMouseEnter);
-		}
+		this?.table?.addEventListener('mouseenter', this.handleMouseEnter);
 
 		this?.table?.addEventListener('mouseout', this.handleMouseOut);
 

package/src/plugin.tsx

@@ -436,7 +436,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				{
 					name: 'tableViewModeSort',
 					plugin: () => {
-						return api?.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
+						return api?.editorViewMode ? createViewModeSortPlugin(api) : undefined;
 					},
 				},
 				{

package/src/pm-plugins/table-resizing/utils/colgroup.ts

@@ -4,6 +4,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
+import { COLUMN_MIN_WIDTH } from './consts';
 import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './misc';
 
 type Col = Array<string | { [name: string]: string }>;
@@ -152,3 +153,11 @@ export const getColgroupChildrenLength = (table: PmNode): number => {
 	const map = TableMap.get(table);
 	return map.width;
 };
+
+export const getResizerMinWidth = (node: PmNode) => {
+	const currentColumnCount = getColgroupChildrenLength(node);
+	const minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
+	// add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+	// the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+	return minColumnWidth + 1;
+};

package/src/pm-plugins/table-resizing/utils/index.ts

@@ -3,6 +3,7 @@ export {
 	insertColgroupFromNode,
 	hasTableBeenResized,
 	getColgroupChildrenLength,
+	getResizerMinWidth,
 } from './colgroup';
 export { contentWidth } from './content-width';
 export { getCellsRefsInColumn, calculateColumnWidth } from './column-state';

package/src/pm-plugins/view-mode-sort/index.ts

@@ -10,13 +10,13 @@ import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { SortingIcon } from '@atlaskit/editor-common/table';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 import type tablePlugin from '../../plugin';
+import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
 import { getPluginState } from '../plugin-factory';
 
 import {
@@ -28,9 +28,7 @@ import { tableViewModeSortPluginKey as key } from './plugin-key';
 import type { ViewModeSortPluginState } from './types';
 import { getTableElements, toggleSort } from './utils';
 
-export const createPlugin = (
-	editorViewModeAPI: ExtractInjectionAPI<typeof tablePlugin>['editorViewMode'],
-) => {
+export const createPlugin = (api: ExtractInjectionAPI<typeof tablePlugin>) => {
 	return new SafePlugin({
 		state: {
 			init: () => ({
@@ -41,7 +39,7 @@ export const createPlugin = (
 			apply(tr, pluginState: ViewModeSortPluginState, oldState) {
 				// TODO - move this mode check to plugin creation if possible. Right now it's here because the initial state
 				// does not appear correct when the plugin is created.
-				const { mode } = editorViewModeAPI?.sharedState.currentState() || {};
+				const { mode } = api.editorViewMode?.sharedState.currentState() || {};
 				if (mode !== 'view') {
 					return pluginState;
 				}
@@ -86,7 +84,6 @@ export const createPlugin = (
 						const map = TableMap.get(tableNode);
 						const hasMergedCells = new Set(map.map).size !== map.map.length;
 						map.mapByRow[0].forEach((cell, index) => {
-							// return pluginState;
 							decs.push(
 								Decoration.widget(cell + pos + 2, () => {
 									const element = document.createElement('div');
@@ -109,11 +106,12 @@ export const createPlugin = (
 										createElement(
 											RawIntlProvider,
 											{ value: getIntl() },
-											createElement(SortingIcon, {
+											createElement(SortingIconWrapper, {
 												isSortingAllowed: !hasMergedCells,
 												sortOrdered,
 												onClick: () => {},
 												onKeyDown: () => {},
+												api,
 											}),
 										),
 										element,
@@ -146,7 +144,7 @@ export const createPlugin = (
 		key,
 		appendTransaction: (trs, oldState, newState) => {
 			// return newState.tr;
-			const { mode } = editorViewModeAPI?.sharedState.currentState() || {};
+			const { mode } = api?.editorViewMode?.sharedState.currentState() || {};
 			if (mode !== 'view') {
 				return newState.tr;
 			}

package/src/toDOM.ts

@@ -9,7 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { getAlignmentStyle } from './nodeviews/table-container-styles';
-import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+import { generateColgroup, getResizerMinWidth } from './pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from './pm-plugins/table-resizing/utils/consts';
 
 type Config = {
@@ -34,6 +34,8 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 				.map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`)
 				.join(';');
 
+			const tableMinWidth = getResizerMinWidth(node);
+
 			const attrs = {
 				'data-number-column': node.attrs.isNumberColumnEnabled,
 				'data-layout': node.attrs.layout,
@@ -145,7 +147,7 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 										boxSizing: 'border-box',
 										'--ak-editor-table-gutter-padding': `${gutterPadding}px`,
 										'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
-										'--ak-editor-table-min-width': `145px`,
+										'--ak-editor-table-min-width': `${tableMinWidth}px`,
 										minWidth: 'var(--ak-editor-table-min-width)',
 										maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
 										width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width})`,
@@ -155,7 +157,7 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 										userSelect: 'auto',
 										boxSizing: 'border-box',
 										height: 'auto',
-										minWidth: '145px',
+										minWidth: `${tableMinWidth}px`,
 										maxWidth: `${editorWidthFromGetter}px`,
 										width: `${editorWidthFromGetter}px;`,
 									}),

package/src/ui/icons/SortingIconWrapper.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+
+import type { TablePlugin } from '../../plugin';
+
+type SortingIconProps = React.ComponentProps<typeof SortingIcon>;
+type SortingIconWrapperProps = SortingIconProps & {
+	api: ExtractInjectionAPI<TablePlugin>;
+};
+
+export const SortingIconWrapper = (props: SortingIconWrapperProps) => {
+	const { editorViewModeState } = useSharedPluginState(props.api, ['editorViewMode']);
+	if (editorViewModeState?.mode === 'edit') {
+		return null;
+	}
+	return <SortingIcon {...props} />;
+};