@atlaskit/editor-plugin-table 7.21.4 → 7.21.6

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

@@ -3,9 +3,10 @@ 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 { 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 var resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
@@ -21,68 +22,115 @@ export var resizeColumn = function resizeColumn(resizeState, colIndex, amount, t
   updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
   return newState;
 };
+export var resizeColumnAndTable = function resizeColumnAndTable(_ref) {
+  var resizeState = _ref.resizeState,
+    colIndex = _ref.colIndex,
+    amount = _ref.amount,
+    tableRef = _ref.tableRef,
+    tableNode = _ref.tableNode,
+    lineLength = _ref.lineLength,
+    editorWidth = _ref.width,
+    isTableAlignmentEnabled = _ref.isTableAlignmentEnabled;
+  var editorContainerWidth = getEditorContainerWidth(editorWidth);
+  var isTableLeftAligned = tableNode.attrs.layout === ALIGN_START;
+  var resizeAmount = isTableLeftAligned ? amount : amount * 2;
+  var willTableHitEditorEdge = resizeState.maxSize + resizeAmount > editorContainerWidth;
+  var willResizedTableStayInOverflow = resizeState.overflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
 
-// 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;
-  var shouldUseIncreasedScalingPercent = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
-  var lineLength = arguments.length > 9 ? arguments[9] : undefined;
-  var isTableAlignmentEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
-  // 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 = 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;
+    var 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;
+  }
+  if (!willResizedTableStayInOverflow && !willTableHitEditorEdge) {
+    var diff = -(resizeState.tableWidth - resizeState.maxSize);
+    var rest = amount - diff;
+    var final = isTableLeftAligned ? diff + rest : diff + rest * 2;
+    resizeAmount = final;
   }
   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, shouldUseIncreasedScalingPercent);
-
-  // 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
   var 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
