@atlaskit/editor-plugin-table 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 2.1.0
+
+### Minor Changes
+
+- [`48ebe1fa732`](https://bitbucket.org/atlassian/atlassian-frontend/commits/48ebe1fa732) - [ED-18895] Moved table integration tests to dedicated editor plugin test package to avoid circular dependencies
+
+## 2.0.1
+
+### Patch Changes
+
+- [`802453ec412`](https://bitbucket.org/atlassian/atlassian-frontend/commits/802453ec412) - [ux] update how table respond to external width changes under `platform.editor.custom-table-width` feature flag
+- Updated dependencies
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -284,7 +284,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
          * We no longer use `containerWidth` as a variable to determine an update for table resizing (avoids unnecessary updates).
          * Instead we use the resize event to only trigger updates when necessary.
          */
-        window.addEventListener('resize', this.handleWindowResizeDebounced);
+        if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
+          window.addEventListener('resize', this.handleWindowResizeDebounced);
+        }
         this.handleTableResizingDebounced();
       }
       var currentStickyState = _stickyHeaders.pluginKey.getState(this.props.view.state);
@@ -303,8 +305,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       this.scaleTableDebounced.cancel();
       this.handleTableResizingDebounced.cancel();
       this.handleAutoSizeDebounced.cancel();
-      this.handleWindowResizeDebounced.cancel();
-      if (this.props.allowColumnResizing) {
+      if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
+        this.handleWindowResizeDebounced.cancel();
+      }
+      if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && this.props.allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
       if (this.overflowShadowsObserver) {

package/dist/cjs/plugins/table/nodeviews/TableContainer.js

@@ -11,6 +11,7 @@ var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _types = require("../types");
 var _TableResizer = require("./TableResizer");
+var _utils = require("../pm-plugins/table-resizing/utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var getMarginLeft = function getMarginLeft(_ref) {
@@ -26,17 +27,13 @@ var getMarginLeft = function getMarginLeft(_ref) {
   return marginLeft;
 };
 var InnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var marginLeft = _ref2.marginLeft,
-    className = _ref2.className,
-    width = _ref2.width,
+  var className = _ref2.className,
+    style = _ref2.style,
     node = _ref2.node,
     children = _ref2.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    style: {
-      width: width,
-      marginLeft: marginLeft
-    },
+    style: style,
     className: className,
     "data-number-column": node.attrs.isNumberColumnEnabled,
     "data-layout": node.attrs.layout,
@@ -49,6 +46,7 @@ var ResizableTableContainer = function ResizableTableContainer(_ref3) {
     className = _ref3.className,
     node = _ref3.node,
     lineLength = _ref3.lineLength,
+    containerWidth = _ref3.containerWidth,
     editorView = _ref3.editorView,
     getPos = _ref3.getPos,
     tableRef = _ref3.tableRef;
@@ -58,19 +56,24 @@ var ResizableTableContainer = function ResizableTableContainer(_ref3) {
     if (!containerRef.current || !innerContainerRef.current) {
       return;
     }
-    innerContainerRef.current.style.width = "".concat(width, "px");
     var marginLeft = getMarginLeft({
       lineLength: lineLength,
       tableWidth: width
     });
-    containerRef.current.style.width = "".concat(width, "px");
-    containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+    if (marginLeft) {
+      containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+    }
   }, [lineLength]);
-  var width = (0, _nodeWidth.getTableContainerWidth)(node);
+  var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
+
+  // 76 is currently an accepted padding value considering the spacing for resizer handle
+  var responsiveContainerWidth = containerWidth - 76;
+  var width = Math.min(tableWidth, responsiveContainerWidth);
   var marginLeft = getMarginLeft({
     lineLength: lineLength,
     tableWidth: width
   });
+  var maxResizerWidth = Math.min(responsiveContainerWidth, _utils.TABLE_MAX_WIDTH);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginLeft: marginLeft,
@@ -80,6 +83,7 @@ var ResizableTableContainer = function ResizableTableContainer(_ref3) {
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, {
     width: width,
+    maxWidth: maxResizerWidth,
     updateWidth: updateWidth,
     editorView: editorView,
     getPos: getPos,
@@ -88,9 +92,7 @@ var ResizableTableContainer = function ResizableTableContainer(_ref3) {
   }, /*#__PURE__*/_react.default.createElement(InnerContainer, {
     ref: innerContainerRef,
     className: className,
-    node: node,
-    width: width,
-    marginLeft: 0
+    node: node
   }, children)));
 };
 exports.ResizableTableContainer = ResizableTableContainer;
@@ -121,11 +123,13 @@ var TableContainer = function TableContainer(_ref4) {
   return /*#__PURE__*/_react.default.createElement(InnerContainer, {
     node: node,
     className: className,
-    width: tableWidth,
-    marginLeft: getMarginLeft({
-      lineLength: lineLength,
-      tableWidth: tableWidth
-    })
+    style: {
+      width: tableWidth,
+      marginLeft: getMarginLeft({
+        lineLength: lineLength,
+        tableWidth: tableWidth
+      })
+    }
   }, children);
 };
 exports.TableContainer = TableContainer;

package/dist/cjs/plugins/table/nodeviews/TableResizer.js

@@ -18,6 +18,7 @@ var handles = {
 var TableResizer = function TableResizer(_ref) {
   var children = _ref.children,
     width = _ref.width,
+    maxWidth = _ref.maxWidth,
     updateWidth = _ref.updateWidth,
     editorView = _ref.editorView,
     getPos = _ref.getPos,
@@ -70,7 +71,7 @@ var TableResizer = function TableResizer(_ref) {
     },
     resizeRatio: 2,
     minWidth: minColumnWidth,
-    maxWidth: _utils.TABLE_MAX_WIDTH
+    maxWidth: maxWidth
   }, children);
 };
 exports.TableResizer = TableResizer;

