@atlaskit/editor-plugin-table 7.6.14 → 7.7.0

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 (108) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/commands/misc.js +0 -2
  3. package/dist/cjs/nodeviews/OverflowShadowsObserver.js +1 -3
  4. package/dist/cjs/nodeviews/TableComponent.js +3 -18
  5. package/dist/cjs/nodeviews/TableContainer.js +2 -18
  6. package/dist/cjs/nodeviews/table.js +0 -2
  7. package/dist/cjs/plugin.js +3 -20
  8. package/dist/cjs/pm-plugins/main.js +1 -2
  9. package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +7 -21
  10. package/dist/cjs/pm-plugins/table-resizing/utils/colgroup.js +32 -57
  11. package/dist/cjs/pm-plugins/table-resizing/utils/misc.js +1 -2
  12. package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js +16 -28
  13. package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js +2 -12
  14. package/dist/cjs/reducer.js +0 -2
  15. package/dist/cjs/transforms/column-width.js +3 -5
  16. package/dist/cjs/types.js +0 -1
  17. package/dist/cjs/ui/ColumnResizeWidget/index.js +5 -1
  18. package/dist/cjs/ui/common-styles.js +5 -12
  19. package/dist/cjs/ui/ui-styles.js +7 -12
  20. package/dist/cjs/utils/index.js +0 -6
  21. package/dist/cjs/utils/nodes.js +5 -18
  22. package/dist/es2019/commands/misc.js +0 -2
  23. package/dist/es2019/nodeviews/OverflowShadowsObserver.js +1 -3
  24. package/dist/es2019/nodeviews/TableComponent.js +3 -18
  25. package/dist/es2019/nodeviews/TableContainer.js +1 -16
  26. package/dist/es2019/nodeviews/table.js +0 -2
  27. package/dist/es2019/plugin.js +5 -24
  28. package/dist/es2019/pm-plugins/main.js +1 -2
  29. package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +8 -22
  30. package/dist/es2019/pm-plugins/table-resizing/utils/colgroup.js +30 -53
  31. package/dist/es2019/pm-plugins/table-resizing/utils/misc.js +1 -2
  32. package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js +14 -24
  33. package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +2 -12
  34. package/dist/es2019/reducer.js +0 -5
  35. package/dist/es2019/transforms/column-width.js +3 -5
  36. package/dist/es2019/types.js +0 -1
  37. package/dist/es2019/ui/ColumnResizeWidget/index.js +5 -1
  38. package/dist/es2019/ui/common-styles.js +15 -46
  39. package/dist/es2019/ui/ui-styles.js +34 -41
  40. package/dist/es2019/utils/index.js +1 -1
  41. package/dist/es2019/utils/nodes.js +0 -15
  42. package/dist/esm/commands/misc.js +0 -2
  43. package/dist/esm/nodeviews/OverflowShadowsObserver.js +1 -3
  44. package/dist/esm/nodeviews/TableComponent.js +3 -18
  45. package/dist/esm/nodeviews/TableContainer.js +2 -18
  46. package/dist/esm/nodeviews/table.js +0 -2
  47. package/dist/esm/plugin.js +5 -22
  48. package/dist/esm/pm-plugins/main.js +1 -2
  49. package/dist/esm/pm-plugins/table-resizing/event-handlers.js +8 -22
  50. package/dist/esm/pm-plugins/table-resizing/utils/colgroup.js +32 -57
  51. package/dist/esm/pm-plugins/table-resizing/utils/misc.js +1 -2
  52. package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js +16 -28
  53. package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js +2 -12
  54. package/dist/esm/reducer.js +0 -2
  55. package/dist/esm/transforms/column-width.js +3 -5
  56. package/dist/esm/types.js +0 -1
  57. package/dist/esm/ui/ColumnResizeWidget/index.js +5 -1
  58. package/dist/esm/ui/common-styles.js +6 -13
  59. package/dist/esm/ui/ui-styles.js +7 -12
  60. package/dist/esm/utils/index.js +1 -1
  61. package/dist/esm/utils/nodes.js +0 -13
  62. package/dist/types/nodeviews/TableContainer.d.ts +1 -2
  63. package/dist/types/nodeviews/types.d.ts +0 -1
  64. package/dist/types/plugin.d.ts +0 -1
  65. package/dist/types/pm-plugins/main.d.ts +1 -1
  66. package/dist/types/pm-plugins/table-resizing/utils/scale-table.d.ts +0 -1
  67. package/dist/types/types.d.ts +0 -9
  68. package/dist/types/ui/FloatingContextualButton/index.d.ts +0 -2
  69. package/dist/types/utils/index.d.ts +1 -1
  70. package/dist/types/utils/nodes.d.ts +0 -1
  71. package/dist/types-ts4.5/nodeviews/TableContainer.d.ts +1 -2
  72. package/dist/types-ts4.5/nodeviews/types.d.ts +0 -1
  73. package/dist/types-ts4.5/plugin.d.ts +0 -1
  74. package/dist/types-ts4.5/pm-plugins/main.d.ts +1 -1
  75. package/dist/types-ts4.5/pm-plugins/table-resizing/utils/scale-table.d.ts +0 -1
  76. package/dist/types-ts4.5/types.d.ts +0 -9
  77. package/dist/types-ts4.5/ui/FloatingContextualButton/index.d.ts +0 -2
  78. package/dist/types-ts4.5/utils/index.d.ts +1 -1
  79. package/dist/types-ts4.5/utils/nodes.d.ts +0 -1
  80. package/package.json +2 -5
  81. package/src/commands/misc.ts +0 -2
  82. package/src/nodeviews/OverflowShadowsObserver.ts +1 -6
  83. package/src/nodeviews/TableComponent.tsx +2 -25
  84. package/src/nodeviews/TableContainer.tsx +2 -26
  85. package/src/nodeviews/table.tsx +0 -2
  86. package/src/nodeviews/types.ts +0 -1
  87. package/src/plugin.tsx +4 -43
  88. package/src/pm-plugins/main.ts +0 -2
  89. package/src/pm-plugins/table-resizing/event-handlers.ts +8 -37
  90. package/src/pm-plugins/table-resizing/utils/colgroup.ts +40 -61
  91. package/src/pm-plugins/table-resizing/utils/misc.ts +4 -6
  92. package/src/pm-plugins/table-resizing/utils/resize-state.ts +18 -29
  93. package/src/pm-plugins/table-resizing/utils/scale-table.ts +2 -13
  94. package/src/reducer.ts +0 -3
  95. package/src/transforms/column-width.ts +2 -10
  96. package/src/types.ts +0 -8
  97. package/src/ui/ColumnResizeWidget/index.tsx +10 -1
  98. package/src/ui/FloatingContextualButton/index.tsx +0 -2
  99. package/src/ui/common-styles.ts +15 -53
  100. package/src/ui/ui-styles.ts +34 -47
  101. package/src/utils/index.ts +0 -1
  102. package/src/utils/nodes.ts +0 -23
  103. package/dist/cjs/ui/LayoutButton/index.js +0 -206
  104. package/dist/es2019/ui/LayoutButton/index.js +0 -168
  105. package/dist/esm/ui/LayoutButton/index.js +0 -196
  106. package/dist/types/ui/LayoutButton/index.d.ts +0 -21
  107. package/dist/types-ts4.5/ui/LayoutButton/index.d.ts +0 -21
  108. package/src/ui/LayoutButton/index.tsx +0 -217
