@atlaskit/editor-plugin-table 1.2.0 → 1.2.1

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 (53) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/plugins/table/index.js +2 -1
  3. package/dist/cjs/plugins/table/nodeviews/TableComponent.js +1 -2
  4. package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +32 -17
  5. package/dist/cjs/plugins/table/pm-plugins/table-resizing/event-handlers.js +1 -5
  6. package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/misc.js +3 -38
  7. package/dist/cjs/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +16 -3
  8. package/dist/cjs/plugins/table/ui/FloatingContextualMenu/index.js +6 -3
  9. package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
  10. package/dist/cjs/types/i18n.js +5 -0
  11. package/dist/cjs/version.json +1 -1
  12. package/dist/es2019/plugins/table/index.js +2 -1
  13. package/dist/es2019/plugins/table/nodeviews/TableComponent.js +1 -2
  14. package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +32 -17
  15. package/dist/es2019/plugins/table/pm-plugins/table-resizing/event-handlers.js +1 -5
  16. package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/misc.js +1 -37
  17. package/dist/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +18 -4
  18. package/dist/es2019/plugins/table/ui/FloatingContextualMenu/index.js +6 -3
  19. package/dist/es2019/plugins/table/ui/common-styles.js +1 -0
  20. package/dist/es2019/types/i18n.js +1 -0
  21. package/dist/es2019/version.json +1 -1
  22. package/dist/esm/plugins/table/index.js +2 -1
  23. package/dist/esm/plugins/table/nodeviews/TableComponent.js +1 -2
  24. package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +32 -17
  25. package/dist/esm/plugins/table/pm-plugins/table-resizing/event-handlers.js +1 -5
  26. package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/misc.js +1 -35
  27. package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +17 -4
  28. package/dist/esm/plugins/table/ui/FloatingContextualMenu/index.js +6 -3
  29. package/dist/esm/plugins/table/ui/common-styles.js +1 -1
  30. package/dist/esm/types/i18n.js +1 -0
  31. package/dist/esm/version.json +1 -1
  32. package/dist/types/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.d.ts +2 -2
  33. package/dist/types/plugins/table/pm-plugins/table-resizing/utils/misc.d.ts +1 -2
  34. package/dist/types/plugins/table/ui/FloatingContextualMenu/ContextualMenu.d.ts +2 -1
  35. package/dist/types/plugins/table/ui/FloatingContextualMenu/index.d.ts +3 -2
  36. package/dist/types/types/i18n.d.ts +5 -0
  37. package/package.json +7 -7
  38. package/src/__tests__/integration/horizontal-scroll.ts +4 -9
  39. package/src/__tests__/integration/sticky-header.ts +61 -1
  40. package/src/__tests__/unit/commands/insert.ts +8 -8
  41. package/src/__tests__/unit/nodeviews/cell.ts +14 -0
  42. package/src/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx +2 -2
  43. package/src/__tests__/unit/ui/ContextualMenu.tsx +2 -0
  44. package/src/__tests__/unit/ui/FloatingContextualMenu.tsx +1 -0
  45. package/src/plugins/table/index.tsx +4 -0
  46. package/src/plugins/table/nodeviews/TableComponent.tsx +1 -2
  47. package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts +40 -23
  48. package/src/plugins/table/pm-plugins/table-resizing/event-handlers.ts +1 -9
  49. package/src/plugins/table/pm-plugins/table-resizing/utils/misc.ts +1 -57
  50. package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx +21 -2
  51. package/src/plugins/table/ui/FloatingContextualMenu/index.tsx +8 -1
  52. package/src/plugins/table/ui/common-styles.ts +1 -0
  53. package/src/types/i18n.ts +5 -0
@@ -3,8 +3,6 @@ import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-c
3
3
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorWideLayoutWidth, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
4
4
  import { containsClassName } from '@atlaskit/editor-common/utils';
5
5
  import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
