@atlaskit/editor-plugin-table 7.25.4 → 7.25.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 7.25.6
+
+### Patch Changes
+
+- [#130414](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130414)
+  [`eceafead51291`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eceafead51291) -
+  ED-24568 Adjusted table lazy loading DOM to match node view
+- [#130331](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130331)
+  [`8408c22cc75ef`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8408c22cc75ef) -
+  clean up live view sort table ff
+- Updated dependencies
+
+## 7.25.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.25.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -360,7 +360,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$table2;
+      var _this$props$pluginInj, _this$table2;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
@@ -369,14 +369,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
-      if ((0, _platformFeatureFlags.fg)('platform.editor.table.live-pages-sorting_4malx')) {
-        var _this$props$pluginInj;
-        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);
-        }
+      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$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
       if ((0, _platformFeatureFlags.fg)('platform_editor_react_18_table_column_resize_hover')) {
@@ -432,7 +429,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$resizeObserver, _this$table5;
+      var _this$resizeObserver, _this$table4, _this$table5;
       var _this$props8 = this.props,
         allowColumnResizing = _this$props8.allowColumnResizing,
         eventDispatcher = _this$props8.eventDispatcher,
@@ -463,10 +460,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!(options !== null && options !== void 0 && options.isTableResizingEnabled) && allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
-      if ((0, _platformFeatureFlags.fg)('platform.editor.table.live-pages-sorting_4malx')) {
-        var _this$table4;
-        this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
-      }
+      this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
       this === null || this === void 0 || (_this$table5 = this.table) === null || _this$table5 === void 0 || _this$table5.removeEventListener('mouseout', this.handleMouseOut);
       if ((0, _platformFeatureFlags.fg)('platform_editor_react_18_table_column_resize_hover')) {
         var _this$table6;

package/dist/cjs/plugin.js

@@ -145,7 +145,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
         name: 'table',
         node: (0, _toDOM.tableNodeSpecWithFixedToDOM)({
           allowColumnResizing: Boolean(allowColumnResizing),
-          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled)
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
+          getEditorContainerWidth: defaultGetEditorContainerWidth
         })
       }, {
         name: 'tableHeader',
@@ -269,7 +270,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableViewModeSort',
         plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode && (0, _platformFeatureFlags.fg)('platform.editor.table.live-pages-sorting_4malx') ? (0, _viewModeSort.createPlugin)(api.editorViewMode) : undefined;
+          return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api.editorViewMode) : undefined;
         }
       }, {
         name: 'tableLocalId',

package/dist/cjs/toDOM.js

@@ -8,6 +8,7 @@ exports.tableNodeSpecWithFixedToDOM = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colgroup = require("./pm-plugins/table-resizing/utils/colgroup");
 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; }
@@ -18,12 +19,14 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
   }
   return _objectSpread(_objectSpread({}, _adfSchema.table), {}, {
     toDOM: function toDOM(node) {
+      var editorWidthFromGetter = Math.min(config.getEditorContainerWidth().width - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, node.attrs.width);
       var attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
         'data-autosize': node.attrs.__autoSize,
         'data-table-local-id': node.attrs.localId,
-        'data-table-width': node.attrs.width
+        'data-table-width': node.attrs.width,
+        style: "width: ".concat(node.attrs.width, "px;")
       };
       var colgroup = '';
       if (config.allowColumnResizing) {
@@ -40,7 +43,8 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
       }], ['div', {
         class: 'pm-table-row-controls-wrapper'
       }, ['div']], ['div', {
-        class: 'pm-table-with-left-shadow'
+        class: 'pm-table-with-left-shadow',
+        style: 'visibility: hidden'
       }], ['div', {
         class: 'pm-table-wrapper'
       }, ['table', attrs, ['span', {
@@ -48,7 +52,8 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
       }], ['span', {
         class: 'pm-table-shadow-sentinel-left'
       }], colgroup, ['tbody', 0]]], ['div', {
-        class: 'pm-table-with-right-shadow'
+        class: 'pm-table-with-right-shadow',
+        style: 'visibility: hidden'
       }], ['div', {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
@@ -59,11 +64,14 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         }, tableContainerDiv];
       }
       var tableResizingDiv = ['div', {
-        'data-testid': 'table-alignment-container'
+        'data-testid': 'table-alignment-container',
+        style: 'display: flex; justify-content: center;'
       }, ['div', {
-        class: 'pm-table-resizer-container'
+        class: 'pm-table-resizer-container',
+        style: "width: ".concat(node.attrs.width, "px")
       }, ['div', {
-        class: 'resizer-item display-handle'
+        class: 'resizer-item display-handle',
+        style: "position: relative; user-select: auto;  height: auto;  min-width: 145px; box-sizing: border-box; max-width: ".concat(editorWidthFromGetter, "px; width: ").concat(editorWidthFromGetter, "px;")
       }, ['span', {
         class: 'resizer-hover-zone'
       }, tableContainerDiv]]]];

