@atlaskit/editor-plugin-table 7.16.17 → 7.16.18

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 (12) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/nodeviews/TableResizer.js +5 -5
  3. package/dist/cjs/toolbar.js +32 -24
  4. package/dist/es2019/nodeviews/TableResizer.js +6 -6
  5. package/dist/es2019/toolbar.js +33 -24
  6. package/dist/esm/nodeviews/TableResizer.js +6 -6
  7. package/dist/esm/toolbar.js +32 -24
  8. package/dist/types/toolbar.d.ts +2 -2
  9. package/dist/types-ts4.5/toolbar.d.ts +2 -2
  10. package/package.json +5 -5
  11. package/src/nodeviews/TableResizer.tsx +12 -6
  12. package/src/toolbar.tsx +52 -29
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 7.16.18
4
+
5
+ ### Patch Changes
6
+
7
+ - [#109178](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109178)
8
+ [`c01aae3d5755d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c01aae3d5755d) -
9
+ Change akEditorPadding in table resizing node to use dynamic version to support editor drag and
10
+ drop
11
+ - [#109165](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109165)
12
+ [`0fd6be97334bc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0fd6be97334bc) -
13
+ Use scaled table width to calculate if left alignment should be disabled
14
+ - Updated dependencies
15
+
3
16
  ## 7.16.17
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/nodeviews/TableResizer.js CHANGED
@@ -95,7 +95,7 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
95
95
  // guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
96
96
  var preserve_table_widths_adjustment = -1 * _guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
97
97
  guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
98
- : -2 * _editorSharedStyles.akEditorGutterPadding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
98
+ : -2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
99
99
  }
100
100
  var width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
101
101
  return guidelines.filter(function (guideline) {
@@ -161,7 +161,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
161
161
  keys = _ref3.keys;
162
162
  if (gap !== currentGap.current) {
163
163
  currentGap.current = gap;
164
- var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * _editorSharedStyles.akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
164
+ var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
165
165
  displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, visibleGuidelines));
166
166
  }
167
167
  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
@@ -169,7 +169,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
169
169
  return snappingEnabled ? {
170
170
  x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(_snapping.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
171
171
  // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
172
- isFullWidthModeEnabled ? lineLength + 2 * _editorSharedStyles.akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths
172
+ isFullWidthModeEnabled ? lineLength + 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() : containerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths
173
173
  } : undefined;
174
174
  }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
175
175
  var switchToCenterAlignment = (0, _react.useCallback)(function (pos, node, newWidth, state, dispatch) {
@@ -219,7 +219,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
219
219
  name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
220
220
  });
221
221
  dispatch(tr);
222
- var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * _editorSharedStyles.akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
222
+ var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
223
223
  setSnappingEnabled(displayGuideline(visibleGuidelines));
224
224
  if (onResizeStart) {
225
225
  onResizeStart();
@@ -244,7 +244,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
244
244
  start: pos + 1,
245
245
  parentWidth: newWidth
246
246
  }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
247
- var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * _editorSharedStyles.akEditorGutterPadding : containerWidth;
247
+ var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() : containerWidth;
248
248
  var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(_snapping.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
249
249
  updateActiveGuidelines(closestSnap);
250
250
 
package/dist/cjs/toolbar.js CHANGED
@@ -32,6 +32,7 @@ var _commands = require("./commands");
32
32
  var _commandsWithAnalytics = require("./commands-with-analytics");
33
33
  var _pluginFactory = require("./pm-plugins/plugin-factory");
34
34
  var _tableResizing = require("./pm-plugins/table-resizing");
35
+ var _misc = require("./pm-plugins/table-resizing/utils/misc");
35
36
  var _resizeState = require("./pm-plugins/table-resizing/utils/resize-state");
36
37
  var _tableWidth = require("./pm-plugins/table-width");
37
38
  var _transforms = require("./transforms");
@@ -348,13 +349,23 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
348
349
  var isNested = pluginState.tablePos && (0, _utils4.isTableNested)(state, pluginState.tablePos);
349
350
  var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
350
351
  var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
352
+ var editorView = getEditorView();
353
+ var getDomRef = function getDomRef(editorView) {
354
+ var element;
355
+ var domAtPos = editorView.domAtPos.bind(editorView);
356
+ var parent = (0, _utils2.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
357
+ if (parent) {
358
+ var tableRef = parent.querySelector('table') || undefined;
359
+ if (tableRef) {
360
+ element = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
361
+ }
362
+ }
363
+ return element;
364
+ };
351
365
  var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
352
- var alignmentMenu;
353
- alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth) : [];
354
- var cellItems;
355
- cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
356
- var columnSettingsItems;
357
- columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
366
+ var alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView) : [];
367
+ var cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
368
+ var columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
358
369
  var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
