@atlaskit/editor-plugin-table 24.2.9 → 24.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/pm-plugins/commands/commands-with-analytics.js +82 -13
- package/dist/cjs/ui/TableMenu/cell/items/VerticalAlignDropdownItem.js +4 -3
- package/dist/cjs/ui/rounded-table-styles.js +28 -10
- package/dist/es2019/pm-plugins/commands/commands-with-analytics.js +62 -1
- package/dist/es2019/ui/TableMenu/cell/items/VerticalAlignDropdownItem.js +5 -4
- package/dist/es2019/ui/rounded-table-styles.js +59 -1
- package/dist/esm/pm-plugins/commands/commands-with-analytics.js +82 -13
- package/dist/esm/ui/TableMenu/cell/items/VerticalAlignDropdownItem.js +5 -4
- package/dist/esm/ui/rounded-table-styles.js +28 -10
- package/dist/types/pm-plugins/commands/commands-with-analytics.d.ts +3 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 24.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`d461a7ef54404`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d461a7ef54404) -
|
|
8
|
+
Add analytics for table cell vertical alignment changes
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- [`66d869b3fdc74`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/66d869b3fdc74) -
|
|
13
|
+
[ux] Style changes to fix tables with rounded corners.
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 24.2.10
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 24.2.9
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.wrapTableInExpandWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.toggleFixedColumnWidthsOptionAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setTableAlignmentWithTableContentWithPosWithAnalytics = exports.setTableAlignmentWithAnalytics = exports.setColorWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
|
|
7
|
+
exports.wrapTableInExpandWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.toggleFixedColumnWidthsOptionAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setTableAlignmentWithTableContentWithPosWithAnalytics = exports.setTableAlignmentWithAnalytics = exports.setColorWithAnalytics = exports.setCellVerticalAlignmentWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _adfSchema = require("@atlaskit/adf-schema");
|
|
10
10
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
@@ -148,6 +148,75 @@ var setColorWithAnalytics = exports.setColorWithAnalytics = function setColorWit
|
|
|
148
148
|
}, editorView));
|
|
149
149
|
};
|
|
150
150
|
};
|
|
151
|
+
var getNormalizedCellValign = function getNormalizedCellValign(valign) {
|
|
152
|
+
return valign !== null && valign !== void 0 ? valign : 'top';
|
|
153
|
+
};
|
|
154
|
+
var getCellVerticalAlignmentAnalyticsInfo = function getCellVerticalAlignmentAnalyticsInfo(selection, valign, targetCellPosition) {
|
|
155
|
+
var selectedValigns = [];
|
|
156
|
+
if (selection instanceof _cellSelection.CellSelection) {
|
|
157
|
+
selection.forEachCell(function (cell) {
|
|
158
|
+
selectedValigns.push(getNormalizedCellValign(cell.attrs.valign));
|
|
159
|
+
});
|
|
160
|
+
} else if (typeof targetCellPosition === 'number') {
|
|
161
|
+
var cell = selection.$from.doc.nodeAt(targetCellPosition);
|
|
162
|
+
if (cell) {
|
|
163
|
+
selectedValigns.push(getNormalizedCellValign(cell.attrs.valign));
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
if (selectedValigns.length === 0) {
|
|
167
|
+
return undefined;
|
|
168
|
+
}
|
|
169
|
+
var firstValign = selectedValigns[0];
|
|
170
|
+
var previousValign = selectedValigns.every(function (selectedValign) {
|
|
171
|
+
return selectedValign === firstValign;
|
|
172
|
+
}) ? firstValign : 'mixed';
|
|
173
|
+
var updatedCount = selectedValigns.filter(function (selectedValign) {
|
|
174
|
+
return selectedValign !== valign;
|
|
175
|
+
}).length;
|
|
176
|
+
return {
|
|
177
|
+
previousValign: previousValign,
|
|
178
|
+
updatedCount: updatedCount
|
|
179
|
+
};
|
|
180
|
+
};
|
|
181
|
+
var setCellVerticalAlignmentWithAnalytics = exports.setCellVerticalAlignmentWithAnalytics = function setCellVerticalAlignmentWithAnalytics(editorAnalyticsAPI) {
|
|
182
|
+
return function (inputMethod, valign, targetCellPosition) {
|
|
183
|
+
return function (_ref5) {
|
|
184
|
+
var tr = _ref5.tr;
|
|
185
|
+
var analyticsInfo = getCellVerticalAlignmentAnalyticsInfo(tr.selection, valign, targetCellPosition);
|
|
186
|
+
var result = (0, _misc.setMultipleCellAttrsEditorCommand)({
|
|
187
|
+
valign: valign
|
|
188
|
+
}, targetCellPosition)({
|
|
189
|
+
tr: tr
|
|
190
|
+
});
|
|
191
|
+
if (result && analyticsInfo) {
|
|
192
|
+
var _getSelectedCellInfo5 = (0, _analytics2.getSelectedCellInfo)(tr.selection),
|
|
193
|
+
horizontalCells = _getSelectedCellInfo5.horizontalCells,
|
|
194
|
+
verticalCells = _getSelectedCellInfo5.verticalCells,
|
|
195
|
+
totalCells = _getSelectedCellInfo5.totalCells,
|
|
196
|
+
totalRowCount = _getSelectedCellInfo5.totalRowCount,
|
|
197
|
+
totalColumnCount = _getSelectedCellInfo5.totalColumnCount;
|
|
198
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
|
|
199
|
+
action: _analytics.TABLE_ACTION.CHANGED_CELL_VERTICAL_ALIGNMENT,
|
|
200
|
+
actionSubject: _analytics.ACTION_SUBJECT.TABLE,
|
|
201
|
+
actionSubjectId: null,
|
|
202
|
+
attributes: {
|
|
203
|
+
inputMethod: inputMethod,
|
|
204
|
+
previousValign: analyticsInfo.previousValign,
|
|
205
|
+
valign: valign,
|
|
206
|
+
updatedCount: analyticsInfo.updatedCount,
|
|
207
|
+
horizontalCells: horizontalCells,
|
|
208
|
+
verticalCells: verticalCells,
|
|
209
|
+
totalCells: totalCells,
|
|
210
|
+
totalRowCount: totalRowCount,
|
|
211
|
+
totalColumnCount: totalColumnCount
|
|
212
|
+
},
|
|
213
|
+
eventType: _analytics.EVENT_TYPE.TRACK
|
|
214
|
+
})(tr);
|
|
215
|
+
}
|
|
216
|
+
return result;
|
|
217
|
+
};
|
|
218
|
+
};
|
|
219
|
+
};
|
|
151
220
|
var addRowAroundSelection = exports.addRowAroundSelection = function addRowAroundSelection(editorAnalyticsAPI) {
|
|
152
221
|
return function (side) {
|
|
153
222
|
return function (state, dispatch) {
|
|
@@ -249,8 +318,8 @@ var insertColumnWithAnalytics = exports.insertColumnWithAnalytics = function ins
|
|
|
249
318
|
};
|
|
250
319
|
var deleteRowsWithAnalytics = exports.deleteRowsWithAnalytics = function deleteRowsWithAnalytics(editorAnalyticsAPI) {
|
|
251
320
|
return function (inputMethod, rect, isHeaderRowRequired) {
|
|
252
|
-
return (0, _analytics2.withEditorAnalyticsAPI)(function (
|
|
253
|
-
var selection =
|
|
321
|
+
return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref6) {
|
|
322
|
+
var selection = _ref6.selection;
|
|
254
323
|
var _getSelectedTableInfo4 = (0, _analytics2.getSelectedTableInfo)(selection),
|
|
255
324
|
totalRowCount = _getSelectedTableInfo4.totalRowCount,
|
|
256
325
|
totalColumnCount = _getSelectedTableInfo4.totalColumnCount;
|
|
@@ -281,8 +350,8 @@ var deleteColumnsWithAnalytics = exports.deleteColumnsWithAnalytics = function d
|
|
|
281
350
|
var shouldUseIncreasedScalingPercent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
282
351
|
var isCommentEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
|
283
352
|
return function (inputMethod, rect) {
|
|
284
|
-
return (0, _analytics2.withEditorAnalyticsAPI)(function (
|
|
285
|
-
var selection =
|
|
353
|
+
return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref7) {
|
|
354
|
+
var selection = _ref7.selection;
|
|
286
355
|
var _getSelectedTableInfo5 = (0, _analytics2.getSelectedTableInfo)(selection),
|
|
287
356
|
totalRowCount = _getSelectedTableInfo5.totalRowCount,
|
|
288
357
|
totalColumnCount = _getSelectedTableInfo5.totalColumnCount;
|
|
@@ -342,15 +411,15 @@ var getTableDeletedAnalytics = function getTableDeletedAnalytics(selection, inpu
|
|
|
342
411
|
};
|
|
343
412
|
};
|
|
344
413
|
var deleteTableWithAnalytics = exports.deleteTableWithAnalytics = function deleteTableWithAnalytics(editorAnalyticsAPI) {
|
|
345
|
-
return (0, _analytics2.withEditorAnalyticsAPI)(function (
|
|
346
|
-
var selection =
|
|
414
|
+
return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref8) {
|
|
415
|
+
var selection = _ref8.selection;
|
|
347
416
|
return getTableDeletedAnalytics(selection, _analytics.INPUT_METHOD.FLOATING_TB);
|
|
348
417
|
})(editorAnalyticsAPI)(_misc.deleteTable);
|
|
349
418
|
};
|
|
350
419
|
var deleteTableIfSelectedWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = function deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI) {
|
|
351
420
|
return function (inputMethod) {
|
|
352
|
-
return (0, _analytics2.withEditorAnalyticsAPI)(function (
|
|
353
|
-
var selection =
|
|
421
|
+
return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref9) {
|
|
422
|
+
var selection = _ref9.selection;
|
|
354
423
|
return getTableDeletedAnalytics(selection, inputMethod);
|
|
355
424
|
})(editorAnalyticsAPI)(_misc.deleteTableIfSelected);
|
|
356
425
|
};
|
|
@@ -436,10 +505,10 @@ var sortColumnWithAnalytics = exports.sortColumnWithAnalytics = function sortCol
|
|
|
436
505
|
};
|
|
437
506
|
};
|
|
438
507
|
var distributeColumnsWidthsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = function distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api) {
|
|
439
|
-
return function (inputMethod,
|
|
440
|
-
var resizeState =
|
|
441
|
-
table =
|
|
442
|
-
attributes =
|
|
508
|
+
return function (inputMethod, _ref0) {
|
|
509
|
+
var resizeState = _ref0.resizeState,
|
|
510
|
+
table = _ref0.table,
|
|
511
|
+
attributes = _ref0.attributes;
|
|
443
512
|
return (0, _analytics2.withEditorAnalyticsAPI)(function () {
|
|
444
513
|
return {
|
|
445
514
|
action: _analytics.TABLE_ACTION.DISTRIBUTED_COLUMNS_WIDTHS,
|
|
@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.VerticalAlignDropdownItem = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _reactIntl = require("react-intl");
|
|
10
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
10
11
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
11
12
|
var _commands = require("../../../../pm-plugins/commands");
|
|
13
|
+
var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
|
|
12
14
|
var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
|
|
13
15
|
var _TableMenuContext = require("../../shared/TableMenuContext");
|
|
14
16
|
var _verticalAlignUtils = require("./verticalAlignUtils");
|
|
@@ -33,10 +35,9 @@ var VerticalAlignDropdownItem = exports.VerticalAlignDropdownItem = function Ver
|
|
|
33
35
|
var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
|
|
34
36
|
targetCellPosition = _getPluginState.targetCellPosition;
|
|
35
37
|
api.core.actions.execute(function (_ref3) {
|
|
38
|
+
var _api$analytics;
|
|
36
39
|
var tr = _ref3.tr;
|
|
37
|
-
(0,
|
|
38
|
-
valign: value
|
|
39
|
-
}, targetCellPosition)({
|
|
40
|
+
(0, _commandsWithAnalytics.setCellVerticalAlignmentWithAnalytics)((_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, value, targetCellPosition)({
|
|
40
41
|
tr: tr
|
|
41
42
|
});
|
|
42
43
|
(0, _commands.closeActiveTableMenu)(api)({
|
|
@@ -12,36 +12,54 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
|
12
12
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
13
|
var _types = require("../types");
|
|
14
14
|
var _consts = require("./consts");
|
|
15
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10;
|
|
15
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
|
|
16
16
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
|
|
17
17
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
18
18
|
var roundedTableCellCornerStyles = function roundedTableCellCornerStyles() {
|
|
19
19
|
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > table {\n\t\t/* Round table corner cells (including merged cells that span to the edge)\n\t\t and their interaction overlays. The data-reaches-* attributes are set by the\n\t\t TableCell node view based on each cell's position + rowspan/colspan. */\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-left] {\n\t\t\tborder-top-left-radius: ", ";\n\n\t\t\t/* ::before is the node-selection blanket fill; round it so the selected\n\t\t\t wash follows the corner instead of leaving a square corner. */\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-right] {\n\t\t\tborder-top-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-left] {\n\t\t\tborder-bottom-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-right] {\n\t\t\tborder-bottom-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)");
|
|
20
20
|
};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Interaction-overlay corner rounding only styles (the `::after` / `::before` / hover-danger
|
|
24
|
+
* pseudo-elements), split out of {@link roundedTableCellCornerStyles}.
|
|
25
|
+
*
|
|
26
|
+
* The base cell `border-*-radius` rules are emitted from the SSR-rendered
|
|
27
|
+
* `EditorContentContainer` (see `tableRoundedCornerStyles` in editor-core) so corners are
|
|
28
|
+
* rounded server-side. These overlay rules only apply during interaction (node selection
|
|
29
|
+
* wash, hover-to-delete danger highlight), which require a live editorView and therefore
|
|
30
|
+
* never render during SSR — so they intentionally stay in the client-only `<Global>` styles
|
|
31
|
+
* to avoid shipping dead CSS in the SSR payload.
|
|
32
|
+
*/
|
|
33
|
+
var roundedTableCellCornerInteractionOverlayStyles = function roundedTableCellCornerInteractionOverlayStyles() {
|
|
34
|
+
return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > table {\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-left] {\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-right] {\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-left] {\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-right] {\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)");
|
|
35
|
+
};
|
|
21
36
|
var roundedTableInteractionOverlayStyles = function roundedTableInteractionOverlayStyles() {
|
|
22
|
-
return (0, _react.css)(
|
|
37
|
+
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > table {\n\t\t/* Active-cell highlight base properties (replaces activeCellHighlightStyles).\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%,\n\t\t so that left/right/top/bottom determine the size instead. */\n\t\ttd.", ".", "::after,\n\t\t\tth.", ".", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t\tbox-shadow: ", ";\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: -1px;\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tz-index: ", ";\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t/* Normalize selected/hover/danger overlays to the same box model as active-cell.\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%. */\n\t\ttd.", "::after,\n\t\t\ttd.", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\ttd.", ".", "::after {\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t}\n\n\t\t/* Preserve interaction border colours on table edges without changing the shared -1px overlay inset. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td:is(\n\t\t\t\t.", ", .", ", .", "\n\t\t\t),\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> th:is(\n\t\t\t\t.", ", .", ", .", "\n\t\t\t) {\n\t\t\t&[data-reaches-top] {\n\t\t\t\tborder-top-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\ttop: -1px;\n\t\t\t\t\tbottom: -1px;\n\t\t\t\t\tborder-top-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-left] {\n\t\t\t\tborder-left-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-left-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-right] {\n\t\t\t\tborder-right-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-right-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-bottom] {\n\t\t\t\tborder-bottom-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-bottom-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td.", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th.", " {\n\t\t\t&[data-reaches-top] {\n\t\t\t\tborder-top-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\ttop: -1px;\n\t\t\t\t\tbottom: -1px;\n\t\t\t\t\tborder-top-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-left] {\n\t\t\t\tborder-left-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-left-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-right] {\n\t\t\t\tborder-right-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-right-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-bottom] {\n\t\t\t\tborder-bottom-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-bottom-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, "var(--ds-border-selected, #1868DB)", "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)", _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableBorderDeleteColor, _consts.tableBorderDeleteColor, _consts.tableBorderDeleteColor);
|
|
23
38
|
};
|
|
24
39
|
var roundedTableSelectedNodeStyles = function roundedTableSelectedNodeStyles() {
|
|
25
|
-
return (0, _react.css)(
|
|
40
|
+
return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ".", "\n\t\t> .", "\n\t\t> .", "\n\t\t> table,\n\t.", ".", "\n\t\t> [data-testid='table-alignment-container']\n\t\t> .", "\n\t\t> .resizer-item\n\t\t> .resizer-hover-zone\n\t\t> .", "\n\t\t> .", "\n\t\t> table {\n\t\t/* Make a node-selected table look identical to a cell-selected one by mirroring the\n\t\t .selectedCell single-::after overlay model (getSelectionStyles is blocked for this path). */\n\n\t\t/* Recolour the single table-level rounded outer overlay to the selected colour. */\n\t\t&::after {\n\t\t\tborder-color: ", ";\n\t\t}\n\n\t\t> tbody > tr > td,\n\t\t> tbody > tr > th {\n\t\t\t/* position: relative anchors the overlay (the blocked blanket used to provide it);\n\t\t\t transparent border + the ::after overlay below replicate .selectedCell exactly. */\n\t\t\tposition: relative;\n\t\t\tborder-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\tright: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: -1px;\n\t\t\t\twidth: auto;\n\t\t\t\theight: auto;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_RESIZER_CONTAINER, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex);
|
|
26
41
|
};
|
|
27
42
|
var roundedTableNumberedColumnStyles = function roundedTableNumberedColumnStyles() {
|
|
28
|
-
return (0, _react.css)(
|
|
43
|
+
return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Numbered columns are separate, so they need their own rounded edge owner. */\n\t.", "[data-number-column='true'] {\n\t\t/* Override the inline/container left border and replace it with one rounded pseudo-border. */\n\t\t> .", "\n\t\t\t.", ",\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder-left: 0;\n\n\t\t\t&::before {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t\tpointer-events: none;\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Prevent individual number buttons from drawing a straight left border. */\n\t\t> .", "\n\t\t\t.", ",\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tborder-left-color: transparent;\n\t\t}\n\n\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".active,\n\t\t\t> .", "\n\t\t\t.", ".active {\n\t\t\tborder-left-color: transparent;\n\t\t}\n\n\t\t/* When numbered column is present, the visual left edge belongs to the number column widget.\n\t\t Zero out any left-side border-radius on the cell and its overlays/pseudo-borders \u2014\n\t\t but leave right-side radii untouched so right-edge cells still round correctly.\n\t\t ::before is intentionally excluded here because on the sticky header it carries the\n\t\t numbered-column mask which needs to round its own top-left corner (see overrides\n\t\t below and in roundedTableStickyHeaderStyles). */\n\t\t> .", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-top][data-reaches-left],\n\t\t> .", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-top][data-reaches-left] {\n\t\t\tborder-top-left-radius: 0;\n\n\t\t\t&::after {\n\t\t\t\tborder-top-left-radius: 0;\n\t\t\t}\n\t\t}\n\n\t\t> .", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom][data-reaches-left],\n\t\t> .", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom][data-reaches-left] {\n\t\t\tborder-bottom-left-radius: 0;\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-bottom-left-radius: 0;\n\t\t\t}\n\t\t}\n\n\t\t/* Preserve rounded numbered-column corners across normal, active, and danger states. */\n\t\t.", ":first-of-type,\n\t\t\t.", ".", ":first-of-type,\n\t\t\t.", ".", ":first-of-type,\n\t\t\t.", ".active:first-of-type {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\n\t\t.", ":last-of-type,\n\t\t\t.", ".", ":last-of-type,\n\t\t\t.", ".", ":last-of-type,\n\t\t\t.", ".active:last-of-type {\n\t\t\tborder-bottom-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":first-of-type::after {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":last-of-type::after {\n\t\t\tborder-bottom-left-radius: ", ";\n\t\t}\n\n\t\t/* Sticky numbered-column mask also needs the same top-left radius. */\n\t\t> .", "\n\t\t\ttr\n\t\t\tth[data-reaches-top][data-reaches-left]::before {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN, _consts.tableBorderColor, "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_ACTIVE, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_ACTIVE, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_ACTIVE, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_ACTIVE, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, "var(--ds-radius-xlarge, 12px)");
|
|
29
44
|
};
|
|
30
45
|
var roundedTableStickyHeaderCellCornerStyles = function roundedTableStickyHeaderCellCornerStyles() {
|
|
31
|
-
return (0, _react.css)(
|
|
46
|
+
return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Sticky header rows have independent border/shadow/mask painting, so patch the sticky-only painters too. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\t> th[data-reaches-left],\n\t\t> td[data-reaches-left] {\n\t\t\tborder-top-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> td[data-reaches-right],\n\t\t> th[data-reaches-right] {\n\t\t\tborder-top-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " .", "::after {\n\t\tborder-left-color: transparent;\n\t}\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
|
|
32
47
|
};
|
|
33
48
|
var roundedTableStickyHeaderNumberColumnStyles = function roundedTableStickyHeaderNumberColumnStyles() {
|
|
34
|
-
return (0, _react.css)(
|
|
49
|
+
return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.", "[data-number-column='true'] .", " tr th[data-reaches-top][data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " tr.", " th[data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " .", " th[data-reaches-left]::before {\n\t\tborder-top-left-radius: ", ";\n\t\tborder-bottom: none;\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, "var(--ds-radius-xlarge, 12px)");
|
|
35
50
|
};
|
|
36
51
|
var roundedTableStickyHeaderCornerMaskStyles = function roundedTableStickyHeaderCornerMaskStyles() {
|
|
37
|
-
return (0, _react.css)(
|
|
52
|
+
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Same z-index as the sticky row; DOM order keeps the row above this mask and the table border below it. */\n\t.", " {\n\t\tdisplay: none;\n\t\tposition: sticky;\n\t\ttop: calc(", "px - 1px);\n\t\twidth: 12px;\n\t\theight: 12px;\n\t\tmargin-bottom: -12px;\n\t\tbackground: ", ";\n\t\tpointer-events: none;\n\t\tz-index: ", ";\n\t}\n\n\t.", "[data-number-column='true']\n\t\t.", "[data-corner='left'] {\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", "[data-corner='right'] {\n\t\tleft: calc(100% - 11px);\n\t}\n\n\t/*\n\t\tScope the :has() selectors to a DIRECT child table so a nested table that\n\t\thas its own sticky row does not pull the OUTER wrapper's masks into the\n\t\tsticky / fallback layout. The masks belong to the wrapper of the table\n\t\tthat owns the sticky row, never to an ancestor wrapper.\n\t*/\n\t.", ":has(> table > tbody > tr.", ")\n\t\t> .", ",\n\t\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t\tWhen the table overflows horizontally, sticky headers fall back from native\n\t\tposition: sticky to a fixed-position header row. Match that positioning so\n\t\tthe corner masks continue to cover the rounded corners in the fallback path.\n\n\t\tThe direct-child combinator inside :has() is critical: without it a nested\n\t\ttable entering the legacy fallback would incorrectly trigger this rule on\n\t\tthe OUTER wrapper, detaching the outer table's masks from its corners.\n\t*/\n\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tposition: fixed;\n\t\ttop: 30px;\n\t\tz-index: 1;\n\t}\n"])), _types.TableCssClassName.TABLE_CORNER_MASK, _styles.tableMarginTop, "var(--ds-surface, #FFFFFF)", _consts.nativeStickyHeaderZIndex, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_CORNER_MASK, _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CORNER_MASK, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CORNER_MASK);
|
|
38
53
|
};
|
|
39
54
|
var roundedTableStickyHeaderOverlayStyles = function roundedTableStickyHeaderOverlayStyles() {
|
|
40
|
-
return (0, _react.css)(
|
|
55
|
+
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t/*\n\t\tPaint the pinned sticky row's rounded top edge via each cell's ::after.\n\t\ttop: -1px places it in the reserved transparent border slot, aligned with\n\t\tthe row's inset-shadow bottom border. Longhand border-top-* lets\n\t\tinteraction-state rules override only the colour.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: -1px;\n\t\tright: -1px;\n\t\ttop: -1px;\n\t\tbottom: -1px;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tpointer-events: none;\n\t\tborder-top-width: 1px;\n\t\tborder-top-style: solid;\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Selection / hover / active-cursor colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after,\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Danger colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top].", "::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top].", "::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t:where(.", " > table > tbody > tr.", ")\n\t\t> th.", "[data-reaches-left]::after {\n\t\tborder-left-color: transparent;\n\t}\n\n\t", "\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.ACTIVE_CURSOR_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, (0, _platformFeatureFlags.fg)('platform_editor_table_q4_patch_1') ? (0, _react.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t/* Node-selected (ak-editor-selected-node) sticky header: the pinned row leaves the table's\n\t\t\t\t\t rounded overlay behind, so recolour its painted top edge to the selected colour too. */\n\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ".", "\n\t\t\t\t\t> th.", "[data-reaches-top]::after,\n\t\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ".", "\n\t\t\t\t\t> td.", "[data-reaches-top]::after {\n\t\t\t\t\tborder-top-color: ", ";\n\t\t\t\t}\n\t\t\t"])), _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderSelectedColor) : '');
|
|
41
56
|
};
|
|
42
57
|
var roundedTableStickyHeaderShadowStyles = function roundedTableStickyHeaderShadowStyles() {
|
|
43
|
-
return (0, _react.css)(
|
|
58
|
+
return (0, _react.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t/* Native sticky row */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t/* Legacy sticky row */\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\tbox-shadow: inset 0 -1px ", " !important;\n\t}\n\n\t/*\n\t\tBox-shadow below active sticky header.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", " {\n\t\tbox-shadow:\n\t\t\tinset 0 -1px ", ",\n\t\t\t0 6px 4px -4px ", " !important;\n\t}\n\n\t/*\n\t\tSticky headers leave the table's rounded outer overlay behind, so make the\n\t\treserved 1px top-border slot visible on the pinned row.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-top] {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/*\n\t\tRestore legacy sticky corner side borders after the row is pinned outside the\n\t\ttable's outer overlay. (Pinned row top edge is painted by the cell ::after\n\t\toverlay in roundedTableStickyHeaderOverlayStyles.)\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-left],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-left] {\n\t\tborder-left-color: ", ";\n\t}\n\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-right],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-right] {\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\t/*\n\t\tPaint the legacy sticky bottom edge on cells so it aligns under display: grid.\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", " {\n\t\tborder-bottom: 1px solid ", ";\n\t}\n\n\t.", ".", ":has(tr.sticky)\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tbox-shadow: none !important;\n\t}\n\n\t", "\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _consts.tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CELL, _consts.tableBorderColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _platformFeatureFlags.fg)('platform_editor_table_q4_patch_1') ? (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t/* Node-selected (ak-editor-selected-node) sticky header: recolour the bottom-edge\n\t\t\t\t\t shadow to the selected colour so it matches the rest of the selection. */\n\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ",\n\t\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table.", "\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.sticky {\n\t\t\t\t\tbox-shadow: inset 0 -1px ", " !important;\n\t\t\t\t}\n\n\t\t\t\t/* Active (pinned) variant keeps its drop shadow but recolours the bottom border. */\n\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ".", " {\n\t\t\t\t\tbox-shadow:\n\t\t\t\t\t\tinset 0 -1px ", ",\n\t\t\t\t\t\t0 6px 4px -4px ", " !important;\n\t\t\t\t}\n\t\t\t"])), _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_STICKY, _consts.tableBorderSelectedColor, _types.TableCssClassName.NODEVIEW_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.NATIVE_STICKY, _types.TableCssClassName.NATIVE_STICKY_ACTIVE, _consts.tableBorderSelectedColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)") : '');
|
|
44
59
|
};
|
|
45
60
|
var roundedTableOverrides = exports.roundedTableOverrides = function roundedTableOverrides() {
|
|
46
|
-
return (0, _react.css)(
|
|
61
|
+
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n"])), (0, _platformFeatureFlags.fg)('platform_editor_table_q4_patch_1') ?
|
|
62
|
+
// Base corner radius is emitted from the SSR-rendered EditorContentContainer
|
|
63
|
+
// (tableRoundedCornerStyles in editor-core); only the interaction overlays remain here.
|
|
64
|
+
roundedTableCellCornerInteractionOverlayStyles() : roundedTableCellCornerStyles(), roundedTableInteractionOverlayStyles(), (0, _platformFeatureFlags.fg)('platform_editor_table_q4_patch_1') ? roundedTableSelectedNodeStyles() : '', roundedTableNumberedColumnStyles(), roundedTableStickyHeaderCellCornerStyles(), roundedTableStickyHeaderNumberColumnStyles(), roundedTableStickyHeaderCornerMaskStyles(), roundedTableStickyHeaderOverlayStyles(), roundedTableStickyHeaderShadowStyles());
|
|
47
65
|
};
|
|
@@ -16,7 +16,7 @@ import { changeColumnWidthByStep } from './column-resize';
|
|
|
16
16
|
import { deleteColumnsCommand } from './delete';
|
|
17
17
|
import { setTableDisplayMode } from './display-mode';
|
|
18
18
|
import { insertColumn, insertRow } from './insert';
|
|
19
|
-
import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleCellAttrs, setTableAlignment, setTableAlignmentWithTableContentWithPos } from './misc';
|
|
19
|
+
import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleCellAttrs, setMultipleCellAttrsEditorCommand, setTableAlignment, setTableAlignmentWithTableContentWithPos } from './misc';
|
|
20
20
|
import { sortByColumn } from './sort';
|
|
21
21
|
import { splitCell } from './split-cell';
|
|
22
22
|
import { toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn } from './toggle';
|
|
@@ -131,6 +131,67 @@ export const setColorWithAnalytics = editorAnalyticsAPI => (inputMethod, cellCol
|
|
|
131
131
|
})(editorAnalyticsAPI)(setMultipleCellAttrs({
|
|
132
132
|
background: cellColor
|
|
133
133
|
}, editorView));
|
|
134
|
+
const getNormalizedCellValign = valign => valign !== null && valign !== void 0 ? valign : 'top';
|
|
135
|
+
const getCellVerticalAlignmentAnalyticsInfo = (selection, valign, targetCellPosition) => {
|
|
136
|
+
const selectedValigns = [];
|
|
137
|
+
if (selection instanceof CellSelection) {
|
|
138
|
+
selection.forEachCell(cell => {
|
|
139
|
+
selectedValigns.push(getNormalizedCellValign(cell.attrs.valign));
|
|
140
|
+
});
|
|
141
|
+
} else if (typeof targetCellPosition === 'number') {
|
|
142
|
+
const cell = selection.$from.doc.nodeAt(targetCellPosition);
|
|
143
|
+
if (cell) {
|
|
144
|
+
selectedValigns.push(getNormalizedCellValign(cell.attrs.valign));
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
if (selectedValigns.length === 0) {
|
|
148
|
+
return undefined;
|
|
149
|
+
}
|
|
150
|
+
const [firstValign] = selectedValigns;
|
|
151
|
+
const previousValign = selectedValigns.every(selectedValign => selectedValign === firstValign) ? firstValign : 'mixed';
|
|
152
|
+
const updatedCount = selectedValigns.filter(selectedValign => selectedValign !== valign).length;
|
|
153
|
+
return {
|
|
154
|
+
previousValign,
|
|
155
|
+
updatedCount
|
|
156
|
+
};
|
|
157
|
+
};
|
|
158
|
+
export const setCellVerticalAlignmentWithAnalytics = editorAnalyticsAPI => (inputMethod, valign, targetCellPosition) => ({
|
|
159
|
+
tr
|
|
160
|
+
}) => {
|
|
161
|
+
const analyticsInfo = getCellVerticalAlignmentAnalyticsInfo(tr.selection, valign, targetCellPosition);
|
|
162
|
+
const result = setMultipleCellAttrsEditorCommand({
|
|
163
|
+
valign
|
|
164
|
+
}, targetCellPosition)({
|
|
165
|
+
tr
|
|
166
|
+
});
|
|
167
|
+
if (result && analyticsInfo) {
|
|
168
|
+
const {
|
|
169
|
+
horizontalCells,
|
|
170
|
+
verticalCells,
|
|
171
|
+
totalCells,
|
|
172
|
+
totalRowCount,
|
|
173
|
+
totalColumnCount
|
|
174
|
+
} = getSelectedCellInfo(tr.selection);
|
|
175
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
176
|
+
action: TABLE_ACTION.CHANGED_CELL_VERTICAL_ALIGNMENT,
|
|
177
|
+
actionSubject: ACTION_SUBJECT.TABLE,
|
|
178
|
+
actionSubjectId: null,
|
|
179
|
+
attributes: {
|
|
180
|
+
inputMethod,
|
|
181
|
+
previousValign: analyticsInfo.previousValign,
|
|
182
|
+
valign,
|
|
183
|
+
updatedCount: analyticsInfo.updatedCount,
|
|
184
|
+
horizontalCells,
|
|
185
|
+
verticalCells,
|
|
186
|
+
totalCells,
|
|
187
|
+
totalRowCount,
|
|
188
|
+
totalColumnCount
|
|
189
|
+
},
|
|
190
|
+
eventType: EVENT_TYPE.TRACK
|
|
191
|
+
})(tr);
|
|
192
|
+
}
|
|
193
|
+
return result;
|
|
194
|
+
};
|
|
134
195
|
export const addRowAroundSelection = editorAnalyticsAPI => side => (state, dispatch) => {
|
|
135
196
|
const {
|
|
136
197
|
selection
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React, { useCallback, useMemo } from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
|
+
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
4
|
-
import { closeActiveTableMenu
|
|
5
|
+
import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
|
|
6
|
+
import { setCellVerticalAlignmentWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
|
|
5
7
|
import { getPluginState } from '../../../../pm-plugins/plugin-factory';
|
|
6
8
|
import { useTableMenuContext } from '../../shared/TableMenuContext';
|
|
7
9
|
import { getSelectedCellValign } from './verticalAlignUtils';
|
|
@@ -29,9 +31,8 @@ export const VerticalAlignDropdownItem = ({
|
|
|
29
31
|
api.core.actions.execute(({
|
|
30
32
|
tr
|
|
31
33
|
}) => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}, targetCellPosition)({
|
|
34
|
+
var _api$analytics;
|
|
35
|
+
setCellVerticalAlignmentWithAnalytics((_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, value, targetCellPosition)({
|
|
35
36
|
tr
|
|
36
37
|
});
|
|
37
38
|
closeActiveTableMenu(api)({
|
|
@@ -63,6 +63,61 @@ const roundedTableCellCornerStyles = () => css`
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
`;
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Interaction-overlay corner rounding only styles (the `::after` / `::before` / hover-danger
|
|
69
|
+
* pseudo-elements), split out of {@link roundedTableCellCornerStyles}.
|
|
70
|
+
*
|
|
71
|
+
* The base cell `border-*-radius` rules are emitted from the SSR-rendered
|
|
72
|
+
* `EditorContentContainer` (see `tableRoundedCornerStyles` in editor-core) so corners are
|
|
73
|
+
* rounded server-side. These overlay rules only apply during interaction (node selection
|
|
74
|
+
* wash, hover-to-delete danger highlight), which require a live editorView and therefore
|
|
75
|
+
* never render during SSR — so they intentionally stay in the client-only `<Global>` styles
|
|
76
|
+
* to avoid shipping dead CSS in the SSR payload.
|
|
77
|
+
*/
|
|
78
|
+
const roundedTableCellCornerInteractionOverlayStyles = () => css`
|
|
79
|
+
.${ClassName.TABLE_NODE_WRAPPER} > table {
|
|
80
|
+
> tbody > tr > td[data-reaches-top][data-reaches-left],
|
|
81
|
+
> tbody > tr > th[data-reaches-top][data-reaches-left] {
|
|
82
|
+
&::after,
|
|
83
|
+
&::before,
|
|
84
|
+
&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
|
|
85
|
+
&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
|
|
86
|
+
border-top-left-radius: ${"var(--ds-radius-xlarge, 12px)"};
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
> tbody > tr > td[data-reaches-top][data-reaches-right],
|
|
91
|
+
> tbody > tr > th[data-reaches-top][data-reaches-right] {
|
|
92
|
+
&::after,
|
|
93
|
+
&::before,
|
|
94
|
+
&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
|
|
95
|
+
&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
|
|
96
|
+
border-top-right-radius: ${"var(--ds-radius-xlarge, 12px)"};
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
> tbody > tr > td[data-reaches-bottom][data-reaches-left],
|
|
101
|
+
> tbody > tr > th[data-reaches-bottom][data-reaches-left] {
|
|
102
|
+
&::after,
|
|
103
|
+
&::before,
|
|
104
|
+
&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
|
|
105
|
+
&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
|
|
106
|
+
border-bottom-left-radius: ${"var(--ds-radius-xlarge, 12px)"};
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
> tbody > tr > td[data-reaches-bottom][data-reaches-right],
|
|
111
|
+
> tbody > tr > th[data-reaches-bottom][data-reaches-right] {
|
|
112
|
+
&::after,
|
|
113
|
+
&::before,
|
|
114
|
+
&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
|
|
115
|
+
&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
|
|
116
|
+
border-bottom-right-radius: ${"var(--ds-radius-xlarge, 12px)"};
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
`;
|
|
66
121
|
const roundedTableInteractionOverlayStyles = () => css`
|
|
67
122
|
.${ClassName.TABLE_NODE_WRAPPER} > table {
|
|
68
123
|
/* Active-cell highlight base properties (replaces activeCellHighlightStyles).
|
|
@@ -675,7 +730,10 @@ const roundedTableStickyHeaderShadowStyles = () => css`
|
|
|
675
730
|
` : ''}
|
|
676
731
|
`;
|
|
677
732
|
export const roundedTableOverrides = () => css`
|
|
678
|
-
${
|
|
733
|
+
${fg('platform_editor_table_q4_patch_1') ?
|
|
734
|
+
// Base corner radius is emitted from the SSR-rendered EditorContentContainer
|
|
735
|
+
// (tableRoundedCornerStyles in editor-core); only the interaction overlays remain here.
|
|
736
|
+
roundedTableCellCornerInteractionOverlayStyles() : roundedTableCellCornerStyles()}
|
|
679
737
|
${roundedTableInteractionOverlayStyles()}
|
|
680
738
|
${fg('platform_editor_table_q4_patch_1') ? roundedTableSelectedNodeStyles() : ''}
|
|
681
739
|
${roundedTableNumberedColumnStyles()}
|
|
@@ -19,7 +19,7 @@ import { changeColumnWidthByStep } from './column-resize';
|
|
|
19
19
|
import { deleteColumnsCommand } from './delete';
|
|
20
20
|
import { setTableDisplayMode } from './display-mode';
|
|
21
21
|
import { insertColumn, insertRow } from './insert';
|
|
22
|
-
import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleCellAttrs, setTableAlignment, setTableAlignmentWithTableContentWithPos } from './misc';
|
|
22
|
+
import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleCellAttrs, setMultipleCellAttrsEditorCommand, setTableAlignment, setTableAlignmentWithTableContentWithPos } from './misc';
|
|
23
23
|
import { sortByColumn } from './sort';
|
|
24
24
|
import { splitCell } from './split-cell';
|
|
25
25
|
import { toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn } from './toggle';
|
|
@@ -141,6 +141,75 @@ export var setColorWithAnalytics = function setColorWithAnalytics(editorAnalytic
|
|
|
141
141
|
}, editorView));
|
|
142
142
|
};
|
|
143
143
|
};
|
|
144
|
+
var getNormalizedCellValign = function getNormalizedCellValign(valign) {
|
|
145
|
+
return valign !== null && valign !== void 0 ? valign : 'top';
|
|
146
|
+
};
|
|
147
|
+
var getCellVerticalAlignmentAnalyticsInfo = function getCellVerticalAlignmentAnalyticsInfo(selection, valign, targetCellPosition) {
|
|
148
|
+
var selectedValigns = [];
|
|
149
|
+
if (selection instanceof CellSelection) {
|
|
150
|
+
selection.forEachCell(function (cell) {
|
|
151
|
+
selectedValigns.push(getNormalizedCellValign(cell.attrs.valign));
|
|
152
|
+
});
|
|
153
|
+
} else if (typeof targetCellPosition === 'number') {
|
|
154
|
+
var cell = selection.$from.doc.nodeAt(targetCellPosition);
|
|
155
|
+
if (cell) {
|
|
156
|
+
selectedValigns.push(getNormalizedCellValign(cell.attrs.valign));
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
if (selectedValigns.length === 0) {
|
|
160
|
+
return undefined;
|
|
161
|
+
}
|
|
162
|
+
var firstValign = selectedValigns[0];
|
|
163
|
+
var previousValign = selectedValigns.every(function (selectedValign) {
|
|
164
|
+
return selectedValign === firstValign;
|
|
165
|
+
}) ? firstValign : 'mixed';
|
|
166
|
+
var updatedCount = selectedValigns.filter(function (selectedValign) {
|
|
167
|
+
return selectedValign !== valign;
|
|
168
|
+
}).length;
|
|
169
|
+
return {
|
|
170
|
+
previousValign: previousValign,
|
|
171
|
+
updatedCount: updatedCount
|
|
172
|
+
};
|
|
173
|
+
};
|
|
174
|
+
export var setCellVerticalAlignmentWithAnalytics = function setCellVerticalAlignmentWithAnalytics(editorAnalyticsAPI) {
|
|
175
|
+
return function (inputMethod, valign, targetCellPosition) {
|
|
176
|
+
return function (_ref5) {
|
|
177
|
+
var tr = _ref5.tr;
|
|
178
|
+
var analyticsInfo = getCellVerticalAlignmentAnalyticsInfo(tr.selection, valign, targetCellPosition);
|
|
179
|
+
var result = setMultipleCellAttrsEditorCommand({
|
|
180
|
+
valign: valign
|
|
181
|
+
}, targetCellPosition)({
|
|
182
|
+
tr: tr
|
|
183
|
+
});
|
|
184
|
+
if (result && analyticsInfo) {
|
|
185
|
+
var _getSelectedCellInfo5 = getSelectedCellInfo(tr.selection),
|
|
186
|
+
horizontalCells = _getSelectedCellInfo5.horizontalCells,
|
|
187
|
+
verticalCells = _getSelectedCellInfo5.verticalCells,
|
|
188
|
+
totalCells = _getSelectedCellInfo5.totalCells,
|
|
189
|
+
totalRowCount = _getSelectedCellInfo5.totalRowCount,
|
|
190
|
+
totalColumnCount = _getSelectedCellInfo5.totalColumnCount;
|
|
191
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
|
|
192
|
+
action: TABLE_ACTION.CHANGED_CELL_VERTICAL_ALIGNMENT,
|
|
193
|
+
actionSubject: ACTION_SUBJECT.TABLE,
|
|
194
|
+
actionSubjectId: null,
|
|
195
|
+
attributes: {
|
|
196
|
+
inputMethod: inputMethod,
|
|
197
|
+
previousValign: analyticsInfo.previousValign,
|
|
198
|
+
valign: valign,
|
|
199
|
+
updatedCount: analyticsInfo.updatedCount,
|
|
200
|
+
horizontalCells: horizontalCells,
|
|
201
|
+
verticalCells: verticalCells,
|
|
202
|
+
totalCells: totalCells,
|
|
203
|
+
totalRowCount: totalRowCount,
|
|
204
|
+
totalColumnCount: totalColumnCount
|
|
205
|
+
},
|
|
206
|
+
eventType: EVENT_TYPE.TRACK
|
|
207
|
+
})(tr);
|
|
208
|
+
}
|
|
209
|
+
return result;
|
|
210
|
+
};
|
|
211
|
+
};
|
|
212
|
+
};
|
|
144
213
|
export var addRowAroundSelection = function addRowAroundSelection(editorAnalyticsAPI) {
|
|
145
214
|
return function (side) {
|
|
146
215
|
return function (state, dispatch) {
|
|
@@ -242,8 +311,8 @@ export var insertColumnWithAnalytics = function insertColumnWithAnalytics(api, e
|
|
|
242
311
|
};
|
|
243
312
|
export var deleteRowsWithAnalytics = function deleteRowsWithAnalytics(editorAnalyticsAPI) {
|
|
244
313
|
return function (inputMethod, rect, isHeaderRowRequired) {
|
|
245
|
-
return withEditorAnalyticsAPI(function (
|
|
246
|
-
var selection =
|
|
314
|
+
return withEditorAnalyticsAPI(function (_ref6) {
|
|
315
|
+
var selection = _ref6.selection;
|
|
247
316
|
var _getSelectedTableInfo4 = getSelectedTableInfo(selection),
|
|
248
317
|
totalRowCount = _getSelectedTableInfo4.totalRowCount,
|
|
249
318
|
totalColumnCount = _getSelectedTableInfo4.totalColumnCount;
|
|
@@ -274,8 +343,8 @@ export var deleteColumnsWithAnalytics = function deleteColumnsWithAnalytics(edit
|
|
|
274
343
|
var shouldUseIncreasedScalingPercent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
275
344
|
var isCommentEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
|
276
345
|
return function (inputMethod, rect) {
|
|
277
|
-
return withEditorAnalyticsAPI(function (
|
|
278
|
-
var selection =
|
|
346
|
+
return withEditorAnalyticsAPI(function (_ref7) {
|
|
347
|
+
var selection = _ref7.selection;
|
|
279
348
|
var _getSelectedTableInfo5 = getSelectedTableInfo(selection),
|
|
280
349
|
totalRowCount = _getSelectedTableInfo5.totalRowCount,
|
|
281
350
|
totalColumnCount = _getSelectedTableInfo5.totalColumnCount;
|
|
@@ -335,15 +404,15 @@ var getTableDeletedAnalytics = function getTableDeletedAnalytics(selection, inpu
|
|
|
335
404
|
};
|
|
336
405
|
};
|
|
337
406
|
export var deleteTableWithAnalytics = function deleteTableWithAnalytics(editorAnalyticsAPI) {
|
|
338
|
-
return withEditorAnalyticsAPI(function (
|
|
339
|
-
var selection =
|
|
407
|
+
return withEditorAnalyticsAPI(function (_ref8) {
|
|
408
|
+
var selection = _ref8.selection;
|
|
340
409
|
return getTableDeletedAnalytics(selection, INPUT_METHOD.FLOATING_TB);
|
|
341
410
|
})(editorAnalyticsAPI)(deleteTable);
|
|
342
411
|
};
|
|
343
412
|
export var deleteTableIfSelectedWithAnalytics = function deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI) {
|
|
344
413
|
return function (inputMethod) {
|
|
345
|
-
return withEditorAnalyticsAPI(function (
|
|
346
|
-
var selection =
|
|
414
|
+
return withEditorAnalyticsAPI(function (_ref9) {
|
|
415
|
+
var selection = _ref9.selection;
|
|
347
416
|
return getTableDeletedAnalytics(selection, inputMethod);
|
|
348
417
|
})(editorAnalyticsAPI)(deleteTableIfSelected);
|
|
349
418
|
};
|
|
@@ -429,10 +498,10 @@ export var sortColumnWithAnalytics = function sortColumnWithAnalytics(editorAnal
|
|
|
429
498
|
};
|
|
430
499
|
};
|
|
431
500
|
export var distributeColumnsWidthsWithAnalytics = function distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api) {
|
|
432
|
-
return function (inputMethod,
|
|
433
|
-
var resizeState =
|
|
434
|
-
table =
|
|
435
|
-
attributes =
|
|
501
|
+
return function (inputMethod, _ref0) {
|
|
502
|
+
var resizeState = _ref0.resizeState,
|
|
503
|
+
table = _ref0.table,
|
|
504
|
+
attributes = _ref0.attributes;
|
|
436
505
|
return withEditorAnalyticsAPI(function () {
|
|
437
506
|
return {
|
|
438
507
|
action: TABLE_ACTION.DISTRIBUTED_COLUMNS_WIDTHS,
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React, { useCallback, useMemo } from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
|
+
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
4
|
-
import { closeActiveTableMenu
|
|
5
|
+
import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
|
|
6
|
+
import { setCellVerticalAlignmentWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
|
|
5
7
|
import { getPluginState } from '../../../../pm-plugins/plugin-factory';
|
|
6
8
|
import { useTableMenuContext } from '../../shared/TableMenuContext';
|
|
7
9
|
import { getSelectedCellValign } from './verticalAlignUtils';
|
|
@@ -25,10 +27,9 @@ export var VerticalAlignDropdownItem = function VerticalAlignDropdownItem(_ref)
|
|
|
25
27
|
var _getPluginState = getPluginState(editorView.state),
|
|
26
28
|
targetCellPosition = _getPluginState.targetCellPosition;
|
|
27
29
|
api.core.actions.execute(function (_ref3) {
|
|
30
|
+
var _api$analytics;
|
|
28
31
|
var tr = _ref3.tr;
|
|
29
|
-
|
|
30
|
-
valign: value
|
|
31
|
-
}, targetCellPosition)({
|
|
32
|
+
setCellVerticalAlignmentWithAnalytics((_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, value, targetCellPosition)({
|
|
32
33
|
tr: tr
|
|
33
34
|
});
|
|
34
35
|
closeActiveTableMenu(api)({
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
|
|
3
3
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
|
|
4
4
|
|
|
5
5
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
@@ -12,30 +12,48 @@ import { nativeStickyHeaderZIndex, tableBorderColor, tableBorderDeleteColor, tab
|
|
|
12
12
|
var roundedTableCellCornerStyles = function roundedTableCellCornerStyles() {
|
|
13
13
|
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " > table {\n\t\t/* Round table corner cells (including merged cells that span to the edge)\n\t\t and their interaction overlays. The data-reaches-* attributes are set by the\n\t\t TableCell node view based on each cell's position + rowspan/colspan. */\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-left] {\n\t\t\tborder-top-left-radius: ", ";\n\n\t\t\t/* ::before is the node-selection blanket fill; round it so the selected\n\t\t\t wash follows the corner instead of leaving a square corner. */\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-right] {\n\t\t\tborder-top-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-left] {\n\t\t\tborder-bottom-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-right] {\n\t\t\tborder-bottom-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, "var(--ds-radius-xlarge, 12px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)");
|
|
14
14
|
};
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Interaction-overlay corner rounding only styles (the `::after` / `::before` / hover-danger
|
|
18
|
+
* pseudo-elements), split out of {@link roundedTableCellCornerStyles}.
|
|
19
|
+
*
|
|
20
|
+
* The base cell `border-*-radius` rules are emitted from the SSR-rendered
|
|
21
|
+
* `EditorContentContainer` (see `tableRoundedCornerStyles` in editor-core) so corners are
|
|
22
|
+
* rounded server-side. These overlay rules only apply during interaction (node selection
|
|
23
|
+
* wash, hover-to-delete danger highlight), which require a live editorView and therefore
|
|
24
|
+
* never render during SSR — so they intentionally stay in the client-only `<Global>` styles
|
|
25
|
+
* to avoid shipping dead CSS in the SSR payload.
|
|
26
|
+
*/
|
|
27
|
+
var roundedTableCellCornerInteractionOverlayStyles = function roundedTableCellCornerInteractionOverlayStyles() {
|
|
28
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t.", " > table {\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-left] {\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-top][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-top][data-reaches-right] {\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-left],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-left] {\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> tbody > tr > td[data-reaches-bottom][data-reaches-right],\n\t\t> tbody > tr > th[data-reaches-bottom][data-reaches-right] {\n\t\t\t&::after,\n\t\t\t&::before,\n\t\t\t&.", "::after,\n\t\t\t\t&.", ".", "::after {\n\t\t\t\tborder-bottom-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)");
|
|
29
|
+
};
|
|
15
30
|
var roundedTableInteractionOverlayStyles = function roundedTableInteractionOverlayStyles() {
|
|
16
|
-
return css(
|
|
31
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t.", " > table {\n\t\t/* Active-cell highlight base properties (replaces activeCellHighlightStyles).\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%,\n\t\t so that left/right/top/bottom determine the size instead. */\n\t\ttd.", ".", "::after,\n\t\t\tth.", ".", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t\tbox-shadow: ", ";\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: -1px;\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tz-index: ", ";\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t/* Normalize selected/hover/danger overlays to the same box model as active-cell.\n\t\t width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%. */\n\t\ttd.", "::after,\n\t\t\ttd.", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\tth.", ".", "::after,\n\t\t\ttd.", ".", "::after {\n\t\t\tleft: -1px;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\tbottom: -1px;\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t}\n\n\t\t/* Preserve interaction border colours on table edges without changing the shared -1px overlay inset. */\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td:is(\n\t\t\t\t.", ", .", ", .", "\n\t\t\t),\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> th:is(\n\t\t\t\t.", ", .", ", .", "\n\t\t\t) {\n\t\t\t&[data-reaches-top] {\n\t\t\t\tborder-top-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\ttop: -1px;\n\t\t\t\t\tbottom: -1px;\n\t\t\t\t\tborder-top-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-left] {\n\t\t\t\tborder-left-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-left-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-right] {\n\t\t\t\tborder-right-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-right-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-bottom] {\n\t\t\t\tborder-bottom-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-bottom-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t> tbody\n\t\t\t> tr\n\t\t\t> td.", ",\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th.", " {\n\t\t\t&[data-reaches-top] {\n\t\t\t\tborder-top-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\ttop: -1px;\n\t\t\t\t\tbottom: -1px;\n\t\t\t\t\tborder-top-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-left] {\n\t\t\t\tborder-left-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-left-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-right] {\n\t\t\t\tborder-right-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-right-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-reaches-bottom] {\n\t\t\t\tborder-bottom-color: transparent;\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-bottom-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.TABLE_HEADER_CELL, ClassName.ACTIVE_CURSOR_CELL, "var(--ds-border-selected, #1868DB)", "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)", akEditorSmallZIndex, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, tableBorderSelectedColor, tableBorderSelectedColor, tableBorderSelectedColor, tableBorderSelectedColor, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableBorderDeleteColor, tableBorderDeleteColor, tableBorderDeleteColor);
|
|
17
32
|
};
|
|
18
33
|
var roundedTableSelectedNodeStyles = function roundedTableSelectedNodeStyles() {
|
|
19
|
-
return css(
|
|
34
|
+
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t.", ".", "\n\t\t> .", "\n\t\t> .", "\n\t\t> table,\n\t.", ".", "\n\t\t> [data-testid='table-alignment-container']\n\t\t> .", "\n\t\t> .resizer-item\n\t\t> .resizer-hover-zone\n\t\t> .", "\n\t\t> .", "\n\t\t> table {\n\t\t/* Make a node-selected table look identical to a cell-selected one by mirroring the\n\t\t .selectedCell single-::after overlay model (getSelectionStyles is blocked for this path). */\n\n\t\t/* Recolour the single table-level rounded outer overlay to the selected colour. */\n\t\t&::after {\n\t\t\tborder-color: ", ";\n\t\t}\n\n\t\t> tbody > tr > td,\n\t\t> tbody > tr > th {\n\t\t\t/* position: relative anchors the overlay (the blocked blanket used to provide it);\n\t\t\t transparent border + the ::after overlay below replicate .selectedCell exactly. */\n\t\t\tposition: relative;\n\t\t\tborder-color: transparent;\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\tright: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: -1px;\n\t\t\t\twidth: auto;\n\t\t\t\theight: auto;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n"])), ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER, ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_RESIZER_CONTAINER, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER, tableBorderSelectedColor, tableBorderSelectedColor, tableCellSelectedColor, akEditorSmallZIndex);
|
|
20
35
|
};
|
|
21
36
|
var roundedTableNumberedColumnStyles = function roundedTableNumberedColumnStyles() {
|
|
22
|
-
return css(
|
|
37
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t/* Numbered columns are separate, so they need their own rounded edge owner. */\n\t.", "[data-number-column='true'] {\n\t\t/* Override the inline/container left border and replace it with one rounded pseudo-border. */\n\t\t> .", "\n\t\t\t.", ",\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder-left: 0;\n\n\t\t\t&::before {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t\tborder-bottom-left-radius: ", ";\n\t\t\t\tpointer-events: none;\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\n\t\t/* Prevent individual number buttons from drawing a straight left border. */\n\t\t> .", "\n\t\t\t.", ",\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tborder-left-color: transparent;\n\t\t}\n\n\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".", ",\n\t\t\t> .", "\n\t\t\t.", ".active,\n\t\t\t> .", "\n\t\t\t.", ".active {\n\t\t\tborder-left-color: transparent;\n\t\t}\n\n\t\t/* When numbered column is present, the visual left edge belongs to the number column widget.\n\t\t Zero out any left-side border-radius on the cell and its overlays/pseudo-borders \u2014\n\t\t but leave right-side radii untouched so right-edge cells still round correctly.\n\t\t ::before is intentionally excluded here because on the sticky header it carries the\n\t\t numbered-column mask which needs to round its own top-left corner (see overrides\n\t\t below and in roundedTableStickyHeaderStyles). */\n\t\t> .", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-top][data-reaches-left],\n\t\t> .", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-top][data-reaches-left] {\n\t\t\tborder-top-left-radius: 0;\n\n\t\t\t&::after {\n\t\t\t\tborder-top-left-radius: 0;\n\t\t\t}\n\t\t}\n\n\t\t> .", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> th[data-reaches-bottom][data-reaches-left],\n\t\t> .", "\n\t\t\t> table\n\t\t\t> tbody\n\t\t\t> tr\n\t\t\t> td[data-reaches-bottom][data-reaches-left] {\n\t\t\tborder-bottom-left-radius: 0;\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-bottom-left-radius: 0;\n\t\t\t}\n\t\t}\n\n\t\t/* Preserve rounded numbered-column corners across normal, active, and danger states. */\n\t\t.", ":first-of-type,\n\t\t\t.", ".", ":first-of-type,\n\t\t\t.", ".", ":first-of-type,\n\t\t\t.", ".active:first-of-type {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\n\t\t.", ":last-of-type,\n\t\t\t.", ".", ":last-of-type,\n\t\t\t.", ".", ":last-of-type,\n\t\t\t.", ".active:last-of-type {\n\t\t\tborder-bottom-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":first-of-type::after {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\n\t\t.", ".", ":last-of-type::after {\n\t\t\tborder-bottom-left-radius: ", ";\n\t\t}\n\n\t\t/* Sticky numbered-column mask also needs the same top-left radius. */\n\t\t> .", "\n\t\t\ttr\n\t\t\tth[data-reaches-top][data-reaches-left]::before {\n\t\t\tborder-top-left-radius: ", ";\n\t\t}\n\t}\n"])), ClassName.TABLE_CONTAINER, ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, tableBorderColor, "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_ACTIVE, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_ACTIVE, ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_NODE_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_ACTIVE, ClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-xlarge, 12px)", ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_ACTIVE, ClassName.NUMBERED_COLUMN_BUTTON, "var(--ds-radius-xlarge, 12px)", ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-radius-xlarge, 12px)", ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, "var(--ds-radius-xlarge, 12px)");
|
|
23
38
|
};
|
|
24
39
|
var roundedTableStickyHeaderCellCornerStyles = function roundedTableStickyHeaderCellCornerStyles() {
|
|
25
|
-
return css(
|
|
40
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t/* Sticky header rows have independent border/shadow/mask painting, so patch the sticky-only painters too. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\t> th[data-reaches-left],\n\t\t> td[data-reaches-left] {\n\t\t\tborder-top-left-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-top-left-radius: ", ";\n\t\t\t}\n\t\t}\n\n\t\t> td[data-reaches-right],\n\t\t> th[data-reaches-right] {\n\t\t\tborder-top-right-radius: ", ";\n\n\t\t\t&::after,\n\t\t\t&::before {\n\t\t\t\tborder-top-right-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " .", "::after {\n\t\tborder-left-color: transparent;\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", "var(--ds-radius-xlarge, 12px)", ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS);
|
|
26
41
|
};
|
|
27
42
|
var roundedTableStickyHeaderNumberColumnStyles = function roundedTableStickyHeaderNumberColumnStyles() {
|
|
28
|
-
return css(
|
|
43
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.", "[data-number-column='true'] .", " tr th[data-reaches-top][data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " tr.", " th[data-reaches-left]::before,\n\t.", "[data-number-column='true'] .", " .", " th[data-reaches-left]::before {\n\t\tborder-top-left-radius: ", ";\n\t\tborder-bottom: none;\n\t}\n"])), ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY_ACTIVE, "var(--ds-radius-xlarge, 12px)");
|
|
29
44
|
};
|
|
30
45
|
var roundedTableStickyHeaderCornerMaskStyles = function roundedTableStickyHeaderCornerMaskStyles() {
|
|
31
|
-
return css(
|
|
46
|
+
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t/* Same z-index as the sticky row; DOM order keeps the row above this mask and the table border below it. */\n\t.", " {\n\t\tdisplay: none;\n\t\tposition: sticky;\n\t\ttop: calc(", "px - 1px);\n\t\twidth: 12px;\n\t\theight: 12px;\n\t\tmargin-bottom: -12px;\n\t\tbackground: ", ";\n\t\tpointer-events: none;\n\t\tz-index: ", ";\n\t}\n\n\t.", "[data-number-column='true']\n\t\t.", "[data-corner='left'] {\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", "[data-corner='right'] {\n\t\tleft: calc(100% - 11px);\n\t}\n\n\t/*\n\t\tScope the :has() selectors to a DIRECT child table so a nested table that\n\t\thas its own sticky row does not pull the OUTER wrapper's masks into the\n\t\tsticky / fallback layout. The masks belong to the wrapper of the table\n\t\tthat owns the sticky row, never to an ancestor wrapper.\n\t*/\n\t.", ":has(> table > tbody > tr.", ")\n\t\t> .", ",\n\t\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t\tWhen the table overflows horizontally, sticky headers fall back from native\n\t\tposition: sticky to a fixed-position header row. Match that positioning so\n\t\tthe corner masks continue to cover the rounded corners in the fallback path.\n\n\t\tThe direct-child combinator inside :has() is critical: without it a nested\n\t\ttable entering the legacy fallback would incorrectly trigger this rule on\n\t\tthe OUTER wrapper, detaching the outer table's masks from its corners.\n\t*/\n\t.", ":has(> table.", " > tbody > tr.sticky)\n\t\t> .", " {\n\t\tposition: fixed;\n\t\ttop: 30px;\n\t\tz-index: 1;\n\t}\n"])), ClassName.TABLE_CORNER_MASK, tableMarginTop, "var(--ds-surface, #FFFFFF)", nativeStickyHeaderZIndex, ClassName.TABLE_CONTAINER, ClassName.TABLE_CORNER_MASK, akEditorTableNumberColumnWidth, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CORNER_MASK, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CORNER_MASK);
|
|
32
47
|
};
|
|
33
48
|
var roundedTableStickyHeaderOverlayStyles = function roundedTableStickyHeaderOverlayStyles() {
|
|
34
|
-
return css(
|
|
49
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t/*\n\t\tPaint the pinned sticky row's rounded top edge via each cell's ::after.\n\t\ttop: -1px places it in the reserved transparent border slot, aligned with\n\t\tthe row's inset-shadow bottom border. Longhand border-top-* lets\n\t\tinteraction-state rules override only the colour.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: -1px;\n\t\tright: -1px;\n\t\ttop: -1px;\n\t\tbottom: -1px;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tpointer-events: none;\n\t\tborder-top-width: 1px;\n\t\tborder-top-style: solid;\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Selection / hover / active-cursor colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after,\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top]:is(\n\t\t\t.", ",\n\t\t\t.", ",\n\t\t\t.", "\n\t\t)::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/* Danger colour for the painted top edge. */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top].", "::after,\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top].", "::after {\n\t\tborder-top-color: ", ";\n\t}\n\n\t:where(.", " > table > tbody > tr.", ")\n\t\t> th.", "[data-reaches-left]::after {\n\t\tborder-left-color: transparent;\n\t}\n\n\t", "\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL, ClassName.ACTIVE_CURSOR_CELL, tableBorderSelectedColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.TABLE_HEADER_CELL, fg('platform_editor_table_q4_patch_1') ? css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n\t\t\t\t/* Node-selected (ak-editor-selected-node) sticky header: the pinned row leaves the table's\n\t\t\t\t\t rounded overlay behind, so recolour its painted top edge to the selected colour too. */\n\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ".", "\n\t\t\t\t\t> th.", "[data-reaches-top]::after,\n\t\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ".", "\n\t\t\t\t\t> td.", "[data-reaches-top]::after {\n\t\t\t\t\tborder-top-color: ", ";\n\t\t\t\t}\n\t\t\t"])), ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, tableBorderSelectedColor) : '');
|
|
35
50
|
};
|
|
36
51
|
var roundedTableStickyHeaderShadowStyles = function roundedTableStickyHeaderShadowStyles() {
|
|
37
|
-
return css(
|
|
52
|
+
return css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t/* Native sticky row */\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ",\n\t/* Legacy sticky row */\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky {\n\t\tbox-shadow: inset 0 -1px ", " !important;\n\t}\n\n\t/*\n\t\tBox-shadow below active sticky header.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", " {\n\t\tbox-shadow:\n\t\t\tinset 0 -1px ", ",\n\t\t\t0 6px 4px -4px ", " !important;\n\t}\n\n\t/*\n\t\tSticky headers leave the table's rounded outer overlay behind, so make the\n\t\treserved 1px top-border slot visible on the pinned row.\n\t*/\n\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table\n\t\t> tbody\n\t\t> tr.", ".", "\n\t\t> td.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-top],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-top] {\n\t\tborder-top-color: ", ";\n\t}\n\n\t/*\n\t\tRestore legacy sticky corner side borders after the row is pinned outside the\n\t\ttable's outer overlay. (Pinned row top edge is painted by the cell ::after\n\t\toverlay in roundedTableStickyHeaderOverlayStyles.)\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-left],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-left] {\n\t\tborder-left-color: ", ";\n\t}\n\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", "[data-reaches-right],\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", "[data-reaches-right] {\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\t/*\n\t\tPaint the legacy sticky bottom edge on cells so it aligns under display: grid.\n\t*/\n\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> th.", ",\n\t\t.", "\n\t\t> table.", "\n\t\t> tbody\n\t\t> tr.sticky\n\t\t> td.", " {\n\t\tborder-bottom: 1px solid ", ";\n\t}\n\n\t.", ".", ":has(tr.sticky)\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tbox-shadow: none !important;\n\t}\n\n\t", "\n"])), ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, ClassName.TABLE_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, ClassName.TABLE_CELL, tableBorderColor, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, fg('platform_editor_table_q4_patch_1') ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t\t\t/* Node-selected (ak-editor-selected-node) sticky header: recolour the bottom-edge\n\t\t\t\t\t shadow to the selected colour so it matches the rest of the selection. */\n\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ",\n\t\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table.", "\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.sticky {\n\t\t\t\t\tbox-shadow: inset 0 -1px ", " !important;\n\t\t\t\t}\n\n\t\t\t\t/* Active (pinned) variant keeps its drop shadow but recolours the bottom border. */\n\t\t\t\t.", ".", "\n\t\t\t\t\t.", "\n\t\t\t\t\t> table\n\t\t\t\t\t> tbody\n\t\t\t\t\t> tr.", ".", " {\n\t\t\t\t\tbox-shadow:\n\t\t\t\t\t\tinset 0 -1px ", ",\n\t\t\t\t\t\t0 6px 4px -4px ", " !important;\n\t\t\t\t}\n\t\t\t"])), ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_STICKY, tableBorderSelectedColor, ClassName.NODEVIEW_WRAPPER, akEditorSelectedNodeClassName, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, ClassName.NATIVE_STICKY_ACTIVE, tableBorderSelectedColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)") : '');
|
|
38
53
|
};
|
|
39
54
|
export var roundedTableOverrides = function roundedTableOverrides() {
|
|
40
|
-
return css(
|
|
55
|
+
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n"])), fg('platform_editor_table_q4_patch_1') ?
|
|
56
|
+
// Base corner radius is emitted from the SSR-rendered EditorContentContainer
|
|
57
|
+
// (tableRoundedCornerStyles in editor-core); only the interaction overlays remain here.
|
|
58
|
+
roundedTableCellCornerInteractionOverlayStyles() : roundedTableCellCornerStyles(), roundedTableInteractionOverlayStyles(), fg('platform_editor_table_q4_patch_1') ? roundedTableSelectedNodeStyles() : '', roundedTableNumberedColumnStyles(), roundedTableStickyHeaderCellCornerStyles(), roundedTableStickyHeaderNumberColumnStyles(), roundedTableStickyHeaderCornerMaskStyles(), roundedTableStickyHeaderOverlayStyles(), roundedTableStickyHeaderShadowStyles());
|
|
41
59
|
};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { IntlShape } from 'react-intl/src/types';
|
|
2
2
|
import type { TableLayout } from '@atlaskit/adf-schema';
|
|
3
|
+
import type { Valign } from '@atlaskit/adf-schema/layout-column';
|
|
3
4
|
import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
|
|
4
5
|
import type { CHANGE_ALIGNMENT_REASON, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
5
6
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
6
|
-
import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
7
|
+
import type { Command, EditorCommand, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
7
8
|
import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
|
|
8
9
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
9
10
|
import type { Rect } from '@atlaskit/editor-tables/table-map';
|
|
@@ -13,6 +14,7 @@ export declare const emptyMultipleCellsWithAnalytics: (editorAnalyticsAPI: Edito
|
|
|
13
14
|
export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
|
|
14
15
|
export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
|
|
15
16
|
export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, editorView?: EditorView | null) => Command;
|
|
17
|
+
export declare const setCellVerticalAlignmentWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU, valign: Valign, targetCellPosition?: number) => EditorCommand;
|
|
16
18
|
export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
|
|
17
19
|
export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
|
|
18
20
|
export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, api: PluginInjectionAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, isTableFixedColumnWidthsOptionEnabled: boolean, isCommentEditor: boolean, inputMethod: INPUT_METHOD.SHORTCUT, ariaNotify?: (message: string) => void, getIntl?: () => IntlShape) => Command;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.3.0",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@atlaskit/editor-plugin-batch-attribute-updates": "^12.0.0",
|
|
30
30
|
"@atlaskit/editor-plugin-content-insertion": "^12.0.0",
|
|
31
31
|
"@atlaskit/editor-plugin-editor-viewmode": "^14.0.0",
|
|
32
|
-
"@atlaskit/editor-plugin-extension": "15.0.
|
|
32
|
+
"@atlaskit/editor-plugin-extension": "15.0.10",
|
|
33
33
|
"@atlaskit/editor-plugin-guideline": "^12.0.0",
|
|
34
34
|
"@atlaskit/editor-plugin-interaction": "^22.0.0",
|
|
35
35
|
"@atlaskit/editor-plugin-limited-mode": "^9.0.0",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
|
|
53
53
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
|
|
54
54
|
"@atlaskit/primitives": "^20.0.0",
|
|
55
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
55
|
+
"@atlaskit/tmp-editor-statsig": "^113.0.0",
|
|
56
56
|
"@atlaskit/toggle": "^17.0.0",
|
|
57
57
|
"@atlaskit/tokens": "^15.0.0",
|
|
58
58
|
"@atlaskit/tooltip": "^23.0.0",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"uuid": "^3.1.0"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
|
-
"@atlaskit/editor-common": "^116.
|
|
70
|
+
"@atlaskit/editor-common": "^116.13.0",
|
|
71
71
|
"react": "^18.2.0",
|
|
72
72
|
"react-dom": "^18.2.0",
|
|
73
73
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|