@atlaskit/editor-plugin-table 7.21.5 → 7.21.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/nodeviews/TableContainer.js +5 -2
  3. package/dist/cjs/nodeviews/TableResizer.js +9 -6
  4. package/dist/cjs/plugin.js +3 -3
  5. package/dist/cjs/pm-plugins/table-resizing/utils/consts.js +5 -2
  6. package/dist/cjs/pm-plugins/table-resizing/utils/index.js +6 -0
  7. package/dist/cjs/pm-plugins/table-width.js +2 -2
  8. package/dist/es2019/nodeviews/TableContainer.js +6 -3
  9. package/dist/es2019/nodeviews/TableResizer.js +10 -7
  10. package/dist/es2019/plugin.js +3 -3
  11. package/dist/es2019/pm-plugins/table-resizing/utils/consts.js +4 -1
  12. package/dist/es2019/pm-plugins/table-resizing/utils/index.js +1 -1
  13. package/dist/es2019/pm-plugins/table-width.js +2 -2
  14. package/dist/esm/nodeviews/TableContainer.js +6 -3
  15. package/dist/esm/nodeviews/TableResizer.js +10 -7
  16. package/dist/esm/plugin.js +3 -3
  17. package/dist/esm/pm-plugins/table-resizing/utils/consts.js +4 -1
  18. package/dist/esm/pm-plugins/table-resizing/utils/index.js +1 -1
  19. package/dist/esm/pm-plugins/table-width.js +2 -2
  20. package/dist/types/nodeviews/TableResizer.d.ts +2 -1
  21. package/dist/types/pm-plugins/table-resizing/utils/consts.d.ts +1 -0
  22. package/dist/types/pm-plugins/table-resizing/utils/index.d.ts +1 -1
  23. package/dist/types/pm-plugins/table-width.d.ts +1 -1
  24. package/dist/types-ts4.5/nodeviews/TableResizer.d.ts +2 -1
  25. package/dist/types-ts4.5/pm-plugins/table-resizing/utils/consts.d.ts +1 -0
  26. package/dist/types-ts4.5/pm-plugins/table-resizing/utils/index.d.ts +1 -1
  27. package/dist/types-ts4.5/pm-plugins/table-width.d.ts +1 -1
  28. package/package.json +1 -1
  29. package/src/nodeviews/TableContainer.tsx +8 -4
  30. package/src/nodeviews/TableResizer.tsx +19 -3
  31. package/src/plugin.tsx +4 -2
  32. package/src/pm-plugins/table-resizing/utils/consts.ts +4 -0
  33. package/src/pm-plugins/table-resizing/utils/index.ts +1 -0
  34. package/src/pm-plugins/table-width.ts +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 7.21.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#123311](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123311)