359
370
 
360
371
  // Check if we need to show confirm dialog for delete button
@@ -381,18 +392,6 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
381
392
  };
382
393
  };
383
394
  }
384
- var getDomRef = function getDomRef(editorView) {
385
- var element;
386
- var domAtPos = editorView.domAtPos.bind(editorView);
387
- var parent = (0, _utils2.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
388
- if (parent) {
389
- var tableRef = parent.querySelector('table') || undefined;
390
- if (tableRef) {
391
- element = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
392
- }
393
- }
394
- return element;
395
- };
396
395
  var _getEditorFeatureFlag = getEditorFeatureFlags(),
397
396
  stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
398
397
  return {
@@ -575,7 +574,7 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
575
574
  }
576
575
  return false;
577
576
  };
578
- var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth) {
577
+ var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView) {
579
578
  var formatMessage = _ref6.formatMessage;
580
579
  var tableObject = (0, _utils3.findTable)(editorState.selection);
581
580
  if (!tableObject) {
@@ -608,7 +607,7 @@ var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function get
608
607
  title: formatMessage(layoutToMessages[value]),
609
608
  selected: (0, _alignment.normaliseAlignment)(currentLayout) === value,
610
609
  onClick: (0, _commandsWithAnalytics.setTableAlignmentWithAnalytics)(editorAnalyticsAPI)(value, currentLayout, _analytics.INPUT_METHOD.FLOATING_TB, _analytics.CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED)
611
- }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
610
+ }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, getDomRef, editorView) && {
612
611
  disabled: value !== 'center'
613
612
  });
614
613
  });
@@ -638,10 +637,19 @@ var getSelectedAlignmentIcon = exports.getSelectedAlignmentIcon = function getSe
638
637
  return icon.value === (0, _alignment.normaliseAlignment)(selectedAlignment);
639
638
  });
640
639
  };
