@atlaskit/editor-plugin-table 10.3.3 → 10.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/nodeviews/TableRow.js +2 -4
- package/dist/cjs/nodeviews/lazy-node-views.js +1 -1
- package/dist/cjs/nodeviews/table.js +0 -2
- package/dist/cjs/pm-plugins/drag-and-drop/commands.js +1 -1
- package/dist/cjs/pm-plugins/drag-and-drop/plugin.js +2 -2
- package/dist/cjs/pm-plugins/main.js +1 -1
- package/dist/cjs/pm-plugins/table-resizing/utils/content-width.js +2 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/misc.js +1 -1
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-logic.js +1 -1
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js +1 -1
- package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js +1 -2
- package/dist/cjs/pm-plugins/table-selection-keymap.js +6 -4
- package/dist/cjs/pm-plugins/transforms/delete-columns.js +1 -1
- package/dist/cjs/pm-plugins/transforms/fix-tables.js +2 -3
- package/dist/cjs/pm-plugins/utils/paste.js +1 -1
- package/dist/cjs/pm-plugins/view-mode-sort/index.js +3 -3
- package/dist/cjs/pm-plugins/view-mode-sort/utils.js +1 -1
- package/dist/cjs/tablePlugin.js +1 -1
- package/dist/cjs/ui/FloatingInsertButton/index.js +2 -2
- package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js +1 -1
- package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js +6 -1
- package/dist/cjs/ui/TableFloatingControls/index.js +0 -2
- package/dist/cjs/ui/common-styles.js +2 -2
- package/dist/cjs/ui/consts.js +2 -2
- package/dist/cjs/ui/toolbar.js +1 -1
- package/dist/es2019/nodeviews/TableRow.js +2 -4
- package/dist/es2019/nodeviews/lazy-node-views.js +1 -1
- package/dist/es2019/nodeviews/table.js +0 -2
- package/dist/es2019/pm-plugins/drag-and-drop/commands.js +1 -1
- package/dist/es2019/pm-plugins/drag-and-drop/plugin.js +2 -2
- package/dist/es2019/pm-plugins/main.js +1 -1
- package/dist/es2019/pm-plugins/table-resizing/utils/content-width.js +2 -2
- package/dist/es2019/pm-plugins/table-resizing/utils/misc.js +1 -1
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-logic.js +1 -1
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js +1 -1
- package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +1 -2
- package/dist/es2019/pm-plugins/table-selection-keymap.js +6 -4
- package/dist/es2019/pm-plugins/transforms/delete-columns.js +1 -1
- package/dist/es2019/pm-plugins/transforms/fix-tables.js +2 -3
- package/dist/es2019/pm-plugins/utils/paste.js +1 -1
- package/dist/es2019/pm-plugins/view-mode-sort/index.js +3 -3
- package/dist/es2019/pm-plugins/view-mode-sort/utils.js +1 -1
- package/dist/es2019/tablePlugin.js +1 -1
- package/dist/es2019/ui/FloatingInsertButton/index.js +2 -2
- package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js +1 -1
- package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js +6 -1
- package/dist/es2019/ui/TableFloatingControls/index.js +0 -2
- package/dist/es2019/ui/common-styles.js +8 -14
- package/dist/es2019/ui/consts.js +2 -2
- package/dist/es2019/ui/toolbar.js +1 -1
- package/dist/esm/nodeviews/TableRow.js +2 -4
- package/dist/esm/nodeviews/lazy-node-views.js +1 -1
- package/dist/esm/nodeviews/table.js +0 -2
- package/dist/esm/pm-plugins/drag-and-drop/commands.js +1 -1
- package/dist/esm/pm-plugins/drag-and-drop/plugin.js +2 -2
- package/dist/esm/pm-plugins/main.js +1 -1
- package/dist/esm/pm-plugins/table-resizing/utils/content-width.js +2 -2
- package/dist/esm/pm-plugins/table-resizing/utils/misc.js +1 -1
- package/dist/esm/pm-plugins/table-resizing/utils/resize-logic.js +1 -1
- package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js +1 -1
- package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js +1 -2
- package/dist/esm/pm-plugins/table-selection-keymap.js +6 -4
- package/dist/esm/pm-plugins/transforms/delete-columns.js +1 -1
- package/dist/esm/pm-plugins/transforms/fix-tables.js +2 -3
- package/dist/esm/pm-plugins/utils/paste.js +1 -1
- package/dist/esm/pm-plugins/view-mode-sort/index.js +3 -3
- package/dist/esm/pm-plugins/view-mode-sort/utils.js +1 -1
- package/dist/esm/tablePlugin.js +1 -1
- package/dist/esm/ui/FloatingInsertButton/index.js +2 -2
- package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js +1 -1
- package/dist/esm/ui/TableFloatingControls/RowControls/ClassicControls.js +6 -1
- package/dist/esm/ui/TableFloatingControls/index.js +0 -2
- package/dist/esm/ui/common-styles.js +2 -2
- package/dist/esm/ui/consts.js +2 -2
- package/dist/esm/ui/toolbar.js +1 -1
- package/package.json +9 -6
- package/src/nodeviews/TableRow.ts +2 -3
- package/src/nodeviews/lazy-node-views.ts +1 -1
- package/src/nodeviews/table.tsx +0 -2
- package/src/pm-plugins/drag-and-drop/commands.ts +1 -1
- package/src/pm-plugins/drag-and-drop/plugin.ts +2 -2
- package/src/pm-plugins/main.ts +1 -1
- package/src/pm-plugins/table-resizing/utils/content-width.ts +2 -2
- package/src/pm-plugins/table-resizing/utils/misc.ts +1 -1
- package/src/pm-plugins/table-resizing/utils/resize-logic.ts +1 -1
- package/src/pm-plugins/table-resizing/utils/resize-state.ts +1 -1
- package/src/pm-plugins/table-resizing/utils/scale-table.ts +1 -2
- package/src/pm-plugins/table-selection-keymap.ts +6 -3
- package/src/pm-plugins/transforms/delete-columns.ts +1 -1
- package/src/pm-plugins/transforms/fix-tables.ts +2 -3
- package/src/pm-plugins/utils/paste.ts +3 -1
- package/src/pm-plugins/view-mode-sort/index.ts +3 -3
- package/src/pm-plugins/view-mode-sort/utils.ts +1 -1
- package/src/tablePlugin.tsx +1 -1
- package/src/tablePluginType.ts +2 -2
- package/src/ui/FloatingInsertButton/index.tsx +2 -2
- package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +1 -1
- package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx +10 -1
- package/src/ui/TableFloatingControls/index.tsx +0 -2
- package/src/ui/common-styles.ts +26 -14
- package/src/ui/consts.ts +2 -2
- package/src/ui/toolbar.tsx +1 -1
|
@@ -37,7 +37,7 @@ export var createPlugin = function createPlugin(api, nodeViewPortalProviderAPI)
|
|
|
37
37
|
},
|
|
38
38
|
apply: function apply(tr, pluginState, oldState) {
|
|
39
39
|
var _api$editorViewMode;
|
|
40
|
-
// TODO - move this mode check to plugin creation if possible. Right now it's here because the initial state
|
|
40
|
+
// TODO: ED-26961 - move this mode check to plugin creation if possible. Right now it's here because the initial state
|
|
41
41
|
// does not appear correct when the plugin is created.
|
|
42
42
|
var _ref = ((_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState()) || {},
|
|
43
43
|
mode = _ref.mode;
|
|
@@ -93,7 +93,7 @@ export var createPlugin = function createPlugin(api, nodeViewPortalProviderAPI)
|
|
|
93
93
|
return spec.tableId === tableId && spec.type === 'sorting-decoration';
|
|
94
94
|
});
|
|
95
95
|
|
|
96
|
-
// TODO - add support for keyboard only users
|
|
96
|
+
// TODO: ED-26961 - add support for keyboard only users
|
|
97
97
|
if (hoverTableMeta && !isTableInState || sortMeta || isTableInState && !sortingDecorations.length && fg('platform_editor_sort_decoration_fix_on_live_page')) {
|
|
98
98
|
allTables.forEach(function (table) {
|
|
99
99
|
var _table = _slicedToArray(table, 3),
|
|
@@ -296,7 +296,7 @@ export var createPlugin = function createPlugin(api, nodeViewPortalProviderAPI)
|
|
|
296
296
|
props: {
|
|
297
297
|
handleDOMEvents: {
|
|
298
298
|
keydown: function keydown(view, event) {
|
|
299
|
-
// TODO - fix the focus issue here, where toggling sort with a keypress loses focus
|
|
299
|
+
// TODO: ED-26961 - fix the focus issue here, where toggling sort with a keypress loses focus
|
|
300
300
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
301
301
|
var _key$getState2;
|
|
302
302
|
var pluginState = ((_key$getState2 = key.getState(view.state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.sort) || {};
|
|
@@ -26,7 +26,7 @@ var getSortOrderFromTable = function getSortOrderFromTable(tableNode, sortIndex,
|
|
|
26
26
|
};
|
|
27
27
|
});
|
|
28
28
|
var compareNodesInOrder = createCompareNodes({
|
|
29
|
-
// TODO - add inline card support
|
|
29
|
+
// TODO: ED-26961 - add inline card support
|
|
30
30
|
getInlineCardTextFromStore: function getInlineCardTextFromStore() {
|
|
31
31
|
return null;
|
|
32
32
|
}
|
package/dist/esm/tablePlugin.js
CHANGED
|
@@ -355,7 +355,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
|
|
|
355
355
|
return options !== null && options !== void 0 && options.tableOptions.allowTableResizing && options !== null && options !== void 0 && options.isCommentEditor ? createTableWidthInCommentFixPlugin(dispatch, (_options$tableOptions4 = options.tableOptions.allowTableAlignment) !== null && _options$tableOptions4 !== void 0 ? _options$tableOptions4 : false) : undefined;
|
|
356
356
|
}
|
|
357
357
|
},
|
|
358
|
-
// TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
|
|
358
|
+
// TODO: ED-26961 - should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
|
|
359
359
|
{
|
|
360
360
|
name: 'tableOverflowAnalyticsPlugin',
|
|
361
361
|
plugin: function plugin(_ref17) {
|
|
@@ -51,7 +51,7 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
|
|
|
51
51
|
dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
|
|
52
52
|
isChromelessEditor = _this$props.isChromelessEditor;
|
|
53
53
|
|
|
54
|
-
// TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
|
|
54
|
+
// TODO: ED-26961 - temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
|
|
55
55
|
if (isDragAndDropEnabled && (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)) {
|
|
56
56
|
return null;
|
|
57
57
|
}
|
|
@@ -121,7 +121,7 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
|
|
|
121
121
|
var index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
|
|
122
122
|
var hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state.selection);
|
|
123
123
|
|
|
124
|
-
//
|
|
124
|
+
// Fixed the 'add column button' not visible issue when sticky header is enabled
|
|
125
125
|
// By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
|
|
126
126
|
// Only when inserting a column, otherwise set to undefined
|
|
127
127
|
// Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
|
|
@@ -50,7 +50,7 @@ export var ColumnControls = function ColumnControls(_ref) {
|
|
|
50
50
|
width ? stickyTop ? "".concat(width - 2, "px") : "".concat(width - 1, "px") : '0px'
|
|
51
51
|
);
|
|
52
52
|
}).join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
|
|
53
|
-
// TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
|
|
53
|
+
// TODO: ED-26961 - reusing getRowsParams here because it's generic enough to work for columns -> rename
|
|
54
54
|
var columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
|
|
55
55
|
var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
|
|
56
56
|
var selectedColIndexes = getSelectedColumns((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) || editorView.state.selection);
|
|
@@ -9,6 +9,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
9
9
|
import React, { Component } from 'react';
|
|
10
10
|
import { injectIntl } from 'react-intl-next';
|
|
11
11
|
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
13
|
import { clearHoverSelection } from '../../../pm-plugins/commands';
|
|
13
14
|
import { getRowClassNames, getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
|
|
14
15
|
import { TableCssClassName as ClassName } from '../../../types';
|
|
@@ -81,7 +82,11 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
|
|
|
81
82
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
82
83
|
top: thisRowSticky ? "3px" : undefined,
|
|
83
84
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
84
|
-
paddingTop: thisRowSticky ? "".concat(
|
|
85
|
+
paddingTop: thisRowSticky ? "".concat(fg('platform_editor_number_column_sticky_header_bug') ?
|
|
86
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
87
|
+
tableControlsSpacing - 2 :
|
|
88
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
89
|
+
tableControlsSpacing, "px") : undefined
|
|
85
90
|
}
|
|
86
91
|
}, /*#__PURE__*/React.createElement("button", {
|
|
87
92
|
"aria-label": formatMessage(messages.rowControl),
|
|
@@ -36,7 +36,6 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
|
|
|
36
36
|
var _selectRow = useCallback(function (row, expand) {
|
|
37
37
|
var state = editorView.state,
|
|
38
38
|
dispatch = editorView.dispatch;
|
|
39
|
-
// fix for issue ED-4665
|
|
40
39
|
if (browser.ie_version === 11) {
|
|
41
40
|
// Ignored via go/ees005
|
|
42
41
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
@@ -47,7 +46,6 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
|
|
|
47
46
|
var _selectRows = useCallback(function (rowIndexes) {
|
|
48
47
|
var state = editorView.state,
|
|
49
48
|
dispatch = editorView.dispatch;
|
|
50
|
-
// fix for issue ED-4665
|
|
51
49
|
if (browser.ie_version === 11) {
|
|
52
50
|
// Ignored via go/ees005
|
|
53
51
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
@@ -62,10 +62,10 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
|
|
|
62
62
|
// re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
|
|
63
63
|
export var baseTableStyles = function baseTableStyles(props) {
|
|
64
64
|
var _props$featureFlags, _props$featureFlags2;
|
|
65
|
-
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\n\t\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t\t// This fixes a border issue caused by relative positioned table cells\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n\t/* Delete button */\n\t", "\n\t/* Ends Delete button */\n\n\t/* sticky styles */\n\t", "\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n .", "\n .", "\n .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " .", " {\n\t\tleft: unset;\n\t\tposition: fixed;\n\t\t/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", " .", " {\n\t\tpadding-bottom: ", "px;\n\t}\n\n\t", "\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t", "\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n .", " .", " {\n\t\theight: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n\t}\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t// https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\t// Fixes issue where the extra padding that is added here throws off the position\n\t\t\t// of the rows control dot\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: 8px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: calc(100% - 16px);\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: 24px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: 24px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: 10px 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t// add a background above the first numbered column cell when sticky header is engaged\n\t// which hides the table when scrolling\n\t", "\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t// nested tables should be ignored when we apply border-left: 0 to the parent table\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\t// Allows better positioning for the shadow sentinels - ED-16668\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t// ED-15246: Trello card is visible through a border of a table border\n\t\t/* ED-19064: To fix when enable header column in the table,\n and selection the header column, the right border is not tableBorderSelectedColor\n when deleting the header column, the right border is not tableToolbarDeleteColor */\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// override for DnD controls\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\ttop: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\n\t}\n\n\t// nested tables\n\t", "\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n"])), tableSharedStyle(), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, insertLine(), resizeHandle(), rangeSelectionStyles, viewModeSortStyles(), ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.TABLE_STICKY, " > .").concat(ClassName.DRAG_ROW_CONTROLS_WRAPPER, " .").concat(ClassName.NUMBERED_COLUMN, " .").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(stickyRowOffsetTop + 2, "px;\n\t\t\twidth: ").concat(akEditorTableNumberColumnWidth, "px;\n\n\t\t\tposition: fixed !important;\n\t\t\tz-index: ").concat(akEditorStickyHeaderZIndex, " !important;\n\t\t\tbox-shadow: 0px -").concat(stickyRowOffsetTop, "px ", "var(--ds-surface, white)", ";\n\t\t\tborder-right: 0 none;\n\t\t\t/* top set by NumberColumn component */\n\t\t}\n\t\t") : "\n .".concat(ClassName.TABLE_STICKY, " .").concat(ClassName.NUMBERED_COLUMN, " .").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(stickyRowOffsetTop + 2, "px;\n\t\t\twidth: ").concat(akEditorTableNumberColumnWidth, "px;\n\n\t\t\tposition: fixed !important;\n\t\t\tz-index: ").concat(akEditorStickyHeaderZIndex, " !important;\n\t\t\tbox-shadow: 0px -").concat(stickyRowOffsetTop, "px ", "var(--ds-surface, white)", ";\n\t\t\tborder-right: 0 none;\n\t\t\t/* top set by NumberColumn component */\n\t\t}\n\t\t"), ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, fg('nested_table_control_padding_with_css') ? "\n\t\t.tableView-content-wrap:has(.tableView-content-wrap):has(.".concat(ClassName.NESTED_TABLE_WITH_CONTROLS, ") {\n\t\t\tpadding-left: unset;\n\t\t}\n\n\t\t.tableView-content-wrap:has(.").concat(ClassName.NESTED_TABLE_WITH_CONTROLS, ") {\n\t\t\tpadding-left: 15px;\n\t\t}\n\t\t") : '', stickyHeaderBorderBottomWidth, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.WITH_CONTROLS, ".").concat(ClassName.TABLE_STICKY, " > .").concat(ClassName.DRAG_ROW_CONTROLS_WRAPPER, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(tableControlsSpacing + 2, "px;\n\t\t}\n\t\t") : "\n\t\t.".concat(ClassName.WITH_CONTROLS, ".").concat(ClassName.TABLE_STICKY, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(tableControlsSpacing + 2, "px;\n\t\t}\n\t\t"), ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop), stickyScrollbarStyles, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton("\n border-bottom: 1px solid ".concat(tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.DRAG_ROW_CONTROLS, fg('platform_editor_table_column_selected_state_fix') ? rowControlsZIndex + 4 : akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", resizeHandlerZIndex, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.tableDragAndDrop || editorExperiment('support_table_in_comment_jira', true) ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeFontSizeToBase16(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.TABLE_STICKY, " > .").concat(ClassName.DRAG_ROW_CONTROLS_WRAPPER, " {\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ":first-of-type::after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 33px;\n\t\t\t\twidth: 100%;\n\t\t\t\tbackground-color: ", "var(--ds-surface, white)", ";\n\t\t\t\tposition: absolute;\n\n\t\t\t\t// the extra pixel is accounting for borders\n\t\t\t\ttop: -34px;\n\t\t\t\tleft: -1px;\n\t\t\t}\n\t\t}\n\t\t") : "\n\t\t.".concat(ClassName.TABLE_STICKY, " {\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ":first-of-type::after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 33px;\n\t\t\t\twidth: 100%;\n\t\t\t\tbackground-color: ", "var(--ds-surface, white)", ";\n\t\t\t\tposition: absolute;\n\n\t\t\t\t// the extra pixel is accounting for borders\n\t\t\t\ttop: -34px;\n\t\t\t\tleft: -1px;\n\t\t\t}\n\t\t}\n\t\t"), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, fg('platform_editor_table_column_selected_state_fix') ? '' : "z-index: ".concat(rowControlsZIndex + 4), ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, tableToolbarSize, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableCellOnStickyHeaderZIndex - 4, fg('platform_editor_nested_table_drag_controls') ? "\n\t\t.".concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t.").concat(ClassName.TABLE_STICKY, " .").concat(ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, " {\n\t\t\t\tposition: absolute;\n\t\t\t\tz-index: ").concat(akEditorUnitZIndex, ";\n\t\t\t}\n\t\t}\n\t\t") : '', ClassName.TABLE_NODE_WRAPPER);
|
|
65
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t.", " {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n\t/* Delete button */\n\t", "\n\t/* Ends Delete button */\n\n\t/* sticky styles */\n\t", "\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n .", "\n .", "\n .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid ", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " .", " {\n\t\tleft: unset;\n\t\tposition: fixed;\n\t\t/* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\t}\n\n\t.", ".", " .", " {\n\t\tpadding-bottom: ", "px;\n\t}\n\n\t", "\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t", "\n\n\t.", ".sticky {\n\t\tborder-top: ", "px\n\t\t\tsolid ", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n .", " .", " {\n\t\theight: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n\t}\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t// https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\t// Fixes issue where the extra padding that is added here throws off the position\n\t\t\t// of the rows control dot\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: 6px;\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: 8px;\n\t\t}\n\n\t\t.", " {\n\t\t\tleft: calc(100% - 6px);\n\t\t}\n\t\t.", ".", " {\n\t\t\tleft: calc(100% - 16px);\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: 24px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: 24px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: 10px 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t// add a background above the first numbered column cell when sticky header is engaged\n\t// which hides the table when scrolling\n\t", "\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t// nested tables should be ignored when we apply border-left: 0 to the parent table\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tborder-color: ", ";\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\t// Allows better positioning for the shadow sentinels - ED-16668\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\tth.", "::after, td.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// override for DnD controls\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\ttop: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", ".", ",\n\t\t.", ".", " {\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n\t\tz-index: ", ";\n\t}\n\n\t// nested tables\n\t", "\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n"])), tableSharedStyle(), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, insertLine(), resizeHandle(), rangeSelectionStyles, viewModeSortStyles(), ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.TABLE_STICKY, " > .").concat(ClassName.DRAG_ROW_CONTROLS_WRAPPER, " .").concat(ClassName.NUMBERED_COLUMN, " .").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? stickyRowOffsetTop : stickyRowOffsetTop + 2, "px;\n\t\t\twidth: ").concat(akEditorTableNumberColumnWidth, "px;\n\n\t\t\tposition: fixed !important;\n\t\t\tz-index: ").concat(akEditorStickyHeaderZIndex, " !important;\n\t\t\tbox-shadow: 0px -").concat(stickyRowOffsetTop, "px ", "var(--ds-surface, white)", ";\n\t\t\tborder-right: 0 none;\n\t\t\t/* top set by NumberColumn component */\n\t\t}\n\t\t") : "\n \t.".concat(ClassName.TABLE_STICKY, " .").concat(ClassName.NUMBERED_COLUMN, " .").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? stickyRowOffsetTop : stickyRowOffsetTop + 2, "px;\n\t\t\twidth: ").concat(akEditorTableNumberColumnWidth, "px;\n\n\t\t\tposition: fixed !important;\n\t\t\tz-index: ").concat(akEditorStickyHeaderZIndex, " !important;\n\t\t\tbox-shadow: 0px -").concat(stickyRowOffsetTop, "px ", "var(--ds-surface, white)", ";\n\t\t\tborder-right: 0 none;\n\t\t\t/* top set by NumberColumn component */\n\t\t}\n\t\t"), ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, akEditorTableCellOnStickyHeaderZIndex, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, fg('nested_table_control_padding_with_css') ? "\n\t\t.tableView-content-wrap:has(.tableView-content-wrap):has(.".concat(ClassName.NESTED_TABLE_WITH_CONTROLS, ") {\n\t\t\tpadding-left: unset;\n\t\t}\n\n\t\t.tableView-content-wrap:has(.").concat(ClassName.NESTED_TABLE_WITH_CONTROLS, ") {\n\t\t\tpadding-left: 15px;\n\t\t}\n\t\t") : '', stickyHeaderBorderBottomWidth, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.WITH_CONTROLS, ".").concat(ClassName.TABLE_STICKY, " > .").concat(ClassName.DRAG_ROW_CONTROLS_WRAPPER, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? tableControlsSpacing : tableControlsSpacing + 2, "px;\n\t\t}\n\t\t") : "\n\t\t.".concat(ClassName.WITH_CONTROLS, ".").concat(ClassName.TABLE_STICKY, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN, "\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON, ":first-of-type {\n\t\t\tmargin-top: ").concat(fg('platform_editor_number_column_sticky_header_bug') ? tableControlsSpacing : tableControlsSpacing + 2, "px;\n\t\t}\n\t\t"), ClassName.CORNER_CONTROLS, fg('platform_editor_number_column_sticky_header_bug') ? tableControlsSpacing - tableToolbarSize : tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, OverflowShadow((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop), stickyScrollbarStyles, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_CHROMELESS, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton("\n border-bottom: 1px solid ".concat(tableBorderColor, ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.DRAG_ROW_CONTROLS, fg('platform_editor_table_column_selected_state_fix') ? rowControlsZIndex + 4 : akEditorUnitZIndex, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", resizeHandlerZIndex, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(N0, ")"), ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.tableDragAndDrop || editorExperiment('support_table_in_comment_jira', true) ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeFontSizeToBase16(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, fg('platform_editor_nested_tables_sticky_header_bug') ? "\n\t\t.".concat(ClassName.TABLE_STICKY, " > .").concat(ClassName.DRAG_ROW_CONTROLS_WRAPPER, " {\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ":first-of-type::after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 33px;\n\t\t\t\twidth: 100%;\n\t\t\t\tbackground-color: ", "var(--ds-surface, white)", ";\n\t\t\t\tposition: absolute;\n\n\t\t\t\t// the extra pixel is accounting for borders\n\t\t\t\ttop: -34px;\n\t\t\t\tleft: -1px;\n\t\t\t}\n\t\t}\n\t\t") : "\n\t\t.".concat(ClassName.TABLE_STICKY, " {\n\t\t\t.").concat(ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ":first-of-type::after {\n\t\t\t\tcontent: '';\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 33px;\n\t\t\t\twidth: 100%;\n\t\t\t\tbackground-color: ", "var(--ds-surface, white)", ";\n\t\t\t\tposition: absolute;\n\n\t\t\t\t// the extra pixel is accounting for borders\n\t\t\t\ttop: -34px;\n\t\t\t\tleft: -1px;\n\t\t\t}\n\t\t}\n\t\t"), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), akEditorUnitZIndex * 100, ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, fg('platform_editor_table_column_selected_state_fix') ? '' : "z-index: ".concat(rowControlsZIndex + 4), ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, tableToolbarSize, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_STICKY, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableCellOnStickyHeaderZIndex - 4, fg('platform_editor_nested_table_drag_controls') ? "\n\t\t.".concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t.").concat(ClassName.TABLE_STICKY, " .").concat(ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, " {\n\t\t\t\tposition: absolute;\n\t\t\t\tz-index: ").concat(akEditorUnitZIndex, ";\n\t\t\t}\n\t\t}\n\t\t") : '', ClassName.TABLE_NODE_WRAPPER);
|
|
66
66
|
};
|
|
67
67
|
|
|
68
|
-
// TODO:
|
|
68
|
+
// TODO: DSP-4139 - Remove this when we have a better solution for the table toolbar
|
|
69
69
|
export var tableStyles = function tableStyles(props) {
|
|
70
70
|
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
|
|
71
71
|
};
|
package/dist/esm/ui/consts.js
CHANGED
|
@@ -10,7 +10,7 @@ import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
|
|
|
10
10
|
* Basic colors added to prevent content overflow in table cells.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
// TODO:
|
|
13
|
+
// TODO: DSP-4135 - Remove these tokens once the new elevation tokens are available
|
|
14
14
|
export var tableCellBackgroundColor = "var(--ds-surface, ".concat(N0, ")");
|
|
15
15
|
export var tableHeaderCellBackgroundColor = "var(--ds-background-accent-gray-subtlest, ".concat(akEditorTableHeaderCellBackground, ")");
|
|
16
16
|
export var tableToolbarColor = "var(--ds-background-neutral-subtle, ".concat(akEditorTableToolbar, ")");
|
|
@@ -18,7 +18,7 @@ export var tableTextColor = "var(--ds-text-subtlest, ".concat(N200, ")");
|
|
|
18
18
|
export var tableBorderColor = "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")");
|
|
19
19
|
export var tableFloatingControlsColor = "var(--ds-background-neutral, ".concat(N20, ")");
|
|
20
20
|
|
|
21
|
-
// TODO:
|
|
21
|
+
// TODO: DSP-4461 - Remove these tokens once the new elevation tokens are available
|
|
22
22
|
export var tableCellSelectedColor = "var(--ds-blanket-selected, ".concat(akEditorTableCellBlanketSelected, ")");
|
|
23
23
|
export var tableToolbarSelectedColor = "var(--ds-background-selected-pressed, ".concat(B200, ")");
|
|
24
24
|
export var tableBorderSelectedColor = "var(--ds-border-focused, ".concat(akEditorTableBorderSelected, ")");
|
package/dist/esm/ui/toolbar.js
CHANGED
|
@@ -457,7 +457,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
|
|
|
457
457
|
zIndex: akEditorFloatingPanelZIndex + 1,
|
|
458
458
|
// Place the context menu slightly above the others
|
|
459
459
|
items: [menu, separator(menu.hidden)].concat(_toConsumableArray(alignmentMenu), [separator(alignmentMenu.length === 0)], _toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), _toConsumableArray(colorPicker), [
|
|
460
|
-
// TODO: editor controls to move to overflow menu
|
|
460
|
+
// TODO: ED-26961 - editor controls to move to overflow menu
|
|
461
461
|
{
|
|
462
462
|
type: 'extensions-placeholder',
|
|
463
463
|
separator: 'end'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.4.1",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
33
33
|
"@atlaskit/button": "^21.1.0",
|
|
34
34
|
"@atlaskit/custom-steps": "^0.11.0",
|
|
35
|
-
"@atlaskit/editor-common": "^102.
|
|
35
|
+
"@atlaskit/editor-common": "^102.4.0",
|
|
36
36
|
"@atlaskit/editor-palette": "^2.0.0",
|
|
37
37
|
"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^2.1.0",
|
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
|
|
41
41
|
"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
|
|
42
42
|
"@atlaskit/editor-plugin-guideline": "^2.0.0",
|
|
43
|
-
"@atlaskit/editor-plugin-selection": "^2.
|
|
43
|
+
"@atlaskit/editor-plugin-selection": "^2.1.0",
|
|
44
44
|
"@atlaskit/editor-plugin-width": "^3.0.0",
|
|
45
45
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
46
46
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
47
47
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
48
|
-
"@atlaskit/icon": "^
|
|
48
|
+
"@atlaskit/icon": "^25.0.0",
|
|
49
49
|
"@atlaskit/menu": "^3.1.0",
|
|
50
50
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
51
51
|
"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
|
|
54
54
|
"@atlaskit/primitives": "^14.1.0",
|
|
55
55
|
"@atlaskit/theme": "^18.0.0",
|
|
56
|
-
"@atlaskit/tmp-editor-statsig": "^3.
|
|
56
|
+
"@atlaskit/tmp-editor-statsig": "^3.6.0",
|
|
57
57
|
"@atlaskit/toggle": "^15.0.0",
|
|
58
|
-
"@atlaskit/tokens": "^4.
|
|
58
|
+
"@atlaskit/tokens": "^4.4.0",
|
|
59
59
|
"@atlaskit/tooltip": "^20.0.0",
|
|
60
60
|
"@babel/runtime": "^7.0.0",
|
|
61
61
|
"@emotion/react": "^11.7.1",
|
|
@@ -190,6 +190,9 @@
|
|
|
190
190
|
},
|
|
191
191
|
"platform_editor_table_column_selected_state_fix": {
|
|
192
192
|
"type": "boolean"
|
|
193
|
+
},
|
|
194
|
+
"platform_editor_number_column_sticky_header_bug": {
|
|
195
|
+
"type": "boolean"
|
|
193
196
|
}
|
|
194
197
|
}
|
|
195
198
|
}
|
|
@@ -645,7 +645,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
|
|
|
645
645
|
|
|
646
646
|
private makeHeaderRowSticky(tree: TableDOMElements, scrollTop?: number) {
|
|
647
647
|
// If header row height is more than 50% of viewport height don't do this
|
|
648
|
-
// TODO: When cleaning up 'nested_table_control_padding_with_css' FG
|
|
648
|
+
// TODO: ED-26961 - When cleaning up 'nested_table_control_padding_with_css' FG
|
|
649
649
|
// move this check to the constructor of the TableRow so that we don't subscribe to
|
|
650
650
|
// clicks and scrolls for nested tables.
|
|
651
651
|
if (
|
|
@@ -658,7 +658,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
|
|
|
658
658
|
|
|
659
659
|
const { table, wrapper } = tree;
|
|
660
660
|
|
|
661
|
-
// ED-16035 Make sure sticky header is only applied to first row
|
|
661
|
+
// TODO: ED-16035 - Make sure sticky header is only applied to first row
|
|
662
662
|
const tbody = this.dom.parentElement;
|
|
663
663
|
const isFirstHeader = tbody?.firstChild?.isEqualNode(this.dom);
|
|
664
664
|
if (!isFirstHeader) {
|
|
@@ -730,7 +730,6 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
|
|
|
730
730
|
return Math.round(getTop(wrapper)) + this.getWrapperoffset();
|
|
731
731
|
}
|
|
732
732
|
|
|
733
|
-
// TODO: rename!
|
|
734
733
|
private getScrolledTableTop(wrapper: HTMLElement): number {
|
|
735
734
|
return this.getWrapperRefTop(wrapper) - this.topPosEditorElement;
|
|
736
735
|
}
|
|
@@ -10,7 +10,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
|
10
10
|
|
|
11
11
|
import type { PluginInjectionAPI } from '../types';
|
|
12
12
|
|
|
13
|
-
// TODO: Clean up
|
|
13
|
+
// TODO: ED-23976 - Clean up
|
|
14
14
|
import { createTableView } from './table';
|
|
15
15
|
import TableCell from './TableCell';
|
|
16
16
|
import TableRow from './TableRow';
|
package/src/nodeviews/table.tsx
CHANGED
|
@@ -207,7 +207,6 @@ export default class TableView extends ReactNodeView<Props> {
|
|
|
207
207
|
);
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
-
// TODO: ED-15663
|
|
211
210
|
// Please, do not copy or use this kind of code below
|
|
212
211
|
// @ts-ignore
|
|
213
212
|
const fakePluginKey = {
|
|
@@ -219,7 +218,6 @@ export default class TableView extends ReactNodeView<Props> {
|
|
|
219
218
|
},
|
|
220
219
|
} as PluginKey;
|
|
221
220
|
|
|
222
|
-
// TODO: ED-15663
|
|
223
221
|
// Please, do not copy or use this kind of code below
|
|
224
222
|
// @ts-ignore
|
|
225
223
|
const fakeMediaPluginKey = {
|
|
@@ -17,7 +17,7 @@ import { createCommand, getPluginState } from './plugin-factory';
|
|
|
17
17
|
import { pluginKey } from './plugin-key';
|
|
18
18
|
import type { TriggerType } from './types';
|
|
19
19
|
|
|
20
|
-
// TODO: This command is a placeholder example. Please replace this if required.
|
|
20
|
+
// TODO: ED-26961 - This command is a placeholder example. Please replace this if required.
|
|
21
21
|
const getDecorations = (state: EditorState): DecorationSet => {
|
|
22
22
|
return pluginKey.getState(state)?.decorationSet || DecorationSet.empty;
|
|
23
23
|
};
|
|
@@ -102,7 +102,7 @@ const destroyFn = (
|
|
|
102
102
|
return;
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
// TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
|
|
105
|
+
// TODO: ED-26961 - as we drag an element around we are going to want to update the state to acurately reflect the current
|
|
106
106
|
// insert location as to where the draggable will most likely be go. For example;
|
|
107
107
|
const { sourceType, targetAdjustedIndex } = data;
|
|
108
108
|
const dropTargetType =
|
|
@@ -312,7 +312,7 @@ export const createPlugin = (
|
|
|
312
312
|
|
|
313
313
|
if (newTargetCellPosition !== undefined) {
|
|
314
314
|
const cells = getCellsInRow(dragMenuIndex)(tr.selection);
|
|
315
|
-
// ED-20673 check if it is a cell selection,
|
|
315
|
+
// TODO: ED-20673 - check if it is a cell selection,
|
|
316
316
|
// when true, a drag handle is clicked and isDragMenuOpen is true here
|
|
317
317
|
// should not close the drag menu.
|
|
318
318
|
const isCellSelection = tr.selection instanceof CellSelection;
|
package/src/pm-plugins/main.ts
CHANGED
|
@@ -266,7 +266,7 @@ export const createPlugin = (
|
|
|
266
266
|
slice = transformSliceToAddTableHeaders(slice, schema);
|
|
267
267
|
}
|
|
268
268
|
|
|
269
|
-
//
|
|
269
|
+
// This fixes pasting a table with default layout into comment editor
|
|
270
270
|
// table lose width and expand to full width
|
|
271
271
|
if (
|
|
272
272
|
!insideTable(editorState) &&
|
|
@@ -49,11 +49,11 @@ function calcContentWidth(
|
|
|
49
49
|
// If the text isn't meant to wrap, we should set that as a hard limit.
|
|
50
50
|
if (parentStyle.whiteSpace === 'nowrap') {
|
|
51
51
|
// + 3 is for date offset plus cursor
|
|
52
|
-
// TODO There should be a programmatic way to get this.
|
|
52
|
+
// TODO: ED-26961 - There should be a programmatic way to get this.
|
|
53
53
|
colWidths.push(parent.offsetWidth + 3);
|
|
54
54
|
}
|
|
55
55
|
} else {
|
|
56
|
-
//
|
|
56
|
+
// TODO: ED-26961 - doesn't quite work right with spacing
|
|
57
57
|
const style = getComputedStyle(child);
|
|
58
58
|
|
|
59
59
|
if (style.minWidth && style.minWidth.endsWith('px') && style.minWidth !== '0px') {
|
|
@@ -116,7 +116,7 @@ export const getTableMaxWidth = ({
|
|
|
116
116
|
*/
|
|
117
117
|
export const getTableElementWidth = (table: PMNode) => {
|
|
118
118
|
if (hasTableBeenResized(table)) {
|
|
119
|
-
// TODO: is there a scenario where ADF columns are SMALLER than container width?
|
|
119
|
+
// TODO: ED-26961 - is there a scenario where ADF columns are SMALLER than container width?
|
|
120
120
|
return calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
|
|
121
121
|
}
|
|
122
122
|
|
|
@@ -302,7 +302,7 @@ export const bulkColumnsResize = (
|
|
|
302
302
|
}
|
|
303
303
|
}
|
|
304
304
|
|
|
305
|
-
//
|
|
305
|
+
// fixes total table widths by adding missing pixels to columns widths here and there
|
|
306
306
|
return adjustColumnsWidths(newState, resizeState.maxSize);
|
|
307
307
|
};
|
|
308
308
|
|
|
@@ -276,8 +276,7 @@ export const scaleTable =
|
|
|
276
276
|
|
|
277
277
|
if (tr.docChanged) {
|
|
278
278
|
tr.setMeta('scrollIntoView', false);
|
|
279
|
-
// TODO: ED-8995
|
|
280
|
-
// We need to do this check to reduce the number of race conditions when working with tables.
|
|
279
|
+
// TODO: ED-8995 - We need to do this check to reduce the number of race conditions when working with tables.
|
|
281
280
|
// This metadata is been used in the sendTransaction function in the Collab plugin
|
|
282
281
|
/* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
|
|
283
282
|
scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
|
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
} from '@atlaskit/editor-common/keymaps';
|
|
13
13
|
import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
14
14
|
import { keymap } from '@atlaskit/editor-prosemirror/keymap';
|
|
15
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
15
16
|
|
|
16
17
|
import { type PluginInjectionAPI } from '../types';
|
|
17
18
|
|
|
@@ -56,9 +57,11 @@ export function tableSelectionKeymapPlugin(
|
|
|
56
57
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
57
58
|
bindKeymapWithCommand(shiftArrowUp.common!, shiftArrowUpFromTable(editorSelectionAPI)(), list);
|
|
58
59
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
if (editorExperiment('platform_editor_cmd_a_progressively_select_nodes', false)) {
|
|
61
|
+
// Ignored via go/ees005
|
|
62
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
63
|
+
bindKeymapWithCommand(selectTable.common!, modASelectTable(editorSelectionAPI)(), list);
|
|
64
|
+
}
|
|
62
65
|
|
|
63
66
|
return keymap(list) as SafePlugin;
|
|
64
67
|
}
|
|
@@ -25,7 +25,7 @@ const deleteColumnsCustomStep =
|
|
|
25
25
|
|
|
26
26
|
// Need to split all the merge in the ranges (this is the current behaviour)
|
|
27
27
|
// Maybe is better to split only the last column?
|
|
28
|
-
// TODO: After talking with Roto about this behaviour, he likes when we dont split the columns, I am keeping this for consistency of the current implementation.
|
|
28
|
+
// TODO: ED-26961 - After talking with Roto about this behaviour, he likes when we dont split the columns, I am keeping this for consistency of the current implementation.
|
|
29
29
|
splitCellsInColumns(tr, table.pos, rect.left, rect.right);
|
|
30
30
|
|
|
31
31
|
// Delete the columns
|
|
@@ -208,7 +208,7 @@ function parseDOMColumnWidths(
|
|
|
208
208
|
return cols;
|
|
209
209
|
}
|
|
210
210
|
|
|
211
|
-
// TODO: move to prosemirror-utils
|
|
211
|
+
// TODO: ED-26961 - move to prosemirror-utils
|
|
212
212
|
const replaceCells = (
|
|
213
213
|
tr: Transaction,
|
|
214
214
|
table: PMNode,
|
|
@@ -224,8 +224,7 @@ const replaceCells = (
|
|
|
224
224
|
for (let colIndex = 0; colIndex < row.childCount; colIndex++) {
|
|
225
225
|
const cell = row.child(colIndex);
|
|
226
226
|
|
|
227
|
-
//
|
|
228
|
-
// The rowIndex and colIndex are not accurate in a merged cell scenario
|
|
227
|
+
// TODO: ED-26961 - The rowIndex and colIndex are not accurate in a merged cell scenario
|
|
229
228
|
// e.g. table with 5 columns might have only one cell in a row, colIndex will be 1, where it should be 4
|
|
230
229
|
const node = modifyCell(cell, rowIndex, colIndex);
|
|
231
230
|
if (node.sameMarkup(cell) === false) {
|
|
@@ -109,7 +109,9 @@ export const transformSliceToRemoveNestedTables = (
|
|
|
109
109
|
const isCellPaste =
|
|
110
110
|
isPasteInTable &&
|
|
111
111
|
slice.content.childCount === 1 &&
|
|
112
|
-
slice.content.firstChild?.type === table
|
|
112
|
+
slice.content.firstChild?.type === table &&
|
|
113
|
+
slice.openStart !== 0 &&
|
|
114
|
+
slice.openEnd !== 0;
|
|
113
115
|
|
|
114
116
|
// if nesting is allowed we bump up the default nesting allowance to 2 to support
|
|
115
117
|
// two levels of nesting in nodes that support table nesting already such as layoutSection and expands
|
|
@@ -42,7 +42,7 @@ export const createPlugin = (
|
|
|
42
42
|
allTables: [],
|
|
43
43
|
}),
|
|
44
44
|
apply(tr, pluginState: ViewModeSortPluginState, oldState) {
|
|
45
|
-
// TODO - move this mode check to plugin creation if possible. Right now it's here because the initial state
|
|
45
|
+
// TODO: ED-26961 - move this mode check to plugin creation if possible. Right now it's here because the initial state
|
|
46
46
|
// does not appear correct when the plugin is created.
|
|
47
47
|
const { mode } = api.editorViewMode?.sharedState.currentState() || {};
|
|
48
48
|
if (mode !== 'view') {
|
|
@@ -95,7 +95,7 @@ export const createPlugin = (
|
|
|
95
95
|
(spec) => spec.tableId === tableId && spec.type === 'sorting-decoration',
|
|
96
96
|
);
|
|
97
97
|
|
|
98
|
-
// TODO - add support for keyboard only users
|
|
98
|
+
// TODO: ED-26961 - add support for keyboard only users
|
|
99
99
|
if (
|
|
100
100
|
(hoverTableMeta && !isTableInState) ||
|
|
101
101
|
sortMeta ||
|
|
@@ -272,7 +272,7 @@ export const createPlugin = (
|
|
|
272
272
|
props: {
|
|
273
273
|
handleDOMEvents: {
|
|
274
274
|
keydown: (view, event) => {
|
|
275
|
-
// TODO - fix the focus issue here, where toggling sort with a keypress loses focus
|
|
275
|
+
// TODO: ED-26961 - fix the focus issue here, where toggling sort with a keypress loses focus
|
|
276
276
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
277
277
|
const pluginState = key.getState(view.state)?.sort || {};
|
|
278
278
|
toggleSort(view, event, pluginState);
|
|
@@ -40,7 +40,7 @@ const getSortOrderFromTable = (tableNode: PMNode, sortIndex: number, direction:
|
|
|
40
40
|
|
|
41
41
|
const compareNodesInOrder = createCompareNodes(
|
|
42
42
|
{
|
|
43
|
-
// TODO - add inline card support
|
|
43
|
+
// TODO: ED-26961 - add inline card support
|
|
44
44
|
getInlineCardTextFromStore() {
|
|
45
45
|
return null;
|
|
46
46
|
},
|