@atlaskit/editor-plugin-table 0.2.6 → 1.0.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 (83) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/dist/cjs/plugins/table/commands/index.js +9 -1
  3. package/dist/cjs/plugins/table/commands/referentiality.js +23 -0
  4. package/dist/cjs/plugins/table/event-handlers.js +5 -1
  5. package/dist/cjs/plugins/table/nodeviews/table.js +10 -1
  6. package/dist/cjs/plugins/table/nodeviews/tableCell.js +5 -1
  7. package/dist/cjs/plugins/table/pm-plugins/decorations/plugin.js +1 -0
  8. package/dist/cjs/plugins/table/pm-plugins/decorations/utils/column-controls.js +1 -3
  9. package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +15 -12
  10. package/dist/cjs/plugins/table/toolbar.js +78 -35
  11. package/dist/cjs/plugins/table/ui/common-styles.js +6 -3
  12. package/dist/cjs/plugins/table/ui/messages.js +17 -2
  13. package/dist/cjs/plugins/table/ui/ui-styles.js +2 -7
  14. package/dist/cjs/plugins/table/utils/decoration.js +19 -12
  15. package/dist/cjs/version.json +1 -1
  16. package/dist/es2019/plugins/table/commands/index.js +2 -1
  17. package/dist/es2019/plugins/table/commands/referentiality.js +10 -0
  18. package/dist/es2019/plugins/table/event-handlers.js +3 -1
  19. package/dist/es2019/plugins/table/nodeviews/table.js +13 -1
  20. package/dist/es2019/plugins/table/nodeviews/tableCell.js +5 -1
  21. package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js +1 -0
  22. package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js +1 -2
  23. package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +16 -11
  24. package/dist/es2019/plugins/table/toolbar.js +65 -29
  25. package/dist/es2019/plugins/table/ui/common-styles.js +15 -5
  26. package/dist/es2019/plugins/table/ui/messages.js +17 -2
  27. package/dist/es2019/plugins/table/ui/ui-styles.js +24 -16
  28. package/dist/es2019/plugins/table/utils/decoration.js +22 -13
  29. package/dist/es2019/version.json +1 -1
  30. package/dist/esm/plugins/table/commands/index.js +2 -1
  31. package/dist/esm/plugins/table/commands/referentiality.js +12 -0
  32. package/dist/esm/plugins/table/event-handlers.js +5 -1
  33. package/dist/esm/plugins/table/nodeviews/table.js +10 -1
  34. package/dist/esm/plugins/table/nodeviews/tableCell.js +5 -1
  35. package/dist/esm/plugins/table/pm-plugins/decorations/plugin.js +1 -0
  36. package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-controls.js +1 -2
  37. package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +15 -12
  38. package/dist/esm/plugins/table/toolbar.js +74 -29
  39. package/dist/esm/plugins/table/ui/common-styles.js +6 -3
  40. package/dist/esm/plugins/table/ui/messages.js +17 -2
  41. package/dist/esm/plugins/table/ui/ui-styles.js +2 -6
  42. package/dist/esm/plugins/table/utils/decoration.js +19 -12
  43. package/dist/esm/version.json +1 -1
  44. package/dist/types/plugins/table/commands/index.d.ts +1 -0
  45. package/dist/types/plugins/table/commands/referentiality.d.ts +2 -0
  46. package/dist/types/plugins/table/index.d.ts +2 -3
  47. package/dist/types/plugins/table/nodeviews/table.d.ts +4 -1
  48. package/dist/types/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.d.ts +0 -1
  49. package/dist/types/plugins/table/ui/common-styles.d.ts +4 -1
  50. package/dist/types/plugins/table/ui/messages.d.ts +15 -0
  51. package/package.json +6 -6
  52. package/report.api.md +6 -6
  53. package/src/__tests__/integration/__fixtures__/table-and-paragraph-adf.json +130 -0
  54. package/src/__tests__/integration/floating-toolbar.ts +54 -0
  55. package/src/__tests__/integration/meta-arrowup-cursor-in-first-row.ts +37 -0
  56. package/src/__tests__/unit/color-picker.ts +100 -0
  57. package/src/__tests__/unit/get-toolbar-config.ts +1 -4
  58. package/src/__tests__/unit/keymap.ts +1 -1
  59. package/src/__tests__/unit/nodeviews/cell.ts +52 -57
  60. package/src/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx +90 -8
  61. package/src/__tests__/unit/transforms/delete-columns.ts +1 -1
  62. package/src/__tests__/unit/transforms/delete-rows.ts +1 -1
  63. package/src/__tests__/unit/utils/collapse.ts +2 -2
  64. package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-should-remove-the-table-row-on-click-1-snap.png +2 -2
  65. package/src/plugins/table/commands/index.ts +1 -0
  66. package/src/plugins/table/commands/referentiality.ts +14 -0
  67. package/src/plugins/table/event-handlers.ts +7 -1
  68. package/src/plugins/table/index.tsx +6 -1
  69. package/src/plugins/table/nodeviews/table.tsx +16 -1
  70. package/src/plugins/table/nodeviews/tableCell.tsx +3 -1
  71. package/src/plugins/table/pm-plugins/decorations/plugin.ts +1 -0
  72. package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts +1 -1
  73. package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts +12 -10
  74. package/src/plugins/table/toolbar.tsx +84 -28
  75. package/src/plugins/table/ui/common-styles.ts +20 -4
  76. package/src/plugins/table/ui/messages.ts +18 -3
  77. package/src/plugins/table/ui/ui-styles.ts +23 -14
  78. package/src/plugins/table/utils/decoration.ts +36 -20
  79. package/dist/cjs/plugins/table/utils/referentiality.js +0 -29
  80. package/dist/es2019/plugins/table/utils/referentiality.js +0 -18
  81. package/dist/esm/plugins/table/utils/referentiality.js +0 -20
  82. package/dist/types/plugins/table/utils/referentiality.d.ts +0 -2
  83. package/src/plugins/table/utils/referentiality.ts +0 -24