6
- import { gridSize } from '@atlaskit/theme/constants';
7
- import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
8
6
  export const tableLayoutToSize = {
9
7
  default: akEditorDefaultLayoutWidth,
10
8
  wide: akEditorWideLayoutWidth,
@@ -73,43 +71,9 @@ export const getTableMaxWidth = ({
73
71
  }) => {
74
72
  const containerWidth = getEditorContainerWidth();
75
73
  const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
76
-
77
- // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
78
- const parentActualWidth = getParentWidthWithoutPadding(parentWidth, tableStart, state);
79
- let maxWidth = parentActualWidth || getLayoutSize(layout, containerWidth.width, {});
74
+ let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
80
75
  if (table.attrs.isNumberColumnEnabled) {
81
76
  maxWidth -= akEditorTableNumberColumnWidth;
82
77
  }
83
78
  return maxWidth;
84
- };
85
- export const getParentWidthWithoutPadding = (parentWidth, tableStartPos, state) => {
86
- const node = getNestedParentNode(tableStartPos, state);
87
- if (!node) {
88
- return;
89
- }
90
- const {
91
- schema
92
- } = state;
93
- if (node.type === schema.nodes.expand) {
94
- // padding
95
- parentWidth -= gridSize() * 2;
96
- // gutter offset
97
- parentWidth += gridSize() * 1.5 * 2;
98
- // padding right
99
- parentWidth -= gridSize();
100
- // padding left
101
- parentWidth -= gridSize() * 4 - gridSize() / 2;
102
- }
103
- return parentWidth;
104
- };
105
-
106
- // copy of getNestedParentNode() from packages/editor/editor-common/src/node-width/index.ts
107
- // to be removed later when we will move getParentWidthWithoutPadding() logic to editor-common
108
- const getNestedParentNode = (tablePos, state) => {
109
- if (tablePos === undefined) {
110
- return null;
111
- }
112
- const $pos = state.doc.resolve(tablePos);
113
- const parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
114
- return parent ? parent.node : null;
115
79
  };
@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
5
5
  import { splitCell } from '@atlaskit/editor-tables/utils';
6
6
  import { defineMessages, injectIntl } from 'react-intl-next';
7
7
  import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
8
- import { ColorPalette, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
8
+ import { ColorPalette, backgroundPaletteTooltipMessages, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
9
9
  import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
10
10
  import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
11
11
  import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
@@ -94,12 +94,16 @@ export class ContextualMenu extends Component {
94
94
  intl: {
95
95
  formatMessage
96
96
  },
97
- editorView
97
+ editorView,
98
+ getEditorFeatureFlags
98
99
  } = this.props;
99
100
  const items = [];
100
101
  const {
101
102
  isSubmenuOpen
102
103
  } = this.state;
104
+ const {
105
+ useSomewhatSemanticTextColorNames
106
+ } = getEditorFeatureFlags();
103
107
  // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
104
108
  const {
105
109
  targetCellPosition,
@@ -126,9 +130,19 @@ export class ContextualMenu extends Component {
126
130
  ref: this.handleSubMenuRef
127
131
  }, jsx(ColorPalette, {
128
132
  cols: 7,
129
- palette: cellBackgroundColorPalette,
130
133
  onClick: this.setColor,
131
- selectedColor: background
134
+ selectedColor: background,
135
+ paletteOptions: {
136
+ palette: cellBackgroundColorPalette,
137
+ paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
138
+ // We did not want to create new FF or update
139
+ // useSomewhatSemanticTextColorNames name
140
+ // because it is temporary and require extra work.
141
+ // So even though it says text color names,
142
+ // we are going to use for all color pickers
143
+ // such as text, background and table charts.
144
+ showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
145
+ }
132
146
  })))
133
147
  });
134
148
  }