641
- var isLayoutOptionDisabled = exports.isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth) {
642
- var lineLength = getEditorContainerWidth().lineLength;
643
- var tableWidth = (0, _nodeWidth.getTableContainerWidth)(selectedNode);
644
- if (selectedNode && lineLength && tableWidth > lineLength) {
640
+ var isLayoutOptionDisabled = exports.isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth, getDomRef, editorView) {
641
+ var _getEditorContainerWi = getEditorContainerWidth(),
642
+ lineLength = _getEditorContainerWi.lineLength;
643
+ var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(selectedNode);
644
+
645
+ // table may be scaled, use the scale percent to calculate the table width
646
+ if (editorView) {
647
+ var tableWrapper = getDomRef(editorView);
648
+ var tableWrapperWidth = (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.clientWidth) || tableContainerWidth;
649
+ var scalePercent = (0, _misc.getStaticTableScalingPercent)(selectedNode, tableWrapperWidth);
650
+ tableContainerWidth = tableContainerWidth * scalePercent;
651
+ }
652
+ if (selectedNode && lineLength && tableContainerWidth > lineLength) {
645
653
  return true;
646
654
  }
647
655
  return false;
package/dist/es2019/nodeviews/TableResizer.js CHANGED
@@ -9,7 +9,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
9
9
  import { ResizerNext } from '@atlaskit/editor-common/resizer';
10
10
  import { browser } from '@atlaskit/editor-common/utils';
11
11
  import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
12
- import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
12
+ import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
13
13
  import { findTable } from '@atlaskit/editor-tables/utils';
14
14
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
15
15
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
@@ -81,7 +81,7 @@ const getVisibleGuidelines = (guidelines, containerWidth, lineLength, isTableSca
81
81
  // guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
82
82
  const preserve_table_widths_adjustment = -1 * PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
83
83
  guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
84
- : -2 * akEditorGutterPadding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
84
+ : -2 * akEditorGutterPaddingDynamic() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
85
85
  }
86
86
  const width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
87
87
  return guidelines.filter(guideline => {
@@ -148,14 +148,14 @@ export const TableResizer = ({
148
148
  }) => {
149
149
  if (gap !== currentGap.current) {
150
150
  currentGap.current = gap;
151
- const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
151
+ const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
152
152
  displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
153
153
  }
154
154
  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
155
155
  const guidelineSnaps = useMemo(() => snappingEnabled ? {
156
156
  x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
157
157
  // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
158
- isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
158
+ isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
159
159
  } : undefined, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
160
160
  const switchToCenterAlignment = useCallback((pos, node, newWidth, state, dispatch) => {
161
161
  if (isTableAlignmentEnabled && node && node.attrs.layout === ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
@@ -212,7 +212,7 @@ export const TableResizer = ({
212
212
  name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
213
213
  });
214
214
  dispatch(tr);
215
- const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
215
+ const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
216
216
  setSnappingEnabled(displayGuideline(visibleGuidelines));
217
217
  if (onResizeStart) {
218
218
  onResizeStart();
@@ -237,7 +237,7 @@ export const TableResizer = ({
237
237
  start: pos + 1,
238
238
  parentWidth: newWidth
239
239
  }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
240
- const editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth;
240
+ const editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth;
241
241
  const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
242
242
  updateActiveGuidelines(closestSnap);
243
243
 
package/dist/es2019/toolbar.js CHANGED
@@ -23,6 +23,7 @@ import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTa
23
23
  import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, setTableAlignmentWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleFixedColumnWidthsOptionAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
24
24
  import { getPluginState } from './pm-plugins/plugin-factory';
25
25
  import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
26
+ import { getStaticTableScalingPercent } from './pm-plugins/table-resizing/utils/misc';
26
27
  import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
27
28
  import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
28
29
  import { canMergeCells } from './transforms';
@@ -328,13 +329,23 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
328
329
  const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
329
330
  const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
330
331
  const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
332
+ const editorView = getEditorView();
333
+ const getDomRef = editorView => {
334
+ let element;
335
+ const domAtPos = editorView.domAtPos.bind(editorView);
336
+ const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
337
+ if (parent) {
338
+ const tableRef = parent.querySelector('table') || undefined;
339
+ if (tableRef) {
340
+ element = closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
341
+ }
342
+ }
343
+ return element;
344
+ };
331
345
  const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
332
- let alignmentMenu;
333
- alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth) : [];
334
- let cellItems;
335
- cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
336
- let columnSettingsItems;
337
- columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
346
+ const alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView) : [];
347
+ const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
348
+ const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
338
349
  const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
339
350
 
340
351
  // Check if we need to show confirm dialog for delete button
@@ -354,18 +365,6 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
354
365
  onConfirm: (isChecked = false) => clickWithCheckboxHandler(isChecked, tableObject.node)
355
366
  });
356
367
  }
357
- const getDomRef = editorView => {
358
- let element;
359
- const domAtPos = editorView.domAtPos.bind(editorView);
360
- const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
361
- if (parent) {
362
- const tableRef = parent.querySelector('table') || undefined;
363
- if (tableRef) {
364
- element = closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
365
- }
366
- }
367
- return element;
368
- };
369
368
  const {
370
369
  stickyScrollbar
371
370
  } = getEditorFeatureFlags();
@@ -539,7 +538,7 @@ const highlightColumnsHandler = (state, dispatch) => {
539
538
  };
540
539
  export const getAlignmentOptionsConfig = (editorState, {
541
540
  formatMessage
542
- }, editorAnalyticsAPI, getEditorContainerWidth) => {
541
+ }, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView) => {
543
542
  const tableObject = findTable(editorState.selection);
544
543
  if (!tableObject) {
545
544
  return [];
@@ -573,7 +572,7 @@ export const getAlignmentOptionsConfig = (editorState, {
573
572
  title: formatMessage(layoutToMessages[value]),
574
573
  selected: normaliseAlignment(currentLayout) === value,
575
574
  onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB, CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED),
576
- ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
575
+ ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, getDomRef, editorView) && {
577
576
  disabled: value !== 'center'
578
577
  })
579
578
  };
@@ -602,10 +601,20 @@ export const getSelectedAlignmentIcon = (alignmentIcons, selectedNode) => {
602
601
  const selectedAlignment = selectedNode.attrs.layout;
603
602
  return alignmentIcons.find(icon => icon.value === normaliseAlignment(selectedAlignment));
604
603
  };
605
- export const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth) => {
606
- const lineLength = getEditorContainerWidth().lineLength;
607
- const tableWidth = getTableContainerWidth(selectedNode);
608
- if (selectedNode && lineLength && tableWidth > lineLength) {
604
+ export const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth, getDomRef, editorView) => {
605
+ const {
606
+ lineLength
607
+ } = getEditorContainerWidth();
608
+ let tableContainerWidth = getTableContainerWidth(selectedNode);
609
+
610
+ // table may be scaled, use the scale percent to calculate the table width
611
+ if (editorView) {
612
+ const tableWrapper = getDomRef(editorView);
613
+ const tableWrapperWidth = (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.clientWidth) || tableContainerWidth;
614
+ const scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth);
615
+ tableContainerWidth = tableContainerWidth * scalePercent;
616
+ }
617
+ if (selectedNode && lineLength && tableContainerWidth > lineLength) {
609
618
  return true;
610
619
  }
611
620
  return false;
package/dist/esm/nodeviews/TableResizer.js CHANGED
@@ -13,7 +13,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
13
13
  import { ResizerNext } from '@atlaskit/editor-common/resizer';
14
14
  import { browser } from '@atlaskit/editor-common/utils';
15
15
  import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
16
- import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
16
+ import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
17
17
  import { findTable } from '@atlaskit/editor-tables/utils';
18
18
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
19
19
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
@@ -85,7 +85,7 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
85
85
  // guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
86
86
  var preserve_table_widths_adjustment = -1 * PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
87
87
  guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
88
- : -2 * akEditorGutterPadding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
88
+ : -2 * akEditorGutterPaddingDynamic() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
89
89
  }
90
90
  var width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
91
91
  return guidelines.filter(function (guideline) {
@@ -151,7 +151,7 @@ export var TableResizer = function TableResizer(_ref) {
151
151
  keys = _ref3.keys;
152
152
  if (gap !== currentGap.current) {
153
153
  currentGap.current = gap;
154
- var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
154
+ var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
155
155
  displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
156
156
  }
157
157
  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
@@ -159,7 +159,7 @@ export var TableResizer = function TableResizer(_ref) {
159
159
  return snappingEnabled ? {
160
160
  x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
161
161
  // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
162
- isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
162
+ isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
163
163
  } : undefined;
164
164
  }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
165
165
  var switchToCenterAlignment = useCallback(function (pos, node, newWidth, state, dispatch) {
@@ -209,7 +209,7 @@ export var TableResizer = function TableResizer(_ref) {
209
209
  name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
210
210
  });
211
211
  dispatch(tr);
212
- var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
212
+ var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
213
213
  setSnappingEnabled(displayGuideline(visibleGuidelines));
214
214
  if (onResizeStart) {
215
215
  onResizeStart();
@@ -234,7 +234,7 @@ export var TableResizer = function TableResizer(_ref) {
234
234
  start: pos + 1,
235
235
  parentWidth: newWidth
236
236
  }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
237
- var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth;
237
+ var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth;
238
238
  var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
239
239
  updateActiveGuidelines(closestSnap);
240
240
 
package/dist/esm/toolbar.js CHANGED
@@ -27,6 +27,7 @@ import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTa
27
27
  import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, setTableAlignmentWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleFixedColumnWidthsOptionAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
28
28
  import { getPluginState } from './pm-plugins/plugin-factory';
29
29
  import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
30
+ import { getStaticTableScalingPercent } from './pm-plugins/table-resizing/utils/misc';
30
31
  import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
31
32
  import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
32
33
  import { canMergeCells } from './transforms';
@@ -339,13 +340,23 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
339
340
  var isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
340
341
  var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
341
342
  var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
343
+ var editorView = getEditorView();
344
+ var getDomRef = function getDomRef(editorView) {
345
+ var element;
346
+ var domAtPos = editorView.domAtPos.bind(editorView);
347
+ var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
348
+ if (parent) {
349
+ var tableRef = parent.querySelector('table') || undefined;
350
+ if (tableRef) {
351
+ element = closestElement(tableRef, ".".concat(TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
352
+ }
353
+ }
354
+ return element;
355
+ };
342
356
  var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
343
- var alignmentMenu;
344
- alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth) : [];
345
- var cellItems;
346
- cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
347
- var columnSettingsItems;
348
- columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
357
+ var alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView) : [];
358
+ var cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
359
+ var columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
349
360
  var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
350
361
 
351
362
  // Check if we need to show confirm dialog for delete button
@@ -372,18 +383,6 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
372
383
  };
373
384
  };
374
385
  }
375
- var getDomRef = function getDomRef(editorView) {
376
- var element;
377
- var domAtPos = editorView.domAtPos.bind(editorView);
378
- var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
379
- if (parent) {
380
- var tableRef = parent.querySelector('table') || undefined;
381
- if (tableRef) {
382
- element = closestElement(tableRef, ".".concat(TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
383
- }
384
- }
385
- return element;
386
- };
387
386
  var _getEditorFeatureFlag = getEditorFeatureFlags(),
388
387
  stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
389
388
  return {
@@ -566,7 +565,7 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
566
565
  }
567
566
  return false;
568
567
  };
569
- export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth) {
568
+ export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView) {
570
569
  var formatMessage = _ref6.formatMessage;
571
570
  var tableObject = findTable(editorState.selection);
572
571
  if (!tableObject) {
@@ -599,7 +598,7 @@ export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editor
599
598
  title: formatMessage(layoutToMessages[value]),
600
599
  selected: normaliseAlignment(currentLayout) === value,
601
600
  onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB, CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED)
602
- }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
601
+ }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, getDomRef, editorView) && {
603
602
  disabled: value !== 'center'
604
603
  });
605
604
  });
@@ -629,10 +628,19 @@ export var getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmen
629
628
  return icon.value === normaliseAlignment(selectedAlignment);
630
629
  });