@@ -23,12 +23,16 @@ var isFocusingModal = function isFocusingModal(event) {
23
23
  return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
24
24
  };
25
25
 
26
+ var isFocusingFloatingToolbar = function isFocusingFloatingToolbar(event) {
27
+ return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="toolbar"]');
28
+ };
29
+
26
30
  export var handleBlur = function handleBlur(view, event) {
27
31
  var state = view.state,
28
32
  dispatch = view.dispatch; // IE version check for ED-4665
29
33
  // Calendar focus check for ED-10466
30
34
 
31
- if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event)) {
35
+ if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event)) {
32
36
  setEditorFocus(false)(state, dispatch);
33
37
  }
34
38
 
@@ -194,7 +194,16 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
194
194
  }
195
195
  }, {
196
196
  key: "ignoreMutation",
197
- value: function ignoreMutation() {
197
+ value: function ignoreMutation(mutation) {
198
+ var type = mutation.type,
199
+ _mutation$target = mutation.target,
200
+ nodeName = _mutation$target.nodeName,
201
+ firstChild = _mutation$target.firstChild;
202
+
203
+ if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
204
+ return false;
205
+ }
206
+
198
207
  return true;
199
208
  }
200
209
  }, {
@@ -92,7 +92,11 @@ var TableCellNodeView = /*#__PURE__*/function () {
92
92
  key: "update",
93
93
  value: function update(node) {
94
94
  var didUpdate = this.updateNodeView(node);
95
- this.node = node;
95
+
96
+ if (didUpdate) {
97
+ this.node = node;
98
+ }
99
+
96
100
  return didUpdate;
97
101
  }
98
102
  }, {
@@ -42,6 +42,7 @@ export var createPlugin = function createPlugin() {
42
42
  }
43
43
 
44
44
  if (tr.docChanged || tr.selectionSet) {
45
+ pluginState = pluginState.map(tr.mapping, tr.doc);
45
46
  return handleDocOrSelectionChanged(tr, pluginState, oldState);
46
47
  }
47
48
 
@@ -1,6 +1,5 @@
1
1
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
2
2
  import { findTable } from '@atlaskit/editor-tables/utils';
3
- import { DecorationSet } from 'prosemirror-view';
4
3
  import { TableDecorations } from '../../../types';
5
4
  import { createColumnControlsDecoration, createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../../utils/decoration';
6
5
  import { composeDecorations } from './compose-decorations';
@@ -65,7 +64,7 @@ export var buildColumnControlsDecorations = function buildColumnControlsDecorati
65
64
  var decorationSet = _ref6.decorationSet,
66
65
  tr = _ref6.tr;
67
66
  return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
68
- decorationSet: DecorationSet.empty,
67
+ decorationSet: decorationSet,
69
68
  tr: tr
70
69
  });
71
70
  };