@@ -34,7 +34,8 @@ const FloatingContextualMenu = ({
34
34
  isOpen,
35
35
  pluginConfig,
36
36
  editorAnalyticsAPI,
37
- getEditorContainerWidth
37
+ getEditorContainerWidth,
38
+ getEditorFeatureFlags
38
39
  }) => {
39
40
  // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
40
41
  const {
@@ -69,7 +70,8 @@ const FloatingContextualMenu = ({
69
70
  ,
70
71
  zIndex: akEditorFloatingOverlapPanelZIndex,
71
72
  forcePlacement: true,
72
- offset: [-7, 0]
73
+ offset: [-7, 0],
74
+ stick: true
73
75
  }, jsx("div", {
74
76
  css: tablePopupStyles
75
77
  }, jsx(ContextualMenu, {
@@ -83,7 +85,8 @@ const FloatingContextualMenu = ({
83
85
  selectionRect: selectionRect,
84
86
  boundariesElement: boundariesElement,
85
87
  editorAnalyticsAPI: editorAnalyticsAPI,
86
- getEditorContainerWidth: getEditorContainerWidth
88
+ getEditorContainerWidth: getEditorContainerWidth,
89
+ getEditorFeatureFlags: getEditorFeatureFlags
87
90
  })));
88
91
  };
89
92
  FloatingContextualMenu.displayName = 'FloatingContextualMenu';
@@ -625,6 +625,7 @@ export const tableStyles = props => {
625
625
  padding-bottom: 0px;
626
626
  /* fixes gap cursor height */
627
627
  overflow: auto;
628
+ overflow-y: hidden;
628
629
  position: relative;
629
630
  }
630
631
  }
@@ -0,0 +1 @@
1
+ export {};
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "sideEffects": false
5
5
  }
@@ -266,7 +266,8 @@ var tablesPlugin = function tablesPlugin(options) {
266
266
  isOpen: Boolean(isContextualMenuOpen),
267
267
  pluginConfig: pluginConfig,
268
268
  editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
269
- getEditorContainerWidth: defaultGetEditorContainerWidth
269
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
270
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
270
271
  }), allowControls && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
271
272
  editorView: editorView,
272
273
  selection: editorView.state.selection,
@@ -31,7 +31,6 @@ import { containsHeaderRow, tablesHaveDifferentColumnWidths, tablesHaveDifferent
31
31
  import { updateOverflowShadows } from './update-overflow-shadows';
32
32
  import memoizeOne from 'memoize-one';
33
33
  import { OverflowShadowsObserver } from './OverflowShadowsObserver';
34
- import { getParentWidthWithoutPadding } from '../pm-plugins/table-resizing/utils/misc';
35
34
  var isIE11 = browser.ie_version === 11;
36
35
  var NOOP = function NOOP() {
37
36
  return undefined;
@@ -246,7 +245,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
246
245
  return;
247
246
  }
248
247
  var parentNodeWith = getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
249
- return getParentWidthWithoutPadding(parentNodeWith, pos, state);
248
+ return parentNodeWith;
250
249
  });
251
250
  _defineProperty(_assertThisInitialized(_this), "updateParentWidth", function (width) {
252
251
  _this.setState({
@@ -181,7 +181,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
181
181
  syncStickyRowToTable(tree.table);
182
182
  }, 0);
183
183
  });
