@atlaskit/editor-plugin-table 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 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.0.1",
 	"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.0.1",
 	"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.0.1",
 	"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;

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

@@ -3,11 +3,12 @@ import { EditorView } from 'prosemirror-view';
 import { Node as PMNode } from 'prosemirror-model';
 interface TableResizerProps {
     width: number;
+    maxWidth: number;
     updateWidth: (width: number) => void;
     editorView: EditorView;
     getPos: () => number | undefined;
     node: PMNode;
     tableRef: HTMLTableElement;
 }
-export declare const TableResizer: ({ children, width, updateWidth, editorView, getPos, node, tableRef, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/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;

package/dist/types-ts4.5/plugins/table/nodeviews/TableResizer.d.ts

@@ -3,11 +3,12 @@ import { EditorView } from 'prosemirror-view';
 import { Node as PMNode } from 'prosemirror-model';
 interface TableResizerProps {
     width: number;
+    maxWidth: number;
     updateWidth: (width: number) => void;
     editorView: EditorView;
     getPos: () => number | undefined;
     node: PMNode;
     tableRef: HTMLTableElement;
 }
-export declare const TableResizer: ({ children, width, updateWidth, editorView, getPos, node, tableRef, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^26.1.0",
-    "@atlaskit/editor-common": "^74.15.0",
+    "@atlaskit/editor-common": "^74.18.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.0.5",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.5",
@@ -60,15 +60,13 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@af/editor-libra": "*",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/editor-core": "^185.9.0",
+    "@atlaskit/editor-core": "^185.11.0",
     "@atlaskit/editor-plugin-decorations": "^0.1.0",
     "@atlaskit/editor-plugin-feature-flags": "^0.1.0",
     "@atlaskit/editor-plugin-grid": "^0.1.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
-    "@atlaskit/editor-test-helpers": "^18.9.0",
-    "@atlaskit/media-integration-test-helpers": "^3.0.0",
+    "@atlaskit/editor-test-helpers": "^18.10.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -48,7 +48,6 @@ import {
 import type { TableOptions } from './types';
 import { updateOverflowShadows } from './update-overflow-shadows';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
@@ -151,7 +150,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
        * 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();
     }
 
@@ -175,9 +176,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     this.scaleTableDebounced.cancel();
     this.handleTableResizingDebounced.cancel();
     this.handleAutoSizeDebounced.cancel();
-    this.handleWindowResizeDebounced.cancel();
+    if (!getBooleanFF('platform.editor.custom-table-width')) {
+      this.handleWindowResizeDebounced.cancel();
+    }
 
-    if (this.props.allowColumnResizing) {
+    if (
+      !getBooleanFF('platform.editor.custom-table-width') &&
+      this.props.allowColumnResizing
+    ) {
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
 

package/src/plugins/table/nodeviews/TableContainer.tsx

@@ -14,6 +14,7 @@ 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';
 
 interface GetMarginLeftOpts {
   lineLength: number;
@@ -35,22 +36,21 @@ const getMarginLeft = ({ lineLength, tableWidth }: GetMarginLeftOpts) => {
 
 type InnerContainerProps = {
   className: string;
-  marginLeft: number | undefined;
-  width: number | 'inherit';
+  style?: {
+    width: number | 'inherit';
+    marginLeft: number | undefined;
+  };
   node: PMNode;
 };
 
 export const InnerContainer = forwardRef<
   HTMLDivElement,
   PropsWithChildren<InnerContainerProps>
->(({ marginLeft, className, width, node, children }, ref) => {
+>(({ className, style, node, children }, ref) => {
   return (
     <div
       ref={ref}
-      style={{
-        width,
-        marginLeft,
-      }}
+      style={style}
       className={className}
       data-number-column={node.attrs.isNumberColumnEnabled}
       data-layout={node.attrs.layout}
@@ -76,6 +76,7 @@ export const ResizableTableContainer = ({
   className,
   node,
   lineLength,
+  containerWidth,
   editorView,
   getPos,
   tableRef,
@@ -89,25 +90,32 @@ export const ResizableTableContainer = ({
         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 (
     <div
       style={{ marginLeft, width }}
@@ -116,6 +124,7 @@ export const ResizableTableContainer = ({
     >
       <TableResizer
         width={width}
+        maxWidth={maxResizerWidth}
         updateWidth={updateWidth}
         editorView={editorView}
         getPos={getPos}
@@ -126,8 +135,6 @@ export const ResizableTableContainer = ({
           ref={innerContainerRef}
           className={className}
           node={node}
-          width={width}
-          marginLeft={0}
         >
           {children}
         </InnerContainer>
@@ -188,11 +195,13 @@ export const TableContainer = ({
     <InnerContainer
       node={node}
       className={className}
-      width={tableWidth}
-      marginLeft={getMarginLeft({
-        lineLength: lineLength!,
-        tableWidth,
-      })}
+      style={{
+        width: tableWidth,
+        marginLeft: getMarginLeft({
+          lineLength: lineLength!,
+          tableWidth,
+        }),
+      }}
     >
       {children}
     </InnerContainer>

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -10,11 +10,11 @@ import {
   previewScaleTable,
   getColgroupChildrenLength,
   COLUMN_MIN_WIDTH,
-  TABLE_MAX_WIDTH,
 } from '../pm-plugins/table-resizing/utils';
 
 interface TableResizerProps {
   width: number;
+  maxWidth: number;
   updateWidth: (width: number) => void;
   editorView: EditorView;
   getPos: () => number | undefined;
@@ -27,6 +27,7 @@ const handles = { right: true };
 export const TableResizer = ({
   children,
   width,
+  maxWidth,
   updateWidth,
   editorView,
   getPos,
@@ -99,7 +100,7 @@ export const TableResizer = ({
       }}
       resizeRatio={2}
       minWidth={minColumnWidth}
-      maxWidth={TABLE_MAX_WIDTH}
+      maxWidth={maxWidth}
     >
       {children}
     </ResizerNext>

package/src/plugins/table/nodeviews/table.tsx

@@ -29,16 +29,22 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import TableComponent from './TableComponent';
 import { Props, TableOptions } from './types';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 
 type ForwardRef = (node: HTMLElement | null) => void;
 
 const tableAttributes = (node: PmNode) => {
+  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,
+    style,
   };
 };
 

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

@@ -5,6 +5,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 
 import type { DomAtPos } from 'prosemirror-utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { getTableWidth } from '../../../utils';
 import { getLayoutSize } from '../utils/misc';
@@ -152,7 +153,15 @@ export const previewScaleTable = (
 ) => {
   const { node, 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;
   }
 

package/tmp/api-report-tmp.d.ts

@@ -1,104 +0,0 @@
-## API Report File for "@atlaskit/editor-plugin-table"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
-import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import type { Command } from '@atlaskit/editor-common/types';
-import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import { TableLayout } from '@atlaskit/adf-schema';
-import type { widthPlugin } from '@atlaskit/editor-plugin-width';
-
-// @public (undocumented)
-type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
-
-// @public (undocumented)
-type PermittedLayoutsDescriptor = 'all' | TableLayout[];
-
-// @public (undocumented)
-interface PluginConfig {
-    // (undocumented)
-    advanced?: boolean;
-    // (undocumented)
-    allowAddColumnWithCustomStep?: boolean;
-    // (undocumented)
-    allowBackgroundColor?: boolean;
-    // (undocumented)
-    allowCellOptionsInFloatingToolbar?: boolean;
-    // (undocumented)
-    allowCollapse?: boolean;
-    // (undocumented)
-    allowColumnResizing?: boolean;
-    // (undocumented)
-    allowColumnSorting?: boolean;
-    // (undocumented)
-    allowControls?: boolean;
-    // (undocumented)
-    allowDistributeColumns?: boolean;
-    // (undocumented)
-    allowHeaderColumn?: boolean;
-    // (undocumented)
-    allowHeaderRow?: boolean;
-    // (undocumented)
-    allowMergeCells?: boolean;
-    // (undocumented)
-    allowNumberColumn?: boolean;
-    // (undocumented)
-    initialRenderOptimization?: boolean;
-    // (undocumented)
-    isHeaderRowRequired?: boolean;
-    // (undocumented)
-    mouseMoveOptimization?: boolean;
-    // (undocumented)
-    permittedLayouts?: PermittedLayoutsDescriptor;
-    // (undocumented)
-    stickyHeaders?: boolean;
-    // (undocumented)
-    stickyHeadersOptimization?: boolean;
-    // (undocumented)
-    tableCellOptimization?: boolean;
-    // (undocumented)
-    tableOverflowShadowsOptimization?: boolean;
-    // (undocumented)
-    tableRenderOptimization?: boolean;
-}
-
-// @public (undocumented)
-interface TablePluginOptions {
-    // (undocumented)
-    allowContextualMenu?: boolean;
-    // (undocumented)
-    breakoutEnabled?: boolean;
-    // (undocumented)
-    editorSelectionAPI?: EditorSelectionAPI;
-    // (undocumented)
-    fullWidthEnabled?: boolean;
-    // (undocumented)
-    getEditorFeatureFlags?: GetEditorFeatureFlags;
-    // (undocumented)
-    tableOptions: PluginConfig;
-    // (undocumented)
-    wasFullWidthEnabled?: boolean;
-}
-
-// @public (undocumented)
-export const tablesPlugin: NextEditorPlugin<'table', {
-    pluginConfiguration: TablePluginOptions | undefined;
-    actions: {
-        insertTable: InsertTableAction;
-    };
-    dependencies: [
-    typeof analyticsPlugin,
-    typeof contentInsertionPlugin,
-    typeof widthPlugin
-    ];
-}>;
-
-// (No @packageDocumentation comment for this package)
-
-```