8
+ [`ea5eb60bfc2f9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ea5eb60bfc2f9) -
9
+ [ux] Displays full-width tooltip when table resized to the width of the Comment editor when table
10
+ resizing is enabled.
11
+
3
12
  ## 7.21.5
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/nodeviews/TableContainer.js CHANGED
@@ -207,12 +207,14 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
207
207
  // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
208
208
  // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
209
209
  responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - resizeHandleSpacing;
210
+ } else if (isCommentEditor) {
211
+ responsiveContainerWidth = containerWidth - _utils.TABLE_OFFSET_IN_COMMENT_EDITOR;
210
212
  } else {
211
213
  // 76 is currently an accepted padding value considering the spacing for resizer handle
212
214
  // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
213
215
  // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
214
216
  // padding left = padding right = akEditorGutterPadding = 32
215
- responsiveContainerWidth = isTableScalingEnabled ? containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 : containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - (isCommentEditor ? 0 : resizeHandleSpacing);
217
+ responsiveContainerWidth = isTableScalingEnabled ? containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 : containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - resizeHandleSpacing;
216
218
  }
217
219
  var width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
218
220
  if (!isResizing) {
@@ -240,7 +242,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
240
242
  shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
241
243
  pluginInjectionApi: pluginInjectionApi,
242
244
  onResizeStart: onResizeStart,
243
- onResizeStop: onResizeStop
245
+ onResizeStop: onResizeStop,
246
+ isCommentEditor: isCommentEditor
244
247
  };
245
248
  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
246
249
  return /*#__PURE__*/_react.default.createElement(AlignmentTableContainerWrapper, {
package/dist/cjs/nodeviews/TableResizer.js CHANGED
@@ -124,7 +124,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
124
124
  isWholeTableInDanger = _ref.isWholeTableInDanger,
125
125
  shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
126
126
  pluginInjectionApi = _ref.pluginInjectionApi,
127
- isFullWidthModeEnabled = _ref.isFullWidthModeEnabled;
127
+ isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
128
+ isCommentEditor = _ref.isCommentEditor;
128
129
  var currentGap = (0, _react.useRef)(0);
129
130
  // track resizing state - use ref over state to avoid re-render
130
131
  var isResizing = (0, _react.useRef)(false);
@@ -277,13 +278,14 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
277
278
  return guideline.isFullWidth;
278
279
  })[0];
279
280
  var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
280
- var shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
281
+ var tableMaxWidth = isCommentEditor ? containerWidth - _utils3.TABLE_OFFSET_IN_COMMENT_EDITOR : _utils3.TABLE_MAX_WIDTH;
282
+ var shouldUpdateWidthToWidest = isCommentEditor && tableMaxWidth === newWidth || !!isTableScalingEnabled && isFullWidthGuidelineActive;
281
283
  (0, _commands.chainCommands)(function (state, dispatch) {
282
284
  return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
283
285
  }, (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
284
- updateWidth(shouldUpdateWidthToWidest ? _utils3.TABLE_MAX_WIDTH : newWidth);
286
+ updateWidth(shouldUpdateWidthToWidest ? tableMaxWidth : newWidth);
285
287
  return newWidth;
286
- }, [countFrames, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
288
+ }, [countFrames, isCommentEditor, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
287
289
  var scheduleResize = (0, _react.useMemo)(function () {
288
290
  return (0, _rafSchd.default)(handleResize);
289
291
  }, [handleResize]);
@@ -295,7 +297,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
295
297
  dispatch = editorView.dispatch;
296
298
  var pos = getPos();
297
299
  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 : '';
298
- newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? _utils3.TABLE_MAX_WIDTH : newWidth;
300
+ var tableMaxWidth = isCommentEditor ? containerWidth - _utils3.TABLE_OFFSET_IN_COMMENT_EDITOR : _utils3.TABLE_MAX_WIDTH;
301
+ newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
299
302
  var tr = state.tr.setMeta(_tableWidth.pluginKey, {
300
303
  resizing: false,
301
304
  tableLocalId: '',
@@ -354,7 +357,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
354
357
  onResizeStop();
355
358
  }
356
359
  return newWidth;
357
- }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi]);
360
+ }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, containerWidth, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
358
361
  var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
359
362
  var newWidth = width + step;
360
363
  if (newWidth > maxWidth || newWidth < resizerMinWidth) {
package/dist/cjs/plugin.js CHANGED
@@ -307,10 +307,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
307
307
  }, {
308
308
  name: 'tableWidth',
309
309
  plugin: function plugin(_ref14) {
310
- var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign;
310
+ var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign, _options$isCommentEdi;
311
311
  var dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent,
312
312
  dispatch = _ref14.dispatch;
313
- return options !== null && options !== void 0 && options.tableResizingEnabled && !(options !== null && options !== void 0 && options.isCommentEditor) ? (0, _tableWidth.createPlugin)(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;
313
+ return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(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;
314
314
  }
315
315
  },
316
316
  // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -472,7 +472,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
472
472
  stickyHeaders: stickyHeader,
473
473
  isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
474
474
  editorAnalyticsAPI: editorAnalyticsAPI
475
- }), (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/_react.default.createElement(_FloatingToolbarLabel.FloatingToolbarLabel, {
475
+ }), ((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.default.createElement(_FloatingToolbarLabel.FloatingToolbarLabel, {
476
476
  target: resizingTableRef,
477
477
  content: /*#__PURE__*/_react.default.createElement(_TableFullWidthLabel.FullWidthDisplay, null),
478
478
  alignX: 'center',
package/dist/cjs/pm-plugins/table-resizing/utils/consts.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.TABLE_MAX_WIDTH = exports.TABLE_EDITOR_MARGIN = exports.TABLE_DEFAULT_WIDTH = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT = exports.FULL_WIDTH_EDITOR_CONTENT_WIDTH = exports.COLUMN_MIN_WIDTH = void 0;
6
+ exports.TABLE_OFFSET_IN_COMMENT_EDITOR = exports.TABLE_MAX_WIDTH = exports.TABLE_EDITOR_MARGIN = exports.TABLE_DEFAULT_WIDTH = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT = exports.FULL_WIDTH_EDITOR_CONTENT_WIDTH = exports.COLUMN_MIN_WIDTH = void 0;
7
7
  var COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = 48;
8
8
  var TABLE_DEFAULT_WIDTH = exports.TABLE_DEFAULT_WIDTH = 760;
9
9
  var TABLE_MAX_WIDTH = exports.TABLE_MAX_WIDTH = 1800;
@@ -11,4 +11,7 @@ var FULL_WIDTH_EDITOR_CONTENT_WIDTH = exports.FULL_WIDTH_EDITOR_CONTENT_WIDTH =
11
11
  var MAX_SCALING_PERCENT = exports.MAX_SCALING_PERCENT = 0.3;
12
12
  var MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
13
13
  // Used to calculate the width of a table using the Editor width
14
- var TABLE_EDITOR_MARGIN = exports.TABLE_EDITOR_MARGIN = 76;
14
+ var TABLE_EDITOR_MARGIN = exports.TABLE_EDITOR_MARGIN = 76;
15
+ var COMMENT_AK_EDITOR_CONTENT_AREA_PADDING = 20;
16
+ var COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN = 12;
17
+ var TABLE_OFFSET_IN_COMMENT_EDITOR = exports.TABLE_OFFSET_IN_COMMENT_EDITOR = 2 * (COMMENT_AK_EDITOR_CONTENT_AREA_PADDING + COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN);
package/dist/cjs/pm-plugins/table-resizing/utils/index.js CHANGED
@@ -33,6 +33,12 @@ Object.defineProperty(exports, "TABLE_MAX_WIDTH", {
33
33
  return _consts.TABLE_MAX_WIDTH;
34
34
  }
35
35
  });
36
+ Object.defineProperty(exports, "TABLE_OFFSET_IN_COMMENT_EDITOR", {
37
+ enumerable: true,
38
+ get: function get() {
39
+ return _consts.TABLE_OFFSET_IN_COMMENT_EDITOR;
40
+ }
41
+ });
36
42
  Object.defineProperty(exports, "addContainerLeftRightPadding", {
37
43
  enumerable: true,
38
44
  get: function get() {
package/dist/cjs/pm-plugins/table-width.js CHANGED
@@ -24,7 +24,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
24
24
  * Also holds resizing state to hide / show table controls
25
25
  */
26
26
  var pluginKey = exports.pluginKey = new _state.PluginKey('tableWidthPlugin');
27
- var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled) {
27
+ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) {
28
28
  return new _safePlugin.SafePlugin({
29
29
  key: pluginKey,
30
30
  state: {
@@ -121,7 +121,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
121
121
  }
122
122
  });
123
123
  }
124
- if (isReplaceDocumentOperation) {
124
+ if (isReplaceDocumentOperation && !isCommentEditor) {
125
125
  newState.doc.forEach(function (node, offset) {
126
126
  if (node.type === table) {
127
127
  var width = node.attrs.width;
package/dist/es2019/nodeviews/TableContainer.js CHANGED
@@ -5,7 +5,7 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
5
5
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
6
6
  import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
7
7
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
8
- import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
8
+ import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils';
9
9
  import { TableCssClassName as ClassName } from '../types';
10
10
  import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
11
11
  import { TableResizer } from './TableResizer';
@@ -205,12 +205,14 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
205
205
  // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
206
206
  // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
207
207
  responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
208
+ } else if (isCommentEditor) {
209
+ responsiveContainerWidth = containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR;
208
210
  } else {
209
211
  // 76 is currently an accepted padding value considering the spacing for resizer handle
210
212
  // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
211
213
  // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
212
214
  // padding left = padding right = akEditorGutterPadding = 32
213
- responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - (isCommentEditor ? 0 : resizeHandleSpacing);
215
+ responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
214
216
  }
215
217
  let width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
216
218
  if (!isResizing) {
@@ -238,7 +240,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
238
240
  shouldUseIncreasedScalingPercent,
239
241
  pluginInjectionApi,
240
242
  onResizeStart,
241
- onResizeStop
243
+ onResizeStop,
244
+ isCommentEditor
242
245
  };
243
246
  const isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
244
247
  return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
package/dist/es2019/nodeviews/TableResizer.js CHANGED
@@ -15,7 +15,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
15
15
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
16
16
  import { updateWidthToWidest } from '../commands/misc';
17
17
  import { META_KEYS } from '../pm-plugins/table-analytics';
18
- import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
18
+ import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils';
19
19
  import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
20
20
  import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
21
21
  import { ALIGN_CENTER, ALIGN_START, normaliseAlignment, shouldChangeAlignmentToCenterResized } from '../utils/alignment';
@@ -109,7 +109,8 @@ export const TableResizer = ({
109
109
  isWholeTableInDanger,
110
110
  shouldUseIncreasedScalingPercent,
111
111
  pluginInjectionApi,
112
- isFullWidthModeEnabled
112
+ isFullWidthModeEnabled,
113
+ isCommentEditor
113
114
  }) => {
114
115
  var _editorView$state, _pluginInjectionApi$a2;
115
116
  const currentGap = useRef(0);
@@ -270,15 +271,16 @@ export const TableResizer = ({
270
271
  const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
271
272
  const fullWidthGuideline = defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(guideline => guideline.isFullWidth)[0];
272
273
  const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
273
- const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
274
+ const tableMaxWidth = isCommentEditor ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR : TABLE_MAX_WIDTH;
275
+ const shouldUpdateWidthToWidest = isCommentEditor && tableMaxWidth === newWidth || !!isTableScalingEnabled && isFullWidthGuidelineActive;
274
276
  chainCommands((state, dispatch) => {
275
277
  return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
276
278
  }, updateWidthToWidest({
277
279
  [currentTableNodeLocalId]: shouldUpdateWidthToWidest
278
280
  }))(state, dispatch);
279
- updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
281
+ updateWidth(shouldUpdateWidthToWidest ? tableMaxWidth : newWidth);
280
282
  return newWidth;
281
- }, [countFrames, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
283
+ }, [countFrames, isCommentEditor, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
282
284
  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
283
285
  const handleResizeStop = useCallback((originalState, delta) => {
284
286
  var _node$attrs$localId2, _node$attrs2;
@@ -290,7 +292,8 @@ export const TableResizer = ({
290
292
  } = editorView;
291
293
  const pos = getPos();
292
294
  const currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 ? 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 : '';
293
- newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? TABLE_MAX_WIDTH : newWidth;
295
+ const tableMaxWidth = isCommentEditor ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR : TABLE_MAX_WIDTH;
296
+ newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
294
297
  let tr = state.tr.setMeta(tableWidthPluginKey, {
295
298
  resizing: false,
296
299
  tableLocalId: '',
@@ -350,7 +353,7 @@ export const TableResizer = ({
350
353
  onResizeStop();
351
354
  }
352
355
  return newWidth;
353
- }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi]);
356
+ }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, containerWidth, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
354
357
  const handleTableSizeChangeOnKeypress = useCallback(step => {
355
358
  const newWidth = width + step;
356
359
  if (newWidth > maxWidth || newWidth < resizerMinWidth) {
package/dist/es2019/plugin.js CHANGED
@@ -298,8 +298,8 @@ const tablesPlugin = ({
298
298
  dispatchAnalyticsEvent,
299
299
  dispatch
300
300
  }) => {
301
- var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign;
302
- 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;
301
+ var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign, _options$isCommentEdi;
302
+ 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;
303
303
  }
304
304
  },
305
305
  // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -466,7 +466,7 @@ const tablesPlugin = ({
466
466
  stickyHeaders: stickyHeader,
467
467
  isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
468
468
  editorAnalyticsAPI: editorAnalyticsAPI
469
- }), (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
469
+ }), ((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, {
470
470
  target: resizingTableRef,
471
471
  content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
472
472
  alignX: 'center',
package/dist/es2019/pm-plugins/table-resizing/utils/consts.js CHANGED
@@ -5,4 +5,7 @@ export const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
5
5
  export const MAX_SCALING_PERCENT = 0.3;
6
6
  export const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
7
7
  // Used to calculate the width of a table using the Editor width
8
- export const TABLE_EDITOR_MARGIN = 76;
8
+ export const TABLE_EDITOR_MARGIN = 76;
9
+ const COMMENT_AK_EDITOR_CONTENT_AREA_PADDING = 20;
10
+ const COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN = 12;
11
+ 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 CHANGED
@@ -7,4 +7,4 @@ export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth,
7
7
  export { updateControls, isClickNear, getResizeCellPos } from './dom';
8
8
  export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
9
9
  export { resizeColumn, resizeColumnAndTable } from './resize-column';
10
- export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
10
+ 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-width.js CHANGED
@@ -14,7 +14,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
14
14
  import { ALIGN_START } from '../utils/alignment';
15
15
  import { TABLE_MAX_WIDTH } from './table-resizing/utils';
16
16
  export const pluginKey = new PluginKey('tableWidthPlugin');
17
- const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled) => {
17
+ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
18
18
  return new SafePlugin({
19
19
  key: pluginKey,
20
20
  state: {
@@ -114,7 +114,7 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTabl
114
114
  }
115
115
  });
116
116
  }
117
- if (isReplaceDocumentOperation) {
117
+ if (isReplaceDocumentOperation && !isCommentEditor) {
118
118
  newState.doc.forEach((node, offset) => {
119
119
  if (node.type === table) {
120
120
  const width = node.attrs.width;
package/dist/esm/nodeviews/TableContainer.js CHANGED
@@ -6,7 +6,7 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
6
6
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
7
7
  import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
8
8
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
9
- import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
9
+ import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils';
10
10
  import { TableCssClassName as ClassName } from '../types';
11
11
  import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
12
12
  import { TableResizer } from './TableResizer';
@@ -197,12 +197,14 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
197
197
  // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
198
198
  // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
199
199
  responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
200
+ } else if (isCommentEditor) {
201
+ responsiveContainerWidth = containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR;
200
202
  } else {
201
203
  // 76 is currently an accepted padding value considering the spacing for resizer handle
202
204
  // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
203
205
  // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
204
206
  // padding left = padding right = akEditorGutterPadding = 32
205
- responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - (isCommentEditor ? 0 : resizeHandleSpacing);
207
+ responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
206
208
  }
207
209
  var width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
208
210
  if (!isResizing) {
@@ -230,7 +232,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
230
232
  shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
231
233
  pluginInjectionApi: pluginInjectionApi,
232
234
  onResizeStart: onResizeStart,
233
- onResizeStop: onResizeStop
235
+ onResizeStop: onResizeStop,
236
+ isCommentEditor: isCommentEditor
234
237
  };
235
238
  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
236
239
  return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
package/dist/esm/nodeviews/TableResizer.js CHANGED
@@ -19,7 +19,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
19
19
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
20
20
  import { updateWidthToWidest } from '../commands/misc';
21
21
  import { META_KEYS } from '../pm-plugins/table-analytics';
22
- import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
22
+ import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils';
23
23
  import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
24
24
  import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
25
25
  import { ALIGN_CENTER, ALIGN_START, normaliseAlignment, shouldChangeAlignmentToCenterResized } from '../utils/alignment';
@@ -114,7 +114,8 @@ export var TableResizer = function TableResizer(_ref) {
114
114
  isWholeTableInDanger = _ref.isWholeTableInDanger,
115
115
  shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
116
116
  pluginInjectionApi = _ref.pluginInjectionApi,
117
- isFullWidthModeEnabled = _ref.isFullWidthModeEnabled;
117
+ isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
118
+ isCommentEditor = _ref.isCommentEditor;
118
119
  var currentGap = useRef(0);
119
120
  // track resizing state - use ref over state to avoid re-render
120
121
  var isResizing = useRef(false);
@@ -267,13 +268,14 @@ export var TableResizer = function TableResizer(_ref) {
267
268
  return guideline.isFullWidth;
268
269
  })[0];
269
270
  var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
270
- var shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
271
+ var tableMaxWidth = isCommentEditor ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR : TABLE_MAX_WIDTH;
272
+ var shouldUpdateWidthToWidest = isCommentEditor && tableMaxWidth === newWidth || !!isTableScalingEnabled && isFullWidthGuidelineActive;
271
273
  chainCommands(function (state, dispatch) {
272
274
  return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
273
275
  }, updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
274
- updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
276
+ updateWidth(shouldUpdateWidthToWidest ? tableMaxWidth : newWidth);
275
277
  return newWidth;
276
- }, [countFrames, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
278
+ }, [countFrames, isCommentEditor, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
277
279
  var scheduleResize = useMemo(function () {
278
280
  return rafSchd(handleResize);
279
281
  }, [handleResize]);
@@ -285,7 +287,8 @@ export var TableResizer = function TableResizer(_ref) {
285
287
  dispatch = editorView.dispatch;
286
288
  var pos = getPos();
287
289
  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 : '';
288
- newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? TABLE_MAX_WIDTH : newWidth;
290
+ var tableMaxWidth = isCommentEditor ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR : TABLE_MAX_WIDTH;
291
+ newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
289
292
  var tr = state.tr.setMeta(tableWidthPluginKey, {
290
293
  resizing: false,
291
294
  tableLocalId: '',
@@ -344,7 +347,7 @@ export var TableResizer = function TableResizer(_ref) {
344
347
  onResizeStop();
345
348
  }
346
349
  return newWidth;
347
- }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi]);
350
+ }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, containerWidth, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
348
351
  var handleTableSizeChangeOnKeypress = useCallback(function (step) {
349
352
  var newWidth = width + step;
350
353
  if (newWidth > maxWidth || newWidth < resizerMinWidth) {
package/dist/esm/plugin.js CHANGED
@@ -300,10 +300,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
300
300
  }, {
301
301
  name: 'tableWidth',
302
302
  plugin: function plugin(_ref14) {
303
- var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign;
303
+ var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign, _options$isCommentEdi;
304
304
  var dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent,
305
305
  dispatch = _ref14.dispatch;
306
- 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;
306
+ 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;
307
307
  }
308
308
  },
309
309
  // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -465,7 +465,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
465
465
  stickyHeaders: stickyHeader,
466
466
  isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
467
467
  editorAnalyticsAPI: editorAnalyticsAPI
468
- }), (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
468
+ }), ((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, {
469
469
  target: resizingTableRef,
470
470
  content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
471
471
  alignX: 'center',
package/dist/esm/pm-plugins/table-resizing/utils/consts.js CHANGED
@@ -5,4 +5,7 @@ export var FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
5
5
  export var MAX_SCALING_PERCENT = 0.3;
6
6
  export var MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
7
7
  // Used to calculate the width of a table using the Editor width
8
- export var TABLE_EDITOR_MARGIN = 76;
8
+ export var TABLE_EDITOR_MARGIN = 76;
9
+ var COMMENT_AK_EDITOR_CONTENT_AREA_PADDING = 20;
10
+ var COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN = 12;
11
+ 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 CHANGED
@@ -7,4 +7,4 @@ export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth,
7
7
  export { updateControls, isClickNear, getResizeCellPos } from './dom';
8
8
  export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
9
9
  export { resizeColumn, resizeColumnAndTable } from './resize-column';
10
- export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
10
+ 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/esm/pm-plugins/table-width.js CHANGED
@@ -19,7 +19,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
19
19
  import { ALIGN_START } from '../utils/alignment';
20
20
  import { TABLE_MAX_WIDTH } from './table-resizing/utils';
21
21
  export var pluginKey = new PluginKey('tableWidthPlugin');
22
- var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled) {
22
+ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) {
23
23
  return new SafePlugin({
24
24
  key: pluginKey,
25
25
  state: {
@@ -116,7 +116,7 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
116
116
  }
117
117
  });
118
118
  }
119
- if (isReplaceDocumentOperation) {
119
+ if (isReplaceDocumentOperation && !isCommentEditor) {
120
120
  newState.doc.forEach(function (node, offset) {
121
121
  if (node.type === table) {
122
122
  var width = node.attrs.width;
package/dist/types/nodeviews/TableResizer.d.ts CHANGED
@@ -25,10 +25,11 @@ interface TableResizerProps {
25
25
  isWholeTableInDanger?: boolean;
26
26
  isFullWidthModeEnabled?: boolean;
27
27
  shouldUseIncreasedScalingPercent?: boolean;
28
+ isCommentEditor?: boolean;
28
29
  }
29
30
  export interface TableResizerImprovementProps extends TableResizerProps {
30
31
  onResizeStop?: () => void;
31
32
  onResizeStart?: () => void;
32
33
  }
33
- 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;
34
+ 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;
34
35
  export {};
package/dist/types/pm-plugins/table-resizing/utils/consts.d.ts CHANGED
@@ -5,3 +5,4 @@ export declare const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
5
5
  export declare const MAX_SCALING_PERCENT = 0.3;
6
6
  export declare const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
7
7
  export declare const TABLE_EDITOR_MARGIN = 76;
8
+ export declare const TABLE_OFFSET_IN_COMMENT_EDITOR: number;
package/dist/types/pm-plugins/table-resizing/utils/index.d.ts CHANGED
@@ -10,4 +10,4 @@ export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-t
10
10
  export type { ScaleOptions } from './scale-table';
11
11
  export type { ResizeState, ResizeStateWithAnalytics } from './types';
12
12
  export { resizeColumn, resizeColumnAndTable } from './resize-column';
13
- export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION, } from './consts';
13
+ 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-width.d.ts CHANGED
@@ -13,7 +13,7 @@ type TableWidthPluginState = {
13
13
  tableRef: HTMLTableElement | null;
14
14
  };
15
15
  export declare const pluginKey: PluginKey<TableWidthPluginState>;
16
- declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean) => SafePlugin<{
16
+ declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean, isCommentEditor: boolean) => SafePlugin<{
17
17
  resizing: boolean;
18
18
  tableLocalId: string;
19
19
  tableRef: null;
package/dist/types-ts4.5/nodeviews/TableResizer.d.ts CHANGED
@@ -25,10 +25,11 @@ interface TableResizerProps {
25
25
  isWholeTableInDanger?: boolean;
26
26
  isFullWidthModeEnabled?: boolean;
27
27
  shouldUseIncreasedScalingPercent?: boolean;
28
+ isCommentEditor?: boolean;
28
29
  }
29
30
  export interface TableResizerImprovementProps extends TableResizerProps {
30
31
  onResizeStop?: () => void;
31
32
  onResizeStart?: () => void;
32
33
  }
33
- 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;
34
+ 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;
34
35
  export {};
package/dist/types-ts4.5/pm-plugins/table-resizing/utils/consts.d.ts CHANGED
@@ -5,3 +5,4 @@ export declare const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
5
5
  export declare const MAX_SCALING_PERCENT = 0.3;
6
6
  export declare const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
7
7
  export declare const TABLE_EDITOR_MARGIN = 76;
8
+ export declare const TABLE_OFFSET_IN_COMMENT_EDITOR: number;
package/dist/types-ts4.5/pm-plugins/table-resizing/utils/index.d.ts CHANGED
@@ -10,4 +10,4 @@ export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-t
10
10
  export type { ScaleOptions } from './scale-table';
11
11
  export type { ResizeState, ResizeStateWithAnalytics } from './types';
12
12
  export { resizeColumn, resizeColumnAndTable } from './resize-column';
13
- export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION, } from './consts';
13
+ 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-width.d.ts CHANGED
@@ -13,7 +13,7 @@ type TableWidthPluginState = {
13
13
  tableRef: HTMLTableElement | null;
14
14
  };
15
15
  export declare const pluginKey: PluginKey<TableWidthPluginState>;
16
- declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean) => SafePlugin<{
16
+ declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean, isCommentEditor: boolean) => SafePlugin<{
17
17
  resizing: boolean;
18
18
  tableLocalId: string;
19
19
  tableRef: null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "7.21.5",
3
+ "version": "7.21.6",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
package/src/nodeviews/TableContainer.tsx CHANGED
@@ -21,7 +21,10 @@ import {
21
21
  } from '@atlaskit/editor-shared-styles';
22
22
 
23
23
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
24
- import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
24
+ import {
25
+ TABLE_MAX_WIDTH,
26
+ TABLE_OFFSET_IN_COMMENT_EDITOR,
27
+ } from '../pm-plugins/table-resizing/utils';
25
28
  import type { PluginInjectionAPI, TableSharedState } from '../types';
26
29
  import { TableCssClassName as ClassName } from '../types';
27
30
  import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
@@ -291,6 +294,8 @@ export const ResizableTableContainer = React.memo(
291
294
  responsiveContainerWidth = isTableScalingEnabled
292
295
  ? lineLength
293
296
  : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
297
+ } else if (isCommentEditor) {
298
+ responsiveContainerWidth = containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR;
294
299
  } else {
295
300
  // 76 is currently an accepted padding value considering the spacing for resizer handle
296
301
  // 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(
298
303
  // padding left = padding right = akEditorGutterPadding = 32
299
304
  responsiveContainerWidth = isTableScalingEnabled
300
305
  ? containerWidth - akEditorGutterPaddingDynamic() * 2
301
- : containerWidth -
302
- akEditorGutterPaddingDynamic() * 2 -
303
- (isCommentEditor ? 0 : resizeHandleSpacing);
306
+ : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
304
307
  }
305
308
  let width =
306
309
  !node.attrs.width && isCommentEditor
@@ -336,6 +339,7 @@ export const ResizableTableContainer = React.memo(
336
339
  pluginInjectionApi,
337
340
  onResizeStart,
338
341
  onResizeStop,
342
+ isCommentEditor,
339
343
  };
340
344
 
341
345
  const isLivePageViewMode = editorViewModeState?.mode === 'view';
package/src/nodeviews/TableResizer.tsx CHANGED
@@ -36,6 +36,7 @@ import {
36
36
  previewScaleTable,
37
37
  scaleTable,
38
38
  TABLE_MAX_WIDTH,
39
+ TABLE_OFFSET_IN_COMMENT_EDITOR,
39
40
  } from '../pm-plugins/table-resizing/utils';
40
41
  import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
41
42
  import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
@@ -88,6 +89,7 @@ interface TableResizerProps {
88
89
  isWholeTableInDanger?: boolean;
89
90
  isFullWidthModeEnabled?: boolean;
90
91
  shouldUseIncreasedScalingPercent?: boolean;
92
+ isCommentEditor?: boolean;
91
93
  }
92
94
 
93
95
  export interface TableResizerImprovementProps extends TableResizerProps {
@@ -203,6 +205,7 @@ export const TableResizer = ({
203
205
  shouldUseIncreasedScalingPercent,
204
206
  pluginInjectionApi,
205
207
  isFullWidthModeEnabled,
208
+ isCommentEditor,
206
209
  }: PropsWithChildren<TableResizerImprovementProps>) => {
207
210
  const currentGap = useRef(0);
208
211
  // track resizing state - use ref over state to avoid re-render
@@ -486,7 +489,12 @@ export const TableResizer = ({
486
489
  ).filter((guideline) => guideline.isFullWidth)[0];
487
490
 
488
491
  const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
489
- const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
492
+ const tableMaxWidth = isCommentEditor
493
+ ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR
494
+ : TABLE_MAX_WIDTH;
495
+ const shouldUpdateWidthToWidest =
496
+ (isCommentEditor && tableMaxWidth === newWidth) ||
497
+ (!!isTableScalingEnabled && isFullWidthGuidelineActive);
490
498
 
491
499
  chainCommands(
492
500
  (state, dispatch) => {
@@ -497,12 +505,13 @@ export const TableResizer = ({
497
505
  }),
498
506
  )(state, dispatch);
499
507
 
500
- updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
508
+ updateWidth(shouldUpdateWidthToWidest ? tableMaxWidth : newWidth);
501
509
 
502
510
  return newWidth;
503
511
  },
504
512
  [
505
513
  countFrames,
514
+ isCommentEditor,
506
515
  isTableScalingEnabled,
507
516
  isTableWithFixedColumnWidthsOptionEnabled,
508
517
  isFullWidthModeEnabled,
@@ -528,9 +537,14 @@ export const TableResizer = ({
528
537
  const { state, dispatch } = editorView;
529
538
  const pos = getPos();
530
539
  const currentTableNodeLocalId = node?.attrs?.localId ?? '';
540
+
541
+ const tableMaxWidth = isCommentEditor
542
+ ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR
543
+ : TABLE_MAX_WIDTH;
544
+
531
545
  newWidth =
532
546
  widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]
533
- ? TABLE_MAX_WIDTH
547
+ ? tableMaxWidth
534
548
  : newWidth;
535
549
 
536
550
  let tr = state.tr.setMeta(tableWidthPluginKey, {
@@ -618,6 +632,7 @@ export const TableResizer = ({
618
632
  tableRef,
619
633
  scheduleResize,
620
634
  displayGuideline,
635
+ containerWidth,
621
636
  attachAnalyticsEvent,
622
637
  endMeasure,
623
638
  onResizeStop,
@@ -626,6 +641,7 @@ export const TableResizer = ({
626
641
  widthToWidest,
627
642
  formatMessage,
628
643
  pluginInjectionApi,
644
+ isCommentEditor,
629
645
  ],
630
646
  );
631
647
 
package/src/plugin.tsx CHANGED
@@ -472,13 +472,14 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
472
472
  {
473
473
  name: 'tableWidth',
474
474
  plugin: ({ dispatchAnalyticsEvent, dispatch }) =>
475
- options?.tableResizingEnabled && !options?.isCommentEditor
475
+ options?.tableResizingEnabled
476
476
  ? createTableWidthPlugin(
477
477
  dispatch,
478
478
  dispatchAnalyticsEvent,
479
479
  options?.fullWidthEnabled ?? false,
480
480
  options?.isTableScalingEnabled ?? false,
481
481
  options?.isTableAlignmentEnabled ?? false,
482
+ options?.isCommentEditor ?? false,
482
483
  )
483
484
  : undefined,
484
485
  },
@@ -683,7 +684,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
683
684
  editorAnalyticsAPI={editorAnalyticsAPI}
684
685
  />
685
686
  )}
686
- {options?.isTableScalingEnabled &&
687
+ {(options?.isTableScalingEnabled ||
688
+ (options?.tableResizingEnabled && options.isCommentEditor)) &&
687
689
  isTableResizing &&
688
690
  widthToWidest &&
689
691
  resizingTableLocalId &&
package/src/pm-plugins/table-resizing/utils/consts.ts CHANGED
@@ -6,3 +6,7 @@ export const MAX_SCALING_PERCENT = 0.3;
6
6
  export const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
7
7
  // Used to calculate the width of a table using the Editor width
8
8
  export const TABLE_EDITOR_MARGIN = 76;
9
+ const COMMENT_AK_EDITOR_CONTENT_AREA_PADDING = 20;
10
+ const COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN = 12;
11
+ export const TABLE_OFFSET_IN_COMMENT_EDITOR =
12
+ 2 * (COMMENT_AK_EDITOR_CONTENT_AREA_PADDING + COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN);
package/src/pm-plugins/table-resizing/utils/index.ts CHANGED
@@ -44,4 +44,5 @@ export {
44
44
  TABLE_DEFAULT_WIDTH,
45
45
  MAX_SCALING_PERCENT,
46
46
  MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION,
47
+ TABLE_OFFSET_IN_COMMENT_EDITOR,
47
48
  } from './consts';
package/src/pm-plugins/table-width.ts CHANGED
@@ -47,6 +47,7 @@ const createPlugin = (
47
47
  fullWidthEnabled: boolean,
48
48
  isTableScalingEnabled: boolean,
49
49
  isTableAlignmentEnabled: boolean,
50
+ isCommentEditor: boolean,
50
51
  ) => {
51
52
  return new SafePlugin({
52
53
  key: pluginKey,
@@ -158,7 +159,7 @@ const createPlugin = (
158
159
  });
159
160
  }
160
161
 
161
- if (isReplaceDocumentOperation) {
162
+ if (isReplaceDocumentOperation && !isCommentEditor) {
162
163
  newState.doc.forEach((node, offset) => {
163
164
  if (node.type === table) {
164
165
  const width = node.attrs.width;