@atlaskit/editor-plugin-table 1.7.3 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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
+
+- [`bdb840c6eaa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bdb840c6eaa) - Remove EditorAnalyticsAPI parameter from tables plugin as it now gets this from `editor-plugin-analytics`. This parameter is unused and the action is just to remove it.
+
+  Fix issue where internal analytics plugin was not being called correctly.
+
 ## 1.7.3
 
 ### Patch Changes

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

@@ -40,6 +40,7 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
 var tablesPlugin = function tablesPlugin(options, api) {
+  var _api$dependencies$ana;
   var editorViewRef = {
     current: null
   };
@@ -50,6 +51,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
     };
     return (_api$dependencies$wid = api === null || api === void 0 ? void 0 : api.dependencies.width.sharedState.currentState()) !== null && _api$dependencies$wid !== void 0 ? _api$dependencies$wid : defaultState;
   };
+  var editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions;
   return {
     name: 'table',
     actions: {
@@ -91,19 +93,15 @@ var tablesPlugin = function tablesPlugin(options, api) {
       var plugins = [{
         name: 'table',
         plugin: function plugin(_ref) {
-          var _api$dependencies$ana;
           var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
             dispatch = _ref.dispatch,
             portalProviderAPI = _ref.portalProviderAPI,
             eventDispatcher = _ref.eventDispatcher;
-          var _ref2 = options || {
-              editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions
-            },
+          var _ref2 = options || {},
             fullWidthEnabled = _ref2.fullWidthEnabled,
             wasFullWidthEnabled = _ref2.wasFullWidthEnabled,
             breakoutEnabled = _ref2.breakoutEnabled,
             tableOptions = _ref2.tableOptions,
-            editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
             getEditorFeatureFlags = _ref2.getEditorFeatureFlags;
           return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
         }
@@ -114,7 +112,6 @@ var tablesPlugin = function tablesPlugin(options, api) {
           var _ref4 = options || {},
             fullWidthEnabled = _ref4.fullWidthEnabled,
             tableOptions = _ref4.tableOptions,
-            editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
             getEditorFeatureFlags = _ref4.getEditorFeatureFlags;
           var _pluginConfig = (0, _createPluginConfig.pluginConfig)(tableOptions),
             allowColumnResizing = _pluginConfig.allowColumnResizing;
@@ -133,7 +130,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
       {
         name: 'tableKeymap',
         plugin: function plugin() {
-          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI);
+          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, editorAnalyticsAPI);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -145,11 +142,10 @@ var tablesPlugin = function tablesPlugin(options, api) {
         plugin: function plugin() {
           return (0, _pmPlugins.tableEditing)({
             reportFixedTable: function reportFixedTable(_ref5) {
-              var _options$editorAnalyt;
               var state = _ref5.state,
                 tr = _ref5.tr,
                 reason = _ref5.reason;
-              options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+              editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
                 action: _analytics.TABLE_ACTION.FIXED,
                 actionSubject: _analytics.ACTION_SUBJECT.TABLE,
                 actionSubjectId: null,
@@ -256,7 +252,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
             layout: layout,
             isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
             stickyHeader: stickyHeader,
-            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
+            editorAnalyticsAPI: editorAnalyticsAPI
           }) : null;
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
@@ -283,7 +279,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
             scrollableElement: popupsScrollableElement,
             hasStickyHeaders: stickyHeader && stickyHeader.sticky,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
+            editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth
           }), /*#__PURE__*/_react.default.createElement(_FloatingContextualMenu.default, {
             editorView: editorView,
@@ -292,7 +288,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
             targetCellPosition: targetCellPosition,
             isOpen: Boolean(isContextualMenuOpen),
             pluginConfig: pluginConfig,
-            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
+            editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), allowControls && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
@@ -304,7 +300,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
             scrollableElement: popupsScrollableElement,
             stickyHeaders: stickyHeader,
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
-            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
+            editorAnalyticsAPI: editorAnalyticsAPI
           }), LayoutContent);
         }
       }));
@@ -323,11 +319,10 @@ var tablesPlugin = function tablesPlugin(options, api) {
             return /*#__PURE__*/_react.default.createElement(_icons.IconTable, null);
           },
           action: function action(insert, state) {
-            var _options$editorAnalyt2;
             var tr = insert((0, _utils2.createTable)({
               schema: state.schema
             }));
-            options === null || options === void 0 ? void 0 : (_options$editorAnalyt2 = options.editorAnalyticsAPI) === null || _options$editorAnalyt2 === void 0 ? void 0 : _options$editorAnalyt2.attachAnalyticsEvent({
+            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
               action: _analytics.ACTION.INSERTED,
               actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
@@ -340,7 +335,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
           }
         }];
       },
-      floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, function () {
+      floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, function () {
         return editorViewRef.current;
       })((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
     }

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": "1.7.3",
+	"version": "2.0.1",
 	"sideEffects": false
 }

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

@@ -31,6 +31,7 @@ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const defaultGetEditorFeatureFlags = () => ({});
 const tablesPlugin = (options, api) => {
+  var _api$dependencies$ana;
   const editorViewRef = {
     current: null
   };
@@ -41,6 +42,7 @@ const tablesPlugin = (options, api) => {
     };
     return (_api$dependencies$wid = api === null || api === void 0 ? void 0 : api.dependencies.width.sharedState.currentState()) !== null && _api$dependencies$wid !== void 0 ? _api$dependencies$wid : defaultState;
   };
+  const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions;
   return {
     name: 'table',
     actions: {
@@ -85,17 +87,13 @@ const tablesPlugin = (options, api) => {
           portalProviderAPI,
           eventDispatcher
         }) => {
-          var _api$dependencies$ana;
           const {
             fullWidthEnabled,
             wasFullWidthEnabled,
             breakoutEnabled,
             tableOptions,
-            editorAnalyticsAPI,
             getEditorFeatureFlags
-          } = options || {
-            editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions
-          };
+          } = options || {};
           return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
         }
       }, {
@@ -106,7 +104,6 @@ const tablesPlugin = (options, api) => {
           const {
             fullWidthEnabled,
             tableOptions,
-            editorAnalyticsAPI,
             getEditorFeatureFlags
           } = options || {};
           const {
@@ -124,7 +121,7 @@ const tablesPlugin = (options, api) => {
       // plugin as it is currently swallowing backspace events inside tables
       {
         name: 'tableKeymap',
-        plugin: () => keymapPlugin(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI)
+        plugin: () => keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI)
       }, {
         name: 'tableSelectionKeymap',
         plugin: () => tableSelectionKeymapPlugin(options === null || options === void 0 ? void 0 : options.editorSelectionAPI)
@@ -136,8 +133,7 @@ const tablesPlugin = (options, api) => {
             tr,
             reason
           }) => {
-            var _options$editorAnalyt;
-            options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
               action: TABLE_ACTION.FIXED,
               actionSubject: ACTION_SUBJECT.TABLE,
               actionSubjectId: null,
@@ -245,7 +241,7 @@ const tablesPlugin = (options, api) => {
             layout: layout,
             isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
             stickyHeader: stickyHeader,
-            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
+            editorAnalyticsAPI: editorAnalyticsAPI
           }) : null;
           return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
@@ -272,7 +268,7 @@ const tablesPlugin = (options, api) => {
             scrollableElement: popupsScrollableElement,
             hasStickyHeaders: stickyHeader && stickyHeader.sticky,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
+            editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth
           }), /*#__PURE__*/React.createElement(FloatingContextualMenu, {
             editorView: editorView,
@@ -281,7 +277,7 @@ const tablesPlugin = (options, api) => {
             targetCellPosition: targetCellPosition,
             isOpen: Boolean(isContextualMenuOpen),
             pluginConfig: pluginConfig,
-            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
+            editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), allowControls && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
@@ -293,7 +289,7 @@ const tablesPlugin = (options, api) => {
             scrollableElement: popupsScrollableElement,
             stickyHeaders: stickyHeader,
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
-            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
+            editorAnalyticsAPI: editorAnalyticsAPI
           }), LayoutContent);
         }
       }));
@@ -310,11 +306,10 @@ const tablesPlugin = (options, api) => {
         keyshortcut: tooltip(toggleTable),
         icon: () => /*#__PURE__*/React.createElement(IconTable, null),
         action(insert, state) {
-          var _options$editorAnalyt2;
           const tr = insert(createTable({
             schema: state.schema
           }));
-          options === null || options === void 0 ? void 0 : (_options$editorAnalyt2 = options.editorAnalyticsAPI) === null || _options$editorAnalyt2 === void 0 ? void 0 : _options$editorAnalyt2.attachAnalyticsEvent({
+          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
             action: ACTION.INSERTED,
             actionSubject: ACTION_SUBJECT.DOCUMENT,
             actionSubjectId: ACTION_SUBJECT_ID.TABLE,
@@ -326,7 +321,7 @@ const tablesPlugin = (options, api) => {
           return tr;
         }
       }],
-      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

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);