@@ -296,7 +296,7 @@ export const OverflowShadow = isDragAndDropEnabled => css`
296
296
  ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
297
297
  transparent 1px
298
298
  );
299
- left: ${getBooleanFF('platform.editor.custom-table-width') ? `calc(100% - ${tableOverflowShadowWidthWide}px)` : `calc(100% - ${tableOverflowShadowWidthWide - 10}px)`};
299
+ left: calc(100% - ${tableOverflowShadowWidthWide}px);
300
300
  }
301
301
  .${ClassName.WITH_CONTROLS} {
302
302
  ${overflowShadowWidhoutDnD(isDragAndDropEnabled)}
@@ -346,24 +346,24 @@ const columnHeaderButtonSelected = () => css({
346
346
  zIndex: columnControlsSelectedZIndex
347
347
  });
348
348
  const getFloatingDotOverrides = () => {
349
- return getBooleanFF('platform.editor.custom-table-width') ? css`
350
- tr
351
- th:last-child
352
- .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before,
353
- tr
354
- td:last-child
355
- .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
356
- content: '';
357
- background-color: ${tableBorderColor};
358
- position: absolute;
359
- height: ${lineMarkerSize}px;
360
- width: ${lineMarkerSize}px;
361
- border-radius: 50%;
362
- pointer-events: none;
363
- top: ${"var(--ds-space-025, 2px)"};
364
- right: 0px;
365
- }
366
- ` : '';
349
+ return css`
350
+ tr
351
+ th:last-child
352
+ .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before,
353
+ tr
354
+ td:last-child
355
+ .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
356
+ content: '';
357
+ background-color: ${tableBorderColor};
358
+ position: absolute;
359
+ height: ${lineMarkerSize}px;
360
+ width: ${lineMarkerSize}px;
361
+ border-radius: 50%;
362
+ pointer-events: none;
363
+ top: ${"var(--ds-space-025, 2px)"};
364
+ right: 0px;
365
+ }
366
+ `;
367
367
  };
368
368
  export const floatingColumnControls = () => {
369
369
  return css`