package/dist/cjs/plugins/table/nodeviews/table.js

@@ -26,15 +26,19 @@ var _tableResizing = require("../pm-plugins/table-resizing");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var tableAttributes = function tableAttributes(node) {
+  var style = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "width: ".concat((0, _nodeWidth.getTableContainerWidth)(node), "px") : undefined;
   return {
     '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: style
   };
 };
 var toDOM = function toDOM(node, props) {

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

@@ -10,6 +10,7 @@ exports.scaleWithParent = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../../../utils");
 var _misc = require("../utils/misc");
 var _resizeLogic = require("../utils/resize-logic");
@@ -112,7 +113,13 @@ var previewScaleTable = function previewScaleTable(tableRef, options, domAtPos)
   var node = options.node,
     start = options.start,
     parentWidth = options.parentWidth;
-  if (!tableRef || !(0, _colgroup.hasTableBeenResized)(node)) {
+  if (!tableRef) {
+    return;
+  }
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && parentWidth) {
+    tableRef.style.width = "".concat(parentWidth, "px");
+  }
+  if (!(0, _colgroup.hasTableBeenResized)(node)) {
     return;
   }
   var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos) : scale(tableRef, options, domAtPos);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -281,7 +281,9 @@ class TableComponent extends React.Component {
        * We no longer use `containerWidth` as a variable to determine an update for table resizing (avoids unnecessary updates).
        * Instead we use the resize event to only trigger updates when necessary.
        */
-      window.addEventListener('resize', this.handleWindowResizeDebounced);
+      if (!getBooleanFF('platform.editor.custom-table-width')) {
+        window.addEventListener('resize', this.handleWindowResizeDebounced);
+      }
       this.handleTableResizingDebounced();
     }
     const currentStickyState = stickyHeadersPluginKey.getState(this.props.view.state);
