@atlaskit/editor-plugin-table 1.2.0 → 1.2.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 +17 -0
- package/dist/cjs/plugins/table/index.js +2 -1
- package/dist/cjs/plugins/table/nodeviews/TableComponent.js +1 -2
- package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +32 -17
- package/dist/cjs/plugins/table/pm-plugins/table-resizing/event-handlers.js +1 -5
- package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/misc.js +3 -38
- package/dist/cjs/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +16 -3
- package/dist/cjs/plugins/table/ui/FloatingContextualMenu/index.js +6 -3
- package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
- package/dist/cjs/types/i18n.js +5 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/plugins/table/index.js +2 -1
- package/dist/es2019/plugins/table/nodeviews/TableComponent.js +1 -2
- package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +32 -17
- package/dist/es2019/plugins/table/pm-plugins/table-resizing/event-handlers.js +1 -5
- package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/misc.js +1 -37
- package/dist/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +18 -4
- package/dist/es2019/plugins/table/ui/FloatingContextualMenu/index.js +6 -3
- package/dist/es2019/plugins/table/ui/common-styles.js +1 -0
- package/dist/es2019/types/i18n.js +1 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/plugins/table/index.js +2 -1
- package/dist/esm/plugins/table/nodeviews/TableComponent.js +1 -2
- package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js +32 -17
- package/dist/esm/plugins/table/pm-plugins/table-resizing/event-handlers.js +1 -5
- package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/misc.js +1 -35
- package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +17 -4
- package/dist/esm/plugins/table/ui/FloatingContextualMenu/index.js +6 -3
- package/dist/esm/plugins/table/ui/common-styles.js +1 -1
- package/dist/esm/types/i18n.js +1 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.d.ts +2 -2
- package/dist/types/plugins/table/pm-plugins/table-resizing/utils/misc.d.ts +1 -2
- package/dist/types/plugins/table/ui/FloatingContextualMenu/ContextualMenu.d.ts +2 -1
- package/dist/types/plugins/table/ui/FloatingContextualMenu/index.d.ts +3 -2
- package/dist/types/types/i18n.d.ts +5 -0
- package/package.json +7 -7
- package/src/__tests__/integration/horizontal-scroll.ts +4 -9
- package/src/__tests__/integration/sticky-header.ts +61 -1
- package/src/__tests__/unit/commands/insert.ts +8 -8
- package/src/__tests__/unit/nodeviews/cell.ts +14 -0
- package/src/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx +2 -2
- package/src/__tests__/unit/ui/ContextualMenu.tsx +2 -0
- package/src/__tests__/unit/ui/FloatingContextualMenu.tsx +1 -0
- package/src/plugins/table/index.tsx +4 -0
- package/src/plugins/table/nodeviews/TableComponent.tsx +1 -2
- package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts +40 -23
- package/src/plugins/table/pm-plugins/table-resizing/event-handlers.ts +1 -9
- package/src/plugins/table/pm-plugins/table-resizing/utils/misc.ts +1 -57
- package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx +21 -2
- package/src/plugins/table/ui/FloatingContextualMenu/index.tsx +8 -1
- package/src/plugins/table/ui/common-styles.ts +1 -0
- package/src/types/i18n.ts +5 -0
|
@@ -3,8 +3,6 @@ import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-c
|
|
|
3
3
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorWideLayoutWidth, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
4
4
|
import { containsClassName } from '@atlaskit/editor-common/utils';
|
|
5
5
|
import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
|
|
6
|
-
import { gridSize } from '@atlaskit/theme/constants';
|
|
7
|
-
import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
|
|
8
6
|
export const tableLayoutToSize = {
|
|
9
7
|
default: akEditorDefaultLayoutWidth,
|
|
10
8
|
wide: akEditorWideLayoutWidth,
|
|
@@ -73,43 +71,9 @@ export const getTableMaxWidth = ({
|
|
|
73
71
|
}) => {
|
|
74
72
|
const containerWidth = getEditorContainerWidth();
|
|
75
73
|
const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
|
|
76
|
-
|
|
77
|
-
// TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
|
|
78
|
-
const parentActualWidth = getParentWidthWithoutPadding(parentWidth, tableStart, state);
|
|
79
|
-
let maxWidth = parentActualWidth || getLayoutSize(layout, containerWidth.width, {});
|
|
74
|
+
let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
|
|
80
75
|
if (table.attrs.isNumberColumnEnabled) {
|
|
81
76
|
maxWidth -= akEditorTableNumberColumnWidth;
|
|
82
77
|
}
|
|
83
78
|
return maxWidth;
|
|
84
|
-
};
|
|
85
|
-
export const getParentWidthWithoutPadding = (parentWidth, tableStartPos, state) => {
|
|
86
|
-
const node = getNestedParentNode(tableStartPos, state);
|
|
87
|
-
if (!node) {
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
const {
|
|
91
|
-
schema
|
|
92
|
-
} = state;
|
|
93
|
-
if (node.type === schema.nodes.expand) {
|
|
94
|
-
// padding
|
|
95
|
-
parentWidth -= gridSize() * 2;
|
|
96
|
-
// gutter offset
|
|
97
|
-
parentWidth += gridSize() * 1.5 * 2;
|
|
98
|
-
// padding right
|
|
99
|
-
parentWidth -= gridSize();
|
|
100
|
-
// padding left
|
|
101
|
-
parentWidth -= gridSize() * 4 - gridSize() / 2;
|
|
102
|
-
}
|
|
103
|
-
return parentWidth;
|
|
104
|
-
};
|
|
105
|
-
|
|
106
|
-
// copy of getNestedParentNode() from packages/editor/editor-common/src/node-width/index.ts
|
|
107
|
-
// to be removed later when we will move getParentWidthWithoutPadding() logic to editor-common
|
|
108
|
-
const getNestedParentNode = (tablePos, state) => {
|
|
109
|
-
if (tablePos === undefined) {
|
|
110
|
-
return null;
|
|
111
|
-
}
|
|
112
|
-
const $pos = state.doc.resolve(tablePos);
|
|
113
|
-
const parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
|
|
114
|
-
return parent ? parent.node : null;
|
|
115
79
|
};
|
|
@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
|
|
|
5
5
|
import { splitCell } from '@atlaskit/editor-tables/utils';
|
|
6
6
|
import { defineMessages, injectIntl } from 'react-intl-next';
|
|
7
7
|
import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
|
|
8
|
-
import { ColorPalette, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
|
|
8
|
+
import { ColorPalette, backgroundPaletteTooltipMessages, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
|
|
9
9
|
import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
10
10
|
import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
|
|
11
11
|
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
@@ -94,12 +94,16 @@ export class ContextualMenu extends Component {
|
|
|
94
94
|
intl: {
|
|
95
95
|
formatMessage
|
|
96
96
|
},
|
|
97
|
-
editorView
|
|
97
|
+
editorView,
|
|
98
|
+
getEditorFeatureFlags
|
|
98
99
|
} = this.props;
|
|
99
100
|
const items = [];
|
|
100
101
|
const {
|
|
101
102
|
isSubmenuOpen
|
|
102
103
|
} = this.state;
|
|
104
|
+
const {
|
|
105
|
+
useSomewhatSemanticTextColorNames
|
|
106
|
+
} = getEditorFeatureFlags();
|
|
103
107
|
// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
|
|
104
108
|
const {
|
|
105
109
|
targetCellPosition,
|
|
@@ -126,9 +130,19 @@ export class ContextualMenu extends Component {
|
|
|
126
130
|
ref: this.handleSubMenuRef
|
|
127
131
|
}, jsx(ColorPalette, {
|
|
128
132
|
cols: 7,
|
|
129
|
-
palette: cellBackgroundColorPalette,
|
|
130
133
|
onClick: this.setColor,
|
|
131
|
-
selectedColor: background
|
|
134
|
+
selectedColor: background,
|
|
135
|
+
paletteOptions: {
|
|
136
|
+
palette: cellBackgroundColorPalette,
|
|
137
|
+
paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
|
|
138
|
+
// We did not want to create new FF or update
|
|
139
|
+
// useSomewhatSemanticTextColorNames name
|
|
140
|
+
// because it is temporary and require extra work.
|
|
141
|
+
// So even though it says text color names,
|
|
142
|
+
// we are going to use for all color pickers
|
|
143
|
+
// such as text, background and table charts.
|
|
144
|
+
showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
|
|
145
|
+
}
|
|
132
146
|
})))
|
|
133
147
|
});
|
|
134
148
|
}
|
|
@@ -34,7 +34,8 @@ const FloatingContextualMenu = ({
|
|
|
34
34
|
isOpen,
|
|
35
35
|
pluginConfig,
|
|
36
36
|
editorAnalyticsAPI,
|
|
37
|
-
getEditorContainerWidth
|
|
37
|
+
getEditorContainerWidth,
|
|
38
|
+
getEditorFeatureFlags
|
|
38
39
|
}) => {
|
|
39
40
|
// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
|
|
40
41
|
const {
|
|
@@ -69,7 +70,8 @@ const FloatingContextualMenu = ({
|
|
|
69
70
|
,
|
|
70
71
|
zIndex: akEditorFloatingOverlapPanelZIndex,
|
|
71
72
|
forcePlacement: true,
|
|
72
|
-
offset: [-7, 0]
|
|
73
|
+
offset: [-7, 0],
|
|
74
|
+
stick: true
|
|
73
75
|
}, jsx("div", {
|
|
74
76
|
css: tablePopupStyles
|
|
75
77
|
}, jsx(ContextualMenu, {
|
|
@@ -83,7 +85,8 @@ const FloatingContextualMenu = ({
|
|
|
83
85
|
selectionRect: selectionRect,
|
|
84
86
|
boundariesElement: boundariesElement,
|
|
85
87
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
86
|
-
getEditorContainerWidth: getEditorContainerWidth
|
|
88
|
+
getEditorContainerWidth: getEditorContainerWidth,
|
|
89
|
+
getEditorFeatureFlags: getEditorFeatureFlags
|
|
87
90
|
})));
|
|
88
91
|
};
|
|
89
92
|
FloatingContextualMenu.displayName = 'FloatingContextualMenu';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/es2019/version.json
CHANGED
|
@@ -266,7 +266,8 @@ var tablesPlugin = function tablesPlugin(options) {
|
|
|
266
266
|
isOpen: Boolean(isContextualMenuOpen),
|
|
267
267
|
pluginConfig: pluginConfig,
|
|
268
268
|
editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
|
|
269
|
-
getEditorContainerWidth: defaultGetEditorContainerWidth
|
|
269
|
+
getEditorContainerWidth: defaultGetEditorContainerWidth,
|
|
270
|
+
getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
|
|
270
271
|
}), allowControls && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
|
|
271
272
|
editorView: editorView,
|
|
272
273
|
selection: editorView.state.selection,
|
|
@@ -31,7 +31,6 @@ import { containsHeaderRow, tablesHaveDifferentColumnWidths, tablesHaveDifferent
|
|
|
31
31
|
import { updateOverflowShadows } from './update-overflow-shadows';
|
|
32
32
|
import memoizeOne from 'memoize-one';
|
|
33
33
|
import { OverflowShadowsObserver } from './OverflowShadowsObserver';
|
|
34
|
-
import { getParentWidthWithoutPadding } from '../pm-plugins/table-resizing/utils/misc';
|
|
35
34
|
var isIE11 = browser.ie_version === 11;
|
|
36
35
|
var NOOP = function NOOP() {
|
|
37
36
|
return undefined;
|
|
@@ -246,7 +245,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
246
245
|
return;
|
|
247
246
|
}
|
|
248
247
|
var parentNodeWith = getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
|
|
249
|
-
return
|
|
248
|
+
return parentNodeWith;
|
|
250
249
|
});
|
|
251
250
|
_defineProperty(_assertThisInitialized(_this), "updateParentWidth", function (width) {
|
|
252
251
|
_this.setState({
|
|
@@ -181,7 +181,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
|
|
|
181
181
|
syncStickyRowToTable(tree.table);
|
|
182
182
|
}, 0);
|
|
183
183
|
});
|
|
184
|
-
_defineProperty(this, "
|
|
184
|
+
_defineProperty(this, "updateStickyHeaderWidth", function () {
|
|
185
185
|
// table width might have changed, sync that back to sticky row
|
|
186
186
|
var tree = _this.tree;
|
|
187
187
|
if (!tree) {
|
|
@@ -213,7 +213,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
|
|
|
213
213
|
// otherwise make it non-sticky
|
|
214
214
|
return false;
|
|
215
215
|
});
|
|
216
|
-
_defineProperty(this, "makeHeaderRowSticky", function (tree) {
|
|
216
|
+
_defineProperty(this, "makeHeaderRowSticky", function (tree, scrollTop) {
|
|
217
217
|
var _tbody$firstChild;
|
|
218
218
|
// If header row height is more than 50% of viewport height don't do this
|
|
219
219
|
if (_this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
|
|
@@ -228,7 +228,10 @@ export var TableRowNodeView = /*#__PURE__*/function () {
|
|
|
228
228
|
return;
|
|
229
229
|
}
|
|
230
230
|
var currentTableTop = _this.getCurrentTableTop(tree);
|
|
231
|
-
|
|
231
|
+
if (!scrollTop) {
|
|
232
|
+
scrollTop = getTop(_this.editorScrollableElement);
|
|
233
|
+
}
|
|
234
|
+
var domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
|
|
232
235
|
if (!_this.isSticky) {
|
|
233
236
|
syncStickyRowToTable(table);
|
|
234
237
|
_this.dom.classList.add('sticky');
|
|
@@ -335,7 +338,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
|
|
|
335
338
|
}
|
|
336
339
|
this.topPosEditorElement = getTop(this.editorScrollableElement);
|
|
337
340
|
}
|
|
338
|
-
this.eventDispatcher.on('widthPlugin', this.
|
|
341
|
+
this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
|
|
339
342
|
this.eventDispatcher.on(tablePluginKey.key, this.onTablePluginState);
|
|
340
343
|
this.listening = true;
|
|
341
344
|
this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
|
|
@@ -363,7 +366,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
|
|
|
363
366
|
if (this.editorScrollableElement && !this.stickyHeadersOptimization) {
|
|
364
367
|
this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
|
|
365
368
|
}
|
|
366
|
-
this.eventDispatcher.off('widthPlugin', this.
|
|
369
|
+
this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
|
|
367
370
|
this.eventDispatcher.off(tablePluginKey.key, this.onTablePluginState);
|
|
368
371
|
this.listening = false;
|
|
369
372
|
this.dom.removeEventListener('wheel', this.headerRowMouseScroll);
|
|
@@ -385,6 +388,9 @@ export var TableRowNodeView = /*#__PURE__*/function () {
|
|
|
385
388
|
return;
|
|
386
389
|
}
|
|
387
390
|
this.resizeObserver.observe(this.dom);
|
|
391
|
+
if (this.editorScrollableElement) {
|
|
392
|
+
this.resizeObserver.observe(this.editorScrollableElement);
|
|
393
|
+
}
|
|
388
394
|
window.requestAnimationFrame(function () {
|
|
389
395
|
var _this2$tree;
|
|
390
396
|
// we expect tree to be defined after animation frame
|
|
@@ -415,14 +421,21 @@ export var TableRowNodeView = /*#__PURE__*/function () {
|
|
|
415
421
|
}
|
|
416
422
|
var table = _this3.tree.table;
|
|
417
423
|
entries.forEach(function (entry) {
|
|
418
|
-
var
|
|
419
|
-
|
|
420
|
-
//
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
424
|
+
var _this3$editorScrollab;
|
|
425
|
+
// On resize of the parent scroll element we need to adjust the width
|
|
426
|
+
// of the sticky header
|
|
427
|
+
if (entry.target.className === ((_this3$editorScrollab = _this3.editorScrollableElement) === null || _this3$editorScrollab === void 0 ? void 0 : _this3$editorScrollab.className)) {
|
|
428
|
+
_this3.updateStickyHeaderWidth();
|
|
429
|
+
} else {
|
|
430
|
+
var newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
|
|
431
|
+
if (_this3.sentinels.bottom &&
|
|
432
|
+
// When the table header is sticky, it would be taller by a 1px (border-bottom),
|
|
433
|
+
// So we adding this check to allow a 1px difference.
|
|
434
|
+
Math.abs(newHeight - (_this3.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
|
|
435
|
+
_this3.stickyRowHeight = newHeight;
|
|
436
|
+
_this3.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
|
|
437
|
+
updateTableMargin(table);
|
|
438
|
+
}
|
|
426
439
|
}
|
|
427
440
|
});
|
|
428
441
|
});
|
|
@@ -448,18 +461,20 @@ export var TableRowNodeView = /*#__PURE__*/function () {
|
|
|
448
461
|
var _entry$rootBounds2;
|
|
449
462
|
var sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
|
|
450
463
|
if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
|
|
451
|
-
|
|
464
|
+
var _entry$rootBounds3;
|
|
465
|
+
_this4.tree && _this4.makeHeaderRowSticky(_this4.tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
|
|
452
466
|
} else {
|
|
453
467
|
table && _this4.makeRowHeaderNotSticky(table);
|
|
454
468
|
}
|
|
455
469
|
}
|
|
456
470
|
if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
|
|
457
|
-
var _entry$
|
|
458
|
-
var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this4.dom.offsetHeight < (((_entry$
|
|
471
|
+
var _entry$rootBounds4;
|
|
472
|
+
var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this4.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
|
|
459
473
|
if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
|
|
460
474
|
_this4.makeRowHeaderNotSticky(table);
|
|
461
475
|
} else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
|
|
462
|
-
|
|
476
|
+
var _entry$rootBounds5;
|
|
477
|
+
_this4.tree && _this4.makeHeaderRowSticky(_this4.tree, entry === null || entry === void 0 ? void 0 : (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
|
|
463
478
|
}
|
|
464
479
|
}
|
|
465
480
|
});
|
|
@@ -9,7 +9,6 @@ import { evenColumns, setDragging, stopResizing } from './commands';
|
|
|
9
9
|
import { getPluginState } from './plugin-factory';
|
|
10
10
|
import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
|
|
11
11
|
import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
|
|
12
|
-
import { getParentWidthWithoutPadding } from './utils/misc';
|
|
13
12
|
export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
|
|
14
13
|
var state = view.state,
|
|
15
14
|
dispatch = view.dispatch;
|
|
@@ -30,10 +29,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
|
|
|
30
29
|
}
|
|
31
30
|
var containerWidth = getEditorContainerWidth();
|
|
32
31
|
var parentWidth = getParentNodeWidth(start, state, containerWidth);
|
|
33
|
-
|
|
34
|
-
// TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
|
|
35
|
-
var parentActualWidth = getParentWidthWithoutPadding(parentWidth, start, state);
|
|
36
|
-
var maxSize = parentActualWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
|
|
32
|
+
var maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
|
|
37
33
|
if (originalTable.attrs.isNumberColumnEnabled) {
|
|
38
34
|
maxSize -= akEditorTableNumberColumnWidth;
|
|
39
35
|
}
|
|
@@ -3,8 +3,6 @@ import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-c
|
|
|
3
3
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorWideLayoutWidth, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
4
4
|
import { containsClassName } from '@atlaskit/editor-common/utils';
|
|
5
5
|
import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
|
|
6
|
-
import { gridSize } from '@atlaskit/theme/constants';
|
|
7
|
-
import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
|
|
8
6
|
export var tableLayoutToSize = {
|
|
9
7
|
default: akEditorDefaultLayoutWidth,
|
|
10
8
|
wide: akEditorWideLayoutWidth,
|
|
@@ -71,41 +69,9 @@ export var getTableMaxWidth = function getTableMaxWidth(_ref2) {
|
|
|
71
69
|
getEditorContainerWidth = _ref2.getEditorContainerWidth;
|
|
72
70
|
var containerWidth = getEditorContainerWidth();
|
|
73
71
|
var parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
|
|
74
|
-
|
|
75
|
-
// TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
|
|
76
|
-
var parentActualWidth = getParentWidthWithoutPadding(parentWidth, tableStart, state);
|
|
77
|
-
var maxWidth = parentActualWidth || getLayoutSize(layout, containerWidth.width, {});
|
|
72
|
+
var maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
|
|
78
73
|
if (table.attrs.isNumberColumnEnabled) {
|
|
79
74
|
maxWidth -= akEditorTableNumberColumnWidth;
|
|
80
75
|
}
|
|
81
76
|
return maxWidth;
|
|
82
|
-
};
|
|
83
|
-
export var getParentWidthWithoutPadding = function getParentWidthWithoutPadding(parentWidth, tableStartPos, state) {
|
|
84
|
-
var node = getNestedParentNode(tableStartPos, state);
|
|
85
|
-
if (!node) {
|
|
86
|
-
return;
|
|
87
|
-
}
|
|
88
|
-
var schema = state.schema;
|
|
89
|
-
if (node.type === schema.nodes.expand) {
|
|
90
|
-
// padding
|
|
91
|
-
parentWidth -= gridSize() * 2;
|
|
92
|
-
// gutter offset
|
|
93
|
-
parentWidth += gridSize() * 1.5 * 2;
|
|
94
|
-
// padding right
|
|
95
|
-
parentWidth -= gridSize();
|
|
96
|
-
// padding left
|
|
97
|
-
parentWidth -= gridSize() * 4 - gridSize() / 2;
|
|
98
|
-
}
|
|
99
|
-
return parentWidth;
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
// copy of getNestedParentNode() from packages/editor/editor-common/src/node-width/index.ts
|
|
103
|
-
// to be removed later when we will move getParentWidthWithoutPadding() logic to editor-common
|
|
104
|
-
var getNestedParentNode = function getNestedParentNode(tablePos, state) {
|
|
105
|
-
if (tablePos === undefined) {
|
|
106
|
-
return null;
|
|
107
|
-
}
|
|
108
|
-
var $pos = state.doc.resolve(tablePos);
|
|
109
|
-
var parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
|
|
110
|
-
return parent ? parent.node : null;
|
|
111
77
|
};
|
|
@@ -15,7 +15,7 @@ import { jsx } from '@emotion/react';
|
|
|
15
15
|
import { splitCell } from '@atlaskit/editor-tables/utils';
|
|
16
16
|
import { defineMessages, injectIntl } from 'react-intl-next';
|
|
17
17
|
import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
|
|
18
|
-
import { ColorPalette, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
|
|
18
|
+
import { ColorPalette, backgroundPaletteTooltipMessages, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
|
|
19
19
|
import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
20
20
|
import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
|
|
21
21
|
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
@@ -107,9 +107,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
|
|
|
107
107
|
isOpen = _this$props.isOpen,
|
|
108
108
|
selectionRect = _this$props.selectionRect,
|
|
109
109
|
formatMessage = _this$props.intl.formatMessage,
|
|
110
|
-
editorView = _this$props.editorView
|
|
110
|
+
editorView = _this$props.editorView,
|
|
111
|
+
getEditorFeatureFlags = _this$props.getEditorFeatureFlags;
|
|
111
112
|
var items = [];
|
|
112
113
|
var isSubmenuOpen = _this.state.isSubmenuOpen;
|
|
114
|
+
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
115
|
+
useSomewhatSemanticTextColorNames = _getEditorFeatureFlag.useSomewhatSemanticTextColorNames;
|
|
113
116
|
// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
|
|
114
117
|
var _getPluginState = getPluginState(editorView.state),
|
|
115
118
|
targetCellPosition = _getPluginState.targetCellPosition,
|
|
@@ -133,9 +136,19 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
|
|
|
133
136
|
ref: _this.handleSubMenuRef
|
|
134
137
|
}, jsx(ColorPalette, {
|
|
135
138
|
cols: 7,
|
|
136
|
-
palette: cellBackgroundColorPalette,
|
|
137
139
|
onClick: _this.setColor,
|
|
138
|
-
selectedColor: background
|
|
140
|
+
selectedColor: background,
|
|
141
|
+
paletteOptions: {
|
|
142
|
+
palette: cellBackgroundColorPalette,
|
|
143
|
+
paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
|
|
144
|
+
// We did not want to create new FF or update
|
|
145
|
+
// useSomewhatSemanticTextColorNames name
|
|
146
|
+
// because it is temporary and require extra work.
|
|
147
|
+
// So even though it says text color names,
|
|
148
|
+
// we are going to use for all color pickers
|
|
149
|
+
// such as text, background and table charts.
|
|
150
|
+
showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
|
|
151
|
+
}
|
|
139
152
|
})))
|
|
140
153
|
});
|
|
141
154
|
}
|
|
@@ -33,7 +33,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
|
|
|
33
33
|
isOpen = _ref.isOpen,
|
|
34
34
|
pluginConfig = _ref.pluginConfig,
|
|
35
35
|
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
|
|
36
|
-
getEditorContainerWidth = _ref.getEditorContainerWidth
|
|
36
|
+
getEditorContainerWidth = _ref.getEditorContainerWidth,
|
|
37
|
+
getEditorFeatureFlags = _ref.getEditorFeatureFlags;
|
|
37
38
|
// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
|
|
38
39
|
var _getPluginState = getPluginState(editorView.state),
|
|
39
40
|
targetCellPosition = _getPluginState.targetCellPosition;
|
|
@@ -64,7 +65,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
|
|
|
64
65
|
,
|
|
65
66
|
zIndex: akEditorFloatingOverlapPanelZIndex,
|
|
66
67
|
forcePlacement: true,
|
|
67
|
-
offset: [-7, 0]
|
|
68
|
+
offset: [-7, 0],
|
|
69
|
+
stick: true
|
|
68
70
|
}, jsx("div", {
|
|
69
71
|
css: tablePopupStyles
|
|
70
72
|
}, jsx(ContextualMenu, {
|
|
@@ -78,7 +80,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
|
|
|
78
80
|
selectionRect: selectionRect,
|
|
79
81
|
boundariesElement: boundariesElement,
|
|
80
82
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
81
|
-
getEditorContainerWidth: getEditorContainerWidth
|
|
83
|
+
getEditorContainerWidth: getEditorContainerWidth,
|
|
84
|
+
getEditorFeatureFlags: getEditorFeatureFlags
|
|
82
85
|
})));
|
|
83
86
|
};
|
|
84
87
|
FloatingContextualMenu.displayName = 'FloatingContextualMenu';
|
|
@@ -27,7 +27,7 @@ var listLargeNumericMarkersOldStyles = "\n .ProseMirror .pm-table-cell-content-
|
|
|
27
27
|
// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
|
|
28
28
|
export var tableStyles = function tableStyles(props) {
|
|
29
29
|
var _props$featureFlags, _props$featureFlags2;
|
|
30
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // 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 */\n > * .", " .", " {\n margin-left: unset !important;\n width: 100% !important;\n }\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\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 position: relative;\n }\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n"])), ClassName.LAYOUT_BUTTON, "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, ".concat("0 6px 4px -4px ".concat(N40A), ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "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, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "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()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "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$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles);
|
|
30
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // 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 */\n > * .", " .", " {\n margin-left: unset !important;\n width: 100% !important;\n }\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\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"])), 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, ".concat("0 6px 4px -4px ".concat(N40A), ")"), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, "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, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n left: -11px;\n top: 9px;\n "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, "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()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, "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$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles);
|
|
31
31
|
};
|
|
32
32
|
export var tableFullPageEditorStyles = css(_templateObject2 || (_templateObject2 = _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);
|
|
33
33
|
export var tableCommentEditorStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .ProseMirror .", " > table {\n margin-left: 0;\n margin-right: 0;\n ", ";\n }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/esm/version.json
CHANGED
|
@@ -57,9 +57,9 @@ export declare class TableRowNodeView implements NodeView {
|
|
|
57
57
|
target: Element;
|
|
58
58
|
}): boolean;
|
|
59
59
|
onTablePluginState: (state: TablePluginState) => void;
|
|
60
|
-
|
|
60
|
+
updateStickyHeaderWidth: () => void;
|
|
61
61
|
shouldHeaderStick: (tree: TableDOMElements) => boolean;
|
|
62
|
-
makeHeaderRowSticky: (tree: TableDOMElements) => void;
|
|
62
|
+
makeHeaderRowSticky: (tree: TableDOMElements, scrollTop?: number | undefined) => void;
|
|
63
63
|
makeRowHeaderNotSticky: (table: HTMLElement, isEditorDestroyed?: boolean) => void;
|
|
64
64
|
getWrapperoffset: (inverse?: boolean) => number;
|
|
65
65
|
getWrapperRefTop: (wrapper: HTMLElement) => number;
|
|
@@ -18,6 +18,5 @@ interface getTableMaxWidthProps {
|
|
|
18
18
|
layout: TableLayout;
|
|
19
19
|
getEditorContainerWidth: GetEditorContainerWidth;
|
|
20
20
|
}
|
|
21
|
-
export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getEditorContainerWidth, }: getTableMaxWidthProps) =>
|
|
22
|
-
export declare const getParentWidthWithoutPadding: (parentWidth: number, tableStartPos: number, state: EditorState) => number | undefined;
|
|
21
|
+
export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getEditorContainerWidth, }: getTableMaxWidthProps) => any;
|
|
23
22
|
export {};
|
|
@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
|
|
|
4
4
|
import { Rect } from '@atlaskit/editor-tables/table-map';
|
|
5
5
|
import { EditorView } from 'prosemirror-view';
|
|
6
6
|
import { WrappedComponentProps } from 'react-intl-next';
|
|
7
|
-
import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
7
|
+
import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
|
|
8
8
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
9
9
|
export declare const messages: {
|
|
10
10
|
cellBackground: {
|
|
@@ -61,6 +61,7 @@ export interface Props {
|
|
|
61
61
|
offset?: Array<number>;
|
|
62
62
|
editorAnalyticsAPI?: EditorAnalyticsAPI;
|
|
63
63
|
getEditorContainerWidth: GetEditorContainerWidth;
|
|
64
|
+
getEditorFeatureFlags: GetEditorFeatureFlags;
|
|
64
65
|
}
|
|
65
66
|
export interface State {
|
|
66
67
|
isSubmenuOpen: boolean;
|
|
@@ -3,11 +3,12 @@ import { jsx } from '@emotion/react';
|
|
|
3
3
|
import { EditorView } from 'prosemirror-view';
|
|
4
4
|
import { PluginConfig } from '../../types';
|
|
5
5
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
6
|
-
import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
6
|
+
import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
|
|
7
7
|
export interface Props {
|
|
8
8
|
editorView: EditorView;
|
|
9
9
|
isOpen: boolean;
|
|
10
10
|
getEditorContainerWidth: GetEditorContainerWidth;
|
|
11
|
+
getEditorFeatureFlags: GetEditorFeatureFlags;
|
|
11
12
|
targetCellPosition?: number;
|
|
12
13
|
mountPoint?: HTMLElement;
|
|
13
14
|
boundariesElement?: HTMLElement;
|
|
@@ -16,7 +17,7 @@ export interface Props {
|
|
|
16
17
|
editorAnalyticsAPI?: EditorAnalyticsAPI;
|
|
17
18
|
}
|
|
18
19
|
declare const FloatingContextualMenu: {
|
|
19
|
-
({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, }: Props): jsx.JSX.Element | null;
|
|
20
|
+
({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, }: Props): jsx.JSX.Element | null;
|
|
20
21
|
displayName: string;
|
|
21
22
|
};
|
|
22
23
|
export default FloatingContextualMenu;
|