@@ -647,27 +647,6 @@ export const hoveredWarningCell = css`
647
647
  }
648
648
  `;
649
649
 
650
- // move the resize handle zone completely inside the table cell to avoid overflow
651
- const getLastColumnResizerOverrides = () => {
652
- return getBooleanFF('platform.editor.custom-table-width') ? css`
653
- tr
654
- th:last-child
655
- .${ClassName.RESIZE_HANDLE_DECORATION},
656
- tr
657
- td:last-child
658
- .${ClassName.RESIZE_HANDLE_DECORATION} {
659
- background-color: transparent;
660
- position: absolute;
661
- width: ${resizeHandlerAreaWidth / 2}px;
662
- height: 100%;
663
- top: 0;
664
- right: 0;
665
- cursor: col-resize;
666
- z-index: ${resizeHandlerZIndex};
667
- }
668
- ` : '';
669
- };
670
-
671
650
  // Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
672
651
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
673
652
  const resizeHandleOverrides = isDragAndDropEnabled => {
@@ -757,7 +736,21 @@ export const resizeHandle = isDragAndDropEnabled => css`
757
736
  z-index: ${resizeHandlerZIndex};
758
737
  }
759
738
 
760
- ${getLastColumnResizerOverrides()}
739
+ tr
740
+ th:last-child
741
+ .${ClassName.RESIZE_HANDLE_DECORATION},
742
+ tr
743
+ td:last-child
744
+ .${ClassName.RESIZE_HANDLE_DECORATION} {
745
+ background-color: transparent;
746
+ position: absolute;
747
+ width: ${resizeHandlerAreaWidth / 2}px;
748
+ height: 100%;
749
+ top: 0;
750
+ right: 0;
751
+ cursor: col-resize;
752
+ z-index: ${resizeHandlerZIndex};
753
+ }
761
754
 
762
755
  ${resizeHandleOverrides(isDragAndDropEnabled)}
763
756
 
@@ -1,6 +1,6 @@
1
1
  export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, isSelectionUpdated } from './selection';
2
2
  export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
3
- export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
3
+ export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
4
4
  export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
5
5
  export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint } from './dom';
6
6
  export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow } from './column-controls';
@@ -1,8 +1,6 @@
1
1
  import { mapChildren } from '@atlaskit/editor-common/utils';
2
- import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
3
2
  import { TableMap } from '@atlaskit/editor-tables/table-map';
4
3
  import { findTable } from '@atlaskit/editor-tables/utils';
5
- import { pluginKey } from '../pm-plugins/plugin-key';
6
4
  export const isIsolating = node => {
7
5
  return !!node.type.spec.isolating;
8
6
  };
@@ -40,19 +38,6 @@ export const containsHeaderRow = table => {
40
38
  export const checkIfHeaderColumnEnabled = selection => filterNearSelection(selection, findTable, containsHeaderColumn, false);
41
39
  export const checkIfHeaderRowEnabled = selection => filterNearSelection(selection, findTable, containsHeaderRow, false);
42
40
  export const checkIfNumberColumnEnabled = selection => filterNearSelection(selection, findTable, table => !!table.attrs.isNumberColumnEnabled, false);
43
- export const isLayoutSupported = state => {
44
- var _pluginKey$getState;
45
- const {
46
- permittedLayouts
47
- } = ((_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.pluginConfig) || {};
48
- const {
49
- bodiedExtension,
50
- layoutSection,
51
- expand,
52
- extensionFrame
53
- } = state.schema.nodes;
54
- return !hasParentNodeOfType([expand, layoutSection, bodiedExtension, extensionFrame])(state.selection) && !!permittedLayouts && (permittedLayouts === 'all' || permittedLayouts.indexOf('default') > -1 && permittedLayouts.indexOf('wide') > -1 && permittedLayouts.indexOf('full-width') > -1);
55
- };
56
41
  export const getTableWidth = node => {
57
42
  return getTableWidths(node).reduce((acc, current) => acc + current, 0);
58
43
  };
@@ -31,7 +31,6 @@ export var setTableRef = function setTableRef(ref) {
31
31
  var tableNode = ref && foundTable ? foundTable.node : undefined;
32
32
  var tablePos = ref && foundTable ? foundTable.pos : undefined;
33
33
  var tableWrapperTarget = closestElement(tableRef, ".".concat(ClassName.TABLE_NODE_WRAPPER)) || undefined;
34
- var layout = tableNode ? tableNode.attrs.layout : undefined;
35
34
  var _getPluginState = getPluginState(state),
36
35
  isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
37
36
  return {
@@ -41,7 +40,6 @@ export var setTableRef = function setTableRef(ref) {
41
40
  tableNode: tableNode,
42
41
  tablePos: tablePos,
43
42
  tableWrapperTarget: tableWrapperTarget,
44
- layout: layout || 'default',
45
43
  isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
46
44
  isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
47
45
  isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
@@ -2,9 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
2
  import _createClass from "@babel/runtime/helpers/createClass";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import rafSchedule from 'raf-schd';
5
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
5
  import { TableCssClassName as ClassName, ShadowEvent } from '../types';
7
- import { tableInsertColumnButtonSize } from '../ui/consts';
8
6
  import { updateShadowListForStickyStyles } from './update-overflow-shadows';
9
7
  export var OverflowShadowsObserver = /*#__PURE__*/function () {
10
8
  // updateShadowState is a method to update shadow key
@@ -36,7 +34,7 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
36
34
  }, {
37
35
  threshold: [0, 1],
38
36
  root: _this.wrapper,
39
- rootMargin: getBooleanFF('platform.editor.custom-table-width') ? '0px' : "0px ".concat(tableInsertColumnButtonSize / 2, "px 0px 0px")
37
+ rootMargin: '0px'
40
38
  });
41
39
  return;
42
40
  }
@@ -128,16 +128,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
128
128
  var node = getNode();
129
129
  var prevAttrs = prevNode.attrs;
130
130
  var isNested = isTableNested(_this.props.view.state, _this.props.getPos());
131
- // We only consider a layout change valid if it's done outside of an autoSize.
132
- var layoutChanged = prevAttrs.layout !== node.attrs.layout && prevAttrs.__autoSize === node.attrs.__autoSize;
133
131
  var parentWidth = _this.getParentNodeWidth();
134
132
  var parentWidthChanged = parentWidth && parentWidth !== _this.state.parentWidth;
135
133
  var layoutSize = _this.tableNodeLayoutSize(node, containerWidth.width, options);
136
134
  var hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
137
135
  var noOfColumnsChanged = tablesHaveDifferentNoOfColumns(node, prevNode);
138
136
  if (
139
- // Breakout mode/layout changed
140
- layoutChanged ||
141
137
  // We need to react if our parent changes
142
138
  // Scales the cols widths relative to the new parent width.
143
139
  parentWidthChanged ||
@@ -151,8 +147,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
151
147
  // If column has been inserted/deleted avoid multi dispatch
152
148
  if (shouldScaleTable) {
153
149
  _this.scaleTable({
154
- parentWidth: parentWidth,
155
- layoutChanged: layoutChanged
150
+ parentWidth: parentWidth
156
151
  });
157
152
  }
158
153
 
@@ -160,8 +155,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
160
155
  if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
161
156
  if (!hasTableBeenResized(prevNode)) {
162
157
  _this.scaleTable({
163
- parentWidth: node.attrs.width,
164
- layoutChanged: layoutChanged
158
+ parentWidth: node.attrs.width
165
159
  });
166
160
  }
167
161
  }
@@ -239,21 +233,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
239
233
  }
240
234
  });
241
235
  _defineProperty(_assertThisInitialized(_this), "handleWindowResize", function () {
242
- var _node$attrs, _node$attrs2;
243
236
  var _this$props5 = _this.props,
244
237
  getNode = _this$props5.getNode,
245
238
  containerWidth = _this$props5.containerWidth;
246
239
  var node = getNode();
247
- var prevNode = _this.node;
248
240
  var layoutSize = _this.tableNodeLayoutSize(node);
249
- var prevAttrs = prevNode === null || prevNode === void 0 ? void 0 : prevNode.attrs;
250
- var layoutChanged = (prevAttrs === null || prevAttrs === void 0 ? void 0 : prevAttrs.layout) !== (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) && (prevAttrs === null || prevAttrs === void 0 ? void 0 : prevAttrs.__autoSize) === (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.__autoSize);
251
241
  if (containerWidth.width > layoutSize) {
252
242
  return;
253
243
  }
254
244
  var parentWidth = _this.getParentNodeWidth();
255
245
  _this.scaleTableDebounced({
256
- layoutChanged: layoutChanged,
257
246
  parentWidth: parentWidth
258
247
  });
259
248
  });
@@ -706,7 +695,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
706
695
  node: node,
707
696
  tableRef: tableRef,
708
697
  containerWidth: containerWidth,
709
- isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
710
698
  isNested: isNested,
711
699
  pluginInjectionApi: pluginInjectionApi,
712
700
  tableWrapperHeight: this.state.tableWrapperHeight,
@@ -777,10 +765,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
777
765
  }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
778
766
  style: {
779
767
  position: 'absolute',
780
- right: getBooleanFF('platform.editor.custom-table-width') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
781
- :
782
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
783
- '22px'
768
+ right: "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
784
769
  }
785
770
  }, /*#__PURE__*/React.createElement("div", {
786
771
  className: "".concat(ClassName.TABLE_RIGHT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),
@@ -6,22 +6,11 @@ import React, { forwardRef, useCallback, useRef, useState } from 'react';
6
6
  import classNames from 'classnames';
7
7
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
8
8
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
9
- import { calcTableWidth } from '@atlaskit/editor-common/styles';
10
9
  import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
11
10
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
12
11
  import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
13
12
  import { TableCssClassName as ClassName } from '../types';
14
13
  import { TableResizer } from './TableResizer';
15
- var getMarginLeft = function getMarginLeft(lineLength, tableWidth) {
16
- var marginLeft;
17
- if (tableWidth !== 'inherit' && lineLength) {
18
- var containerWidth = tableWidth;
19
- if (containerWidth) {
20
- marginLeft = (lineLength - containerWidth) / 2;
21
- }
22
- }
23
- return marginLeft;
24
- };
25
14
  export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
26
15
  var className = _ref.className,
27
16
  style = _ref.style,
@@ -164,11 +153,8 @@ export var TableContainer = function TableContainer(_ref3) {
164
153
  var children = _ref3.children,
165
154
  node = _ref3.node,
166
155
  className = _ref3.className,
167
- _ref3$containerWidth = _ref3.containerWidth,
168
- lineLength = _ref3$containerWidth.lineLength,
169
- editorWidth = _ref3$containerWidth.width,
156
+ editorWidth = _ref3.containerWidth.width,
170
157
  isTableResizingEnabled = _ref3.isTableResizingEnabled,
171
- isBreakoutEnabled = _ref3.isBreakoutEnabled,
172
158
  editorView = _ref3.editorView,
173
159
  getPos = _ref3.getPos,
174
160
  tableRef = _ref3.tableRef,
@@ -193,15 +179,13 @@ export var TableContainer = function TableContainer(_ref3) {
193
179
  isWholeTableInDanger: isWholeTableInDanger
194
180
  }, children);
195
181
  }
196
- var tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';
197
182
  return /*#__PURE__*/React.createElement(InnerContainer, {
198
183
  node: node,
199
184
  className: classNames(className, {
200
185
  'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested
201
186
  }),
202
187
  style: {
203
- width: tableWidth,
204
- marginLeft: getMarginLeft(lineLength, tableWidth)
188
+ width: 'inherit'
205
189
  }
206
190
  }, children);
207
191
  };
@@ -273,7 +273,6 @@ export { TableView as default };
273
273
  export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi) {
274
274
  var _getPluginState2 = getPluginState(view.state),
275
275
  pluginConfig = _getPluginState2.pluginConfig,
276
- isBreakoutEnabled = _getPluginState2.isBreakoutEnabled,
277
276
  isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
278
277
  wasFullWidthModeEnabled = _getPluginState2.wasFullWidthModeEnabled,
279
278
  isTableResizingEnabled = _getPluginState2.isTableResizingEnabled,
@@ -292,7 +291,6 @@ export var createTableView = function createTableView(node, view, getPos, portal
292
291
  eventDispatcher: eventDispatcher,
293
292
  getPos: getPos,
294
293
  options: {
295
- isBreakoutEnabled: isBreakoutEnabled,
296
294
  isFullWidthModeEnabled: isFullWidthModeEnabled,
297
295
  wasFullWidthModeEnabled: wasFullWidthModeEnabled,
298
296
  isTableResizingEnabled: isTableResizingEnabled,
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { table, tableCell, tableHeader, tableRow, tableWithCustomWidth } from '@atlaskit/adf-schema';
2
+ import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
3
3
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
4
4
  import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
5
5
  import { IconTable } from '@atlaskit/editor-common/icons';
@@ -33,8 +33,7 @@ import FloatingContextualMenu from './ui/FloatingContextualMenu';
33
33
  import FloatingDeleteButton from './ui/FloatingDeleteButton';
34
34
  import FloatingDragMenu from './ui/FloatingDragMenu';
35
35
  import FloatingInsertButton from './ui/FloatingInsertButton';
36
- import LayoutButton from './ui/LayoutButton';
37
- import { createTableWithWidth, isLayoutSupported } from './utils';
36
+ import { createTableWithWidth } from './utils';
38
37
  var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
39
38
  return {};
40
39
  };
@@ -110,10 +109,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
110
109
  insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
111
110
  },
112
111
  nodes: function nodes() {
113
- var tableNode = options !== null && options !== void 0 && options.tableResizingEnabled ? tableWithCustomWidth : table;
114
112
  return [{
115
113
  name: 'table',
116
- node: tableNode
114
+ node: table
117
115
  }, {
118
116
  name: 'tableHeader',
119
117
  node: tableHeader
@@ -138,12 +136,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
138
136
  fullWidthEnabled = _ref3.fullWidthEnabled,
139
137
  wasFullWidthEnabled = _ref3.wasFullWidthEnabled,
140
138
  tableResizingEnabled = _ref3.tableResizingEnabled,
141
- breakoutEnabled = _ref3.breakoutEnabled,
142
139
  tableOptions = _ref3.tableOptions,
143
140
  getEditorFeatureFlags = _ref3.getEditorFeatureFlags,
144
141
  dragAndDropEnabled = _ref3.dragAndDropEnabled,
145
142
  isTableScalingEnabled = _ref3.isTableScalingEnabled;
146
- return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled);
143
+ return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled);
147
144
  }
148
145
  }, {
149
146
  name: 'tablePMColResizing',
@@ -305,7 +302,6 @@ var tablesPlugin = function tablesPlugin(_ref) {
305
302
  tablePluginState = _ref17.tablePluginState,
306
303
  tableWidthPluginState = _ref17.tableWidthPluginState,
307
304
  dragAndDropState = _ref17.dragAndDropState;
308
- var state = editorView.state;
309
305
  var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
310
306
  var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
311
307
  var isResizing = isColumnResizing || isTableResizing;
@@ -314,7 +310,6 @@ var tablesPlugin = function tablesPlugin(_ref) {
314
310
  tablePos = _ref18.tablePos,
315
311
  targetCellPosition = _ref18.targetCellPosition,
316
312
  isContextualMenuOpen = _ref18.isContextualMenuOpen,
317
- layout = _ref18.layout,
318
313
  tableRef = _ref18.tableRef,
319
314
  pluginConfig = _ref18.pluginConfig,
320
315
  insertColumnButtonIndex = _ref18.insertColumnButtonIndex,
@@ -325,17 +320,6 @@ var tablesPlugin = function tablesPlugin(_ref) {
325
320
  tableWrapperTarget = _ref18.tableWrapperTarget;
326
321
  var allowControls = pluginConfig.allowControls;
327
322
  var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
328
- var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
329
- editorView: editorView,
330
- mountPoint: popupsMountPoint,
331
- boundariesElement: popupsBoundariesElement,
332
- scrollableElement: popupsScrollableElement,
333
- targetRef: tableWrapperTarget,
334
- layout: layout,
335
- isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
336
- stickyHeader: stickyHeader,
337
- editorAnalyticsAPI: editorAnalyticsAPI
338
- }) : null;
339
323
  return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
340
324
  isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
341
325
  editorView: editorView,
@@ -345,7 +329,6 @@ var tablesPlugin = function tablesPlugin(_ref) {
345
329
  scrollableElement: popupsScrollableElement,
346
330
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
347
331
  isContextualMenuOpen: isContextualMenuOpen,
348
- layout: layout,
349
332
  stickyHeader: stickyHeader,
350
333
  tableWrapper: tableWrapperTarget
351
334
  }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
@@ -398,7 +381,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
398
381
  stickyHeaders: stickyHeader,
399
382
  isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
400
383
  editorAnalyticsAPI: editorAnalyticsAPI
401
- }), LayoutContent);
384
+ }));
402
385
  }
403
386
  }));
404
387
  },
@@ -25,7 +25,7 @@ import { isHeaderRowRequired } from '../utils/paste';
25
25
  import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
26
26
  import { createPluginState, getPluginState } from './plugin-factory';
27
27
  import { pluginKey } from './plugin-key';
28
- export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) {
28
+ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) {
29
29
  var _accessibilityUtils;
30
30
  var state = createPluginState(dispatch, _objectSpread(_objectSpread(_objectSpread({
31
31
  pluginConfig: pluginConfig,
@@ -33,7 +33,6 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
33
33
  insertColumnButtonIndex: undefined,
34
34
  insertRowButtonIndex: undefined,
35
35
  isFullWidthModeEnabled: fullWidthModeEnabled,
36
- isBreakoutEnabled: breakoutEnabled,
37
36
  wasFullWidthModeEnabled: previousFullWidthModeEnabled,
38
37
  isTableResizingEnabled: tableResizingEnabled,
39
38
  isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
@@ -1,7 +1,5 @@
1
1
  import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
2
- import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
3
2
  import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
4
- import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
5
3
  import { TableMap } from '@atlaskit/editor-tables/table-map';
6
4
  import { getSelectionRect } from '@atlaskit/editor-tables/utils';
7
5
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -13,7 +11,7 @@ import { getPluginState as getTablePluginState } from '../plugin-factory';
13
11
  import { META_KEYS } from '../table-analytics';
14
12
  import { evenColumns, setDragging, stopResizing } from './commands';
15
13
  import { getPluginState } from './plugin-factory';
16
- import { currentColWidth, getLayoutSize, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
14
+ import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
17
15
  export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
18
16
  var state = view.state,
19
17
  dispatch = view.dispatch;
@@ -44,25 +42,13 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
44
42
  if (dom && dom.nodeName !== 'TABLE') {
45
43
  dom = dom.closest('table');
46
44
  }
47
- var maxSize;
48
- if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
49
- var containerWidth = getEditorContainerWidth();
50
- var parentWidth = getParentNodeWidth(start, state, containerWidth);
51
- maxSize = getBooleanFF('platform.editor.custom-table-width') ? parentWidth ||
52
- // its safe to reference table width from node as this will not have changed
53
- originalTable.attrs.width || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {}) : parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
54
- if (originalTable.attrs.isNumberColumnEnabled) {
55
- maxSize -= akEditorTableNumberColumnWidth;
56
- }
57
- } else {
58
- maxSize = getTableMaxWidth({
59
- table: originalTable,
60
- tableStart: start,
61
- state: state,
62
- layout: originalTable.attrs.layout,
63
- getEditorContainerWidth: getEditorContainerWidth
64
- });
65
- }
45
+ var maxSize = getTableMaxWidth({
46
+ table: originalTable,
47
+ tableStart: start,
48
+ state: state,
49
+ layout: originalTable.attrs.layout,
50
+ getEditorContainerWidth: getEditorContainerWidth
51
+ });
66
52
  var shouldScale = tableDepth === 0 && isTableScalingEnabled;
67
53
  var resizeState = getResizeState({
68
54
  minWidth: tableCellMinWidth,
@@ -3,7 +3,6 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
3
3
  import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
4
4
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
5
5
  import { TableMap } from '@atlaskit/editor-tables/table-map';
6
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
6
  import { getTableScalingPercent } from './misc';
8
7
  /**
9
8
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
@@ -16,66 +15,42 @@ export var getColWidthFix = function getColWidthFix(colwidth, tableColumnCount)
16
15
  };
17
16
  export var generateColgroup = function generateColgroup(table, tableRef) {
18
17
  var cols = [];
19
- if (getBooleanFF('platform.editor.custom-table-width')) {
20
- var map = TableMap.get(table);
21
- table.content.firstChild.content.forEach(function (cell) {
22
- var colspan = cell.attrs.colspan || 1;
23
- if (Array.isArray(cell.attrs.colwidth)) {
24
- // We slice here to guard against our colwidth array having more entries
25
- // Than the we actually span. We'll patch the document at a later point.
26
- if (tableRef) {
27
- var scalePercent = getTableScalingPercent(table, tableRef);
28
- cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
29
- var fixedColWidth = getColWidthFix(width, map.width);
30
- var scaledWidth = fixedColWidth * scalePercent;
31
- var finalWidth = Math.max(scaledWidth, tableCellMinWidth);
32
- cols.push(['col', {
33
- style: "width: ".concat(finalWidth, "px;")
34
- }]);
35
- });
36
- } else {
37
- cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
38
- cols.push(['col', {
39
- style: "width: ".concat(getColWidthFix(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, map.width), "px;")
40
- }]);
41
- });
42
- }
43
- } else {
44
- // When we have merged cells on the first row (firstChild),
45
- // We want to ensure we're creating the appropriate amount of
46
- // cols the table still has.
47
- cols.push.apply(cols, _toConsumableArray(Array.from({
48
- length: colspan
49
- }, function (_) {
50
- return ['col', {
51
- style: "width: ".concat(tableCellMinWidth, "px;")
52
- }];
53
- })));
54
- }
55
- });
56
- } else {
57
- table.content.firstChild.content.forEach(function (cell) {
58
- var colspan = cell.attrs.colspan || 1;
59
- if (Array.isArray(cell.attrs.colwidth)) {
60
- // We slice here to guard against our colwidth array having more entries
61
- // Than the we actually span. We'll patch the document at a later point.
18
+ var map = TableMap.get(table);
19
+ table.content.firstChild.content.forEach(function (cell) {
20
+ var colspan = cell.attrs.colspan || 1;
21
+ if (Array.isArray(cell.attrs.colwidth)) {
22
+ // We slice here to guard against our colwidth array having more entries
23
+ // Than the we actually span. We'll patch the document at a later point.
24
+ if (tableRef) {
25
+ var scalePercent = getTableScalingPercent(table, tableRef);
62
26
  cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
63
- cols.push(['col', width ? {
64
- style: "width: ".concat(width, "px;")
65
- } : {}]);
27
+ var fixedColWidth = getColWidthFix(width, map.width);
28
+ var scaledWidth = fixedColWidth * scalePercent;
29
+ var finalWidth = Math.max(scaledWidth, tableCellMinWidth);
30
+ cols.push(['col', {
31
+ style: "width: ".concat(finalWidth, "px;")
32
+ }]);
66
33
  });
67
34
  } else {
68
- // When we have merged cells on the first row (firstChild),
69
- // We want to ensure we're creating the appropriate amount of
70
- // cols the table still has.
71
- cols.push.apply(cols, _toConsumableArray(Array.from({
72
- length: colspan
73
- }, function (_) {
74
- return ['col', {}];
75
- })));
35
+ cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
36
+ cols.push(['col', {
37
+ style: "width: ".concat(getColWidthFix(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, map.width), "px;")
38
+ }]);
39
+ });
76
40
  }
77
- });
78
- }
41
+ } else {
42
+ // When we have merged cells on the first row (firstChild),
43
+ // We want to ensure we're creating the appropriate amount of
44
+ // cols the table still has.
45
+ cols.push.apply(cols, _toConsumableArray(Array.from({
46
+ length: colspan
47
+ }, function (_) {
48
+ return ['col', {
49
+ style: "width: ".concat(tableCellMinWidth, "px;")
50
+ }];
51
+ })));
52
+ }
53
+ });
79
54
  return cols;
80
55
  };
81
56
  export var insertColgroupFromNode = function insertColgroupFromNode(tableRef, table) {
@@ -3,7 +3,6 @@ import { calcTableWidth } from '@atlaskit/editor-common/styles';
3
3
  import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-common/ui';
4
4
  import { calcTableColumnWidths, containsClassName } from '@atlaskit/editor-common/utils';
5
5
  import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
6
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
6
  import { hasTableBeenResized } from './colgroup';
8
7
  import { MAX_SCALING_PERCENT } from './consts';
9
8
 
@@ -67,7 +66,7 @@ export var getTableMaxWidth = function getTableMaxWidth(_ref2) {
67
66
  getEditorContainerWidth = _ref2.getEditorContainerWidth;
68
67
  var containerWidth = getEditorContainerWidth();
69
68
  var parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
70
- var maxWidth = getBooleanFF('platform.editor.custom-table-width') ? parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {}) : parentWidth || getLayoutSize(layout, containerWidth.width, {});
69
+ var maxWidth = parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {});
71
70
  if (table.attrs.isNumberColumnEnabled) {
72
71
  maxWidth -= akEditorTableNumberColumnWidth;
73
72
  }