@@ -154,15 +154,6 @@ export var TableRowNodeView = /*#__PURE__*/function () {
154
154
 
155
155
  if (!tree) {
156
156
  return;
157
- } // make it non-sticky initially to avoid making it look separated
158
-
159
-
160
- if (!_this.isTableInit) {
161
- if (_this.tree) {
162
- _this.makeRowHeaderNotSticky(_this.tree.table);
163
-
164
- _this.isTableInit = true;
165
- }
166
157
  } // when header rows are toggled off - mark sentinels as unobserved
167
158
 
168
159
 
@@ -174,7 +165,11 @@ export var TableRowNodeView = /*#__PURE__*/function () {
174
165
  });
175
166
  }
176
167
 
177
- var isCurrentTableSelected = tableRef === tree.table;
168
+ var isCurrentTableSelected = tableRef === tree.table; // If current table selected and header row is toggled off, turn off sticky header
169
+
170
+ if (isCurrentTableSelected && !state.isHeaderRowEnabled && _this.tree) {
171
+ _this.makeRowHeaderNotSticky(_this.tree.table);
172
+ }
178
173
 
179
174
  if (isCurrentTableSelected !== _this.focused) {
180
175
  focusChanged = true;
@@ -252,12 +247,21 @@ export var TableRowNodeView = /*#__PURE__*/function () {
252
247
  });
253
248
 