184
- _defineProperty(this, "onWidthPluginState", function () {
184
+ _defineProperty(this, "updateStickyHeaderWidth", function () {
185
185
  // table width might have changed, sync that back to sticky row
186
186
  var tree = _this.tree;
187
187
  if (!tree) {
@@ -213,7 +213,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
213
213
  // otherwise make it non-sticky
214
214
  return false;
215
215
  });
216
- _defineProperty(this, "makeHeaderRowSticky", function (tree) {
216
+ _defineProperty(this, "makeHeaderRowSticky", function (tree, scrollTop) {
217
217
  var _tbody$firstChild;
218
218
  // If header row height is more than 50% of viewport height don't do this
219
219
  if (_this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
@@ -228,7 +228,10 @@ export var TableRowNodeView = /*#__PURE__*/function () {
228
228
  return;
229
229
  }
230
230
  var currentTableTop = _this.getCurrentTableTop(tree);
231
- var domTop = currentTableTop > 0 ? _this.topPosEditorElement : _this.topPosEditorElement + currentTableTop;
231
+ if (!scrollTop) {
232
+ scrollTop = getTop(_this.editorScrollableElement);
233
+ }
234
+ var domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
232
235
  if (!_this.isSticky) {
233
236
  syncStickyRowToTable(table);
234
237
  _this.dom.classList.add('sticky');
@@ -335,7 +338,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
335
338
  }
336
339
  this.topPosEditorElement = getTop(this.editorScrollableElement);
337
340
  }
338
- this.eventDispatcher.on('widthPlugin', this.onWidthPluginState);
341
+ this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
339
342
  this.eventDispatcher.on(tablePluginKey.key, this.onTablePluginState);
340
343
  this.listening = true;
341
344
  this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
@@ -363,7 +366,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
363
366
  if (this.editorScrollableElement && !this.stickyHeadersOptimization) {
364
367
  this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
365
368
  }
366
- this.eventDispatcher.off('widthPlugin', this.onWidthPluginState);
369
+ this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
367
370
  this.eventDispatcher.off(tablePluginKey.key, this.onTablePluginState);
368
371
  this.listening = false;
369
372
  this.dom.removeEventListener('wheel', this.headerRowMouseScroll);
@@ -385,6 +388,9 @@ export var TableRowNodeView = /*#__PURE__*/function () {
385
388
  return;
386
389
  }
387
390
  this.resizeObserver.observe(this.dom);
391
+ if (this.editorScrollableElement) {
392
+ this.resizeObserver.observe(this.editorScrollableElement);
393
+ }
388
394
  window.requestAnimationFrame(function () {
389
395
  var _this2$tree;
390
396
  // we expect tree to be defined after animation frame
@@ -415,14 +421,21 @@ export var TableRowNodeView = /*#__PURE__*/function () {
415
421
  }
416
422
  var table = _this3.tree.table;
417
423
  entries.forEach(function (entry) {
418
- var newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
419
- if (_this3.sentinels.bottom &&
420
- // When the table header is sticky, it would be taller by a 1px (border-bottom),
421
- // So we adding this check to allow a 1px difference.
422
- Math.abs(newHeight - (_this3.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
423
- _this3.stickyRowHeight = newHeight;
424
- _this3.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
425
- updateTableMargin(table);
424
+ var _this3$editorScrollab;
425
+ // On resize of the parent scroll element we need to adjust the width
426
+ // of the sticky header
427
+ if (entry.target.className === ((_this3$editorScrollab = _this3.editorScrollableElement) === null || _this3$editorScrollab === void 0 ? void 0 : _this3$editorScrollab.className)) {
428
+ _this3.updateStickyHeaderWidth();
429
+ } else {
430
+ var newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
431
+ if (_this3.sentinels.bottom &&
432
+ // When the table header is sticky, it would be taller by a 1px (border-bottom),
433
+ // So we adding this check to allow a 1px difference.
434
+ Math.abs(newHeight - (_this3.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
435
+ _this3.stickyRowHeight = newHeight;
436
+ _this3.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
437
+ updateTableMargin(table);
438
+ }
426
439
  }
427
440
  });
428
441
  });
@@ -448,18 +461,20 @@ export var TableRowNodeView = /*#__PURE__*/function () {
448
461
  var _entry$rootBounds2;
449
462
  var sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
450
463
  if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
451
- _this4.tree && _this4.makeHeaderRowSticky(_this4.tree);
464
+ var _entry$rootBounds3;
465
+ _this4.tree && _this4.makeHeaderRowSticky(_this4.tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
452
466
  } else {
453
467
  table && _this4.makeRowHeaderNotSticky(table);
454
468
  }
455
469
  }
456
470
  if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
457
- var _entry$rootBounds3;
458
- var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this4.dom.offsetHeight < (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top) || 0);
471
+ var _entry$rootBounds4;
472
+ var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this4.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
459
473
  if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
460
474
  _this4.makeRowHeaderNotSticky(table);
461
475
  } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
462
- _this4.tree && _this4.makeHeaderRowSticky(_this4.tree);
476
+ var _entry$rootBounds5;
477
+ _this4.tree && _this4.makeHeaderRowSticky(_this4.tree, entry === null || entry === void 0 ? void 0 : (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
463
478
  }
464
479
  }
465
480
  });
@@ -9,7 +9,6 @@ import { evenColumns, setDragging, stopResizing } from './commands';
9
9
  import { getPluginState } from './plugin-factory';
10
10
  import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
11
11
  import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
12
- import { getParentWidthWithoutPadding } from './utils/misc';
13
12
  export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
14
13
  var state = view.state,
15
14
  dispatch = view.dispatch;
@@ -30,10 +29,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
30
29
  }
31
30
  var containerWidth = getEditorContainerWidth();
32
31
  var parentWidth = getParentNodeWidth(start, state, containerWidth);
33
-
34
- // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
35
- var parentActualWidth = getParentWidthWithoutPadding(parentWidth, start, state);
36
- var maxSize = parentActualWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
32
+ var maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
37
33
  if (originalTable.attrs.isNumberColumnEnabled) {
38
34
  maxSize -= akEditorTableNumberColumnWidth;
39
35
  }
@@ -3,8 +3,6 @@ import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-c
3
3
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorWideLayoutWidth, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
4
4
  import { containsClassName } from '@atlaskit/editor-common/utils';
5
5
  import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
6
- import { gridSize } from '@atlaskit/theme/constants';
7
- import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
8
6
  export var tableLayoutToSize = {
9
7
  default: akEditorDefaultLayoutWidth,
10
8
  wide: akEditorWideLayoutWidth,
@@ -71,41 +69,9 @@ export var getTableMaxWidth = function getTableMaxWidth(_ref2) {
71
69
  getEditorContainerWidth = _ref2.getEditorContainerWidth;
72
70
  var containerWidth = getEditorContainerWidth();
73
71
  var parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
74
-
75
- // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
76
- var parentActualWidth = getParentWidthWithoutPadding(parentWidth, tableStart, state);
77
- var maxWidth = parentActualWidth || getLayoutSize(layout, containerWidth.width, {});
72
+ var maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
78
73
  if (table.attrs.isNumberColumnEnabled) {
79
74
  maxWidth -= akEditorTableNumberColumnWidth;
80
75
  }
81
76
  return maxWidth;
82
- };
83
- export var getParentWidthWithoutPadding = function getParentWidthWithoutPadding(parentWidth, tableStartPos, state) {
84
- var node = getNestedParentNode(tableStartPos, state);
85
- if (!node) {
86
- return;
87
- }
88
- var schema = state.schema;
89
- if (node.type === schema.nodes.expand) {
90
- // padding
91
- parentWidth -= gridSize() * 2;
92
- // gutter offset
93
- parentWidth += gridSize() * 1.5 * 2;
94
- // padding right
95
- parentWidth -= gridSize();
96
- // padding left
97
- parentWidth -= gridSize() * 4 - gridSize() / 2;
98
- }
99
- return parentWidth;
100
- };
101
-
102
- // copy of getNestedParentNode() from packages/editor/editor-common/src/node-width/index.ts
103
- // to be removed later when we will move getParentWidthWithoutPadding() logic to editor-common
104
- var getNestedParentNode = function getNestedParentNode(tablePos, state) {
105
- if (tablePos === undefined) {
106
- return null;
107
- }
108
- var $pos = state.doc.resolve(tablePos);
109
- var parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
110
- return parent ? parent.node : null;
111
77
  };
@@ -15,7 +15,7 @@ import { jsx } from '@emotion/react';
15
15
  import { splitCell } from '@atlaskit/editor-tables/utils';
16
16
  import { defineMessages, injectIntl } from 'react-intl-next';
17
17
  import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
18
- import { ColorPalette, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
18
+ import { ColorPalette, backgroundPaletteTooltipMessages, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
19
19
  import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
20
20
  import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
21
21
  import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
@@ -107,9 +107,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
107
107
  isOpen = _this$props.isOpen,
108
108
  selectionRect = _this$props.selectionRect,
109
109
  formatMessage = _this$props.intl.formatMessage,
110
- editorView = _this$props.editorView;
110
+ editorView = _this$props.editorView,
111
+ getEditorFeatureFlags = _this$props.getEditorFeatureFlags;
111
112
  var items = [];
112
113
  var isSubmenuOpen = _this.state.isSubmenuOpen;
114
+ var _getEditorFeatureFlag = getEditorFeatureFlags(),
115
+ useSomewhatSemanticTextColorNames = _getEditorFeatureFlag.useSomewhatSemanticTextColorNames;
113
116
  // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
114
117
  var _getPluginState = getPluginState(editorView.state),
115
118
  targetCellPosition = _getPluginState.targetCellPosition,
@@ -133,9 +136,19 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
133
136
  ref: _this.handleSubMenuRef
134
137
  }, jsx(ColorPalette, {
135
138
  cols: 7,
136
- palette: cellBackgroundColorPalette,
137
139
  onClick: _this.setColor,
138
- selectedColor: background
140
+ selectedColor: background,
141
+ paletteOptions: {
142
+ palette: cellBackgroundColorPalette,
143
+ paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
144
+ // We did not want to create new FF or update
145
+ // useSomewhatSemanticTextColorNames name
146
+ // because it is temporary and require extra work.
147
+ // So even though it says text color names,
148
+ // we are going to use for all color pickers
149
+ // such as text, background and table charts.
150
+ showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
151
+ }
139
152
  })))
140
153
  });
141
154
  }
@@ -33,7 +33,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
33
33
  isOpen = _ref.isOpen,
34
34
  pluginConfig = _ref.pluginConfig,
35
35
  editorAnalyticsAPI = _ref.editorAnalyticsAPI,
36
- getEditorContainerWidth = _ref.getEditorContainerWidth;
36
+ getEditorContainerWidth = _ref.getEditorContainerWidth,
37
+ getEditorFeatureFlags = _ref.getEditorFeatureFlags;
37
38
  // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
38
39
  var _getPluginState = getPluginState(editorView.state),
39
40
  targetCellPosition = _getPluginState.targetCellPosition;
@@ -64,7 +65,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
64
65
  ,
65
66
  zIndex: akEditorFloatingOverlapPanelZIndex,
66
67
  forcePlacement: true,
67
- offset: [-7, 0]
68
+ offset: [-7, 0],
69
+ stick: true
68
70
  }, jsx("div", {
69
71
  css: tablePopupStyles
70
72
  }, jsx(ContextualMenu, {
@@ -78,7 +80,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
78
80
  selectionRect: selectionRect,
79
81
  boundariesElement: boundariesElement,
80
82
  editorAnalyticsAPI: editorAnalyticsAPI,
81
- getEditorContainerWidth: getEditorContainerWidth
83
+ getEditorContainerWidth: getEditorContainerWidth,
84
+ getEditorFeatureFlags: getEditorFeatureFlags
82
85
  })));
83
86
  };
84
87
  FloatingContextualMenu.displayName = 'FloatingContextualMenu';
@@ -27,7 +27,7 @@ var listLargeNumericMarkersOldStyles = "\n .ProseMirror .pm-table-cell-content-
27
27
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
28
28
  export var tableStyles = function tableStyles(props) {
29
29
  var _props$featureFlags, _props$featureFlags2;
30
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level */\n > * .", " .", " {\n margin-left: unset !important;\n width: 100% !important;\n }\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n td.", ", td.", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n position: relative;\n }\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow, ".concat("0 6px 4px -4px ".concat(N40A), ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles);
30
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level */\n > * .", " .", " {\n margin-left: unset !important;\n width: 100% !important;\n }\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n td.", ", td.", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow, ".concat("0 6px 4px -4px ".concat(N40A), ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles);
31
31
  };
32
32
  export var tableFullPageEditorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n width: 100%;\n }\n"])), ClassName.TABLE_NODE_WRAPPER);
