@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.
- package/CHANGELOG.md +40 -0
- package/dist/cjs/plugins/table/commands/index.js +9 -1
- package/dist/cjs/plugins/table/commands/referentiality.js +23 -0
- package/dist/cjs/plugins/table/event-handlers.js +5 -1
- package/dist/cjs/plugins/table/nodeviews/table.js +10 -1
- package/dist/cjs/plugins/table/nodeviews/tableCell.js +5 -1
- package/dist/cjs/plugins/table/pm-plugins/decorations/plugin.js +1 -0
- package/dist/cjs/plugins/table/pm-plugins/decorations/utils/column-controls.js +1 -3
- package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +15 -12
- package/dist/cjs/plugins/table/toolbar.js +78 -35
- package/dist/cjs/plugins/table/ui/common-styles.js +6 -3
- package/dist/cjs/plugins/table/ui/messages.js +17 -2
- package/dist/cjs/plugins/table/ui/ui-styles.js +2 -7
- package/dist/cjs/plugins/table/utils/decoration.js +19 -12
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/plugins/table/commands/index.js +2 -1
- package/dist/es2019/plugins/table/commands/referentiality.js +10 -0
- package/dist/es2019/plugins/table/event-handlers.js +3 -1
- package/dist/es2019/plugins/table/nodeviews/table.js +13 -1
- package/dist/es2019/plugins/table/nodeviews/tableCell.js +5 -1
- package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js +1 -0
- package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js +1 -2
- package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +16 -11
- package/dist/es2019/plugins/table/toolbar.js +65 -29
- package/dist/es2019/plugins/table/ui/common-styles.js +15 -5
- package/dist/es2019/plugins/table/ui/messages.js +17 -2
- package/dist/es2019/plugins/table/ui/ui-styles.js +24 -16
- package/dist/es2019/plugins/table/utils/decoration.js +22 -13
- package/dist/es2019/version.json +1 -1
- package/dist/esm/plugins/table/commands/index.js +2 -1
- package/dist/esm/plugins/table/commands/referentiality.js +12 -0
- package/dist/esm/plugins/table/event-handlers.js +5 -1
- package/dist/esm/plugins/table/nodeviews/table.js +10 -1
- package/dist/esm/plugins/table/nodeviews/tableCell.js +5 -1
- package/dist/esm/plugins/table/pm-plugins/decorations/plugin.js +1 -0
- package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-controls.js +1 -2
- package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +15 -12
- package/dist/esm/plugins/table/toolbar.js +74 -29
- package/dist/esm/plugins/table/ui/common-styles.js +6 -3
- package/dist/esm/plugins/table/ui/messages.js +17 -2
- package/dist/esm/plugins/table/ui/ui-styles.js +2 -6
- package/dist/esm/plugins/table/utils/decoration.js +19 -12
- package/dist/esm/version.json +1 -1
- package/dist/types/plugins/table/commands/index.d.ts +1 -0
- package/dist/types/plugins/table/commands/referentiality.d.ts +2 -0
- package/dist/types/plugins/table/index.d.ts +2 -3
- package/dist/types/plugins/table/nodeviews/table.d.ts +4 -1
- package/dist/types/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.d.ts +0 -1
- package/dist/types/plugins/table/ui/common-styles.d.ts +4 -1
- package/dist/types/plugins/table/ui/messages.d.ts +15 -0
- package/package.json +6 -6
- package/report.api.md +6 -6
- package/src/__tests__/integration/__fixtures__/table-and-paragraph-adf.json +130 -0
- package/src/__tests__/integration/floating-toolbar.ts +54 -0
- package/src/__tests__/integration/meta-arrowup-cursor-in-first-row.ts +37 -0
- package/src/__tests__/unit/color-picker.ts +100 -0
- package/src/__tests__/unit/get-toolbar-config.ts +1 -4
- package/src/__tests__/unit/keymap.ts +1 -1
- package/src/__tests__/unit/nodeviews/cell.ts +52 -57
- package/src/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx +90 -8
- package/src/__tests__/unit/transforms/delete-columns.ts +1 -1
- package/src/__tests__/unit/transforms/delete-rows.ts +1 -1
- package/src/__tests__/unit/utils/collapse.ts +2 -2
- 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
- package/src/plugins/table/commands/index.ts +1 -0
- package/src/plugins/table/commands/referentiality.ts +14 -0
- package/src/plugins/table/event-handlers.ts +7 -1
- package/src/plugins/table/index.tsx +6 -1
- package/src/plugins/table/nodeviews/table.tsx +16 -1
- package/src/plugins/table/nodeviews/tableCell.tsx +3 -1
- package/src/plugins/table/pm-plugins/decorations/plugin.ts +1 -0
- package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts +1 -1
- package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts +12 -10
- package/src/plugins/table/toolbar.tsx +84 -28
- package/src/plugins/table/ui/common-styles.ts +20 -4
- package/src/plugins/table/ui/messages.ts +18 -3
- package/src/plugins/table/ui/ui-styles.ts +23 -14
- package/src/plugins/table/utils/decoration.ts +36 -20
- package/dist/cjs/plugins/table/utils/referentiality.js +0 -29
- package/dist/es2019/plugins/table/utils/referentiality.js +0 -18
- package/dist/esm/plugins/table/utils/referentiality.js +0 -20
- package/dist/types/plugins/table/utils/referentiality.d.ts +0 -2
- 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
|
-
|
|
95
|
+
|
|
96
|
+
if (didUpdate) {
|
|
97
|
+
this.node = node;
|
|
98
|
+
}
|
|
99
|
+
|
|
96
100
|
return didUpdate;
|
|
97
101
|
}
|
|
98
102
|
}, {
|
|
@@ -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:
|
|
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 '
|
|
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
|
-
|
|
162
|
-
|
|
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
|
-
|
|
189
|
-
|
|
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 (
|
|
321
|
-
confirmDialog = {
|
|
322
|
-
|
|
323
|
-
|
|
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.
|
|
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}"); //
|
|
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: '
|
|
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: '
|
|
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'));
|
|
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(
|
|
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
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
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(
|
|
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,
|
|
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
|
};
|
package/dist/esm/version.json
CHANGED
|
@@ -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';
|
|
@@ -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:
|
|
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(
|
|
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;
|
|
@@ -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
|
|
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;
|