254
249
  _defineProperty(this, "makeHeaderRowSticky", function (tree) {
250
+ var _tbody$firstChild;
251
+
255
252
  // If header row height is more than 50% of viewport height don't do this
256
253
  if (_this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
257
254
  return;
258
255
  }
259
256
 
260
- var table = tree.table;
257
+ var table = tree.table; // ED-16035 Make sure sticky header is only applied to first row
258
+
259
+ var tbody = _this.dom.parentElement;
260
+ var isFirstHeader = tbody === null || tbody === void 0 ? void 0 : (_tbody$firstChild = tbody.firstChild) === null || _tbody$firstChild === void 0 ? void 0 : _tbody$firstChild.isEqualNode(_this.dom);
261
+
262
+ if (!isFirstHeader) {
263
+ return;
264
+ }
261
265
 
262
266
  var currentTableTop = _this.getCurrentTableTop(tree);
263
267
 
@@ -364,7 +368,6 @@ export var TableRowNodeView = /*#__PURE__*/function () {
364
368
  this.lastTimePainted = 0;
365
369
  this.isHeaderRow = supportedHeaderRow(node);
366
370
  this.isSticky = false;
367
- this.isTableInit = false;
368
371
 
369
372
  if (this.isHeaderRow) {
370
373
  this.dom.setAttribute('data-header-row', 'true');
@@ -5,13 +5,13 @@ import { jsx } from '@emotion/react';
5
5
  import { defineMessages } from 'react-intl-next';
6
6
  import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
7
7
  import commonMessages from '@atlaskit/editor-common/messages';
8
- import { clearHoverSelection, hoverTable, hoverColumns, hoverRows } from './commands';
8
+ import { clearHoverSelection, hoverTable, hoverColumns, hoverRows, removeDescendantNodes } from './commands';
9
9
  import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } from './commands-with-analytics';
10
10
  import { getPluginState } from './pm-plugins/plugin-factory';
11
11
  import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
12
12
  import { TableCssClassName } from './types';
13
13
  import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
14
- import { isReferencedSource } from './utils/referentiality';
14
+ import { isReferencedSource, getChildrenInfo as _getChildrenInfo, getNodeName } from '@atlaskit/editor-common/utils';
15
15
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
16
16
  import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
17
17
  import { canMergeCells } from './transforms';
@@ -84,6 +84,7 @@ export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _
84
84
  return {
85
85
  id: 'editor.table.tableOptions',
86
86
  type: 'dropdown',
87
+ testId: 'table_options',
87
88
  title: formatMessage(messages.tableOptions),
88
89
  hidden: options.every(function (option) {
89
90
  return option.hidden;
@@ -158,16 +159,9 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
158
159
 
159
160
  return true;
160
161
  },
161
- onMouseOver: function onMouseOver(state, dispatch) {
162
- var selectionRect = getClosestSelectionRect(state);
163
-
164
- if (selectionRect) {
165
- hoverColumns(getSelectedColumnIndexes(selectionRect), true)(state, dispatch);
166
- return true;
167
- }
168
-
169
- return false;
170
- },
162
+ onFocus: highlightColumnsHandler,
163
+ onBlur: clearHoverSelection(),
164
+ onMouseOver: highlightColumnsHandler,
171
165
  onMouseLeave: clearHoverSelection(),
172
166
  selected: false,
173
167
  disabled: false
@@ -185,16 +179,9 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
185
179
 
186
180
  return true;
187
181
  },
188
- onMouseOver: function onMouseOver(state, dispatch) {
189
- var selectionRect = getClosestSelectionRect(state);
190
-
191
- if (selectionRect) {
192
- hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
193
- return true;
194
- }
195
-
196
- return false;
197
- },
182
+ onFocus: highlightRowsHandler,
183
+ onBlur: clearHoverSelection(),
184
+ onMouseOver: highlightRowsHandler,
198
185
  onMouseLeave: clearHoverSelection(),
199
186
  selected: false,
200
187
  disabled: false
@@ -283,6 +270,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
283
270
  });
284
271
  return {
285
272
  id: 'editor.table.cellOptions',
273
+ testId: 'cell_options',
286
274
  type: 'dropdown',
287
275
  title: formatMessage(tableMessages.cellOptions),
288
276
  options: options,
@@ -315,12 +303,26 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
315
303
  var colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
316
304
 
317
305
  var confirmDialog;
318
- var localId = tableObject.node.attrs.localId;
319
306
 
320
- if (localId && isReferencedSource(state, localId)) {
321
- confirmDialog = {
322
- okButtonLabel: intl.formatMessage(tableMessages.confirmDeleteLinkedModalOKButton),
323
- message: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessage)
307
+ if (isReferencedSource(state, tableObject.node)) {
308
+ confirmDialog = function confirmDialog() {
309
+ return {
310
+ title: intl.formatMessage(tableMessages.deleteElementTitle),
311
+ okButtonLabel: intl.formatMessage(tableMessages.confirmDeleteLinkedModalOKButton),
312
+ message: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessage, {
313
+ nodeName: getNodeName(state, tableObject.node)
314
+ }),
315
+ messagePrefix: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessagePrefix),
316
+ isReferentialityDialog: true,
317
+ getChildrenInfo: function getChildrenInfo() {
318
+ return _getChildrenInfo(state, tableObject.node);
319
+ },
320
+ checkboxLabel: intl.formatMessage(tableMessages.confirmModalCheckboxLabel),
321
+ onConfirm: function onConfirm() {
322
+ var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
323
+ return clickWithCheckboxHandler(isChecked, tableObject.node);
324
+ }
325
+ };
324
326
  };
325
327
  }
326
328
 
@@ -357,7 +359,9 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
357
359
  formatMessage: intl.formatMessage,
358
360
  nodeType: nodeType,
359
361
  onMouseEnter: hoverTable(false, true),
360
- onMouseLeave: clearHoverSelection()
362
+ onMouseLeave: clearHoverSelection(),
363
+ onFocus: hoverTable(false, true),
364
+ onBlur: clearHoverSelection()
361
365
  }, {
362
366
  type: 'separator'
363
367
  }]
@@ -369,8 +373,11 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
369
373
  onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
370
374
  disabled: !!resizeState && !!resizeState.dragging,
371
375
  onMouseEnter: hoverTable(true),
376
+ onFocus: hoverTable(true),
377
+ onBlur: clearHoverSelection(),
372
378
  onMouseLeave: clearHoverSelection(),