33
33
  export var tableCommentEditorStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
@@ -0,0 +1 @@
1
+ export {};
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "sideEffects": false
5
5
  }
@@ -57,9 +57,9 @@ export declare class TableRowNodeView implements NodeView {
57
57
  target: Element;
58
58
  }): boolean;
59
59
  onTablePluginState: (state: TablePluginState) => void;
60
- onWidthPluginState: () => void;
60
+ updateStickyHeaderWidth: () => void;
61
61
  shouldHeaderStick: (tree: TableDOMElements) => boolean;
62
- makeHeaderRowSticky: (tree: TableDOMElements) => void;
62
+ makeHeaderRowSticky: (tree: TableDOMElements, scrollTop?: number | undefined) => void;
63
63
  makeRowHeaderNotSticky: (table: HTMLElement, isEditorDestroyed?: boolean) => void;
64
64
  getWrapperoffset: (inverse?: boolean) => number;
65
65
  getWrapperRefTop: (wrapper: HTMLElement) => number;
@@ -18,6 +18,5 @@ interface getTableMaxWidthProps {
18
18
  layout: TableLayout;
19
19
  getEditorContainerWidth: GetEditorContainerWidth;
20
20
  }
21
- export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getEditorContainerWidth, }: getTableMaxWidthProps) => number;
22
- export declare const getParentWidthWithoutPadding: (parentWidth: number, tableStartPos: number, state: EditorState) => number | undefined;
21
+ export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getEditorContainerWidth, }: getTableMaxWidthProps) => any;
23
22
  export {};
