@atlaskit/editor-plugin-table 7.13.0 → 7.13.2

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

@@ -11,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, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
+import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
 export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) => {
   const {
     state,
@@ -148,11 +148,14 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
           shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
-        const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
         const resizedDelta = clientX - startX;
-        tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+          const newResizeState = resizeColumnAndTable(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+        } else {
+          const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
@@ -228,7 +231,11 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    } else {
+      resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    }
     updateControls()(state);
   }
   window.addEventListener('mouseup', finish);

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

@@ -6,5 +6,5 @@ export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bu
 export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth, getTableElementWidth, getTableContainerElementWidth } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT } from './consts';

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

@@ -98,4 +98,11 @@ export const getTableScalingPercent = (table, tableRef) => {
   let scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
   return Math.min(scalePercent, 1);
+};
+export const getStaticTableScalingPercent = (table, tableRenderWidth) => {
+  const tableWidth = getTableContainerElementWidth(table);
+  // minus 1 here to avoid any 1px scroll in Firefox
+  let scalePercent = (tableRenderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
 };

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

@@ -1,53 +1,68 @@
 // Resize a given column by an amount from the current state
 
-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) => {
-  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   let scalePercent = 1;
-  let resizeAmount;
-  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-    var _tableRef$closest;
-    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
-    const tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    const tableContainerWidth = tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
-    const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
-    resizeAmount = amount * 2;
-    if (isOverflowed) {
-      resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
-    } else {
-      resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
-    }
-  } else {
-    resizeAmount = amount;
-  }
-
-  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
-  if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+  let resizeAmount = amount;
+  if (isTableScalingEnabled) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  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;
-  getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateColgroup(newState, tableRef, tableNode, false) : 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
-    };
-  }
+  const newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
   return newState;
 };