631
630
  };
632
- export var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth) {
633
- var lineLength = getEditorContainerWidth().lineLength;
634
- var tableWidth = getTableContainerWidth(selectedNode);
635
- if (selectedNode && lineLength && tableWidth > lineLength) {
631
+ export var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth, getDomRef, editorView) {
632
+ var _getEditorContainerWi = getEditorContainerWidth(),
633
+ lineLength = _getEditorContainerWi.lineLength;
634
+ var tableContainerWidth = getTableContainerWidth(selectedNode);
635
+
636
+ // table may be scaled, use the scale percent to calculate the table width
637
+ if (editorView) {
638
+ var tableWrapper = getDomRef(editorView);
639
+ var tableWrapperWidth = (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.clientWidth) || tableContainerWidth;
640
+ var scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth);
641
+ tableContainerWidth = tableContainerWidth * scalePercent;
642
+ }
643
+ if (selectedNode && lineLength && tableContainerWidth > lineLength) {
636
644
  return true;
637
645
  }
638
646
  return false;
package/dist/types/toolbar.d.ts CHANGED
@@ -18,7 +18,7 @@ type AlignmentIcon = {
18
18
  value: AlignmentOptions;
19
19
  icon: React.ComponentClass<any>;
20
20
  };
21
- export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorContainerWidth: GetEditorContainerWidth) => Array<FloatingToolbarDropdown<Command>>;
21
+ export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorContainerWidth: GetEditorContainerWidth, getDomRef: (editorView: EditorView) => HTMLElement | undefined, editorView: EditorView | null) => Array<FloatingToolbarDropdown<Command>>;
22
22
  export declare const getSelectedAlignmentIcon: (alignmentIcons: AlignmentIcon[], selectedNode: PMNode) => AlignmentIcon | undefined;