373
379
  title: intl.formatMessage(commonMessages.remove),
380
+ focusEditoronEnter: true,
374
381
  confirmDialog: confirmDialog
375
382
  }]),
376
383
  scrollable: true
@@ -429,7 +436,7 @@ var getColorPicker = function getColorPicker(state, menu, _ref5, getEditorContai
429
436
  border: DEFAULT_BORDER_COLOR
430
437
  };
431
438
  return [{
432
- id: 'editor.panel.colorPicker',
439
+ id: 'editor.table.colorPicker',
433
440
  title: formatMessage(ContextualMenuMessages.cellBackground),
434
441
  type: 'select',
435
442
  selectType: 'color',
@@ -439,4 +446,42 @@ var getColorPicker = function getColorPicker(state, menu, _ref5, getEditorContai
439
446
  return setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition);
440
447
  }
441
448
  }, separator(menu.hidden)];
449
+ };
450
+
451
+ var clickWithCheckboxHandler = function clickWithCheckboxHandler(isChecked, node, editorAnalyticsAPI) {
452
+ return function (state, dispatch) {
453
+ if (!node) {
454
+ return false;
455
+ }
456
+
457
+ if (!isChecked) {
458
+ return deleteTableWithAnalytics(editorAnalyticsAPI)(state, dispatch);
459
+ } else {
460
+ removeDescendantNodes(node)(state, dispatch);
461
+ }
462
+
463
+ return true;
464
+ };
465
+ };
466
+
467
+ var highlightRowsHandler = function highlightRowsHandler(state, dispatch) {
468
+ var selectionRect = getClosestSelectionRect(state);
469
+
470
+ if (selectionRect) {
471
+ hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
472
+ return true;
473
+ }
474
+
475
+ return false;
476
+ };
477
+
478
+ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch) {
479
+ var selectionRect = getClosestSelectionRect(state);
480
+
481
+ if (selectionRect) {
482
+ hoverColumns(getSelectedColumnIndexes(selectionRect), true)(state, dispatch);
483
+ return true;
484
+ }
485
+
486
+ return false;
442
487
  };
@@ -21,12 +21,15 @@ var cornerControlHeight = tableToolbarSize + 1;
21
21
 
22
22
  var insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
23
23
  var rangeSelectionStyles = "\n.".concat(ClassName.NODEVIEW_WRAPPER, ".").concat(akEditorSelectedNodeClassName, " table tbody tr {\n th,td {\n ").concat(getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), "\n }\n}\n");
24
- var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n position: absolute;\n width: 100%;\n height: 1px;\n margin-top: -1px;\n // need this to avoid sentinel being focused via keyboard\n // this still allows it to be detected by intersection observer\n visibility: hidden;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n top: ").concat(columnControlsDecorationHeight, "px;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n bottom: ").concat(tableScrollbarOffset + stickyRowOffsetTop + tablePadding * 2 + 23, "px;\n }\n &.").concat(ClassName.WITH_CONTROLS, " {\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n top: 0px;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n margin-bottom: ").concat(columnControlsDecorationHeight, "px;\n }\n }\n}"); // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
24
+ var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n position: absolute;\n width: 100%;\n height: 1px;\n margin-top: -1px;\n // need this to avoid sentinel being focused via keyboard\n // this still allows it to be detected by intersection observer\n visibility: hidden;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n top: ").concat(columnControlsDecorationHeight, "px;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n bottom: ").concat(tableScrollbarOffset + stickyRowOffsetTop + tablePadding * 2 + 23, "px;\n }\n &.").concat(ClassName.WITH_CONTROLS, " {\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n top: 0px;\n }\n > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n margin-bottom: ").concat(columnControlsDecorationHeight, "px;\n }\n }\n}"); // previous styles to add spacing to numbered lists with
25
+ // large item markers (e.g. 101, 102, ...) when nested inside tables
26
+
27
+ var listLargeNumericMarkersOldStyles = "\n .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n padding-left: revert;\n }\n"; // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
25
28
 