@@ -298,8 +300,10 @@ class TableComponent extends React.Component {
     this.scaleTableDebounced.cancel();
     this.handleTableResizingDebounced.cancel();
     this.handleAutoSizeDebounced.cancel();
-    this.handleWindowResizeDebounced.cancel();
-    if (this.props.allowColumnResizing) {
+    if (!getBooleanFF('platform.editor.custom-table-width')) {
+      this.handleWindowResizeDebounced.cancel();
+    }
+    if (!getBooleanFF('platform.editor.custom-table-width') && this.props.allowColumnResizing) {
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
     if (this.overflowShadowsObserver) {

package/dist/es2019/plugins/table/nodeviews/TableContainer.js

@@ -4,6 +4,7 @@ import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
+import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 const getMarginLeft = ({
   lineLength,
   tableWidth
@@ -18,18 +19,14 @@ const getMarginLeft = ({
   return marginLeft;
 };
 export const InnerContainer = /*#__PURE__*/forwardRef(({
-  marginLeft,
   className,
-  width,
+  style,
   node,
   children
 }, ref) => {
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    style: {
-      width,
-      marginLeft
-    },
+    style: style,
     className: className,
     "data-number-column": node.attrs.isNumberColumnEnabled,
     "data-layout": node.attrs.layout,
@@ -41,6 +38,7 @@ export const ResizableTableContainer = ({
   className,
   node,
   lineLength,
+  containerWidth,
   editorView,
   getPos,
   tableRef
@@ -51,19 +49,24 @@ export const ResizableTableContainer = ({
     if (!containerRef.current || !innerContainerRef.current) {
       return;
     }
-    innerContainerRef.current.style.width = `${width}px`;
     const marginLeft = getMarginLeft({
       lineLength,
       tableWidth: width
     });
-    containerRef.current.style.width = `${width}px`;
-    containerRef.current.style.marginLeft = `${marginLeft}px`;
+    if (marginLeft) {
+      containerRef.current.style.marginLeft = `${marginLeft}px`;
+    }
   }, [lineLength]);
-  const width = getTableContainerWidth(node);
+  const tableWidth = getTableContainerWidth(node);
+
+  // 76 is currently an accepted padding value considering the spacing for resizer handle
+  const responsiveContainerWidth = containerWidth - 76;
+  const width = Math.min(tableWidth, responsiveContainerWidth);
   const marginLeft = getMarginLeft({
     lineLength,
     tableWidth: width
   });
+  const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       marginLeft,
@@ -73,6 +76,7 @@ export const ResizableTableContainer = ({
     ref: containerRef
   }, /*#__PURE__*/React.createElement(TableResizer, {
     width: width,
+    maxWidth: maxResizerWidth,
     updateWidth: updateWidth,
     editorView: editorView,
     getPos: getPos,
@@ -81,9 +85,7 @@ export const ResizableTableContainer = ({
   }, /*#__PURE__*/React.createElement(InnerContainer, {
     ref: innerContainerRef,
     className: className,
-    node: node,
-    width: width,
-    marginLeft: 0
+    node: node
   }, children)));
 };
 export const TableContainer = ({
@@ -115,10 +117,12 @@ export const TableContainer = ({
   return /*#__PURE__*/React.createElement(InnerContainer, {
     node: node,
     className: className,
-    width: tableWidth,
-    marginLeft: getMarginLeft({
-      lineLength: lineLength,
-      tableWidth
-    })
+    style: {
+      width: tableWidth,
+      marginLeft: getMarginLeft({
+        lineLength: lineLength,
+        tableWidth
+      })
+    }
   }, children);
 };

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import rafSchd from 'raf-schd';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
+import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WIDTH } from '../pm-plugins/table-resizing/utils';
 const handles = {
   right: true
 };
 export const TableResizer = ({
   children,
   width,
+  maxWidth,
   updateWidth,
   editorView,
   getPos,
@@ -62,6 +63,6 @@ export const TableResizer = ({
     },
     resizeRatio: 2,
     minWidth: minColumnWidth,
-    maxWidth: TABLE_MAX_WIDTH
+    maxWidth: maxWidth
   }, children);
 };

package/dist/es2019/plugins/table/nodeviews/table.js

@@ -10,13 +10,17 @@ import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizin
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import TableComponent from './TableComponent';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 const tableAttributes = node => {
+  const style = getBooleanFF('platform.editor.custom-table-width') ? `width: ${getTableContainerWidth(node)}px` : undefined;
   return {
     '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
   };
 };
 const toDOM = (node, props) => {

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

@@ -1,5 +1,6 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableWidth } from '../../../utils';
 import { getLayoutSize } from '../utils/misc';
 import { reduceSpace } from '../utils/resize-logic';
@@ -106,7 +107,13 @@ export const previewScaleTable = (tableRef, options, domAtPos) => {
     start,
     parentWidth
   } = options;
-  if (!tableRef || !hasTableBeenResized(node)) {
+  if (!tableRef) {
+    return;
+  }
+  if (getBooleanFF('platform.editor.custom-table-width') && parentWidth) {
+    tableRef.style.width = `${parentWidth}px`;
+  }
+  if (!hasTableBeenResized(node)) {
     return;
   }
   const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos) : scale(tableRef, options, domAtPos);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -278,7 +278,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
          * We no longer use `containerWidth` as a variable to determine an update for table resizing (avoids unnecessary updates).
          * Instead we use the resize event to only trigger updates when necessary.
          */
-        window.addEventListener('resize', this.handleWindowResizeDebounced);
+        if (!getBooleanFF('platform.editor.custom-table-width')) {
+          window.addEventListener('resize', this.handleWindowResizeDebounced);
+        }
         this.handleTableResizingDebounced();
       }
       var currentStickyState = stickyHeadersPluginKey.getState(this.props.view.state);
@@ -297,8 +299,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       this.scaleTableDebounced.cancel();
       this.handleTableResizingDebounced.cancel();
       this.handleAutoSizeDebounced.cancel();
-      this.handleWindowResizeDebounced.cancel();
-      if (this.props.allowColumnResizing) {
+      if (!getBooleanFF('platform.editor.custom-table-width')) {
+        this.handleWindowResizeDebounced.cancel();
+      }
+      if (!getBooleanFF('platform.editor.custom-table-width') && this.props.allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
       if (this.overflowShadowsObserver) {

package/dist/esm/plugins/table/nodeviews/TableContainer.js

@@ -4,6 +4,7 @@ import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
+import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 var getMarginLeft = function getMarginLeft(_ref) {
   var lineLength = _ref.lineLength,
     tableWidth = _ref.tableWidth;
@@ -17,17 +18,13 @@ var getMarginLeft = function getMarginLeft(_ref) {
   return marginLeft;
 };
 export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var marginLeft = _ref2.marginLeft,
-    className = _ref2.className,
-    width = _ref2.width,
+  var className = _ref2.className,
+    style = _ref2.style,
     node = _ref2.node,
     children = _ref2.children;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    style: {
-      width: width,
-      marginLeft: marginLeft
-    },
+    style: style,
     className: className,
     "data-number-column": node.attrs.isNumberColumnEnabled,
     "data-layout": node.attrs.layout,
@@ -39,6 +36,7 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref3) {
     className = _ref3.className,
     node = _ref3.node,
     lineLength = _ref3.lineLength,
+    containerWidth = _ref3.containerWidth,
     editorView = _ref3.editorView,
     getPos = _ref3.getPos,
     tableRef = _ref3.tableRef;
@@ -48,19 +46,24 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref3) {
     if (!containerRef.current || !innerContainerRef.current) {
       return;
     }
-    innerContainerRef.current.style.width = "".concat(width, "px");
     var marginLeft = getMarginLeft({
       lineLength: lineLength,
       tableWidth: width
     });
-    containerRef.current.style.width = "".concat(width, "px");
-    containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+    if (marginLeft) {
+      containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+    }
   }, [lineLength]);
-  var width = getTableContainerWidth(node);
+  var tableWidth = getTableContainerWidth(node);
+
+  // 76 is currently an accepted padding value considering the spacing for resizer handle
+  var responsiveContainerWidth = containerWidth - 76;
+  var width = Math.min(tableWidth, responsiveContainerWidth);
   var marginLeft = getMarginLeft({
     lineLength: lineLength,
     tableWidth: width
   });
+  var maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       marginLeft: marginLeft,
@@ -70,6 +73,7 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref3) {
     ref: containerRef
   }, /*#__PURE__*/React.createElement(TableResizer, {
     width: width,
+    maxWidth: maxResizerWidth,
     updateWidth: updateWidth,
     editorView: editorView,
     getPos: getPos,
@@ -78,9 +82,7 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref3) {
   }, /*#__PURE__*/React.createElement(InnerContainer, {
     ref: innerContainerRef,
     className: className,
-    node: node,
-    width: width,
-    marginLeft: 0
+    node: node
   }, children)));
 };
 export var TableContainer = function TableContainer(_ref4) {
@@ -110,10 +112,12 @@ export var TableContainer = function TableContainer(_ref4) {
   return /*#__PURE__*/React.createElement(InnerContainer, {
     node: node,
     className: className,
-    width: tableWidth,
-    marginLeft: getMarginLeft({
-      lineLength: lineLength,
-      tableWidth: tableWidth
-    })
+    style: {
+      width: tableWidth,
+      marginLeft: getMarginLeft({
+        lineLength: lineLength,
+        tableWidth: tableWidth
+      })
+    }
   }, children);
 };

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -4,13 +4,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import rafSchd from 'raf-schd';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
+import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WIDTH } from '../pm-plugins/table-resizing/utils';
 var handles = {
   right: true
 };
 export var TableResizer = function TableResizer(_ref) {
   var children = _ref.children,
     width = _ref.width,
+    maxWidth = _ref.maxWidth,
     updateWidth = _ref.updateWidth,
     editorView = _ref.editorView,
     getPos = _ref.getPos,
@@ -63,6 +64,6 @@ export var TableResizer = function TableResizer(_ref) {
     },
     resizeRatio: 2,
     minWidth: minColumnWidth,
-    maxWidth: TABLE_MAX_WIDTH
+    maxWidth: maxWidth
   }, children);
 };

package/dist/esm/plugins/table/nodeviews/table.js

@@ -21,13 +21,17 @@ import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizin
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import TableComponent from './TableComponent';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 var tableAttributes = function tableAttributes(node) {
+  var style = getBooleanFF('platform.editor.custom-table-width') ? "width: ".concat(getTableContainerWidth(node), "px") : undefined;
   return {
     '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: style
   };
 };
 var toDOM = function toDOM(node, props) {

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

@@ -3,6 +3,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableWidth } from '../../../utils';
 import { getLayoutSize } from '../utils/misc';
 import { reduceSpace } from '../utils/resize-logic';
@@ -101,7 +102,13 @@ export var previewScaleTable = function previewScaleTable(tableRef, options, dom
   var node = options.node,
     start = options.start,
     parentWidth = options.parentWidth;
-  if (!tableRef || !hasTableBeenResized(node)) {
+  if (!tableRef) {
+    return;
+  }
+  if (getBooleanFF('platform.editor.custom-table-width') && parentWidth) {
+    tableRef.style.width = "".concat(parentWidth, "px");
+  }
+  if (!hasTableBeenResized(node)) {
     return;
   }
   var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos) : scale(tableRef, options, domAtPos);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"sideEffects": false
 }

package/dist/types/plugins/table/nodeviews/TableContainer.d.ts

@@ -4,8 +4,10 @@ import { EditorView } from 'prosemirror-view';
 import { EditorContainerWidth } from '@atlaskit/editor-common/types';
 type InnerContainerProps = {
     className: string;
-    marginLeft: number | undefined;
-    width: number | 'inherit';
+    style?: {
+        width: number | 'inherit';
+        marginLeft: number | undefined;
+    };
     node: PMNode;
 };
 export declare const InnerContainer: React.ForwardRefExoticComponent<InnerContainerProps & {
@@ -20,7 +22,7 @@ type ResizableTableContainerProps = {
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
 };
-export declare const ResizableTableContainer: ({ children, className, node, lineLength, editorView, getPos, tableRef, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
+export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
 type TableContainerProps = {
     node: PMNode;
     className: string;