@atlaskit/editor-plugin-table 2.1.4 → 2.1.5
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 +6 -0
- package/dist/cjs/plugins/table/commands/hover.js +1 -1
- package/dist/cjs/plugins/table/commands/sort.js +12 -14
- package/dist/cjs/plugins/table/index.js +28 -30
- package/dist/cjs/plugins/table/nodeviews/TableComponent.js +2 -2
- package/dist/cjs/plugins/table/nodeviews/update-overflow-shadows.js +1 -1
- package/dist/cjs/plugins/table/pm-plugins/main.js +1 -1
- package/dist/cjs/plugins/table/pm-plugins/table-add-width.js +2 -2
- package/dist/cjs/plugins/table/pm-plugins/table-local-id.js +1 -1
- package/dist/cjs/plugins/table/pm-plugins/table-resizing/plugin.js +1 -1
- package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/dom.js +3 -3
- package/dist/cjs/plugins/table/toolbar.js +2 -2
- package/dist/cjs/plugins/table/transforms/column-width.js +1 -1
- package/dist/cjs/plugins/table/ui/LayoutButton/index.js +1 -1
- package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
- package/dist/cjs/plugins/table/ui/ui-styles.js +1 -1
- package/dist/cjs/plugins/table/utils/column-controls.js +2 -2
- package/dist/cjs/plugins/table/utils/decoration.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/plugins/table/commands/hover.js +1 -1
- package/dist/es2019/plugins/table/commands/sort.js +14 -16
- package/dist/es2019/plugins/table/index.js +1 -4
- package/dist/es2019/plugins/table/nodeviews/TableComponent.js +2 -2
- package/dist/es2019/plugins/table/nodeviews/update-overflow-shadows.js +1 -1
- package/dist/es2019/plugins/table/pm-plugins/main.js +1 -1
- package/dist/es2019/plugins/table/pm-plugins/table-add-width.js +2 -3
- package/dist/es2019/plugins/table/pm-plugins/table-local-id.js +1 -1
- package/dist/es2019/plugins/table/pm-plugins/table-resizing/plugin.js +1 -1
- package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/dom.js +3 -3
- package/dist/es2019/plugins/table/toolbar.js +2 -2
- package/dist/es2019/plugins/table/transforms/column-width.js +1 -1
- package/dist/es2019/plugins/table/ui/LayoutButton/index.js +1 -1
- package/dist/es2019/plugins/table/ui/common-styles.js +1 -1
- package/dist/es2019/plugins/table/ui/ui-styles.js +1 -1
- package/dist/es2019/plugins/table/utils/column-controls.js +2 -2
- package/dist/es2019/plugins/table/utils/decoration.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/plugins/table/commands/hover.js +1 -1
- package/dist/esm/plugins/table/commands/sort.js +12 -14
- package/dist/esm/plugins/table/index.js +28 -30
- package/dist/esm/plugins/table/nodeviews/TableComponent.js +2 -2
- package/dist/esm/plugins/table/nodeviews/update-overflow-shadows.js +1 -1
- package/dist/esm/plugins/table/pm-plugins/main.js +1 -1
- package/dist/esm/plugins/table/pm-plugins/table-add-width.js +2 -3
- package/dist/esm/plugins/table/pm-plugins/table-local-id.js +1 -1
- package/dist/esm/plugins/table/pm-plugins/table-resizing/plugin.js +1 -1
- package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/dom.js +3 -3
- package/dist/esm/plugins/table/toolbar.js +2 -2
- package/dist/esm/plugins/table/transforms/column-width.js +1 -1
- package/dist/esm/plugins/table/ui/LayoutButton/index.js +1 -1
- package/dist/esm/plugins/table/ui/common-styles.js +1 -1
- package/dist/esm/plugins/table/ui/ui-styles.js +1 -1
- package/dist/esm/plugins/table/utils/column-controls.js +2 -2
- package/dist/esm/plugins/table/utils/decoration.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/plugins/table/nodeviews/TableComponent.d.ts +1 -1
- package/dist/types/plugins/table/nodeviews/update-overflow-shadows.d.ts +1 -2
- package/dist/types/plugins/table/pm-plugins/table-add-width.d.ts +1 -2
- package/dist/types/plugins/table/pm-plugins/table-resizing/utils/dom.d.ts +1 -1
- package/dist/types/plugins/table/ui/ui-styles.d.ts +1 -1
- package/dist/types/plugins/table/utils/column-controls.d.ts +1 -1
- package/dist/types/plugins/table/utils/decoration.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/nodeviews/TableComponent.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/nodeviews/update-overflow-shadows.d.ts +1 -2
- package/dist/types-ts4.5/plugins/table/pm-plugins/table-add-width.d.ts +1 -2
- package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/utils/dom.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/utils/column-controls.d.ts +1 -1
- package/dist/types-ts4.5/plugins/table/utils/decoration.d.ts +1 -1
- package/package.json +3 -3
- package/src/__tests__/unit/utils/column-controls.ts +4 -4
- package/src/plugins/table/commands/hover.ts +1 -1
- package/src/plugins/table/commands/sort.ts +13 -13
- package/src/plugins/table/index.tsx +3 -8
- package/src/plugins/table/nodeviews/TableComponent.tsx +1 -2
- package/src/plugins/table/nodeviews/update-overflow-shadows.ts +0 -2
- package/src/plugins/table/pm-plugins/main.ts +1 -1
- package/src/plugins/table/pm-plugins/table-add-width.ts +2 -3
- package/src/plugins/table/pm-plugins/table-local-id.ts +1 -1
- package/src/plugins/table/pm-plugins/table-resizing/plugin.ts +1 -1
- package/src/plugins/table/pm-plugins/table-resizing/utils/dom.ts +1 -3
- package/src/plugins/table/toolbar.tsx +0 -2
- package/src/plugins/table/transforms/column-width.ts +1 -1
- package/src/plugins/table/transforms/delete-columns.ts +1 -1
- package/src/plugins/table/ui/LayoutButton/index.tsx +1 -1
- package/src/plugins/table/ui/common-styles.ts +1 -1
- package/src/plugins/table/ui/ui-styles.ts +1 -1
- package/src/plugins/table/utils/column-controls.ts +2 -5
- package/src/plugins/table/utils/decoration.ts +1 -4
- package/src/plugins/table/utils/row-controls.ts +1 -1
|
@@ -2,12 +2,11 @@
|
|
|
2
2
|
* A plugin for scan the document, add width value to table's width attribute when necessary
|
|
3
3
|
*
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
5
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
7
6
|
import { akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
8
7
|
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
|
|
9
8
|
import { ReplaceStep } from 'prosemirror-transform';
|
|
10
|
-
const createPlugin =
|
|
9
|
+
const createPlugin = fullWidthEnabled => new SafePlugin({
|
|
11
10
|
appendTransaction: (transactions, _oldState, newState) => {
|
|
12
11
|
// When document first load in Confluence, initially it is an empty document
|
|
13
12
|
// and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
|
|
@@ -37,7 +36,7 @@ const createPlugin = (dispatch, fullWidthEnabled) => new SafePlugin({
|
|
|
37
36
|
const {
|
|
38
37
|
table
|
|
39
38
|
} = newState.schema.nodes;
|
|
40
|
-
newState.doc.forEach((node, offset
|
|
39
|
+
newState.doc.forEach((node, offset) => {
|
|
41
40
|
if (node.type === table) {
|
|
42
41
|
const width = node.attrs.width;
|
|
43
42
|
const layout = node.attrs.layout;
|
|
@@ -140,7 +140,7 @@ const createPlugin = dispatch => new SafePlugin({
|
|
|
140
140
|
if (!stepHasSlice(step)) {
|
|
141
141
|
continue;
|
|
142
142
|
}
|
|
143
|
-
step.slice.content.descendants(
|
|
143
|
+
step.slice.content.descendants(node => {
|
|
144
144
|
if (node.type === table) {
|
|
145
145
|
addedTableNodes.add(node);
|
|
146
146
|
}
|
|
@@ -34,7 +34,7 @@ export function createPlugin(dispatch, {
|
|
|
34
34
|
} = view;
|
|
35
35
|
const resizeHandlePos =
|
|
36
36
|
// we're setting `resizeHandlePos` via command in unit tests
|
|
37
|
-
getPluginState(state).resizeHandlePos || getResizeCellPos(view, event
|
|
37
|
+
getPluginState(state).resizeHandlePos || getResizeCellPos(view, event);
|
|
38
38
|
const {
|
|
39
39
|
dragging
|
|
40
40
|
} = getPluginState(state);
|
|
@@ -37,14 +37,14 @@ export const updateControls = getEditorFeatureFlags => state => {
|
|
|
37
37
|
}
|
|
38
38
|
const rightShadows = wrapper.parentElement.querySelectorAll(`.${ClassName.TABLE_RIGHT_SHADOW}`);
|
|
39
39
|
const leftShadows = wrapper.parentElement.querySelectorAll(`.${ClassName.TABLE_LEFT_SHADOW}`);
|
|
40
|
-
updateOverflowShadows(getEditorFeatureFlags)(
|
|
40
|
+
updateOverflowShadows(getEditorFeatureFlags)(wrapper, tableRef, rightShadows, leftShadows);
|
|
41
41
|
};
|
|
42
42
|
export const isClickNear = (event, click) => {
|
|
43
43
|
const dx = click.x - event.clientX,
|
|
44
44
|
dy = click.y - event.clientY;
|
|
45
45
|
return dx * dx + dy * dy < 100;
|
|
46
46
|
};
|
|
47
|
-
export const getResizeCellPos = (view, event
|
|
47
|
+
export const getResizeCellPos = (view, event) => {
|
|
48
48
|
const target = event.target;
|
|
49
49
|
if (!containsClassName(target, ClassName.RESIZE_HANDLE_DECORATION)) {
|
|
50
50
|
return null;
|
|
@@ -68,7 +68,7 @@ export const updateStickyMargins = table => {
|
|
|
68
68
|
};
|
|
69
69
|
export const applyColWidthsToStickyRow = (colGroup, headerRow) => {
|
|
70
70
|
// sync column widths for the sticky row
|
|
71
|
-
const newCols = colWidthsForRow(
|
|
71
|
+
const newCols = colWidthsForRow(headerRow);
|
|
72
72
|
if (newCols) {
|
|
73
73
|
headerRow.style.gridTemplateColumns = newCols;
|
|
74
74
|
}
|
|
@@ -301,7 +301,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
|
|
|
301
301
|
tableCellOptionsInFloatingToolbar
|
|
302
302
|
} = getEditorFeatureFlags() || {};
|
|
303
303
|
const cellItems = getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
|
|
304
|
-
const colorPicker = getColorPicker(state, menu, intl,
|
|
304
|
+
const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
|
|
305
305
|
|
|
306
306
|
// Check if we need to show confirm dialog for delete button
|
|
307
307
|
let confirmDialog;
|
|
@@ -397,7 +397,7 @@ const getCellItems = (pluginConfig, state, view, {
|
|
|
397
397
|
};
|
|
398
398
|
const getColorPicker = (state, menu, {
|
|
399
399
|
formatMessage
|
|
400
|
-
},
|
|
400
|
+
}, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) => {
|
|
401
401
|
var _node$attrs;
|
|
402
402
|
const {
|
|
403
403
|
targetCellPosition,
|
|
@@ -159,7 +159,7 @@ export const rescaleColumns = getEditorContainerWidth => (table, view) => tr =>
|
|
|
159
159
|
// we update the table to have 48px for each column
|
|
160
160
|
if (!hasTableBeenResized(table.node) && columnWidthUnresized <= tableCellMinWidth || hasTableBeenResized(table.node) && isMinCellWidthTable(table.node)) {
|
|
161
161
|
const widths = new Array(noOfColumns).fill(tableCellMinWidth);
|
|
162
|
-
const cols = widths.map((
|
|
162
|
+
const cols = widths.map((_, index) => ({
|
|
163
163
|
width: tableCellMinWidth,
|
|
164
164
|
minWidth: tableCellMinWidth,
|
|
165
165
|
index
|
|
@@ -31,7 +31,7 @@ class LayoutButton extends React.Component {
|
|
|
31
31
|
super(...args);
|
|
32
32
|
_defineProperty(this, "stickyButtonRef", /*#__PURE__*/createRef());
|
|
33
33
|
_defineProperty(this, "resizeObserver", new ResizeObserver(entries => {
|
|
34
|
-
entries.forEach(
|
|
34
|
+
entries.forEach(() => {
|
|
35
35
|
const resizeButton = this.stickyButtonRef.current;
|
|
36
36
|
const tableWrapper = this.props.targetRef;
|
|
37
37
|
if (resizeButton && tableWrapper) {
|
|
@@ -145,7 +145,7 @@ export const insertRowButtonWrapper = css`
|
|
|
145
145
|
left: ${tableInsertColumnButtonSize - 1}px;
|
|
146
146
|
`)}
|
|
147
147
|
`;
|
|
148
|
-
export const columnControlsLineMarker =
|
|
148
|
+
export const columnControlsLineMarker = () => css`
|
|
149
149
|
.${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
|
|
150
150
|
table
|
|
151
151
|
tr:first-of-type
|
|
@@ -122,7 +122,7 @@ const getRelativeDomCellWidths = ({
|
|
|
122
122
|
const totalCalculatedCellWidth = cellColWidths.reduce((acc, cellColWidth) => acc + cellColWidth, 0);
|
|
123
123
|
return cellColWidths.map(cellColWidth => width * (cellColWidth / totalCalculatedCellWidth));
|
|
124
124
|
};
|
|
125
|
-
export const colWidthsForRow =
|
|
125
|
+
export const colWidthsForRow = tr => {
|
|
126
126
|
// get the colspans
|
|
127
127
|
const rowColSpans = maphElem(tr, cell => Number(cell.getAttribute('colspan') || 1 /* default to span of 1 */));
|
|
128
128
|
|
|
@@ -145,7 +145,7 @@ export const colWidthsForRow = (colGroup, tr) => {
|
|
|
145
145
|
|
|
146
146
|
// reverse engineer cell widths from table widths
|
|
147
147
|
let domBasedCellWidths = [];
|
|
148
|
-
cellInfos.map(
|
|
148
|
+
cellInfos.map(cell => {
|
|
149
149
|
domBasedCellWidths.push(...getRelativeDomCellWidths(cell));
|
|
150
150
|
});
|
|
151
151
|
if (cellInfos.reduce((acc, cell) => acc + cell.width, 0) !== 0) {
|
|
@@ -6,7 +6,7 @@ import { TableCssClassName as ClassName, TableDecorations } from '../types';
|
|
|
6
6
|
const filterDecorationByKey = (key, decorationSet) => decorationSet.find(undefined, undefined, spec => spec.key.indexOf(key) > -1);
|
|
7
7
|
export const findColumnControlSelectedDecoration = decorationSet => filterDecorationByKey(TableDecorations.COLUMN_SELECTED, decorationSet);
|
|
8
8
|
export const findControlsHoverDecoration = decorationSet => filterDecorationByKey(TableDecorations.ALL_CONTROLS_HOVER, decorationSet);
|
|
9
|
-
export const createCellHoverDecoration =
|
|
9
|
+
export const createCellHoverDecoration = cells => cells.map(cell => Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
|
|
10
10
|
class: ClassName.HOVERED_CELL_WARNING
|
|
11
11
|
}, {
|
|
12
12
|
key: TableDecorations.CELL_CONTROLS_HOVER
|
package/dist/es2019/version.json
CHANGED
|
@@ -30,7 +30,7 @@ export var hoverMergedCells = function hoverMergedCells() {
|
|
|
30
30
|
node: table.node.nodeAt(pos)
|
|
31
31
|
};
|
|
32
32
|
});
|
|
33
|
-
var decorations = createCellHoverDecoration(mergedCells
|
|
33
|
+
var decorations = createCellHoverDecoration(mergedCells);
|
|
34
34
|
return {
|
|
35
35
|
type: 'HOVER_CELLS',
|
|
36
36
|
data: {
|
|
@@ -5,21 +5,19 @@ import { convertArrayOfRowsToTableNode, convertTableNodeToArrayOfRows, findTable
|
|
|
5
5
|
import { createCompareNodes } from '@atlaskit/editor-common/utils';
|
|
6
6
|
import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
|
|
7
7
|
import { TableSortStep, TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
|
|
8
|
-
function createGetInlineCardTextFromStore(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
};
|
|
19
|
-
}
|
|
8
|
+
var createGetInlineCardTextFromStore = function createGetInlineCardTextFromStore(attrs) {
|
|
9
|
+
var _ref = attrs,
|
|
10
|
+
data = _ref.data;
|
|
11
|
+
if (data && (data.name || data.title)) {
|
|
12
|
+
return data.name || data.title;
|
|
13
|
+
}
|
|
14
|
+
var _ref2 = attrs,
|
|
15
|
+
cardUrl = _ref2.url;
|
|
16
|
+
return cardUrl;
|
|
17
|
+
};
|
|
20
18
|
export var sortByColumn = function sortByColumn(columnIndex) {
|
|
21
19
|
var order = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SortOrder.DESC;
|
|
22
|
-
return createCommand(function (
|
|
20
|
+
return createCommand(function () {
|
|
23
21
|
return {
|
|
24
22
|
type: 'SORT_TABLE',
|
|
25
23
|
data: {
|
|
@@ -45,7 +43,7 @@ export var sortByColumn = function sortByColumn(columnIndex) {
|
|
|
45
43
|
headerRow = tableArray.shift();
|
|
46
44
|
}
|
|
47
45
|
var compareNodesInOrder = createCompareNodes({
|
|
48
|
-
getInlineCardTextFromStore: createGetInlineCardTextFromStore
|
|
46
|
+
getInlineCardTextFromStore: createGetInlineCardTextFromStore
|
|
49
47
|
}, order);
|
|
50
48
|
var sortedTable = tableArray.sort(function (rowA, rowB) {
|
|
51
49
|
return compareNodesInOrder(rowA[columnIndex], rowB[columnIndex]);
|
|
@@ -135,8 +135,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
|
|
|
135
135
|
plugin: function plugin() {
|
|
136
136
|
return tableEditing({
|
|
137
137
|
reportFixedTable: function reportFixedTable(_ref5) {
|
|
138
|
-
var
|
|
139
|
-
tr = _ref5.tr,
|
|
138
|
+
var tr = _ref5.tr,
|
|
140
139
|
reason = _ref5.reason;
|
|
141
140
|
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
142
141
|
action: TABLE_ACTION.FIXED,
|
|
@@ -167,9 +166,8 @@ var tablesPlugin = function tablesPlugin(options, api) {
|
|
|
167
166
|
}
|
|
168
167
|
}, {
|
|
169
168
|
name: 'tableAddWidth',
|
|
170
|
-
plugin: function plugin(
|
|
171
|
-
|
|
172
|
-
return getBooleanFF('platform.editor.custom-table-width') && options ? createTableAddWidthPlugin(dispatch, options.fullWidthEnabled || false) : undefined;
|
|
169
|
+
plugin: function plugin() {
|
|
170
|
+
return getBooleanFF('platform.editor.custom-table-width') && options ? createTableAddWidthPlugin(options.fullWidthEnabled || false) : undefined;
|
|
173
171
|
}
|
|
174
172
|
}, {
|
|
175
173
|
name: 'tableGetEditorViewReferencePlugin',
|
|
@@ -199,12 +197,12 @@ var tablesPlugin = function tablesPlugin(options, api) {
|
|
|
199
197
|
}
|
|
200
198
|
return plugins;
|
|
201
199
|
},
|
|
202
|
-
contentComponent: function contentComponent(
|
|
203
|
-
var editorView =
|
|
204
|
-
popupsMountPoint =
|
|
205
|
-
popupsBoundariesElement =
|
|
206
|
-
popupsScrollableElement =
|
|
207
|
-
dispatchAnalyticsEvent =
|
|
200
|
+
contentComponent: function contentComponent(_ref8) {
|
|
201
|
+
var editorView = _ref8.editorView,
|
|
202
|
+
popupsMountPoint = _ref8.popupsMountPoint,
|
|
203
|
+
popupsBoundariesElement = _ref8.popupsBoundariesElement,
|
|
204
|
+
popupsScrollableElement = _ref8.popupsScrollableElement,
|
|
205
|
+
dispatchAnalyticsEvent = _ref8.dispatchAnalyticsEvent;
|
|
208
206
|
return /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
209
207
|
component: ACTION_SUBJECT.TABLES_PLUGIN,
|
|
210
208
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
@@ -215,25 +213,25 @@ var tablesPlugin = function tablesPlugin(options, api) {
|
|
|
215
213
|
tableResizingPluginState: tableResizingPluginKey,
|
|
216
214
|
stickyHeadersState: stickyHeadersPluginKey
|
|
217
215
|
},
|
|
218
|
-
render: function render(
|
|
219
|
-
var resizingPluginState =
|
|
220
|
-
stickyHeadersState =
|
|
221
|
-
tablePluginState =
|
|
216
|
+
render: function render(_ref9) {
|
|
217
|
+
var resizingPluginState = _ref9.tableResizingPluginState,
|
|
218
|
+
stickyHeadersState = _ref9.stickyHeadersState,
|
|
219
|
+
tablePluginState = _ref9.tablePluginState;
|
|
222
220
|
var state = editorView.state;
|
|
223
221
|
var isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
|
|
224
|
-
var
|
|
225
|
-
tableNode =
|
|
226
|
-
tablePos =
|
|
227
|
-
targetCellPosition =
|
|
228
|
-
isContextualMenuOpen =
|
|
229
|
-
layout =
|
|
230
|
-
tableRef =
|
|
231
|
-
pluginConfig =
|
|
232
|
-
insertColumnButtonIndex =
|
|
233
|
-
insertRowButtonIndex =
|
|
234
|
-
isHeaderColumnEnabled =
|
|
235
|
-
isHeaderRowEnabled =
|
|
236
|
-
tableWrapperTarget =
|
|
222
|
+
var _ref10 = tablePluginState,
|
|
223
|
+
tableNode = _ref10.tableNode,
|
|
224
|
+
tablePos = _ref10.tablePos,
|
|
225
|
+
targetCellPosition = _ref10.targetCellPosition,
|
|
226
|
+
isContextualMenuOpen = _ref10.isContextualMenuOpen,
|
|
227
|
+
layout = _ref10.layout,
|
|
228
|
+
tableRef = _ref10.tableRef,
|
|
229
|
+
pluginConfig = _ref10.pluginConfig,
|
|
230
|
+
insertColumnButtonIndex = _ref10.insertColumnButtonIndex,
|
|
231
|
+
insertRowButtonIndex = _ref10.insertRowButtonIndex,
|
|
232
|
+
isHeaderColumnEnabled = _ref10.isHeaderColumnEnabled,
|
|
233
|
+
isHeaderRowEnabled = _ref10.isHeaderRowEnabled,
|
|
234
|
+
tableWrapperTarget = _ref10.tableWrapperTarget;
|
|
237
235
|
var allowControls = pluginConfig.allowControls;
|
|
238
236
|
var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
|
|
239
237
|
var LayoutContent = getBooleanFF('platform.editor.custom-table-width') ? null : isLayoutSupported(state) && options && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
|
|
@@ -299,8 +297,8 @@ var tablesPlugin = function tablesPlugin(options, api) {
|
|
|
299
297
|
}));
|
|
300
298
|
},
|
|
301
299
|
pluginsOptions: {
|
|
302
|
-
quickInsert: function quickInsert(
|
|
303
|
-
var formatMessage =
|
|
300
|
+
quickInsert: function quickInsert(_ref11) {
|
|
301
|
+
var formatMessage = _ref11.formatMessage;
|
|
304
302
|
return [{
|
|
305
303
|
id: 'table',
|
|
306
304
|
title: formatMessage(messages.table),
|
|
@@ -314,7 +314,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
314
314
|
}
|
|
315
315
|
}, {
|
|
316
316
|
key: "componentDidUpdate",
|
|
317
|
-
value: function componentDidUpdate(
|
|
317
|
+
value: function componentDidUpdate() {
|
|
318
318
|
var _this$props7 = this.props,
|
|
319
319
|
view = _this$props7.view,
|
|
320
320
|
getNode = _this$props7.getNode,
|
|
@@ -367,7 +367,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
367
367
|
if (this.wrapper && parent) {
|
|
368
368
|
var rightShadows = parent.querySelectorAll(".".concat(ClassName.TABLE_RIGHT_SHADOW));
|
|
369
369
|
var leftShadows = parent.querySelectorAll(".".concat(ClassName.TABLE_LEFT_SHADOW));
|
|
370
|
-
updateOverflowShadows(this.props.getEditorFeatureFlags)(this.
|
|
370
|
+
updateOverflowShadows(this.props.getEditorFeatureFlags)(this.wrapper, this.table, rightShadows, leftShadows);
|
|
371
371
|
}
|
|
372
372
|
}
|
|
373
373
|
}, {
|
|
@@ -14,7 +14,7 @@ export var updateShadowListForStickyStyles = function updateShadowListForStickyS
|
|
|
14
14
|
* if `overflowShadowOptimization` is enabled, this will exit early.
|
|
15
15
|
*/
|
|
16
16
|
export var updateOverflowShadows = function updateOverflowShadows(getEditorFeatureFlags) {
|
|
17
|
-
return function (
|
|
17
|
+
return function (wrapper, table, rightShadows, leftShadows) {
|
|
18
18
|
var _getEditorFeatureFlag;
|
|
19
19
|
if (((_getEditorFeatureFlag = getEditorFeatureFlags()) === null || _getEditorFeatureFlag === void 0 ? void 0 : _getEditorFeatureFlag.tableOverflowShadowsOptimization) === true) {
|
|
20
20
|
return false;
|
|
@@ -216,7 +216,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
|
|
|
216
216
|
var maybeTr = closestElement(domRef, 'tr');
|
|
217
217
|
return maybeTr ? maybeTr.classList.contains('sticky') : false;
|
|
218
218
|
},
|
|
219
|
-
handleTextInput: function handleTextInput(_ref3,
|
|
219
|
+
handleTextInput: function handleTextInput(_ref3, _from, _to, text) {
|
|
220
220
|
var state = _ref3.state,
|
|
221
221
|
dispatch = _ref3.dispatch;
|
|
222
222
|
var tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
|
|
@@ -7,12 +7,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
7
7
|
* A plugin for scan the document, add width value to table's width attribute when necessary
|
|
8
8
|
*
|
|
9
9
|
*/
|
|
10
|
-
|
|
11
10
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
12
11
|
import { akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
13
12
|
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
|
|
14
13
|
import { ReplaceStep } from 'prosemirror-transform';
|
|
15
|
-
var createPlugin = function createPlugin(
|
|
14
|
+
var createPlugin = function createPlugin(fullWidthEnabled) {
|
|
16
15
|
return new SafePlugin({
|
|
17
16
|
appendTransaction: function appendTransaction(transactions, _oldState, newState) {
|
|
18
17
|
// When document first load in Confluence, initially it is an empty document
|
|
@@ -41,7 +40,7 @@ var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
|
|
|
41
40
|
}
|
|
42
41
|
var tr = newState.tr;
|
|
43
42
|
var table = newState.schema.nodes.table;
|
|
44
|
-
newState.doc.forEach(function (node, offset
|
|
43
|
+
newState.doc.forEach(function (node, offset) {
|
|
45
44
|
if (node.type === table) {
|
|
46
45
|
var width = node.attrs.width;
|
|
47
46
|
var layout = node.attrs.layout;
|
|
@@ -143,7 +143,7 @@ var createPlugin = function createPlugin(dispatch) {
|
|
|
143
143
|
if (!stepHasSlice(step)) {
|
|
144
144
|
continue;
|
|
145
145
|
}
|
|
146
|
-
step.slice.content.descendants(function (node
|
|
146
|
+
step.slice.content.descendants(function (node) {
|
|
147
147
|
if (node.type === table) {
|
|
148
148
|
addedTableNodes.add(node);
|
|
149
149
|
}
|
|
@@ -31,7 +31,7 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
|
|
|
31
31
|
var state = view.state;
|
|
32
32
|
var resizeHandlePos =
|
|
33
33
|
// we're setting `resizeHandlePos` via command in unit tests
|
|
34
|
-
getPluginState(state).resizeHandlePos || getResizeCellPos(view, event
|
|
34
|
+
getPluginState(state).resizeHandlePos || getResizeCellPos(view, event);
|
|
35
35
|
var _getPluginState = getPluginState(state),
|
|
36
36
|
dragging = _getPluginState.dragging;
|
|
37
37
|
if (resizeHandlePos !== null && !dragging) {
|
|
@@ -37,7 +37,7 @@ export var updateControls = function updateControls(getEditorFeatureFlags) {
|
|
|
37
37
|
}
|
|
38
38
|
var rightShadows = wrapper.parentElement.querySelectorAll(".".concat(ClassName.TABLE_RIGHT_SHADOW));
|
|
39
39
|
var leftShadows = wrapper.parentElement.querySelectorAll(".".concat(ClassName.TABLE_LEFT_SHADOW));
|
|
40
|
-
updateOverflowShadows(getEditorFeatureFlags)(
|
|
40
|
+
updateOverflowShadows(getEditorFeatureFlags)(wrapper, tableRef, rightShadows, leftShadows);
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
43
|
export var isClickNear = function isClickNear(event, click) {
|
|
@@ -45,7 +45,7 @@ export var isClickNear = function isClickNear(event, click) {
|
|
|
45
45
|
dy = click.y - event.clientY;
|
|
46
46
|
return dx * dx + dy * dy < 100;
|
|
47
47
|
};
|
|
48
|
-
export var getResizeCellPos = function getResizeCellPos(view, event
|
|
48
|
+
export var getResizeCellPos = function getResizeCellPos(view, event) {
|
|
49
49
|
var target = event.target;
|
|
50
50
|
if (!containsClassName(target, ClassName.RESIZE_HANDLE_DECORATION)) {
|
|
51
51
|
return null;
|
|
@@ -69,7 +69,7 @@ export var updateStickyMargins = function updateStickyMargins(table) {
|
|
|
69
69
|
};
|
|
70
70
|
export var applyColWidthsToStickyRow = function applyColWidthsToStickyRow(colGroup, headerRow) {
|
|
71
71
|
// sync column widths for the sticky row
|
|
72
|
-
var newCols = colWidthsForRow(
|
|
72
|
+
var newCols = colWidthsForRow(headerRow);
|
|
73
73
|
if (newCols) {
|
|
74
74
|
headerRow.style.gridTemplateColumns = newCols;
|
|
75
75
|
}
|
|
@@ -299,7 +299,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
|
|
|
299
299
|
var _ref3 = getEditorFeatureFlags() || {},
|
|
300
300
|
tableCellOptionsInFloatingToolbar = _ref3.tableCellOptionsInFloatingToolbar;
|
|
301
301
|
var cellItems = getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
|
|
302
|
-
var colorPicker = getColorPicker(state, menu, intl,
|
|
302
|
+
var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
|
|
303
303
|
|
|
304
304
|
// Check if we need to show confirm dialog for delete button
|
|
305
305
|
var confirmDialog;
|
|
@@ -401,7 +401,7 @@ var getCellItems = function getCellItems(pluginConfig, state, view, _ref4, getEd
|
|
|
401
401
|
}
|
|
402
402
|
return [];
|
|
403
403
|
};
|
|
404
|
-
var getColorPicker = function getColorPicker(state, menu, _ref5,
|
|
404
|
+
var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
|
|
405
405
|
var _node$attrs;
|
|
406
406
|
var formatMessage = _ref5.formatMessage;
|
|
407
407
|
var _getPluginState2 = getPluginState(state),
|
|
@@ -161,7 +161,7 @@ export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
|
|
|
161
161
|
// we update the table to have 48px for each column
|
|
162
162
|
if (!hasTableBeenResized(table.node) && columnWidthUnresized <= tableCellMinWidth || hasTableBeenResized(table.node) && isMinCellWidthTable(table.node)) {
|
|
163
163
|
var widths = new Array(noOfColumns).fill(tableCellMinWidth);
|
|
164
|
-
var cols = widths.map(function (
|
|
164
|
+
var cols = widths.map(function (_, index) {
|
|
165
165
|
return {
|
|
166
166
|
width: tableCellMinWidth,
|
|
167
167
|
minWidth: tableCellMinWidth,
|
|
@@ -49,7 +49,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
|
|
|
49
49
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
50
50
|
_defineProperty(_assertThisInitialized(_this), "stickyButtonRef", /*#__PURE__*/createRef());
|
|
51
51
|
_defineProperty(_assertThisInitialized(_this), "resizeObserver", new ResizeObserver(function (entries) {
|
|
52
|
-
entries.forEach(function (
|
|
52
|
+
entries.forEach(function () {
|
|
53
53
|
var resizeButton = _this.stickyButtonRef.current;
|
|
54
54
|
var tableWrapper = _this.props.targetRef;
|
|
55
55
|
if (resizeButton && tableWrapper) {
|
|
@@ -33,7 +33,7 @@ var breakoutWidthStyling = function breakoutWidthStyling(useFragmentMarkBreakout
|
|
|
33
33
|
// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
|
|
34
34
|
export var tableStyles = function tableStyles(props) {
|
|
35
35
|
var _props$featureFlags, _props$featureFlags$u, _props$featureFlags2, _props$featureFlags3;
|
|
36
|
-
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n td.", ", td.", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling((_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true), columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
|
|
36
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n td.", ", td.", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), ClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)", tableSharedStyle(props), columnControlsLineMarker(), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, "var(--ds-surface, white)", ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, "var(--ds-surface, white)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, "var(--ds-surface, white)", tableToolbarSize, ClassName.TABLE_STICKY, "var(--ds-surface, green)", stickyRowOffsetTop, stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(N40A, ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling((_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true), columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableHeaderCellBackgroundColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n bottom: -1px;\n left: -11px;\n "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(tableToolbarSize, "px;\n\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableHeaderCellBackgroundColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "var(--ds-background-selected, ".concat(tableToolbarSelectedColor, ")"), akEditorUnitZIndex, "var(--ds-text-selected, ".concat(N0, ")"), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(tableToolbarDeleteColor, ")"), tableBorderDeleteColor, "var(--ds-text-danger, ".concat(R500, ")"), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
|
|
37
37
|
};
|
|
38
38
|
export var tableFullPageEditorStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n width: 100%;\n }\n"])), ClassName.TABLE_NODE_WRAPPER);
|
|
39
39
|
export var tableCommentEditorStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
|
|
@@ -36,7 +36,7 @@ var InsertButtonHover = function InsertButtonHover() {
|
|
|
36
36
|
};
|
|
37
37
|
export var insertColumnButtonWrapper = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n width: 2px;\n left: 9px;\n "));
|
|
38
38
|
export var insertRowButtonWrapper = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n height: 2px;\n top: -11px;\n left: ".concat(tableInsertColumnButtonSize - 1, "px;\n ")));
|
|
39
|
-
export var columnControlsLineMarker = function columnControlsLineMarker(
|
|
39
|
+
export var columnControlsLineMarker = function columnControlsLineMarker() {
|
|
40
40
|
return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n .", ".", "\n table\n tr:first-of-type\n td,\n .", ".", "\n table\n tr:first-of-type\n th {\n position: relative;\n }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS);
|
|
41
41
|
};
|
|
42
42
|
export var DeleteButton = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n .", " {\n ", "\n }\n }\n\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat("var(--ds-background-neutral, ".concat(N20A, ")"), ";\n color: ", "var(--ds-icon, ".concat(N300, ")"), ";\n ")), ClassName.CONTROLS_DELETE_BUTTON, "var(--ds-background-danger-bold, ".concat(R300, ")"), "var(--ds-icon-inverse, white)");
|
|
@@ -131,7 +131,7 @@ var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
|
|
|
131
131
|
return width * (cellColWidth / totalCalculatedCellWidth);
|
|
132
132
|
});
|
|
133
133
|
};
|
|
134
|
-
export var colWidthsForRow = function colWidthsForRow(
|
|
134
|
+
export var colWidthsForRow = function colWidthsForRow(tr) {
|
|
135
135
|
// get the colspans
|
|
136
136
|
var rowColSpans = maphElem(tr, function (cell) {
|
|
137
137
|
return Number(cell.getAttribute('colspan') || 1 /* default to span of 1 */);
|
|
@@ -158,7 +158,7 @@ export var colWidthsForRow = function colWidthsForRow(colGroup, tr) {
|
|
|
158
158
|
|
|
159
159
|
// reverse engineer cell widths from table widths
|
|
160
160
|
var domBasedCellWidths = [];
|
|
161
|
-
cellInfos.map(function (cell
|
|
161
|
+
cellInfos.map(function (cell) {
|
|
162
162
|
domBasedCellWidths.push.apply(domBasedCellWidths, _toConsumableArray(getRelativeDomCellWidths(cell)));
|
|
163
163
|
});
|
|
164
164
|
if (cellInfos.reduce(function (acc, cell) {
|