23
- export declare const isLayoutOptionDisabled: (selectedNode: PMNode, getEditorContainerWidth: GetEditorContainerWidth) => boolean;
23
+ export declare const isLayoutOptionDisabled: (selectedNode: PMNode, getEditorContainerWidth: GetEditorContainerWidth, getDomRef: (editorView: EditorView) => HTMLElement | undefined, editorView: EditorView | null) => boolean;
24
24
  export {};
package/dist/types-ts4.5/toolbar.d.ts CHANGED
@@ -18,7 +18,7 @@ type AlignmentIcon = {
18
18
  value: AlignmentOptions;
19
19
  icon: React.ComponentClass<any>;
20
20
  };
21
- export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorContainerWidth: GetEditorContainerWidth) => Array<FloatingToolbarDropdown<Command>>;
21
+ export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorContainerWidth: GetEditorContainerWidth, getDomRef: (editorView: EditorView) => HTMLElement | undefined, editorView: EditorView | null) => Array<FloatingToolbarDropdown<Command>>;
22
22
  export declare const getSelectedAlignmentIcon: (alignmentIcons: AlignmentIcon[], selectedNode: PMNode) => AlignmentIcon | undefined;
23
- export declare const isLayoutOptionDisabled: (selectedNode: PMNode, getEditorContainerWidth: GetEditorContainerWidth) => boolean;
23
+ export declare const isLayoutOptionDisabled: (selectedNode: PMNode, getEditorContainerWidth: GetEditorContainerWidth, getDomRef: (editorView: EditorView) => HTMLElement | undefined, editorView: EditorView | null) => boolean;
24
24
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "7.16.17",
3
+ "version": "7.16.18",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
31
31
  "@atlaskit/adf-schema": "^36.10.7",
