@atlaskit/editor-plugin-table 7.21.4 → 7.21.6

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

@@ -23,12 +23,10 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
   bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  if (fg('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
-    bindKeymapWithCommand(addRowBeforeVO.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
-    bindKeymapWithCommand(addRowAfterVO.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-    bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-    bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  }
+  bindKeymapWithCommand(addRowBeforeVO.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
+  bindKeymapWithCommand(addRowAfterVO.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
+  bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   if (dragAndDropEnabled) {
     // Move row/column shortcuts
     /**

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

@@ -13,6 +13,7 @@ import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
+import { scaleResizeState } from './utils/resize-column';
 export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled) => {
   const {
     state,
@@ -21,7 +22,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   const editorDisabled = !view.editable;
   const domAtPos = view.domAtPos.bind(view);
   const {
-    lineLength
+    lineLength,
+    width: editorWidth
   } = getEditorContainerWidth();
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
@@ -61,7 +63,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
     shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
   }
-  const resizeState = getResizeState({
+  let resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize,
     table: originalTable,
@@ -89,6 +91,17 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   // When we start resizing a column we need to ensure the underlying tooltip is removed from the decoration to avoid
   // unnecessary tooltips being displayed during drag.
   updateResizeHandleDecorations(undefined, undefined, false)(state, dispatch);
+
+  // for new column resizing, take the current scaled version of table widths and use those as the basis for resizing
+  // implication: the scaled version of the table becomes the source of truth
+  if (isNewColumnResizingEnabled && shouldScale) {
+    resizeState = scaleResizeState({
+      resizeState,
+      tableRef: dom,
+      tableNode: originalTable,
+      editorWidth
+    });
+  }
   function finish(event) {
     window.removeEventListener('mouseup', finish);
     window.removeEventListener('mousemove', move);
@@ -158,19 +171,24 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         const resizedDelta = clientX - startX;
         const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent');
         if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
-          const newResizeState = resizeColumnAndTable(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale,
-          // isTableScalingEnabled
-          undefined,
-          // originalTableWidth
-          shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
+          const newResizeState = resizeColumnAndTable({
+            resizeState,
+            colIndex,
+            amount: resizedDelta,
+            tableRef: dom,
+            tableNode: originalTable,
+            width: editorWidth,
+            lineLength,
+            isTableAlignmentEnabled
+          });
           tr = updateColumnWidths(newResizeState, table, start)(tr);
 
           // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
-          const shouldChangeAlignment = shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, originalTable, lineLength, newResizeState.tableWidth);
+          const shouldChangeAlignment = shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, originalTable, lineLength, newResizeState.maxSize);
           if (shouldChangeAlignment) {
             tr = tr.setNodeMarkup(start - 1, state.schema.nodes.table, {
               ...table.attrs,
-              width: newResizeState.tableWidth,
+              width: newResizeState.maxSize,
               layout: ALIGN_CENTER
             });
             editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
@@ -178,7 +196,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
               actionSubject: ACTION_SUBJECT.TABLE,
               actionSubjectId: null,
               attributes: {
-                tableWidth: newResizeState.tableWidth,
+                tableWidth: newResizeState.maxSize,
                 newAlignment: ALIGN_CENTER,
                 previousAlignment: ALIGN_START,
                 totalRowCount: totalRowCount,
@@ -189,7 +207,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
               eventType: EVENT_TYPE.TRACK
             })(tr);
           } else {
-            tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+            tr.setNodeAttribute(start - 1, 'width', newResizeState.maxSize);
           }
         } else {
           const newResizeState = resizeColumn(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale, shouldUseIncreasedScalingPercent);
@@ -267,10 +285,20 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
+    const resizedDelta = clientX - dragging.startX;
     if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
-      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
+      resizeColumnAndTable({
+        resizeState,
+        colIndex,
+        amount: resizedDelta,
+        tableRef: dom,
+        tableNode: originalTable,
+        width: editorWidth,
+        lineLength,
+        isTableAlignmentEnabled
+      });
     } else {
-      resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);
+      resizeColumn(resizeState, colIndex, resizedDelta, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);
     }
     updateControls()(state);
   }

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

@@ -5,4 +5,7 @@ export const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 export const MAX_SCALING_PERCENT = 0.3;
 export const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 // Used to calculate the width of a table using the Editor width
-export const TABLE_EDITOR_MARGIN = 76;
+export const TABLE_EDITOR_MARGIN = 76;
+const COMMENT_AK_EDITOR_CONTENT_AREA_PADDING = 20;
+const COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN = 12;
+export const TABLE_OFFSET_IN_COMMENT_EDITOR = 2 * (COMMENT_AK_EDITOR_CONTENT_AREA_PADDING + COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN);

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

@@ -7,4 +7,4 @@ export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth,
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
 export { resizeColumn, resizeColumnAndTable } from './resize-column';
-export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
+export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION, TABLE_OFFSET_IN_COMMENT_EDITOR } from './consts';

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

@@ -1,8 +1,9 @@
 // Resize a given column by an amount from the current state
 
+import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName as ClassName } from '../../../types';
 import { ALIGN_CENTER, ALIGN_START, shouldChangeAlignmentToCenterResized } from '../../../utils/alignment';
-import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
+import { 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, shouldUseIncreasedScalingPercent = false) => {
@@ -16,64 +17,112 @@ export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode,
   updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
   return newState;
 };
+export const resizeColumnAndTable = ({
+  resizeState,
+  colIndex,
+  amount,
+  tableRef,
+  tableNode,
+  lineLength,
+  width: editorWidth,
+  isTableAlignmentEnabled
+}) => {
+  const editorContainerWidth = getEditorContainerWidth(editorWidth);
+  const isTableLeftAligned = tableNode.attrs.layout === ALIGN_START;
+  let resizeAmount = isTableLeftAligned ? amount : amount * 2;
+  const willTableHitEditorEdge = resizeState.maxSize + resizeAmount > editorContainerWidth;
+  const willResizedTableStayInOverflow = resizeState.overflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
 
-// try not scale table during resize
-export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, originalTableWidth, shouldUseIncreasedScalingPercent = false, lineLength, isTableAlignmentEnabled = false) => {
-  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 = tableNode.attrs.layout === ALIGN_START && !isOverflowed ? amount : 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;
+  // STEP 1: Update col width
+  if (willTableHitEditorEdge || willResizedTableStayInOverflow) {
+    var _tableRef$closest;
+    const tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+    resizeAmount = amount < 0 ? amount : resizeAmount - (resizeState.maxSize + resizeAmount - tableContainerWidth) / 2;
   }
-  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, shouldUseIncreasedScalingPercent);
+  if (!willResizedTableStayInOverflow && !willTableHitEditorEdge) {
+    const diff = -(resizeState.tableWidth - resizeState.maxSize);
+    const rest = amount - diff;
+    const final = isTableLeftAligned ? diff + rest : diff + rest * 2;
+    resizeAmount = final;
+  }
+  let newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
 
-  // use the difference in width from affected column to update overall table width
+  // STEP 2: Update table container width
+  // columns have a min width, so delta !== resizeAmount when this is reached, use this for calculations
   const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-  if (!isOverflowed) {
-    // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
-    const shouldChangeAlignment = shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, newState.tableWidth + delta);
-    shouldChangeAlignment ? updateTablePreview(delta, tableRef, tableNode, ALIGN_CENTER) : updateTablePreview(delta, tableRef, tableNode);
+  newState.maxSize = Math.round(resizeState.overflow ? willResizedTableStayInOverflow ?
+  // CASE 1A: table will stay in overflow
+  // do not grow the table because resize is happening in the overflow region
+  // and the overall table container needs to be retained
+  resizeState.maxSize :
+  // CASE 1B: table will no longer be in overflow, so adjust container width
+  // ensure the table is resized without any 'big jumps' by working out
+  // the difference between the new table width and the max size and adding the resize
+  resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta) : willTableHitEditorEdge ?
+  // CASE 2: table will hit editor edge
+  editorContainerWidth :
+  // CASE 3: table is being resized from a non-overflow state
+  resizeState.maxSize + delta);
+
+  // do not apply scaling logic because resize state is already scaled
+  updateColgroup(newState, tableRef, tableNode, false, false);
+  if (!willTableHitEditorEdge && !willResizedTableStayInOverflow) {
+    updateTablePreview(tableRef, newState.maxSize, shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, newState.maxSize));
   }
-  return {
-    ...newState,
-    // resizeState.tableWidth sometimes is off by ~3px on load on resized table when !isOverflowed, using resizeState.maxSize instead
-    tableWidth: isOverflowed ? tableContainerWidth : resizeState.maxSize + delta
-  };
+  return newState;
 };
-const updateTablePreview = (resizeAmount, tableRef, tableNode, tableAligment) => {
-  const currentWidth = getTableContainerElementWidth(tableNode);
-  const resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
+const updateTablePreview = (tableRef, newTableWidth, shouldChangeAlignment) => {
+  const resizingContainer = tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
   const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
   const alignmentContainer = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.parentElement;
   if (resizingItem) {
-    const newWidth = `${currentWidth + resizeAmount}px`;
-    if (tableRef) {
-      tableRef.style.width = newWidth;
-    }
+    const newWidth = `${newTableWidth}px`;
     resizingContainer.style.width = newWidth;
     resizingItem.style.width = newWidth;
-    if (tableAligment && alignmentContainer) {
-      alignmentContainer.style.justifyContent = tableAligment;
+    if (shouldChangeAlignment && alignmentContainer) {
+      alignmentContainer.style.justifyContent = ALIGN_CENTER;
     }
   }
+};
+const getEditorContainerWidth = editorWidth => Math.min(editorWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth);
+
+/**
+ * Apply a scaling factor to resize state
+ */
+export const scaleResizeState = ({
+  resizeState,
+  tableRef,
+  tableNode,
+  editorWidth
+}) => {
+  // check if table is scaled, if not then avoid applying scaling values down
+  if (resizeState.maxSize < getEditorContainerWidth(editorWidth)) {
+    return resizeState;
+  }
+  const scalePercent = getTableScalingPercent(tableNode, tableRef);
+  let cols = resizeState.cols.map(col => ({
+    ...col,
+    width: Math.round(Math.max(col.width * scalePercent, col.minWidth))
+  }));
+  const scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
+  const calculatedTableWidth = cols.reduce((prev, curr) => prev + curr.width, 0);
+
+  // using Math.round can cause the sum of col widths to be larger than the table width
+  // distribute the difference to the smallest column
+  if (calculatedTableWidth > scaledTableWidth) {
+    const diff = calculatedTableWidth - scaledTableWidth;
+    cols = cols.map(col => {
+      return col.width - diff >= col.minWidth ? {
+        ...col,
+        width: col.width - diff
+      } : col;
+    });
+  }
+  return {
+    ...resizeState,
+    widths: cols.map(col => col.width),
+    tableWidth: scaledTableWidth,
+    maxSize: Math.round(resizeState.maxSize * scalePercent),
+    cols
+  };
 };

package/dist/es2019/pm-plugins/table-width.js

@@ -14,7 +14,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { ALIGN_START } from '../utils/alignment';
 import { TABLE_MAX_WIDTH } from './table-resizing/utils';
 export const pluginKey = new PluginKey('tableWidthPlugin');
-const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled) => {
+const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -114,7 +114,7 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTabl
           }
         });
       }
-      if (isReplaceDocumentOperation) {
+      if (isReplaceDocumentOperation && !isCommentEditor) {
         newState.doc.forEach((node, offset) => {
           if (node.type === table) {
             const width = node.attrs.width;

package/dist/es2019/utils/alignment.js

@@ -11,4 +11,4 @@ export const normaliseAlignment = layout => layout === ALIGN_CENTER || layout ==
 /**
  * We don't want to switch alignment in Full-width editor
  */
-export const shouldChangeAlignmentToCenterResized = (isTableAlignmentEnabled, tableNode, lineLength, updatedTableWidth) => isTableAlignmentEnabled && tableNode && tableNode.attrs.layout === ALIGN_START && lineLength && updatedTableWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH;
+export const shouldChangeAlignmentToCenterResized = (isTableAlignmentEnabled, tableNode, lineLength, updatedTableWidth) => Boolean(isTableAlignmentEnabled && tableNode && tableNode.attrs.layout === ALIGN_START && lineLength && updatedTableWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH);

package/dist/esm/nodeviews/TableContainer.js

@@ -6,7 +6,7 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
-import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
+import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
 import { TableResizer } from './TableResizer';
@@ -197,12 +197,14 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
     // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
     responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+  } else if (isCommentEditor) {
+    responsiveContainerWidth = containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR;
   } else {
     // 76 is currently an accepted padding value considering the spacing for resizer handle
     // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
     // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
     // padding left = padding right = akEditorGutterPadding = 32
-    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - (isCommentEditor ? 0 : resizeHandleSpacing);
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
   }
   var width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
@@ -230,7 +232,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
     pluginInjectionApi: pluginInjectionApi,
     onResizeStart: onResizeStart,
-    onResizeStop: onResizeStop
+    onResizeStop: onResizeStop,
+    isCommentEditor: isCommentEditor
   };
   var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {

package/dist/esm/nodeviews/TableResizer.js

@@ -19,7 +19,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
 import { updateWidthToWidest } from '../commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
-import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
+import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
 import { ALIGN_CENTER, ALIGN_START, normaliseAlignment, shouldChangeAlignmentToCenterResized } from '../utils/alignment';
@@ -114,7 +114,8 @@ export var TableResizer = function TableResizer(_ref) {
     isWholeTableInDanger = _ref.isWholeTableInDanger,
     shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
     pluginInjectionApi = _ref.pluginInjectionApi,
-    isFullWidthModeEnabled = _ref.isFullWidthModeEnabled;
+    isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
+    isCommentEditor = _ref.isCommentEditor;
   var currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = useRef(false);
@@ -267,13 +268,14 @@ export var TableResizer = function TableResizer(_ref) {
       return guideline.isFullWidth;
     })[0];
     var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
-    var shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
+    var tableMaxWidth = isCommentEditor ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR : TABLE_MAX_WIDTH;
+    var shouldUpdateWidthToWidest = isCommentEditor && tableMaxWidth === newWidth || !!isTableScalingEnabled && isFullWidthGuidelineActive;
     chainCommands(function (state, dispatch) {
       return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
     }, updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
-    updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
+    updateWidth(shouldUpdateWidthToWidest ? tableMaxWidth : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isCommentEditor, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);
@@ -285,7 +287,8 @@ export var TableResizer = function TableResizer(_ref) {
       dispatch = editorView.dispatch;
     var pos = getPos();
     var currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
-    newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? TABLE_MAX_WIDTH : newWidth;
+    var tableMaxWidth = isCommentEditor ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR : TABLE_MAX_WIDTH;
+    newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
     var tr = state.tr.setMeta(tableWidthPluginKey, {
       resizing: false,
       tableLocalId: '',
@@ -344,7 +347,7 @@ export var TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, containerWidth, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
   var handleTableSizeChangeOnKeypress = useCallback(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/esm/plugin.js

@@ -300,10 +300,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableWidth',
         plugin: function plugin(_ref14) {
-          var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign;
+          var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign, _options$isCommentEdi;
           var dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent,
             dispatch = _ref14.dispatch;
-          return options !== null && options !== void 0 && options.tableResizingEnabled && !(options !== null && options !== void 0 && options.isCommentEditor) ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false) : undefined;
+          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false, (_options$isCommentEdi = options === null || options === void 0 ? void 0 : options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -465,7 +465,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             stickyHeaders: stickyHeader,
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorAnalyticsAPI: editorAnalyticsAPI
-          }), (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
+          }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableResizingEnabled) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
             target: resizingTableRef,
             content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
             alignX: 'center',

package/dist/esm/pm-plugins/keymap.js

@@ -33,12 +33,10 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
   bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  if (fg('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
-    bindKeymapWithCommand(addRowBeforeVO.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
-    bindKeymapWithCommand(addRowAfterVO.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-    bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-    bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  }
+  bindKeymapWithCommand(addRowBeforeVO.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
+  bindKeymapWithCommand(addRowAfterVO.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
+  bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   if (dragAndDropEnabled) {
     // Move row/column shortcuts
     /**

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

@@ -16,13 +16,15 @@ import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
+import { scaleResizeState } from './utils/resize-column';
 export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled) {
   var state = view.state,
     dispatch = view.dispatch;
   var editorDisabled = !view.editable;
   var domAtPos = view.domAtPos.bind(view);
   var _getEditorContainerWi = getEditorContainerWidth(),
-    lineLength = _getEditorContainerWi.lineLength;
+    lineLength = _getEditorContainerWi.lineLength,
+    editorWidth = _getEditorContainerWi.width;
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
@@ -88,6 +90,17 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
   // When we start resizing a column we need to ensure the underlying tooltip is removed from the decoration to avoid
   // unnecessary tooltips being displayed during drag.
   updateResizeHandleDecorations(undefined, undefined, false)(state, dispatch);
+
+  // for new column resizing, take the current scaled version of table widths and use those as the basis for resizing
+  // implication: the scaled version of the table becomes the source of truth
+  if (isNewColumnResizingEnabled && shouldScale) {
+    resizeState = scaleResizeState({
+      resizeState: resizeState,
+      tableRef: dom,
+      tableNode: originalTable,
+      editorWidth: editorWidth
+    });
+  }
   function finish(event) {
     window.removeEventListener('mouseup', finish);
     window.removeEventListener('mousemove', move);
@@ -147,18 +160,23 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
         var resizedDelta = clientX - startX;
         var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent');
         if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
-          var newResizeState = resizeColumnAndTable(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale,
-          // isTableScalingEnabled
-          undefined,
-          // originalTableWidth
-          shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
+          var newResizeState = resizeColumnAndTable({
+            resizeState: resizeState,
+            colIndex: colIndex,
+            amount: resizedDelta,
+            tableRef: dom,
+            tableNode: originalTable,
+            width: editorWidth,
+            lineLength: lineLength,
+            isTableAlignmentEnabled: isTableAlignmentEnabled
+          });
           tr = updateColumnWidths(newResizeState, table, start)(tr);
 
           // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
-          var shouldChangeAlignment = shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, originalTable, lineLength, newResizeState.tableWidth);
+          var shouldChangeAlignment = shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, originalTable, lineLength, newResizeState.maxSize);
           if (shouldChangeAlignment) {
             tr = tr.setNodeMarkup(start - 1, state.schema.nodes.table, _objectSpread(_objectSpread({}, table.attrs), {}, {
-              width: newResizeState.tableWidth,
+              width: newResizeState.maxSize,
               layout: ALIGN_CENTER
             }));
             editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
@@ -166,7 +184,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
               actionSubject: ACTION_SUBJECT.TABLE,
               actionSubjectId: null,
               attributes: {
-                tableWidth: newResizeState.tableWidth,
+                tableWidth: newResizeState.maxSize,
                 newAlignment: ALIGN_CENTER,
                 previousAlignment: ALIGN_START,
                 totalRowCount: totalRowCount,
@@ -177,7 +195,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
               eventType: EVENT_TYPE.TRACK
             })(tr);
           } else {
-            tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+            tr.setNodeAttribute(start - 1, 'width', newResizeState.maxSize);
           }
         } else {
           var _newResizeState = resizeColumn(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale, shouldUseIncreasedScalingPercent);
@@ -249,10 +267,20 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
+    var resizedDelta = clientX - dragging.startX;
     if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
-      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
+      resizeColumnAndTable({
+        resizeState: resizeState,
+        colIndex: colIndex,
+        amount: resizedDelta,
+        tableRef: dom,
+        tableNode: originalTable,
+        width: editorWidth,
+        lineLength: lineLength,
+        isTableAlignmentEnabled: isTableAlignmentEnabled
+      });
     } else {
-      resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);
+      resizeColumn(resizeState, colIndex, resizedDelta, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);
     }
     updateControls()(state);
   }

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

@@ -5,4 +5,7 @@ export var FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 export var MAX_SCALING_PERCENT = 0.3;
 export var MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 // Used to calculate the width of a table using the Editor width
-export var TABLE_EDITOR_MARGIN = 76;
+export var TABLE_EDITOR_MARGIN = 76;
+var COMMENT_AK_EDITOR_CONTENT_AREA_PADDING = 20;
+var COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN = 12;
+export var TABLE_OFFSET_IN_COMMENT_EDITOR = 2 * (COMMENT_AK_EDITOR_CONTENT_AREA_PADDING + COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN);

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

@@ -7,4 +7,4 @@ export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth,
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
 export { resizeColumn, resizeColumnAndTable } from './resize-column';
-export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
+export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION, TABLE_OFFSET_IN_COMMENT_EDITOR } from './consts';