@atlaskit/editor-plugin-table 7.6.14 → 7.7.1

package/dist/es2019/nodeviews/TableComponent.js

@@ -119,16 +119,12 @@ class TableComponent extends React.Component {
       const node = getNode();
       const prevAttrs = prevNode.attrs;
       const isNested = isTableNested(this.props.view.state, this.props.getPos());
-      // We only consider a layout change valid if it's done outside of an autoSize.
-      const layoutChanged = prevAttrs.layout !== node.attrs.layout && prevAttrs.__autoSize === node.attrs.__autoSize;
       const parentWidth = this.getParentNodeWidth();
       const parentWidthChanged = parentWidth && parentWidth !== this.state.parentWidth;
       const layoutSize = this.tableNodeLayoutSize(node, containerWidth.width, options);
       const hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
       const noOfColumnsChanged = tablesHaveDifferentNoOfColumns(node, prevNode);
       if (
-      // Breakout mode/layout changed
-      layoutChanged ||
       // We need to react if our parent changes
       // Scales the cols widths relative to the new parent width.
       parentWidthChanged ||
@@ -142,8 +138,7 @@ class TableComponent extends React.Component {
         // If column has been inserted/deleted avoid multi dispatch
         if (shouldScaleTable) {
           this.scaleTable({
-            parentWidth,
-            layoutChanged
+            parentWidth
           });
         }
 
@@ -151,8 +146,7 @@ class TableComponent extends React.Component {
         if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
           if (!hasTableBeenResized(prevNode)) {
             this.scaleTable({
-              parentWidth: node.attrs.width,
-              layoutChanged
+              parentWidth: node.attrs.width
             });
           }
         }
@@ -239,22 +233,17 @@ class TableComponent extends React.Component {
       }
     });
     _defineProperty(this, "handleWindowResize", () => {
-      var _node$attrs, _node$attrs2;
       const {
         getNode,
         containerWidth
       } = this.props;
       const node = getNode();
-      const prevNode = this.node;
       const layoutSize = this.tableNodeLayoutSize(node);
-      const prevAttrs = prevNode === null || prevNode === void 0 ? void 0 : prevNode.attrs;
-      const layoutChanged = (prevAttrs === null || prevAttrs === void 0 ? void 0 : prevAttrs.layout) !== (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) && (prevAttrs === null || prevAttrs === void 0 ? void 0 : prevAttrs.__autoSize) === (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.__autoSize);
       if (containerWidth.width > layoutSize) {
         return;
       }
       const parentWidth = this.getParentNodeWidth();
       this.scaleTableDebounced({
-        layoutChanged: layoutChanged,
         parentWidth: parentWidth
       });
     });
@@ -702,7 +691,6 @@ class TableComponent extends React.Component {
       node: node,
       tableRef: tableRef,
       containerWidth: containerWidth,
-      isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
       isNested: isNested,
       pluginInjectionApi: pluginInjectionApi,
       tableWrapperHeight: this.state.tableWrapperHeight,
@@ -773,10 +761,7 @@ class TableComponent extends React.Component {
     }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'absolute',
-        right: getBooleanFF('platform.editor.custom-table-width') ? `${"var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
-        }` :
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-        '22px'
+        right: "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,

package/dist/es2019/nodeviews/TableContainer.js

@@ -2,22 +2,10 @@ import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
-const getMarginLeft = (lineLength, tableWidth) => {
-  let marginLeft;
-  if (tableWidth !== 'inherit' && lineLength) {
-    const containerWidth = tableWidth;
-    if (containerWidth) {
-      marginLeft = (lineLength - containerWidth) / 2;
-    }
-  }
-  return marginLeft;
-};
 export const InnerContainer = /*#__PURE__*/forwardRef(({
   className,
   style,
@@ -130,13 +118,11 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     isWholeTableInDanger,
     pluginInjectionApi
   };
-  if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
-    tableResizerProps = {
-      ...tableResizerProps,
-      onResizeStart: onResizeStart,
-      onResizeStop: onResizeStop
-    };
-  }
+  tableResizerProps = {
+    ...tableResizerProps,
+    onResizeStart: onResizeStart,
+    onResizeStop: onResizeStop
+  };
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -162,11 +148,9 @@ export const TableContainer = ({
   node,
   className,
   containerWidth: {
-    lineLength,
     width: editorWidth
   },
   isTableResizingEnabled,
-  isBreakoutEnabled,
   editorView,
   getPos,
   tableRef,
@@ -192,15 +176,13 @@ export const TableContainer = ({
       isWholeTableInDanger: isWholeTableInDanger
     }, children);
   }
-  const tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';
   return /*#__PURE__*/React.createElement(InnerContainer, {
     node: node,
     className: classNames(className, {
       'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested
     }),
     style: {
-      width: tableWidth,
-      marginLeft: getMarginLeft(lineLength, tableWidth)
+      width: 'inherit'
     }
   }, children);
 };

package/dist/es2019/nodeviews/TableResizer.js

@@ -165,7 +165,7 @@ export const TableResizer = ({
     dispatch(tr);
     const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-    if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStart) {
+    if (onResizeStart) {
       onResizeStart();
     }
   }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
@@ -272,7 +272,7 @@ export const TableResizer = ({
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
-    if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStop) {
+    if (onResizeStop) {
       onResizeStop();
     }
     return newWidth;

package/dist/es2019/nodeviews/table.js

@@ -246,7 +246,6 @@ export default class TableView extends ReactNodeView {
 export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi) => {
   const {
     pluginConfig,
-    isBreakoutEnabled,
     isFullWidthModeEnabled,
     wasFullWidthModeEnabled,
     isTableResizingEnabled,
@@ -267,7 +266,6 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     eventDispatcher,
     getPos: getPos,
     options: {
-      isBreakoutEnabled,
       isFullWidthModeEnabled,
       wasFullWidthModeEnabled,
       isTableResizingEnabled,

package/dist/es2019/plugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { table, tableCell, tableHeader, tableRow, tableWithCustomWidth } from '@atlaskit/adf-schema';
+import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
@@ -33,8 +33,7 @@ import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
-import LayoutButton from './ui/LayoutButton';
-import { createTableWithWidth, isLayoutSupported } from './utils';
+import { createTableWithWidth } from './utils';
 const defaultGetEditorFeatureFlags = () => ({});
 
 // TODO: duplicating type instead of importing media plugin causing a circular dependency
@@ -107,10 +106,9 @@ const tablesPlugin = ({
       insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes() {
-      const tableNode = options !== null && options !== void 0 && options.tableResizingEnabled ? tableWithCustomWidth : table;
       return [{
         name: 'table',
-        node: tableNode
+        node: table
       }, {
         name: 'tableHeader',
         node: tableHeader
@@ -136,13 +134,12 @@ const tablesPlugin = ({
             fullWidthEnabled,
             wasFullWidthEnabled,
             tableResizingEnabled,
-            breakoutEnabled,
             tableOptions,
             getEditorFeatureFlags,
             dragAndDropEnabled,
             isTableScalingEnabled
           } = options || {};
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled);
         }
       }, {
         name: 'tablePMColResizing',
@@ -305,9 +302,6 @@ const tablesPlugin = ({
           tableWidthPluginState,
           dragAndDropState
         }) => {
-          const {
-            state
-          } = editorView;
           const isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           const isResizing = isColumnResizing || isTableResizing;
@@ -316,7 +310,6 @@ const tablesPlugin = ({
             tablePos,
             targetCellPosition,
             isContextualMenuOpen,
-            layout,
             tableRef,
             pluginConfig,
             insertColumnButtonIndex,
@@ -330,17 +323,6 @@ const tablesPlugin = ({
             allowControls
           } = pluginConfig;
           const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
-          const LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
-            editorView: editorView,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            targetRef: tableWrapperTarget,
-            layout: layout,
-            isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
-            stickyHeader: stickyHeader,
-            editorAnalyticsAPI: editorAnalyticsAPI
-          }) : null;
           return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
@@ -350,7 +332,6 @@ const tablesPlugin = ({
             scrollableElement: popupsScrollableElement,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             isContextualMenuOpen: isContextualMenuOpen,
-            layout: layout,
             stickyHeader: stickyHeader,
             tableWrapper: tableWrapperTarget
           }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
@@ -403,7 +384,7 @@ const tablesPlugin = ({
             stickyHeaders: stickyHeader,
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorAnalyticsAPI: editorAnalyticsAPI
-          }), LayoutContent);
+          }));
         }
       }));
     },

package/dist/es2019/pm-plugins/main.js

@@ -22,7 +22,7 @@ import { isHeaderRowRequired } from '../utils/paste';
 import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) => {
   var _accessibilityUtils;
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -30,7 +30,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
     isFullWidthModeEnabled: fullWidthModeEnabled,
-    isBreakoutEnabled: breakoutEnabled,
     wasFullWidthModeEnabled: previousFullWidthModeEnabled,
     isTableResizingEnabled: tableResizingEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,

package/dist/es2019/pm-plugins/table-resizing/event-handlers.js

@@ -1,7 +1,5 @@
 import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
-import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -13,7 +11,7 @@ import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
-import { currentColWidth, getLayoutSize, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
+import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
 export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) => {
   const {
     state,
@@ -47,25 +45,13 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   if (dom && dom.nodeName !== 'TABLE') {
     dom = dom.closest('table');
   }
-  let maxSize;
-  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    const containerWidth = getEditorContainerWidth();
-    const parentWidth = getParentNodeWidth(start, state, containerWidth);
-    maxSize = getBooleanFF('platform.editor.custom-table-width') ? parentWidth ||
-    // its safe to reference table width from node as this will not have changed
-    originalTable.attrs.width || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {}) : parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
-    if (originalTable.attrs.isNumberColumnEnabled) {
-      maxSize -= akEditorTableNumberColumnWidth;
-    }
-  } else {
-    maxSize = getTableMaxWidth({
-      table: originalTable,
-      tableStart: start,
-      state,
-      layout: originalTable.attrs.layout,
-      getEditorContainerWidth
-    });
-  }
+  const maxSize = getTableMaxWidth({
+    table: originalTable,
+    tableStart: start,
+    state,
+    layout: originalTable.attrs.layout,
+    getEditorContainerWidth
+  });
   const shouldScale = tableDepth === 0 && isTableScalingEnabled;
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
@@ -162,6 +148,11 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
         const resizedDelta = clientX - startX;
         tr = updateColumnWidths(newResizeState, table, start)(tr);
+
+        // console.log('debug newResizeState=', newResizeState);
+        if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+          tr.setNodeAttribute(tablePos, 'width', newResizeState.tableWidth);
+        }
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
           editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({

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

@@ -2,7 +2,6 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableScalingPercent } from './misc';
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
@@ -13,62 +12,40 @@ import { getTableScalingPercent } from './misc';
 export const getColWidthFix = (colwidth, tableColumnCount) => colwidth - 1 / tableColumnCount;
 export const generateColgroup = (table, tableRef) => {
   const cols = [];
-  if (getBooleanFF('platform.editor.custom-table-width')) {
-    const map = TableMap.get(table);
-    table.content.firstChild.content.forEach(cell => {
-      const colspan = cell.attrs.colspan || 1;
-      if (Array.isArray(cell.attrs.colwidth)) {
-        // We slice here to guard against our colwidth array having more entries
-        // Than the we actually span. We'll patch the document at a later point.
-        if (tableRef) {
-          const scalePercent = getTableScalingPercent(table, tableRef);
-          cell.attrs.colwidth.slice(0, colspan).forEach(width => {
-            const fixedColWidth = getColWidthFix(width, map.width);
-            const scaledWidth = fixedColWidth * scalePercent;
-            const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
-            cols.push(['col', {
-              style: `width: ${finalWidth}px;`
-            }]);
-          });
-        } else {
-          cell.attrs.colwidth.slice(0, colspan).forEach(width => {
-            cols.push(['col', {
-              style: `width: ${getColWidthFix(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, map.width)}px;`
-            }]);
-          });
-        }
-      } else {
-        // When we have merged cells on the first row (firstChild),
-        // We want to ensure we're creating the appropriate amount of
-        // cols the table still has.
-        cols.push(...Array.from({
-          length: colspan
-        }, _ => ['col', {
-          style: `width: ${tableCellMinWidth}px;`
-        }]));
-      }
-    });
-  } else {
-    table.content.firstChild.content.forEach(cell => {
-      const colspan = cell.attrs.colspan || 1;
-      if (Array.isArray(cell.attrs.colwidth)) {
-        // We slice here to guard against our colwidth array having more entries
-        // Than the we actually span. We'll patch the document at a later point.
+  const map = TableMap.get(table);
+  table.content.firstChild.content.forEach(cell => {
+    const colspan = cell.attrs.colspan || 1;
+    if (Array.isArray(cell.attrs.colwidth)) {
+      // We slice here to guard against our colwidth array having more entries
+      // Than the we actually span. We'll patch the document at a later point.
+      if (tableRef) {
+        const scalePercent = getTableScalingPercent(table, tableRef);
         cell.attrs.colwidth.slice(0, colspan).forEach(width => {
-          cols.push(['col', width ? {
-            style: `width: ${width}px;`
-          } : {}]);
+          const fixedColWidth = getColWidthFix(width, map.width);
+          const scaledWidth = fixedColWidth * scalePercent;
+          const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+          cols.push(['col', {
+            style: `width: ${finalWidth}px;`
+          }]);
         });
       } else {
-        // When we have merged cells on the first row (firstChild),
-        // We want to ensure we're creating the appropriate amount of
-        // cols the table still has.
-        cols.push(...Array.from({
-          length: colspan
-        }, _ => ['col', {}]));
+        cell.attrs.colwidth.slice(0, colspan).forEach(width => {
+          cols.push(['col', {
+            style: `width: ${getColWidthFix(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, map.width)}px;`
+          }]);
+        });
       }
-    });
-  }
+    } else {
+      // When we have merged cells on the first row (firstChild),
+      // We want to ensure we're creating the appropriate amount of
+      // cols the table still has.
+      cols.push(...Array.from({
+        length: colspan
+      }, _ => ['col', {
+        style: `width: ${tableCellMinWidth}px;`
+      }]));
+    }
+  });
   return cols;
 };
 export const insertColgroupFromNode = (tableRef, table, isTableScalingEnabled = false, shouldRemove = true) => {

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

@@ -3,7 +3,6 @@ import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-common/ui';
 import { calcTableColumnWidths, containsClassName } from '@atlaskit/editor-common/utils';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { hasTableBeenResized } from './colgroup';
 import { MAX_SCALING_PERCENT } from './consts';
 
@@ -69,7 +68,7 @@ export const getTableMaxWidth = ({
 }) => {
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
-  let maxWidth = getBooleanFF('platform.editor.custom-table-width') ? parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {}) : parentWidth || getLayoutSize(layout, containerWidth.width, {});
+  let maxWidth = parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {});
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;
   }

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

@@ -1,16 +1,40 @@
 // Resize a given column by an amount from the current state
 
-import { getTableScalingPercent } from './misc';
-import { growColumn, shrinkColumn } from './resize-logic';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
+import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false) => {
   let scalePercent = 1;
-  let resizeAmount = amount;
+  let resizeAmount = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? amount * 2 : amount;
   if (isTableScalingEnabled) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  const newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  const newState = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateAffectedColumn(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
   updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
+  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+    // use the difference in width from affected column to update overall table width
+    const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+    updateTable(delta, tableRef, tableNode);
+    return {
+      ...newState,
+      tableWidth: resizeState.tableWidth + delta
+    };
+  }
   return newState;
+};
+const updateTable = (resizeAmount, tableRef, tableNode
+// isTableScalingEnabled: boolean,
+) => {
+  const currentWidth = getTableContainerElementWidth(tableNode);
+  const resizingContainer = tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
+  const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
+  if (resizingContainer && resizingItem) {
+    const newWidth = `${currentWidth + resizeAmount}px`;
+    tableRef.style.width = newWidth;
+    resizingContainer.style.width = newWidth;
+    resizingItem.style.width = newWidth;
+  }
 };

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

@@ -193,4 +193,24 @@ function getCandidates(state, destIdx, amount) {
 
   // only consider rows after the selected column in the direction of resize
   return amount < 0 ? candidates.slice(0, destIdx) : candidates.slice(destIdx + 1);
+}
+
+/**
+ * Update the given column based on resizeAmount, maintaining all other columns
+ */
+export function updateAffectedColumn(resizeState, colIndex, resizeAmount) {
+  const updatedCols = resizeState.cols.map((col, index) => {
+    if (index === colIndex) {
+      const newWidth = Math.max(col.width + resizeAmount, col.minWidth);
+      return {
+        ...col,
+        width: newWidth
+      };
+    }
+    return col;
+  });
+  return {
+    ...resizeState,
+    cols: updatedCols
+  };
 }

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

@@ -1,7 +1,6 @@
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getSelectedTableInfo } from '../../../utils';
 import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
@@ -74,33 +73,24 @@ export const getResizeState = ({
 // updates Colgroup DOM node with new widths
 export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled) => {
   const cols = tableRef.querySelectorAll('col');
-  if (getBooleanFF('platform.editor.custom-table-width')) {
-    const columnsCount = cols.length;
-    if (isTableScalingEnabled && tableNode) {
-      const scalePercent = getTableScalingPercent(tableNode, tableRef);
-      state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
-      .forEach((column, i) => {
-        const fixedColWidth = getColWidthFix(column.width, columnsCount);
-        const scaledWidth = fixedColWidth * scalePercent;
-        const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
-        // we aren't handling the remaining pixels here when the 48px min width is reached
-        if (cols[i]) {
-          cols[i].style.width = `${finalWidth}px`;
-        }
-      });
-    } else {
-      state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
-      .forEach((column, i) => {
-        if (cols[i]) {
-          cols[i].style.width = `${getColWidthFix(column.width, columnsCount)}px`;
-        }
-      });
-    }
+  const columnsCount = cols.length;
+  if (isTableScalingEnabled && tableNode) {
+    const scalePercent = getTableScalingPercent(tableNode, tableRef);
+    state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
+    .forEach((column, i) => {
+      const fixedColWidth = getColWidthFix(column.width, columnsCount);
+      const scaledWidth = fixedColWidth * scalePercent;
+      const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+      // we aren't handling the remaining pixels here when the 48px min width is reached
+      if (cols[i]) {
+        cols[i].style.width = `${finalWidth}px`;
+      }
+    });
   } else {
     state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
     .forEach((column, i) => {
       if (cols[i]) {
-        cols[i].style.width = `${column.width}px`;
+        cols[i].style.width = `${getColWidthFix(column.width, columnsCount)}px`;
       }
     });
   }

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

@@ -11,28 +11,18 @@ import { syncStickyRowToTable } from './dom';
 // Base function to trigger the actual scale on a table node.
 // Will only resize/scale if a table has been previously resized.
 export const scale = (tableRef, options, domAtPos, isTableScalingEnabled = false) => {
-  /**
-   * isBreakoutEnabled === true -> default center aligned
-   * isBreakoutEnabled === false -> full width mode
-   */
-
   const {
     node,
     containerWidth,
     previousContainerWidth,
     prevNode,
     start,
-    isBreakoutEnabled,
     layoutChanged,
     isTableResizingEnabled
   } = options;
-  const maxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(node.attrs.layout, containerWidth, {
-    isBreakoutEnabled
-  });
+  const maxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(node.attrs.layout, containerWidth, {});
   const prevTableWidth = getTableWidth(prevNode);
-  const previousMaxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
-    isBreakoutEnabled
-  });
+  const previousMaxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {});
   let newWidth = maxSize;
 
   // adjust table width if layout is updated

package/dist/es2019/reducer.js

@@ -29,11 +29,6 @@ export default ((pluginState, action) => {
         ...action.data,
         isContextualMenuOpen: false
       };
-    case 'SET_TABLE_LAYOUT':
-      return {
-        ...pluginState,
-        ...action.data
-      };
     case 'TOGGLE_CONTEXTUAL_MENU':
       return {
         ...pluginState,