-const updateTable = (resizeAmount, tableRef, tableNode) => {
+
+// try not scale table during resize
+export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, originalTableWidth) => {
+  var _tableRef$closest;
+  // TODO: can we use document state, and apply scaling factor?
+  const tableWidth = tableRef.clientWidth;
+  const tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+  const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
+  let resizeAmount = amount * 2;
+
+  // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
+  // let scalePercent = 1;
+  // if (isTableScalingEnabled) {
+  // import from ./misc
+  //   scalePercent = getStaticTableScalingPercent(
+  //     tableNode,
+  //     originalTableWidth || resizeState.maxSize,
+  //   );
+  //   resizeAmount = amount / scalePercent;
+  // }
+
+  // need to look at the resize amount and try to adjust the colgroups
+  if (isOverflowed) {
+    resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+  } else {
+    resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
+  }
+  const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
+
+  // this function only updates the colgroup in DOM, it reverses the scalePercent
+  // todo: change isScalingEnabled to true when reimplementing scaling
+  updateColgroup(newState, tableRef, tableNode, false);
+
+  // use the difference in width from affected column to update overall table width
+  const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+  if (!isOverflowed) {
+    updateTablePreview(delta, tableRef, tableNode);
+  }
+  return {
+    ...newState,
+    tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta
+  };
+};
+const updateTablePreview = (resizeAmount, tableRef, tableNode) => {
   const currentWidth = getTableContainerElementWidth(tableNode);
   const resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
   const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
-  if (resizingContainer && resizingItem) {
+  if (resizingItem) {
     const newWidth = `${currentWidth + resizeAmount}px`;
     if (tableRef) {
       tableRef.style.width = newWidth;

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -399,7 +399,8 @@ export class ContextualMenu extends Component {
         editorView,
         selectionRect,
         editorAnalyticsAPI,
-        getEditorContainerWidth
+        getEditorContainerWidth,
+        getEditorFeatureFlags
       } = this.props;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
@@ -410,6 +411,9 @@ export class ContextualMenu extends Component {
         targetCellPosition,
         isTableScalingEnabled = false
       } = getPluginState(state);
+      const {
+        tableDuplicateCellColouring = false
+      } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
       switch (item.value.name) {
         case 'sort_column_desc':
           sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
@@ -439,11 +443,11 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'insert_column':
-          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
           this.toggleOpen();
           break;
         case 'insert_row':
-          insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, {
+          insertRowWithAnalytics(editorAnalyticsAPI, tableDuplicateCellColouring)(INPUT_METHOD.CONTEXT_MENU, {
             index: selectionRect.bottom,
             moveCursorToInsertedRow: true
           })(state, dispatch);

package/dist/es2019/ui/FloatingContextualMenu/index.js

@@ -16,7 +16,8 @@ const FloatingContextualMenu = ({
   isOpen,
   pluginConfig,
   editorAnalyticsAPI,
-  getEditorContainerWidth
+  getEditorContainerWidth,
+  getEditorFeatureFlags
 }) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
@@ -68,7 +69,8 @@ const FloatingContextualMenu = ({
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -176,7 +176,8 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   mountPoint,
   scrollableElement,
   boundariesElement,
-  isTableScalingEnabled
+  isTableScalingEnabled,
+  tableDuplicateCellColouring
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -204,7 +205,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   }
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring);
   const {
     menuItems,
     menuCallback

package/dist/es2019/ui/FloatingDragMenu/index.js

@@ -18,7 +18,8 @@ const FloatingDragMenu = ({
   editorAnalyticsAPI,
   stickyHeaders,
   pluginConfig,
-  isTableScalingEnabled
+  isTableScalingEnabled,
+  getEditorFeatureFlags
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -29,6 +30,9 @@ const FloatingDragMenu = ({
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
+  const {
+    tableDuplicateCellColouring = false
+  } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -62,7 +66,8 @@ const FloatingDragMenu = ({
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabled,
+    tableDuplicateCellColouring: tableDuplicateCellColouring
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/ui/FloatingInsertButton/index.js

@@ -156,7 +156,8 @@ export class FloatingInsertButton extends React.Component {
     const {
       editorView,
       insertRowButtonIndex,
-      editorAnalyticsAPI
+      editorAnalyticsAPI,
+      getEditorFeatureFlags
     } = this.props;
     if (typeof insertRowButtonIndex !== 'undefined') {
       event.preventDefault();
@@ -164,7 +165,8 @@ export class FloatingInsertButton extends React.Component {
         state,
         dispatch
       } = editorView;
-      insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, {
+      const featureFlags = !!getEditorFeatureFlags && getEditorFeatureFlags();
+      insertRowWithAnalytics(editorAnalyticsAPI, featureFlags && featureFlags.tableDuplicateCellColouring)(INPUT_METHOD.BUTTON, {
         index: insertRowButtonIndex,
         moveCursorToInsertedRow: true
       })(state, dispatch);
@@ -174,18 +176,22 @@ export class FloatingInsertButton extends React.Component {
     const {
       editorView,
       insertColumnButtonIndex,
-      editorAnalyticsAPI
+      editorAnalyticsAPI,
+      getEditorFeatureFlags
     } = this.props;
     if (typeof insertColumnButtonIndex !== 'undefined') {
       event.preventDefault();
       const {
         isTableScalingEnabled = false
       } = getPluginState(editorView.state);
+      const {
+        tableDuplicateCellColouring = false
+      } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
       const {
         state,
         dispatch
       } = editorView;
-      insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+      insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
     }
   }
 }

package/dist/es2019/utils/drag-menu.js

@@ -65,7 +65,7 @@ const defaultSelectionRect = {
   right: 0,
   bottom: 0
 };
-export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false) => {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   const addOptions = direction === 'row' ? [{
     label: 'above',
@@ -140,12 +140,12 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
     icon,
     onClick: (state, dispatch) => {
       if (direction === 'row') {
-        insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
+        insertRowWithAnalytics(editorAnalyticsAPI, tableDuplicateCellColouring)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
           index: (index !== null && index !== void 0 ? index : 0) + offset,
           moveCursorToInsertedRow: true
         })(state, dispatch);
       } else {
-        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
+        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
       }
       return true;
     },

package/dist/esm/commands/insert.js

@@ -21,6 +21,7 @@ function addColumnAtCustomStep(column) {
 }
 export function addColumnAt() {
   var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var isCellBackgroundDuplicated = arguments.length > 1 ? arguments[1] : undefined;
   return function (column) {
     var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var view = arguments.length > 2 ? arguments[2] : undefined;
@@ -29,7 +30,7 @@ export function addColumnAt() {
       if (allowAddColumnCustomStep) {
         updatedTr = addColumnAtCustomStep(column)(updatedTr);
       } else {
-        updatedTr = addColumnAtPMUtils(column)(updatedTr);
+        updatedTr = addColumnAtPMUtils(column, isCellBackgroundDuplicated)(updatedTr);
       }
       var table = findTable(updatedTr.selection);
       if (table) {
@@ -83,9 +84,10 @@ export var addColumnAfter = function addColumnAfter(isTableScalingEnabled) {
 };
 export var insertColumn = function insertColumn() {
   var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var isCellBackgroundDuplicated = arguments.length > 1 ? arguments[1] : undefined;
   return function (column) {
     return function (state, dispatch, view) {
-      var tr = addColumnAt(isTableScalingEnabled)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
+      var tr = addColumnAt(isTableScalingEnabled, isCellBackgroundDuplicated)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
       var table = findTable(tr.selection);
       if (!table) {
         return false;
@@ -99,7 +101,7 @@ export var insertColumn = function insertColumn() {
     };
   };
 };
-export var insertRow = function insertRow(row, moveCursorToTheNewRow) {
+export var insertRow = function insertRow(row, moveCursorToTheNewRow, isCellBackgroundDuplicated) {
   return function (state, dispatch) {
     // Don't clone the header row
     var headerRowEnabled = checkIfHeaderRowEnabled(state.selection);
@@ -110,7 +112,7 @@ export var insertRow = function insertRow(row, moveCursorToTheNewRow) {
     if (row === 0 && headerRowEnabled) {
       return false;
     }
-    var tr = clonePreviousRow ? copyPreviousRow(state.schema)(row)(state.tr) : addRowAt(row)(state.tr);
+    var tr = clonePreviousRow ? copyPreviousRow(state.schema)(row)(state.tr) : addRowAt(row, undefined, isCellBackgroundDuplicated)(state.tr);
     var table = findTable(tr.selection);
     if (!table) {
       return false;

package/dist/esm/commands-with-analytics.js

@@ -165,6 +165,7 @@ export var addRowAroundSelection = function addRowAroundSelection(editorAnalytic
   };
 };
 export var insertRowWithAnalytics = function insertRowWithAnalytics(editorAnalyticsAPI) {
+  var isCellbackgroundDuplicated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (inputMethod, options) {
     return withEditorAnalyticsAPI(function (state) {
       var _getSelectedTableInfo = getSelectedTableInfo(state.selection),
@@ -182,7 +183,7 @@ export var insertRowWithAnalytics = function insertRowWithAnalytics(editorAnalyt
         },
         eventType: EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow));
+    })(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow, isCellbackgroundDuplicated));
   };
 };
 export var changeColumnWidthByStepWithAnalytics = function changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI) {
@@ -219,6 +220,7 @@ export var changeColumnWidthByStepWithAnalytics = function changeColumnWidthBySt
 };
 export var insertColumnWithAnalytics = function insertColumnWithAnalytics(editorAnalyticsAPI) {
   var isTableScalingEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var isCellbackgroundDuplicated = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (inputMethod, position) {
     return withEditorAnalyticsAPI(function (state) {
       var _getSelectedTableInfo3 = getSelectedTableInfo(state.selection),
@@ -236,7 +238,7 @@ export var insertColumnWithAnalytics = function insertColumnWithAnalytics(editor
         },
         eventType: EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled)(position));
+    })(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled, isCellbackgroundDuplicated)(position));
   };
 };
 export var deleteRowsWithAnalytics = function deleteRowsWithAnalytics(editorAnalyticsAPI) {

package/dist/esm/plugin.js

@@ -361,7 +361,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             hasStickyHeaders: stickyHeader && stickyHeader.sticky,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             editorAnalyticsAPI: editorAnalyticsAPI,
-            getEditorContainerWidth: defaultGetEditorContainerWidth
+            getEditorContainerWidth: defaultGetEditorContainerWidth,
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
@@ -386,7 +387,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             editorAnalyticsAPI: editorAnalyticsAPI,
             stickyHeaders: stickyHeader,
             pluginConfig: pluginConfig,
-            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled
+            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

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

@@ -11,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, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
+import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
 export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) {
   var state = view.state,
     dispatch = view.dispatch;
@@ -135,11 +135,14 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
         if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
           _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
-        var newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
         var resizedDelta = clientX - startX;
-        tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+          var newResizeState = resizeColumnAndTable(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+        } else {
+          var _newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = updateColumnWidths(_newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
           var mouseUpTime = event.timeStamp;
@@ -209,7 +212,11 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    } else {
+      resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    }
     updateControls()(state);
   }
   window.addEventListener('mouseup', finish);

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

@@ -6,5 +6,5 @@ export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bu
 export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth, getTableElementWidth, getTableContainerElementWidth } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT } from './consts';

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

@@ -98,4 +98,11 @@ export var getTableScalingPercent = function getTableScalingPercent(table, table
   var scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
   return Math.min(scalePercent, 1);
+};
+export var getStaticTableScalingPercent = function getStaticTableScalingPercent(table, tableRenderWidth) {
+  var tableWidth = getTableContainerElementWidth(table);
+  // minus 1 here to avoid any 1px scroll in Firefox
+  var scalePercent = (tableRenderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
 };

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

@@ -3,54 +3,71 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Resize a given column by an amount from the current state
 
-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 var resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
-  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   var scalePercent = 1;
-  var resizeAmount;
-  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-    var _tableRef$closest;
-    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
-    var tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    var tableContainerWidth = tableRef === null || tableRef === void 0 || (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
-    var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
-    resizeAmount = amount * 2;
-    if (isOverflowed) {
-      resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
-    } else {
-      resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
-    }
-  } else {
-    resizeAmount = amount;
-  }
-
-  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
-  if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+  var resizeAmount = amount;
+  if (isTableScalingEnabled) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  var 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;
-  getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateColgroup(newState, tableRef, tableNode, false) : 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
-    var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-    updateTable(delta, tableRef, tableNode);
-    return _objectSpread(_objectSpread({}, newState), {}, {
-      tableWidth: resizeState.tableWidth + delta
-    });
-  }
+  var newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
   return newState;
 };
-var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
+
+// try not scale table during resize
+export var resizeColumnAndTable = function resizeColumnAndTable(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
+  var _tableRef$closest;
+  var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var originalTableWidth = arguments.length > 7 ? arguments[7] : undefined;
+  // TODO: can we use document state, and apply scaling factor?
+  var tableWidth = tableRef.clientWidth;
+  var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+  var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
+  var resizeAmount = amount * 2;
+
+  // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
+  // let scalePercent = 1;
+  // if (isTableScalingEnabled) {
+  // import from ./misc
+  //   scalePercent = getStaticTableScalingPercent(
+  //     tableNode,
+  //     originalTableWidth || resizeState.maxSize,
+  //   );
+  //   resizeAmount = amount / scalePercent;
+  // }
+
+  // need to look at the resize amount and try to adjust the colgroups
+  if (isOverflowed) {
+    resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+  } else {
+    resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
+  }
+  var newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
+
+  // this function only updates the colgroup in DOM, it reverses the scalePercent
+  // todo: change isScalingEnabled to true when reimplementing scaling
+  updateColgroup(newState, tableRef, tableNode, false);
+
+  // use the difference in width from affected column to update overall table width
+  var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+  if (!isOverflowed) {
+    updateTablePreview(delta, tableRef, tableNode);
+  }
+  return _objectSpread(_objectSpread({}, newState), {}, {
+    tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta
+  });
+};
+var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode) {
   var currentWidth = getTableContainerElementWidth(tableNode);
   var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(ClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
-  if (resizingContainer && resizingItem) {
+  if (resizingItem) {
     var newWidth = "".concat(currentWidth + resizeAmount, "px");
     if (tableRef) {
       tableRef.style.width = newWidth;