26
29
  export var tableStyles = function tableStyles(props) {
27
- var _props$featureFlags;
30
+ var _props$featureFlags, _props$featureFlags2;
28
31
 
29
- 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\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\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: ", "px;\n margin-bottom: -", "px;\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 .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n padding-left: revert;\n }\n"])), ClassName.LAYOUT_BUTTON, token('color.background.neutral', N20A), token('color.icon', N300), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, token('color.background.neutral.hovered', B300), token('color.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, token('elevation.surface', 'white'), ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, token('elevation.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, token('elevation.surface', 'white'), tableToolbarSize, ClassName.TABLE_STICKY, token('elevation.surface', 'green'), stickyRowOffsetTop, stickyRowZIndex, token('elevation.surface', 'white'), token('elevation.shadow.overflow', "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, token('elevation.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, token('color.background.selected', 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, token('color.background.selected', tableToolbarSelectedColor), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, token('color.background.danger', 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, token('color.background.selected', tableToolbarSelectedColor), akEditorUnitZIndex, token('color.text.selected', N0), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, token('color.background.selected', tableToolbarSelectedColor), akEditorUnitZIndex, token('color.text.selected', N0), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, token('color.background.danger', tableToolbarDeleteColor), tableBorderDeleteColor, token('color.text.danger', 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, tableScrollbarOffset, tableScrollbarOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR);
32
+ 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\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\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: ", "px;\n margin-bottom: -", "px;\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, token('color.background.neutral', N20A), token('color.icon', N300), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, token('color.background.neutral.hovered', B300), token('color.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, token('elevation.surface', 'white'), ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, token('elevation.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, token('elevation.surface', 'white'), tableToolbarSize, ClassName.TABLE_STICKY, token('elevation.surface', 'green'), stickyRowOffsetTop, stickyRowZIndex, token('elevation.surface', 'white'), token('elevation.shadow.overflow', "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, token('elevation.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, token('color.background.selected', 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, token('color.background.selected', tableToolbarSelectedColor), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, token('color.background.danger', 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, token('color.background.selected', tableToolbarSelectedColor), akEditorUnitZIndex, token('color.text.selected', N0), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, token('color.background.selected', tableToolbarSelectedColor), akEditorUnitZIndex, token('color.text.selected', N0), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, token('color.background.danger', tableToolbarDeleteColor), tableBorderDeleteColor, token('color.text.danger', 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, tableScrollbarOffset, tableScrollbarOffset, 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
33
  };
31
34
  export var tableFullPageEditorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n }\n"])), ClassName.TABLE_NODE_WRAPPER);
32
35
  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);
@@ -27,12 +27,27 @@ export default defineMessages({
27
27
  },
28
28
  confirmDeleteLinkedModalOKButton: {
29
29
  id: 'fabric.editor.tables.confirmDeleteLinkedModalOKButton',
30
- defaultMessage: 'Remove table and data',
30
+ defaultMessage: 'Delete',
31
31
  description: 'Action button label for confirm modal when deleting a table linked to an extension.'
32
32
  },
33
33
  confirmDeleteLinkedModalMessage: {
34
34
  id: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
35
- defaultMessage: 'Removing this table will break all the charts connected to it.',
35
+ defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
36
36
  description: 'Message for confirm modal when deleting a table linked to an extension.'
37
+ },
38
+ confirmDeleteLinkedModalMessagePrefix: {
39
+ id: 'fabric.editor.extension.confirmDeleteLinkedModalMessagePrefix',
40
+ defaultMessage: 'Deleting',
41
+ description: 'prefix for confirmation dialog text'
42
+ },
43
+ confirmModalCheckboxLabel: {
44
+ id: 'fabric.editor.floatingToolbar.confirmModalCheckboxLabel',
45
+ defaultMessage: 'Also delete connected elements',
46
+ description: 'checkbox label text'
47
+ },
48
+ deleteElementTitle: {
49
+ id: 'fabric.editor.extension.deleteElementTitle',
50
+ defaultMessage: 'Delete element',
51
+ description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
37
52
  }
38
53
  });