32
32
  "@atlaskit/button": "^17.17.0",
33
33
  "@atlaskit/custom-steps": "^0.2.0",
34
- "@atlaskit/editor-common": "^82.0.0",
34
+ "@atlaskit/editor-common": "^82.1.0",
35
35
  "@atlaskit/editor-palette": "1.6.0",
36
36
  "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
37
37
  "@atlaskit/editor-plugin-analytics": "^1.2.0",
@@ -44,13 +44,13 @@
44
44
  "@atlaskit/editor-shared-styles": "^2.12.0",
45
45
  "@atlaskit/editor-tables": "^2.7.0",
46
46
  "@atlaskit/icon": "^22.3.0",
47
- "@atlaskit/menu": "^2.3.0",
47
+ "@atlaskit/menu": "^2.4.0",
48
48
  "@atlaskit/platform-feature-flags": "^0.2.1",
49
49
  "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
50
50
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
51
51
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
52
- "@atlaskit/primitives": "^6.5.0",
53
- "@atlaskit/theme": "^12.8.0",
52
+ "@atlaskit/primitives": "^7.0.0",
53
+ "@atlaskit/theme": "^12.9.0",
54
54
  "@atlaskit/toggle": "^13.1.0",
55
55
  "@atlaskit/tokens": "^1.49.0",
56
56
  "@atlaskit/tooltip": "^18.4.0",
package/src/nodeviews/TableResizer.tsx CHANGED
@@ -22,7 +22,7 @@ import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
22
22
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
23
23
  import type { Transaction } from '@atlaskit/editor-prosemirror/state';
24
24
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
25
- import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
25
+ import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
26
26
  import { findTable } from '@atlaskit/editor-tables/utils';
27
27
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
28
28
  import { token } from '@atlaskit/tokens';