@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
4
4
  import { Rect } from '@atlaskit/editor-tables/table-map';
5
5
  import { EditorView } from 'prosemirror-view';
6
6
  import { WrappedComponentProps } from 'react-intl-next';
7
- import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
7
+ import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
8
8
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
9
9
  export declare const messages: {
10
10
  cellBackground: {
@@ -61,6 +61,7 @@ export interface Props {
61
61
  offset?: Array<number>;
62
62
  editorAnalyticsAPI?: EditorAnalyticsAPI;
63
63
  getEditorContainerWidth: GetEditorContainerWidth;
64
+ getEditorFeatureFlags: GetEditorFeatureFlags;
64
65
  }
65
66
  export interface State {
66
67
  isSubmenuOpen: boolean;
@@ -3,11 +3,12 @@ import { jsx } from '@emotion/react';
3
3
  import { EditorView } from 'prosemirror-view';
4
4
  import { PluginConfig } from '../../types';
5
5
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
6
- import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
6
+ import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
7
7
  export interface Props {
8
8
  editorView: EditorView;
9
9
  isOpen: boolean;
10
10
  getEditorContainerWidth: GetEditorContainerWidth;
11
+ getEditorFeatureFlags: GetEditorFeatureFlags;
11
12
  targetCellPosition?: number;
12
13
  mountPoint?: HTMLElement;
13
14
  boundariesElement?: HTMLElement;
@@ -16,7 +17,7 @@ export interface Props {
16
17
  editorAnalyticsAPI?: EditorAnalyticsAPI;
17
18
  }
18
19
  declare const FloatingContextualMenu: {
19
- ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, }: Props): jsx.JSX.Element | null;
20
+ ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, }: Props): jsx.JSX.Element | null;
20
21
  displayName: string;
21
22
  };
22
23
  export default FloatingContextualMenu;