@@ -50,14 +50,10 @@ export var insertRowButtonWrapper = css(_templateObject11 || (_templateObject11
50
50
  export var columnControlsLineMarker = function columnControlsLineMarker(props) {
51
51
  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n .", ".", "\n table\n tr:first-of-type\n td,\n .", ".", "\n table\n tr:first-of-type\n th {\n position: relative;\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS);
52
52
  };
53
- export var DeleteButton = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n .", " {\n ", "\n }\n }\n\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat(token('color.background.neutral', N20A), ";\n color: ").concat(token('color.icon', N300), ";\n ")), ClassName.CONTROLS_DELETE_BUTTON, token('color.background.danger.bold', R300), token('color.icon.inverse', 'white')); // TODO: https://product-fabric.atlassian.net/browse/DSP-4451
54
-
55
- /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
56
-
53
+ export var DeleteButton = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n .", " {\n ", "\n }\n }\n\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat(token('color.background.neutral', N20A), ";\n color: ").concat(token('color.icon', N300), ";\n ")), ClassName.CONTROLS_DELETE_BUTTON, token('color.background.danger.bold', R300), token('color.icon.inverse', 'white'));
57
54
  export var OverflowShadow = function OverflowShadow(props) {
58
- return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n .", ", .", " {\n display: block;\n height: calc(\n 100% - ", "px\n );\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: 8px;\n }\n .", " {\n background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n rgba(99, 114, 130, 0) 0,\n ", " 100%\n );\n left: calc(100% + 2px);\n }\n .", " {\n .", ", .", " {\n height: calc(100% - ", "px);\n top: ", "px;\n }\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop + tableMarginBottom + tableToolbarSize - 2, tableMarginTop + tableToolbarSize - 1, akEditorShadowZIndex, ClassName.TABLE_LEFT_SHADOW, N40A, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, N40A, ClassName.WITH_CONTROLS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop + tableMarginBottom - 2, tableMarginTop - 1, ClassName.TABLE_LEFT_SHADOW, tableBorderColor(props));
55
+ return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: 8px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", " 100%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", " 100%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: calc(100% + 2px);\n }\n .", " {\n .", ", .", " {\n height: calc(100% - ", "px);\n top: ", "px;\n }\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop + tableMarginBottom, tableMarginTop, akEditorShadowZIndex, ClassName.TABLE_LEFT_SHADOW, token('elevation.shadow.overflow.spread', N40A), token('elevation.shadow.overflow.perimeter', 'transparent'), ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, token('elevation.shadow.overflow.spread', N40A), token('elevation.shadow.overflow.perimeter', 'transparent'), ClassName.WITH_CONTROLS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop + tableMarginBottom, tableMarginTop, ClassName.TABLE_LEFT_SHADOW, tableBorderColor(props));
59
56
  };
60
- /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
61
57
 