@@ -162,7 +162,7 @@ const getVisibleGuidelines = (
162
162
 
163
163
  guidelineVisibleAdjustment = isFullWidthModeEnabled
164
164
  ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
165
- : -2 * akEditorGutterPadding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
165
+ : -2 * akEditorGutterPaddingDynamic() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
166
166
  }
167
167
  const width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
168
168
 
@@ -236,7 +236,9 @@ export const TableResizer = ({
236
236
  isTableScalingEnabled
237
237
  ? defaultGuidelinesForPreserveTable(
238
238
  PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
239
- isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth,
239
+ isFullWidthModeEnabled
240
+ ? lineLength + 2 * akEditorGutterPaddingDynamic()
241
+ : containerWidth,
240
242
  excludeGuidelineConfig,
241
243
  )
242
244
  : defaultGuidelines,
@@ -265,7 +267,9 @@ export const TableResizer = ({
265
267
  x: isTableScalingEnabled
266
268
  ? defaultTablePreserveSnappingWidths(
267
269
  PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
268
- isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth,
270
+ isFullWidthModeEnabled
271
+ ? lineLength + 2 * akEditorGutterPaddingDynamic()
272
+ : containerWidth,
269
273
  excludeGuidelineConfig,
270
274
  )
271
275
  : defaultSnappingWidths,
@@ -354,7 +358,9 @@ export const TableResizer = ({
354
358
  isTableScalingEnabled
355
359
  ? defaultGuidelinesForPreserveTable(
356
360
  PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
357
- isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth,
361
+ isFullWidthModeEnabled
362
+ ? lineLength + 2 * akEditorGutterPaddingDynamic()
363
+ : containerWidth,
358
364
  excludeGuidelineConfig,
359
365
  )
360
366
  : defaultGuidelines,
@@ -410,7 +416,7 @@ export const TableResizer = ({
410
416
  );
411
417
 
412
418
  const editorContainerWidth = isFullWidthModeEnabled
413
- ? lineLength + 2 * akEditorGutterPadding
419
+ ? lineLength + 2 * akEditorGutterPaddingDynamic()
414
420
  : containerWidth;
415
421
 
416
422
  const closestSnap = findClosestSnap(
package/src/toolbar.tsx CHANGED
@@ -78,6 +78,7 @@ import {
78
78
  import type { TablePluginOptions } from './plugin';
79
79
  import { getPluginState } from './pm-plugins/plugin-factory';
80
80
  import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
81
+ import { getStaticTableScalingPercent } from './pm-plugins/table-resizing/utils/misc';
81
82
  import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
82
83
  import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
83
84
  import { canMergeCells } from './transforms';
@@ -464,6 +465,23 @@ export const getToolbarConfig =
464
465
  const isTableScalingWithFixedColumnWidthsOptionShown =
465
466
  isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
466
467
  const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
468
+ const editorView = getEditorView();
469
+
470
+ const getDomRef = (editorView: EditorView) => {
471
+ let element: HTMLElement | undefined;
472
+ const domAtPos = editorView.domAtPos.bind(editorView);
473
+ const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
474
+ if (parent) {
475
+ const tableRef =
476
+ (parent as HTMLElement).querySelector<HTMLTableElement>('table') || undefined;
477
+ if (tableRef) {
478
+ element =
479
+ closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
480
+ }
481
+ }
482
+
483
+ return element;
484
+ };
467
485
 
468
486
  const menu = getToolbarMenuConfig(
469
487
  config,
@@ -474,18 +492,23 @@ export const getToolbarConfig =
474
492
  areTableColumWidthsFixed,
475
493
  );
476
494
 
477
- let alignmentMenu: Array<FloatingToolbarItem<Command>>;
478
- alignmentMenu =
495
+ const alignmentMenu =
479
496
  options?.isTableAlignmentEnabled && !isNested
480
- ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth)
497
+ ? getAlignmentOptionsConfig(
498
+ state,
499
+ intl,
500
+ editorAnalyticsAPI,
501
+ getEditorContainerWidth,
502
+ getDomRef,
503
+ editorView,
504
+ )
481
505
  : [];
482
506
 
483
- let cellItems: Array<FloatingToolbarItem<Command>>;
484
- cellItems = pluginState.isDragAndDropEnabled
507
+ const cellItems = pluginState.isDragAndDropEnabled
485
508
  ? []
486
509
  : getCellItems(
487
510
  state,
488
- getEditorView(),
511
+ editorView,
489
512
  intl,
490
513
  getEditorContainerWidth,
491
514
  editorAnalyticsAPI,
@@ -493,11 +516,10 @@ export const getToolbarConfig =
493
516
  shouldUseIncreasedScalingPercent,
494
517
  );
495
518
 
496
- let columnSettingsItems;
497
- columnSettingsItems = pluginState.isDragAndDropEnabled
519
+ const columnSettingsItems = pluginState.isDragAndDropEnabled
498
520
  ? getColumnSettingItems(
499
521
  state,
500
- getEditorView(),
522
+ editorView,
501
523
  intl,
502
524
  getEditorContainerWidth,
503
525
  editorAnalyticsAPI,
@@ -526,22 +548,6 @@ export const getToolbarConfig =
526
548
  });
527
549
  }
528
550
 
529
- const getDomRef = (editorView: EditorView) => {
530
- let element: HTMLElement | undefined;
531
- const domAtPos = editorView.domAtPos.bind(editorView);
532
- const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
533
- if (parent) {
534
- const tableRef =
535
- (parent as HTMLElement).querySelector<HTMLTableElement>('table') || undefined;
536
- if (tableRef) {
537
- element =
538
- closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
539
- }
540
- }
541
-
542
- return element;
543
- };
544
-
545
551
  const { stickyScrollbar } = getEditorFeatureFlags();
546
552
 
547
553
  return {
@@ -808,6 +814,8 @@ export const getAlignmentOptionsConfig = (
808
814
  { formatMessage }: ToolbarMenuContext,
809
815
  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
810
816
  getEditorContainerWidth: GetEditorContainerWidth,
817
+ getDomRef: (editorView: EditorView) => HTMLElement | undefined,
818
+ editorView: EditorView | null,
811
819
  ): Array<FloatingToolbarDropdown<Command>> => {
812
820
  const tableObject = findTable(editorState.selection);
813
821
 
@@ -850,7 +858,12 @@ export const getAlignmentOptionsConfig = (
850
858
  INPUT_METHOD.FLOATING_TB,
851
859
  CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED,
852
860
  ),
853
- ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
861
+ ...(isLayoutOptionDisabled(
862
+ tableObject.node,
863
+ getEditorContainerWidth,
864
+ getDomRef,
865
+ editorView,
866
+ ) && {
854
867
  disabled: value !== 'center',
855
868
  }),
856
869
  };
@@ -889,11 +902,21 @@ export const getSelectedAlignmentIcon = (alignmentIcons: AlignmentIcon[], select
889
902
  export const isLayoutOptionDisabled = (
890
903
  selectedNode: PMNode,
891
904
  getEditorContainerWidth: GetEditorContainerWidth,
905
+ getDomRef: (editorView: EditorView) => HTMLElement | undefined,
906
+ editorView: EditorView | null,
892
907
  ) => {
893
- const lineLength = getEditorContainerWidth().lineLength;
894
- const tableWidth = getTableContainerWidth(selectedNode);
908
+ const { lineLength } = getEditorContainerWidth();
909
+ let tableContainerWidth = getTableContainerWidth(selectedNode);
910
+
911
+ // table may be scaled, use the scale percent to calculate the table width
912
+ if (editorView) {
913
+ const tableWrapper = getDomRef(editorView);
914
+ const tableWrapperWidth = tableWrapper?.clientWidth || tableContainerWidth;
915
+ const scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth);
916
+ tableContainerWidth = tableContainerWidth * scalePercent;
917
+ }
895
918
 
896
- if (selectedNode && lineLength && tableWidth > lineLength) {
919
+ if (selectedNode && lineLength && tableContainerWidth > lineLength) {
897
920
  return true;
898
921
  }
899
922