package/dist/cjs/ui/common-styles.js

@@ -52,9 +52,7 @@ var stickyHeaderMarginTop = function stickyHeaderMarginTop() {
   return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
 };
 var viewModeSortStyles = function viewModeSortStyles() {
-  if ((0, _platformFeatureFlags.fg)('platform.editor.table.live-pages-sorting_4malx')) {
-    return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\tth {\n\t\t\t\t.", " {\n\t\t\t\t\t+ p {\n\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:hover {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"])), _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME);
-  }
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\tth {\n\t\t\t.", " {\n\t\t\t\t+ p {\n\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:has(.is-active) {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\topacity: 0;\n\t\t\t\t&:focus {\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME);
 };
 var tableBorderStyles = function tableBorderStyles() {
   return "border-color: ".concat(_consts2.tableBorderDeleteColor);

package/dist/es2019/nodeviews/TableComponent.js

@@ -342,7 +342,7 @@ class TableComponent extends React.Component {
     }
   }
   componentDidMount() {
-    var _this$table2;
+    var _this$props$pluginInj, _this$props$pluginInj2, _this$table2;
     const {
       allowColumnResizing,
       eventDispatcher,
@@ -352,15 +352,12 @@ class TableComponent extends React.Component {
       getEditorFeatureFlags,
       isTableScalingEnabled
     } = this.props;
-    if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-      var _this$props$pluginInj, _this$props$pluginInj2;
-      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);
-      }
+    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$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseout', this.handleMouseOut);
     if (fg('platform_editor_react_18_table_column_resize_hover')) {
@@ -414,7 +411,7 @@ class TableComponent extends React.Component {
     }
   }
   componentWillUnmount() {
-    var _this$resizeObserver, _this$table5;
+    var _this$resizeObserver, _this$table4, _this$table5;
     const {
       allowColumnResizing,
       eventDispatcher,
@@ -447,10 +444,7 @@ class TableComponent extends React.Component {
     if (!(options !== null && options !== void 0 && options.isTableResizingEnabled) && allowColumnResizing) {
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
-    if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-      var _this$table4;
-      this === null || this === void 0 ? void 0 : (_this$table4 = this.table) === null || _this$table4 === void 0 ? void 0 : _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
-    }
+    this === null || this === void 0 ? void 0 : (_this$table4 = this.table) === null || _this$table4 === void 0 ? void 0 : _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
     this === null || this === void 0 ? void 0 : (_this$table5 = this.table) === null || _this$table5 === void 0 ? void 0 : _this$table5.removeEventListener('mouseout', this.handleMouseOut);
     if (fg('platform_editor_react_18_table_column_resize_hover')) {
       var _this$table6;

package/dist/es2019/plugin.js

@@ -135,7 +135,8 @@ const tablesPlugin = ({
         name: 'table',
         node: tableNodeSpecWithFixedToDOM({
           allowColumnResizing: Boolean(allowColumnResizing),
-          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled)
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
+          getEditorContainerWidth: defaultGetEditorContainerWidth
         })
       }, {
         name: 'tableHeader',
@@ -258,7 +259,7 @@ const tablesPlugin = ({
       }, {
         name: 'tableViewModeSort',
         plugin: () => {
-          return api !== null && api !== void 0 && api.editorViewMode && fg('platform.editor.table.live-pages-sorting_4malx') ? createViewModeSortPlugin(api.editorViewMode) : undefined;
+          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
         }
       }, {
         name: 'tableLocalId',

package/dist/es2019/toDOM.js

@@ -1,4 +1,5 @@
 import { table } from '@atlaskit/adf-schema';
+import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
 export const tableNodeSpecWithFixedToDOM = config => {
@@ -8,12 +9,14 @@ export const tableNodeSpecWithFixedToDOM = config => {
   return {
     ...table,
     toDOM: node => {
+      const editorWidthFromGetter = Math.min(config.getEditorContainerWidth().width - akEditorGutterPaddingDynamic() * 2, node.attrs.width);
       const attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
         'data-autosize': node.attrs.__autoSize,
         'data-table-local-id': node.attrs.localId,
-        'data-table-width': node.attrs.width
+        'data-table-width': node.attrs.width,
+        style: `width: ${node.attrs.width}px;`
       };
       let colgroup = '';
       if (config.allowColumnResizing) {
@@ -30,7 +33,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
       }], ['div', {
         class: 'pm-table-row-controls-wrapper'
       }, ['div']], ['div', {
-        class: 'pm-table-with-left-shadow'
+        class: 'pm-table-with-left-shadow',
+        style: 'visibility: hidden'
       }], ['div', {
         class: 'pm-table-wrapper'
       }, ['table', attrs, ['span', {
@@ -38,7 +42,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
       }], ['span', {
         class: 'pm-table-shadow-sentinel-left'
       }], colgroup, ['tbody', 0]]], ['div', {
-        class: 'pm-table-with-right-shadow'
+        class: 'pm-table-with-right-shadow',
+        style: 'visibility: hidden'
       }], ['div', {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
@@ -49,11 +54,14 @@ export const tableNodeSpecWithFixedToDOM = config => {
         }, tableContainerDiv];
       }
       const tableResizingDiv = ['div', {
-        'data-testid': 'table-alignment-container'
+        'data-testid': 'table-alignment-container',
+        style: 'display: flex; justify-content: center;'
       }, ['div', {
-        class: 'pm-table-resizer-container'
+        class: 'pm-table-resizer-container',
+        style: `width: ${node.attrs.width}px`
       }, ['div', {
-        class: 'resizer-item display-handle'
+        class: 'resizer-item display-handle',
+        style: `position: relative; user-select: auto;  height: auto;  min-width: 145px; box-sizing: border-box; max-width: ${editorWidthFromGetter}px; width: ${editorWidthFromGetter}px;`
       }, ['span', {
         class: 'resizer-hover-zone'
       }, tableContainerDiv]]]];

package/dist/es2019/ui/common-styles.js

@@ -135,36 +135,34 @@ const stickyHeaderMarginTop = () => {
   return css``;
 };
 const viewModeSortStyles = () => {
-  if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-    return css`
-			th {
-				.${SORTING_ICON_CLASS_NAME} {
-					+ p {
-						margin-top: 0 !important;
-					}
+  return css`
+		th {
+			.${SORTING_ICON_CLASS_NAME} {
+				+ p {
+					margin-top: 0 !important;
 				}
+			}
 
-				&:has(.is-active) {
-					.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-						opacity: 1;
-					}
+			&:has(.is-active) {
+				.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+					opacity: 1;
 				}
+			}
 
-				.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-					opacity: 0;
-					&:focus {
-						opacity: 1;
-					}
+			.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+				opacity: 0;
+				&:focus {
+					opacity: 1;
 				}
+			}
 
-				&:hover {
-					.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-						opacity: 1;
-					}
+			&:hover {
+				.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+					opacity: 1;
 				}
 			}
-		`;
-  }
+		}
+	`;
 };
 const tableBorderStyles = () => {
   return `border-color: ${tableBorderDeleteColor}`;

package/dist/esm/nodeviews/TableComponent.js

@@ -353,7 +353,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   _createClass(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$table2;
+      var _this$props$pluginInj, _this$table2;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
@@ -362,14 +362,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
-      if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-        var _this$props$pluginInj;
-        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);
-        }
+      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$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
       if (fg('platform_editor_react_18_table_column_resize_hover')) {
@@ -425,7 +422,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$resizeObserver, _this$table5;
+      var _this$resizeObserver, _this$table4, _this$table5;
       var _this$props8 = this.props,
         allowColumnResizing = _this$props8.allowColumnResizing,
         eventDispatcher = _this$props8.eventDispatcher,
@@ -456,10 +453,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!(options !== null && options !== void 0 && options.isTableResizingEnabled) && allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
-      if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-        var _this$table4;
-        this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
-      }
+      this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
       this === null || this === void 0 || (_this$table5 = this.table) === null || _this$table5 === void 0 || _this$table5.removeEventListener('mouseout', this.handleMouseOut);
       if (fg('platform_editor_react_18_table_column_resize_hover')) {
         var _this$table6;

package/dist/esm/plugin.js

@@ -138,7 +138,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
         name: 'table',
         node: tableNodeSpecWithFixedToDOM({
           allowColumnResizing: Boolean(allowColumnResizing),
-          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled)
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
+          getEditorContainerWidth: defaultGetEditorContainerWidth
         })
       }, {
         name: 'tableHeader',
@@ -262,7 +263,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableViewModeSort',
         plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode && fg('platform.editor.table.live-pages-sorting_4malx') ? createViewModeSortPlugin(api.editorViewMode) : undefined;
+          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
         }
       }, {
         name: 'tableLocalId',

package/dist/esm/toDOM.js

@@ -3,6 +3,7 @@ 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 { table } from '@atlaskit/adf-schema';
+import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
 export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
@@ -11,12 +12,14 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
   }
   return _objectSpread(_objectSpread({}, table), {}, {
     toDOM: function toDOM(node) {
+      var editorWidthFromGetter = Math.min(config.getEditorContainerWidth().width - akEditorGutterPaddingDynamic() * 2, node.attrs.width);
       var attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
         'data-autosize': node.attrs.__autoSize,
         'data-table-local-id': node.attrs.localId,
-        'data-table-width': node.attrs.width
+        'data-table-width': node.attrs.width,
+        style: "width: ".concat(node.attrs.width, "px;")
       };
       var colgroup = '';
       if (config.allowColumnResizing) {
@@ -33,7 +36,8 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
       }], ['div', {
         class: 'pm-table-row-controls-wrapper'
       }, ['div']], ['div', {
-        class: 'pm-table-with-left-shadow'
+        class: 'pm-table-with-left-shadow',
+        style: 'visibility: hidden'
       }], ['div', {
         class: 'pm-table-wrapper'
       }, ['table', attrs, ['span', {
@@ -41,7 +45,8 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
       }], ['span', {
         class: 'pm-table-shadow-sentinel-left'
       }], colgroup, ['tbody', 0]]], ['div', {
-        class: 'pm-table-with-right-shadow'
+        class: 'pm-table-with-right-shadow',
+        style: 'visibility: hidden'
       }], ['div', {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
@@ -52,11 +57,14 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         }, tableContainerDiv];
       }
       var tableResizingDiv = ['div', {
-        'data-testid': 'table-alignment-container'
+        'data-testid': 'table-alignment-container',
+        style: 'display: flex; justify-content: center;'
       }, ['div', {
-        class: 'pm-table-resizer-container'
+        class: 'pm-table-resizer-container',
+        style: "width: ".concat(node.attrs.width, "px")
       }, ['div', {
-        class: 'resizer-item display-handle'
+        class: 'resizer-item display-handle',
+        style: "position: relative; user-select: auto;  height: auto;  min-width: 145px; box-sizing: border-box; max-width: ".concat(editorWidthFromGetter, "px; width: ").concat(editorWidthFromGetter, "px;")
       }, ['span', {
         class: 'resizer-hover-zone'
       }, tableContainerDiv]]]];

package/dist/esm/ui/common-styles.js

@@ -46,9 +46,7 @@ var stickyHeaderMarginTop = function stickyHeaderMarginTop() {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
 };
 var viewModeSortStyles = function viewModeSortStyles() {
-  if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\tth {\n\t\t\t\t.", " {\n\t\t\t\t\t+ p {\n\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:hover {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
-  }
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\tth {\n\t\t\t.", " {\n\t\t\t\t+ p {\n\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:has(.is-active) {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\topacity: 0;\n\t\t\t\t&:focus {\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
 };
 var tableBorderStyles = function tableBorderStyles() {
   return "border-color: ".concat(tableBorderDeleteColor);

package/dist/types/toDOM.d.ts

@@ -1,7 +1,9 @@
 import { table } from '@atlaskit/adf-schema';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/src/types';
 type Config = {
     allowColumnResizing: boolean;
     tableResizingEnabled: boolean;
+    getEditorContainerWidth: GetEditorContainerWidth;
 };
 export declare const tableNodeSpecWithFixedToDOM: (config: Config) => typeof table;
 export {};

package/dist/types-ts4.5/toDOM.d.ts

@@ -1,7 +1,9 @@
 import { table } from '@atlaskit/adf-schema';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/src/types';
 type Config = {
     allowColumnResizing: boolean;
     tableResizingEnabled: boolean;
+    getEditorContainerWidth: GetEditorContainerWidth;
 };
 export declare const tableNodeSpecWithFixedToDOM: (config: Config) => typeof table;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.4",
+	"version": "7.25.6",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,9 +29,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.8.1",
-		"@atlaskit/button": "^19.2.0",
+		"@atlaskit/button": "^20.0.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^87.10.0",
+		"@atlaskit/editor-common": "^87.11.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.7.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/icon": "^22.13.0",
 		"@atlaskit/menu": "^2.12.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
@@ -114,9 +114,6 @@
 		"platform_editor_dark_mode_cell_header_color_fix": {
 			"type": "boolean"
 		},
-		"platform.editor.table.live-pages-sorting_4malx": {
-			"type": "boolean"
-		},
 		"platform_editor_a11y_table_context_menu": {
 			"type": "boolean"
 		},

package/src/nodeviews/TableComponent.tsx

@@ -217,12 +217,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			isTableScalingEnabled,
 		} = this.props;
 
-		if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-			const { mode } =
-				this.props.pluginInjectionApi?.editorViewMode?.sharedState.currentState() || {};
-			if (mode === 'view') {
-				this?.table?.addEventListener('mouseenter', this.handleMouseEnter);
-			}
+		const { mode } =
+			this.props.pluginInjectionApi?.editorViewMode?.sharedState.currentState() || {};
+		if (mode === 'view') {
+			this?.table?.addEventListener('mouseenter', this.handleMouseEnter);
 		}
 
 		this?.table?.addEventListener('mouseout', this.handleMouseOut);
@@ -331,9 +329,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			window.removeEventListener('resize', this.handleWindowResizeDebounced);
 		}
 
-		if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-			this?.table?.removeEventListener('mouseenter', this.handleMouseEnter);
-		}
+		this?.table?.removeEventListener('mouseenter', this.handleMouseEnter);
 
 		this?.table?.removeEventListener('mouseout', this.handleMouseOut);
 

package/src/plugin.tsx

@@ -261,6 +261,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 					node: tableNodeSpecWithFixedToDOM({
 						allowColumnResizing: Boolean(allowColumnResizing),
 						tableResizingEnabled: Boolean(options?.tableResizingEnabled),
+						getEditorContainerWidth: defaultGetEditorContainerWidth,
 					}),
 				},
 				{ name: 'tableHeader', node: tableHeader },
@@ -427,9 +428,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				{
 					name: 'tableViewModeSort',
 					plugin: () => {
-						return api?.editorViewMode && fg('platform.editor.table.live-pages-sorting_4malx')
-							? createViewModeSortPlugin(api.editorViewMode)
-							: undefined;
+						return api?.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
 					},
 				},
 				{

package/src/toDOM.ts

@@ -1,5 +1,7 @@
 import { table } from '@atlaskit/adf-schema';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/src/types';
 import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 
 import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
@@ -7,6 +9,7 @@ import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
 type Config = {
 	allowColumnResizing: boolean;
 	tableResizingEnabled: boolean;
+	getEditorContainerWidth: GetEditorContainerWidth;
 };
 export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 	if (!fg('platform_editor_lazy-node-views')) {
@@ -16,12 +19,17 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 	return {
 		...table,
 		toDOM: (node: PMNode): DOMOutputSpec => {
+			const editorWidthFromGetter = Math.min(
+				config.getEditorContainerWidth().width - akEditorGutterPaddingDynamic() * 2,
+				node.attrs.width,
+			);
 			const attrs = {
 				'data-number-column': node.attrs.isNumberColumnEnabled,
 				'data-layout': node.attrs.layout,
 				'data-autosize': node.attrs.__autoSize,
 				'data-table-local-id': node.attrs.localId,
 				'data-table-width': node.attrs.width,
+				style: `width: ${node.attrs.width}px;`,
 			};
 
 			let colgroup: DOMOutputSpec = '';
@@ -56,6 +64,7 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 					'div',
 					{
 						class: 'pm-table-with-left-shadow',
+						style: 'visibility: hidden',
 					},
 				],
 				[
@@ -76,6 +85,7 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 					'div',
 					{
 						class: 'pm-table-with-right-shadow',
+						style: 'visibility: hidden',
 					},
 				],
 				[
@@ -101,16 +111,19 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 				'div',
 				{
 					'data-testid': 'table-alignment-container',
+					style: 'display: flex; justify-content: center;',
 				},
 				[
 					'div',
 					{
 						class: 'pm-table-resizer-container',
+						style: `width: ${node.attrs.width}px`,
 					},
 					[
 						'div',
 						{
 							class: 'resizer-item display-handle',
+							style: `position: relative; user-select: auto;  height: auto;  min-width: 145px; box-sizing: border-box; max-width: ${editorWidthFromGetter}px; width: ${editorWidthFromGetter}px;`,
 						},
 						[
 							'span',

package/src/ui/common-styles.ts

@@ -210,36 +210,34 @@ const stickyHeaderMarginTop = () => {
 };
 
 const viewModeSortStyles = () => {
-	if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-		return css`
-			th {
-				.${SORTING_ICON_CLASS_NAME} {
-					+ p {
-						margin-top: 0 !important;
-					}
+	return css`
+		th {
+			.${SORTING_ICON_CLASS_NAME} {
+				+ p {
+					margin-top: 0 !important;
 				}
+			}
 
-				&:has(.is-active) {
-					.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-						opacity: 1;
-					}
+			&:has(.is-active) {
+				.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+					opacity: 1;
 				}
+			}
 
-				.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-					opacity: 0;
-					&:focus {
-						opacity: 1;
-					}
+			.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+				opacity: 0;
+				&:focus {
+					opacity: 1;
 				}
+			}
 
-				&:hover {
-					.${SORTABLE_COLUMN_ICON_CLASSNAME} {
-						opacity: 1;
-					}
+			&:hover {
+				.${SORTABLE_COLUMN_ICON_CLASSNAME} {
+					opacity: 1;
 				}
 			}
-		`;
-	}
+		}
+	`;
 };
 
 const tableBorderStyles = () => {