62
58
  var columnHeaderButton = function columnHeaderButton(props, cssString) {
63
59
  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n\n ", "\n"])), tableToolbarColor(props), tableBorderColor(props), cssString);
@@ -133,16 +133,21 @@ export var createColumnControlsDecoration = function createColumnControlsDecorat
133
133
  var cells = getCellsInRow(0)(selection) || [];
134
134
  var index = 0;
135
135
  return cells.map(function (cell) {
136
- var colspan = cell.node.attrs.colspan || 1;
137
- var element = document.createElement('div');
138
- element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
139
- element.dataset.startIndex = "".concat(index);
140
- index += colspan;
141
- element.dataset.endIndex = "".concat(index);
136
+ var colspan = cell.node.attrs.colspan || 1; // It's important these values are scoped locally as the widget callback could be executed anytime in the future
137
+ // and we want to avoid value leak
138
+
139
+ var startIndex = index;
140
+ var endIndex = startIndex + colspan; // The next cell start index will commence from the current cell end index.
141
+
142
+ index = endIndex;
142
143
  return Decoration.widget(cell.pos + 1, function () {
144
+ var element = document.createElement('div');
145
+ element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
146
+ element.dataset.startIndex = "".concat(startIndex);
147
+ element.dataset.endIndex = "".concat(endIndex);
143
148
  return element;
144
149
  }, {
145
- key: "".concat(TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(index),
150
+ key: "".concat(TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(endIndex),
146
151
  // this decoration should be the first one, even before gap cursor.
147
152
  side: -100
148
153
  });
@@ -253,12 +258,14 @@ export var createResizeHandleDecoration = function createResizeHandleDecoration(
253
258
  }
254
259
 
255
260
  var createResizerHandleDecoration = function createResizerHandleDecoration(cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) {
256
- var element = document.createElement('div');
257
- element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
258
- element.dataset.startIndex = "".concat(cellColumnPositioning.left);
259
- element.dataset.endIndex = "".concat(cellColumnPositioning.right);
260
261
  var position = cellPos + cellNode.nodeSize - 1;
261
- return Decoration.widget(position, element, {
262
+ return Decoration.widget(position, function () {
263
+ var element = document.createElement('div');
264
+ element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
265
+ element.dataset.startIndex = "".concat(cellColumnPositioning.left);
266
+ element.dataset.endIndex = "".concat(cellColumnPositioning.right);
267
+ return element;
268
+ }, {
262
269
  key: "".concat(TableDecorations.COLUMN_RESIZING_HANDLE, "_").concat(rowIndex, "_").concat(columnIndex)
263
270
  });
264
271
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "0.2.6",
3
+ "version": "1.0.1",
4
4
  "sideEffects": false
5
5
  }
@@ -5,3 +5,4 @@ export { clearMultipleCells } from './clear';
5
5
  export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectRow, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, } from './misc';
6
6
  export { sortByColumn } from './sort';
7
7
  export { goToNextCell } from './go-to-next-cell';
8
+ export { removeDescendantNodes } from './referentiality';
@@ -0,0 +1,2 @@
1
+ import { Node as PMNode } from 'prosemirror-model';
2
+ export declare const removeDescendantNodes: (sourceNode: PMNode) => import("@atlaskit/editor-common/types").Command;
@@ -1,8 +1,7 @@
1
- import type { EditorPlugin } from '@atlaskit/editor-common/types';
2
1
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
2
  import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
4
3
  import { PluginConfig } from './types';
5
- import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
4
+ import type { GetEditorFeatureFlags, NextEditorPlugin } from '@atlaskit/editor-common/types';
6
5
  interface TablePluginOptions {
7
6
  tableOptions: PluginConfig;
8
7
  breakoutEnabled?: boolean;
@@ -13,5 +12,5 @@ interface TablePluginOptions {
13
12
  editorSelectionAPI?: EditorSelectionAPI;
14
13
  getEditorFeatureFlags?: GetEditorFeatureFlags;
15
14
  }
16
- declare const tablesPlugin: (options?: TablePluginOptions | undefined) => EditorPlugin;
15
+ declare const tablesPlugin: NextEditorPlugin<'table', never, TablePluginOptions | undefined>;
17
16
  export default tablesPlugin;
@@ -24,7 +24,10 @@ export default class TableView extends ReactNodeView<Props> {
24
24
  render(props: Props, forwardRef: ForwardRef): JSX.Element;
25
25
  private hasHoveredRows;
26
26
  viewShouldUpdate(nextNode: PmNode): boolean;
27
- ignoreMutation(): boolean;
27
+ ignoreMutation(mutation: MutationRecord | {
28
+ type: 'selection';
29
+ target: Element;
30
+ }): boolean;
28
31
  destroy(): void;
29
32
  }
30
33
  export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, options: TableOptions, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags) => NodeView;
@@ -27,7 +27,6 @@ export declare class TableRowNodeView implements NodeView {
27
27
  focused: boolean;
28
28
  topPosEditorElement: number;
29
29
  isSticky: boolean;
30
- isTableInit: boolean;
31
30
  lastTimePainted: number;
32
31
  private intersectionObserver?;
33
32
  private resizeObserver?;
@@ -1,4 +1,7 @@
1
+ import type { FeatureFlags } from '@atlaskit/editor-common/types';
1
2
  import { ThemeProps } from '@atlaskit/theme/types';
2
- export declare const tableStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
3
+ export declare const tableStyles: (props: ThemeProps & {
4
+ featureFlags?: FeatureFlags;
5
+ }) => import("@emotion/react").SerializedStyles;
3
6
  export declare const tableFullPageEditorStyles: import("@emotion/react").SerializedStyles;
4
7
  export declare const tableCommentEditorStyles: import("@emotion/react").SerializedStyles;