-    var 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 _objectSpread(_objectSpread({}, 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;
 };
-var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode, tableAligment) {
-  var currentWidth = getTableContainerElementWidth(tableNode);
-  var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(ClassName.TABLE_RESIZER_CONTAINER));
+var updateTablePreview = function updateTablePreview(tableRef, newTableWidth, shouldChangeAlignment) {
+  var resizingContainer = tableRef.closest(".".concat(ClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
   var alignmentContainer = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.parentElement;
   if (resizingItem) {
-    var newWidth = "".concat(currentWidth + resizeAmount, "px");
-    if (tableRef) {
-      tableRef.style.width = newWidth;
-    }
+    var newWidth = "".concat(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;
     }
   }
+};
+var getEditorContainerWidth = function getEditorContainerWidth(editorWidth) {
+  return Math.min(editorWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth);
+};
+
+/**
+ * Apply a scaling factor to resize state
+ */
+export var scaleResizeState = function scaleResizeState(_ref2) {
+  var resizeState = _ref2.resizeState,
+    tableRef = _ref2.tableRef,
+    tableNode = _ref2.tableNode,
+    editorWidth = _ref2.editorWidth;
+  // check if table is scaled, if not then avoid applying scaling values down
+  if (resizeState.maxSize < getEditorContainerWidth(editorWidth)) {
+    return resizeState;
+  }
+  var scalePercent = getTableScalingPercent(tableNode, tableRef);
+  var cols = resizeState.cols.map(function (col) {
+    return _objectSpread(_objectSpread({}, col), {}, {
+      width: Math.round(Math.max(col.width * scalePercent, col.minWidth))
+    });
+  });
+  var scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
+  var calculatedTableWidth = cols.reduce(function (prev, curr) {
+    return 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) {
+    var diff = calculatedTableWidth - scaledTableWidth;
+    cols = cols.map(function (col) {
+      return col.width - diff >= col.minWidth ? _objectSpread(_objectSpread({}, col), {}, {
+        width: col.width - diff
+      }) : col;
+    });
+  }
+  return _objectSpread(_objectSpread({}, resizeState), {}, {
+    widths: cols.map(function (col) {
+      return col.width;
+    }),
+    tableWidth: scaledTableWidth,
+    maxSize: Math.round(resizeState.maxSize * scalePercent),
+    cols: cols
+  });
 };

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

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

package/dist/esm/utils/alignment.js

@@ -14,5 +14,5 @@ export var normaliseAlignment = function normaliseAlignment(layout) {
  * We don't want to switch alignment in Full-width editor
  */
 export var shouldChangeAlignmentToCenterResized = function shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, updatedTableWidth) {
-  return isTableAlignmentEnabled && tableNode && tableNode.attrs.layout === ALIGN_START && lineLength && updatedTableWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH;
+  return Boolean(isTableAlignmentEnabled && tableNode && tableNode.attrs.layout === ALIGN_START && lineLength && updatedTableWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH);
 };

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

@@ -25,10 +25,11 @@ interface TableResizerProps {
     isWholeTableInDanger?: boolean;
     isFullWidthModeEnabled?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
+    isCommentEditor?: boolean;
 }
 export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, isWholeTableInDanger, shouldUseIncreasedScalingPercent, pluginInjectionApi, isFullWidthModeEnabled, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, isWholeTableInDanger, shouldUseIncreasedScalingPercent, pluginInjectionApi, isFullWidthModeEnabled, isCommentEditor, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types/pm-plugins/table-resizing/utils/consts.d.ts

@@ -5,3 +5,4 @@ export declare const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 export declare const MAX_SCALING_PERCENT = 0.3;
 export declare const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 export declare const TABLE_EDITOR_MARGIN = 76;
+export declare const TABLE_OFFSET_IN_COMMENT_EDITOR: number;

package/dist/types/pm-plugins/table-resizing/utils/index.d.ts

@@ -10,4 +10,4 @@ export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-t
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
 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/types/pm-plugins/table-resizing/utils/resize-column.d.ts

@@ -1,4 +1,26 @@
+import { type EditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResizeState } from './types';
 export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement | null, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => ResizeState;
-export declare const resizeColumnAndTable: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, originalTableWidth?: number, shouldUseIncreasedScalingPercent?: boolean, lineLength?: number, isTableAlignmentEnabled?: boolean) => ResizeState;
+type ResizeInformation = {
+    resizeState: ResizeState;
+    colIndex: number;
+    amount: number;
+};
+type TableReferences = {
+    tableRef: HTMLElement;
+    tableNode: PmNode;
+};
+type TableResizingPluginOptions = {
+    isTableAlignmentEnabled?: boolean;
+};
+type ResizeColumnAndTable = ResizeInformation & TableResizingPluginOptions & TableReferences & EditorContainerWidth;
+export declare const resizeColumnAndTable: ({ resizeState, colIndex, amount, tableRef, tableNode, lineLength, width: editorWidth, isTableAlignmentEnabled, }: ResizeColumnAndTable) => ResizeState;
+/**
+ * Apply a scaling factor to resize state
+ */
+export declare const scaleResizeState: ({ resizeState, tableRef, tableNode, editorWidth, }: TableReferences & {
+    resizeState: ResizeState;
+    editorWidth: number;
+}) => ResizeState;
+export {};

package/dist/types/pm-plugins/table-width.d.ts

@@ -13,7 +13,7 @@ type TableWidthPluginState = {
     tableRef: HTMLTableElement | null;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
-declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean) => SafePlugin<{
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean, isCommentEditor: boolean) => SafePlugin<{
     resizing: boolean;
     tableLocalId: string;
     tableRef: null;

package/dist/types/utils/alignment.d.ts

@@ -11,4 +11,4 @@ export declare const normaliseAlignment: (layout: TableLayout) => AlignmentOptio
 /**
  * We don't want to switch alignment in Full-width editor
  */
-export declare const shouldChangeAlignmentToCenterResized: (isTableAlignmentEnabled: boolean | undefined, tableNode: PmNode, lineLength: number | undefined, updatedTableWidth: number) => boolean | 0 | undefined;
+export declare const shouldChangeAlignmentToCenterResized: (isTableAlignmentEnabled: boolean | undefined, tableNode: PmNode, lineLength: number | undefined, updatedTableWidth: number) => boolean;

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

@@ -25,10 +25,11 @@ interface TableResizerProps {
     isWholeTableInDanger?: boolean;
     isFullWidthModeEnabled?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
+    isCommentEditor?: boolean;
 }
 export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, isWholeTableInDanger, shouldUseIncreasedScalingPercent, pluginInjectionApi, isFullWidthModeEnabled, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, isWholeTableInDanger, shouldUseIncreasedScalingPercent, pluginInjectionApi, isFullWidthModeEnabled, isCommentEditor, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/consts.d.ts

@@ -5,3 +5,4 @@ export declare const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 export declare const MAX_SCALING_PERCENT = 0.3;
 export declare const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 export declare const TABLE_EDITOR_MARGIN = 76;
+export declare const TABLE_OFFSET_IN_COMMENT_EDITOR: number;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/index.d.ts

@@ -10,4 +10,4 @@ export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-t
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
 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/types-ts4.5/pm-plugins/table-resizing/utils/resize-column.d.ts

@@ -1,4 +1,26 @@
+import { type EditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResizeState } from './types';
 export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement | null, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => ResizeState;
-export declare const resizeColumnAndTable: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, originalTableWidth?: number, shouldUseIncreasedScalingPercent?: boolean, lineLength?: number, isTableAlignmentEnabled?: boolean) => ResizeState;
+type ResizeInformation = {
+    resizeState: ResizeState;
+    colIndex: number;
+    amount: number;
+};
+type TableReferences = {
+    tableRef: HTMLElement;
+    tableNode: PmNode;
+};
+type TableResizingPluginOptions = {
+    isTableAlignmentEnabled?: boolean;
+};
+type ResizeColumnAndTable = ResizeInformation & TableResizingPluginOptions & TableReferences & EditorContainerWidth;
+export declare const resizeColumnAndTable: ({ resizeState, colIndex, amount, tableRef, tableNode, lineLength, width: editorWidth, isTableAlignmentEnabled, }: ResizeColumnAndTable) => ResizeState;
+/**
+ * Apply a scaling factor to resize state
+ */
+export declare const scaleResizeState: ({ resizeState, tableRef, tableNode, editorWidth, }: TableReferences & {
+    resizeState: ResizeState;
+    editorWidth: number;
+}) => ResizeState;
+export {};

package/dist/types-ts4.5/pm-plugins/table-width.d.ts

@@ -13,7 +13,7 @@ type TableWidthPluginState = {
     tableRef: HTMLTableElement | null;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
-declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean) => SafePlugin<{
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean, isCommentEditor: boolean) => SafePlugin<{
     resizing: boolean;
     tableLocalId: string;
     tableRef: null;

package/dist/types-ts4.5/utils/alignment.d.ts

@@ -11,4 +11,4 @@ export declare const normaliseAlignment: (layout: TableLayout) => AlignmentOptio
 /**
  * We don't want to switch alignment in Full-width editor
  */
-export declare const shouldChangeAlignmentToCenterResized: (isTableAlignmentEnabled: boolean | undefined, tableNode: PmNode, lineLength: number | undefined, updatedTableWidth: number) => boolean | 0 | undefined;
+export declare const shouldChangeAlignmentToCenterResized: (isTableAlignmentEnabled: boolean | undefined, tableNode: PmNode, lineLength: number | undefined, updatedTableWidth: number) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.21.4",
+	"version": "7.21.6",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/adf-schema": "^39.0.3",
 		"@atlaskit/button": "^19.0.0",
 		"@atlaskit/custom-steps": "^0.4.0",
-		"@atlaskit/editor-common": "^86.4.0",
+		"@atlaskit/editor-common": "^86.5.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
@@ -105,9 +105,6 @@
 		"platform_editor_lazy-node-views": {
 			"type": "boolean"
 		},
-		"platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg": {
-			"type": "boolean"
-		},
 		"platform.editor.transform-slice-for-nested-expand": {
 			"type": "boolean"
 		},

package/src/nodeviews/TableContainer.tsx

@@ -21,7 +21,10 @@ import {
 } 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 type { PluginInjectionAPI, TableSharedState } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
@@ -291,6 +294,8 @@ export const ResizableTableContainer = React.memo(
 			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
@@ -298,9 +303,7 @@ export const ResizableTableContainer = React.memo(
 			// padding left = padding right = akEditorGutterPadding = 32
 			responsiveContainerWidth = isTableScalingEnabled
 				? containerWidth - akEditorGutterPaddingDynamic() * 2
-				: containerWidth -
-					akEditorGutterPaddingDynamic() * 2 -
-					(isCommentEditor ? 0 : resizeHandleSpacing);
+				: containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
 		}
 		let width =
 			!node.attrs.width && isCommentEditor
@@ -336,6 +339,7 @@ export const ResizableTableContainer = React.memo(
 			pluginInjectionApi,
 			onResizeStart,
 			onResizeStop,
+			isCommentEditor,
 		};
 
 		const isLivePageViewMode = editorViewModeState?.mode === 'view';

package/src/nodeviews/TableResizer.tsx

@@ -36,6 +36,7 @@ import {
 	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 type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
@@ -88,6 +89,7 @@ interface TableResizerProps {
 	isWholeTableInDanger?: boolean;
 	isFullWidthModeEnabled?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
+	isCommentEditor?: boolean;
 }
 
 export interface TableResizerImprovementProps extends TableResizerProps {
@@ -203,6 +205,7 @@ export const TableResizer = ({
 	shouldUseIncreasedScalingPercent,
 	pluginInjectionApi,
 	isFullWidthModeEnabled,
+	isCommentEditor,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
 	const currentGap = useRef(0);
 	// track resizing state - use ref over state to avoid re-render
@@ -486,7 +489,12 @@ export const TableResizer = ({
 			).filter((guideline) => guideline.isFullWidth)[0];
 
 			const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
-			const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
+			const tableMaxWidth = isCommentEditor
+				? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR
+				: TABLE_MAX_WIDTH;
+			const shouldUpdateWidthToWidest =
+				(isCommentEditor && tableMaxWidth === newWidth) ||
+				(!!isTableScalingEnabled && isFullWidthGuidelineActive);
 
 			chainCommands(
 				(state, dispatch) => {
@@ -497,12 +505,13 @@ export const TableResizer = ({
 				}),
 			)(state, dispatch);
 
-			updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
+			updateWidth(shouldUpdateWidthToWidest ? tableMaxWidth : newWidth);
 
 			return newWidth;
 		},
 		[
 			countFrames,
+			isCommentEditor,
 			isTableScalingEnabled,
 			isTableWithFixedColumnWidthsOptionEnabled,
 			isFullWidthModeEnabled,
@@ -528,9 +537,14 @@ export const TableResizer = ({
 			const { state, dispatch } = editorView;
 			const pos = getPos();
 			const currentTableNodeLocalId = node?.attrs?.localId ?? '';
+
+			const tableMaxWidth = isCommentEditor
+				? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR
+				: TABLE_MAX_WIDTH;
+
 			newWidth =
 				widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]
-					? TABLE_MAX_WIDTH
+					? tableMaxWidth
 					: newWidth;
 
 			let tr = state.tr.setMeta(tableWidthPluginKey, {
@@ -618,6 +632,7 @@ export const TableResizer = ({
 			tableRef,
 			scheduleResize,
 			displayGuideline,
+			containerWidth,
 			attachAnalyticsEvent,
 			endMeasure,
 			onResizeStop,
@@ -626,6 +641,7 @@ export const TableResizer = ({
 			widthToWidest,
 			formatMessage,
 			pluginInjectionApi,
+			isCommentEditor,
 		],
 	);
 

package/src/plugin.tsx

@@ -472,13 +472,14 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				{
 					name: 'tableWidth',
 					plugin: ({ dispatchAnalyticsEvent, dispatch }) =>
-						options?.tableResizingEnabled && !options?.isCommentEditor
+						options?.tableResizingEnabled
 							? createTableWidthPlugin(
 									dispatch,
 									dispatchAnalyticsEvent,
 									options?.fullWidthEnabled ?? false,
 									options?.isTableScalingEnabled ?? false,
 									options?.isTableAlignmentEnabled ?? false,
+									options?.isCommentEditor ?? false,
 								)
 							: undefined,
 				},
@@ -683,7 +684,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 											editorAnalyticsAPI={editorAnalyticsAPI}
 										/>
 									)}
-									{options?.isTableScalingEnabled &&
+									{(options?.isTableScalingEnabled ||
+										(options?.tableResizingEnabled && options.isCommentEditor)) &&
 										isTableResizing &&
 										widthToWidest &&
 										resizingTableLocalId &&

package/src/pm-plugins/keymap.ts

@@ -143,41 +143,39 @@ export function keymapPlugin(
 		list,
 	);
 
-	if (fg('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
-		bindKeymapWithCommand(
-			addRowBeforeVO.common!,
-			addRowAroundSelection(editorAnalyticsAPI)('TOP'),
-			list,
-		);
+	bindKeymapWithCommand(
+		addRowBeforeVO.common!,
+		addRowAroundSelection(editorAnalyticsAPI)('TOP'),
+		list,
+	);
 
-		bindKeymapWithCommand(
-			addRowAfterVO.common!,
-			addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'),
-			list,
-		);
+	bindKeymapWithCommand(
+		addRowAfterVO.common!,
+		addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'),
+		list,
+	);
 
-		bindKeymapWithCommand(
-			addColumnBeforeVO.common!,
-			addColumnBeforeCommand(
-				isTableScalingEnabled,
-				isCellBackgroundDuplicated,
-				isTableFixedColumnWidthsOptionEnabled,
-				shouldUseIncreasedScalingPercent,
-			),
-			list,
-		);
+	bindKeymapWithCommand(
+		addColumnBeforeVO.common!,
+		addColumnBeforeCommand(
+			isTableScalingEnabled,
+			isCellBackgroundDuplicated,
+			isTableFixedColumnWidthsOptionEnabled,
+			shouldUseIncreasedScalingPercent,
+		),
+		list,
+	);
 
-		bindKeymapWithCommand(
-			addColumnAfterVO.common!,
-			addColumnAfterCommand(
-				isTableScalingEnabled,
-				isCellBackgroundDuplicated,
-				isTableFixedColumnWidthsOptionEnabled,
-				shouldUseIncreasedScalingPercent,
-			),
-			list,
-		);
-	}
+	bindKeymapWithCommand(
+		addColumnAfterVO.common!,
+		addColumnAfterCommand(
+			isTableScalingEnabled,
+			isCellBackgroundDuplicated,
+			isTableFixedColumnWidthsOptionEnabled,
+			shouldUseIncreasedScalingPercent,
+		),
+		list,
+	);
 
 	if (dragAndDropEnabled) {
 		// Move row/column shortcuts