@atlaskit/editor-plugin-table 7.6.6 → 7.6.7
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/commands/column-resize.js +6 -6
- package/dist/cjs/nodeviews/TableComponent.js +4 -3
- package/dist/cjs/pm-plugins/table-selection-keymap.js +2 -4
- package/dist/cjs/ui/ui-styles.js +1 -1
- package/dist/es2019/commands/column-resize.js +6 -6
- package/dist/es2019/nodeviews/TableComponent.js +4 -3
- package/dist/es2019/pm-plugins/table-selection-keymap.js +2 -4
- package/dist/es2019/ui/ui-styles.js +5 -7
- package/dist/esm/commands/column-resize.js +6 -6
- package/dist/esm/nodeviews/TableComponent.js +4 -3
- package/dist/esm/pm-plugins/table-selection-keymap.js +2 -4
- package/dist/esm/ui/ui-styles.js +2 -2
- package/package.json +4 -10
- package/src/commands/column-resize.ts +11 -10
- package/src/nodeviews/TableComponent.tsx +3 -6
- package/src/pm-plugins/table-selection-keymap.ts +10 -12
- package/src/ui/ui-styles.ts +5 -28
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 7.6.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#86408](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86408) [`6bff86c31d81`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6bff86c31d81) - Clean up feature flag for increasing visibility of table scroll shadows
|
|
8
|
+
|
|
3
9
|
## 7.6.6
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -119,16 +119,16 @@ var activateNextResizeArea = exports.activateNextResizeArea = function activateN
|
|
|
119
119
|
var currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
|
|
120
120
|
var $nextCell = (0, _utils.nextCell)($currentCell, 'horiz', direction);
|
|
121
121
|
if (ariaNotify && getIntl) {
|
|
122
|
-
var columnDirection = '';
|
|
123
122
|
if (direction === 1) {
|
|
124
|
-
|
|
123
|
+
ariaNotify(getIntl().formatMessage(_messages.tableMessages.focusedOtherResize, {
|
|
124
|
+
direction: 'right'
|
|
125
|
+
}));
|
|
125
126
|
}
|
|
126
127
|
if (direction === -1) {
|
|
127
|
-
|
|
128
|
+
ariaNotify(getIntl().formatMessage(_messages.tableMessages.focusedOtherResize, {
|
|
129
|
+
direction: 'left'
|
|
130
|
+
}));
|
|
128
131
|
}
|
|
129
|
-
ariaNotify(getIntl().formatMessage(_messages.tableMessages.focusedOtherResize, {
|
|
130
|
-
direction: columnDirection
|
|
131
|
-
}));
|
|
132
132
|
}
|
|
133
133
|
if ($nextCell) {
|
|
134
134
|
// we are somewhere in between the side columns of the table
|
|
@@ -784,9 +784,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
784
784
|
}), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
|
|
785
785
|
style: {
|
|
786
786
|
position: 'absolute',
|
|
787
|
-
right: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "
|
|
788
|
-
:
|
|
789
|
-
|
|
787
|
+
right: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
|
|
788
|
+
:
|
|
789
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
790
|
+
'22px'
|
|
790
791
|
}
|
|
791
792
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
792
793
|
className: "".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),
|
|
@@ -13,10 +13,8 @@ function tableSelectionKeymapPlugin(editorSelectionAPI) {
|
|
|
13
13
|
var list = {};
|
|
14
14
|
(0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, (0, _selection.arrowRightFromTable)(editorSelectionAPI)(), list);
|
|
15
15
|
(0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, (0, _selection.arrowLeftFromTable)(editorSelectionAPI)(), list);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
(0, _keymaps.bindKeymapArrayWithCommand)(_keymaps.selectRow, (0, _selection.selectRows)(editorSelectionAPI)(true), list);
|
|
19
|
-
}
|
|
16
|
+
(0, _keymaps.bindKeymapArrayWithCommand)(_keymaps.selectColumn, (0, _selection.selectColumns)(editorSelectionAPI)(true), list);
|
|
17
|
+
(0, _keymaps.bindKeymapArrayWithCommand)(_keymaps.selectRow, (0, _selection.selectRows)(editorSelectionAPI)(true), list);
|
|
20
18
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.shift-arrowup-fix')) {
|
|
21
19
|
(0, _keymaps.bindKeymapWithCommand)(_keymaps.shiftArrowUp.common, (0, _selection.shiftArrowUpFromTable)(editorSelectionAPI)(), list);
|
|
22
20
|
}
|
package/dist/cjs/ui/ui-styles.js
CHANGED
|
@@ -73,7 +73,7 @@ var DeleteButton = exports.DeleteButton = function DeleteButton() {
|
|
|
73
73
|
return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat(_consts.tableCellSelectedDeleteIconBackground, ";\n color: ").concat(_consts.tableCellSelectedDeleteIconColor, ";\n ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableCellHoverDeleteIconBackground, _consts.tableCellHoverDeleteIconColor);
|
|
74
74
|
};
|
|
75
75
|
var OverflowShadow = exports.OverflowShadow = function OverflowShadow(isDragAndDropEnabled) {
|
|
76
|
-
return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: ", "px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", "
|
|
76
|
+
return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: ", "px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", " 140%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", " 140%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: ", ";\n }\n .", " {\n ", "\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "calc(100% - ".concat(_consts.tableOverflowShadowWidthWide, "px)") : "calc(100% - ".concat(_consts.tableOverflowShadowWidthWide - 10, "px)"), _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
|
|
77
77
|
};
|
|
78
78
|
var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEnabled) {
|
|
79
79
|
if (!isDragAndDropEnabled) {
|
|
@@ -114,16 +114,16 @@ export const activateNextResizeArea = ({
|
|
|
114
114
|
const currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
|
|
115
115
|
const $nextCell = nextCell($currentCell, 'horiz', direction);
|
|
116
116
|
if (ariaNotify && getIntl) {
|
|
117
|
-
let columnDirection = '';
|
|
118
117
|
if (direction === 1) {
|
|
119
|
-
|
|
118
|
+
ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
|
|
119
|
+
direction: 'right'
|
|
120
|
+
}));
|
|
120
121
|
}
|
|
121
122
|
if (direction === -1) {
|
|
122
|
-
|
|
123
|
+
ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
|
|
124
|
+
direction: 'left'
|
|
125
|
+
}));
|
|
123
126
|
}
|
|
124
|
-
ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
|
|
125
|
-
direction: columnDirection
|
|
126
|
-
}));
|
|
127
127
|
}
|
|
128
128
|
if ($nextCell) {
|
|
129
129
|
// we are somewhere in between the side columns of the table
|
|
@@ -773,9 +773,10 @@ class TableComponent extends React.Component {
|
|
|
773
773
|
}), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
|
|
774
774
|
style: {
|
|
775
775
|
position: 'absolute',
|
|
776
|
-
right: getBooleanFF('platform.editor.custom-table-width') ? `${
|
|
777
|
-
:
|
|
778
|
-
|
|
776
|
+
right: getBooleanFF('platform.editor.custom-table-width') ? `${"var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
|
|
777
|
+
}` :
|
|
778
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
779
|
+
'22px'
|
|
779
780
|
}
|
|
780
781
|
}, /*#__PURE__*/React.createElement("div", {
|
|
781
782
|
className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,
|
|
@@ -6,10 +6,8 @@ export function tableSelectionKeymapPlugin(editorSelectionAPI) {
|
|
|
6
6
|
const list = {};
|
|
7
7
|
bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
|
|
8
8
|
bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
|
|
12
|
-
}
|
|
9
|
+
bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
|
|
10
|
+
bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
|
|
13
11
|
if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
|
|
14
12
|
bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
|
|
15
13
|
}
|
|
@@ -4,7 +4,7 @@ import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWid
|
|
|
4
4
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
|
|
6
6
|
import { TableCssClassName as ClassName } from '../types';
|
|
7
|
-
import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize,
|
|
7
|
+
import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
|
|
8
8
|
const InsertLine = cssString => css`
|
|
9
9
|
.${ClassName.CONTROLS_INSERT_LINE} {
|
|
10
10
|
background: ${tableBorderSelectedColor};
|
|
@@ -267,14 +267,13 @@ export const OverflowShadow = isDragAndDropEnabled => css`
|
|
|
267
267
|
pointer-events: none;
|
|
268
268
|
top: ${tableMarginTop}px;
|
|
269
269
|
z-index: ${akEditorShadowZIndex};
|
|
270
|
-
width: ${
|
|
270
|
+
width: ${tableOverflowShadowWidthWide}px;
|
|
271
271
|
}
|
|
272
272
|
.${ClassName.TABLE_LEFT_SHADOW} {
|
|
273
273
|
background: linear-gradient(
|
|
274
274
|
to left,
|
|
275
275
|
transparent 0,
|
|
276
|
-
${`var(--ds-shadow-overflow-spread, ${N40A})`}
|
|
277
|
-
${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}%
|
|
276
|
+
${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
|
|
278
277
|
),
|
|
279
278
|
linear-gradient(
|
|
280
279
|
to right,
|
|
@@ -290,15 +289,14 @@ export const OverflowShadow = isDragAndDropEnabled => css`
|
|
|
290
289
|
background: linear-gradient(
|
|
291
290
|
to right,
|
|
292
291
|
transparent 0,
|
|
293
|
-
${`var(--ds-shadow-overflow-spread, ${N40A})`}
|
|
294
|
-
${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}%
|
|
292
|
+
${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
|
|
295
293
|
),
|
|
296
294
|
linear-gradient(
|
|
297
295
|
to left,
|
|
298
296
|
${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
|
|
299
297
|
transparent 1px
|
|
300
298
|
);
|
|
301
|
-
left: ${getBooleanFF('platform.editor.custom-table-width') ? `calc(100% - ${
|
|
299
|
+
left: ${getBooleanFF('platform.editor.custom-table-width') ? `calc(100% - ${tableOverflowShadowWidthWide}px)` : `calc(100% - ${tableOverflowShadowWidthWide - 10}px)`};
|
|
302
300
|
}
|
|
303
301
|
.${ClassName.WITH_CONTROLS} {
|
|
304
302
|
${overflowShadowWidhoutDnD(isDragAndDropEnabled)}
|
|
@@ -113,16 +113,16 @@ export var activateNextResizeArea = function activateNextResizeArea(_ref2) {
|
|
|
113
113
|
var currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
|
|
114
114
|
var $nextCell = nextCell($currentCell, 'horiz', direction);
|
|
115
115
|
if (ariaNotify && getIntl) {
|
|
116
|
-
var columnDirection = '';
|
|
117
116
|
if (direction === 1) {
|
|
118
|
-
|
|
117
|
+
ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
|
|
118
|
+
direction: 'right'
|
|
119
|
+
}));
|
|
119
120
|
}
|
|
120
121
|
if (direction === -1) {
|
|
121
|
-
|
|
122
|
+
ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
|
|
123
|
+
direction: 'left'
|
|
124
|
+
}));
|
|
122
125
|
}
|
|
123
|
-
ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
|
|
124
|
-
direction: columnDirection
|
|
125
|
-
}));
|
|
126
126
|
}
|
|
127
127
|
if ($nextCell) {
|
|
128
128
|
// we are somewhere in between the side columns of the table
|
|
@@ -777,9 +777,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
777
777
|
}), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
|
|
778
778
|
style: {
|
|
779
779
|
position: 'absolute',
|
|
780
|
-
right: getBooleanFF('platform.editor.custom-table-width') ? "
|
|
781
|
-
:
|
|
782
|
-
|
|
780
|
+
right: getBooleanFF('platform.editor.custom-table-width') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
|
|
781
|
+
:
|
|
782
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
783
|
+
'22px'
|
|
783
784
|
}
|
|
784
785
|
}, /*#__PURE__*/React.createElement("div", {
|
|
785
786
|
className: "".concat(ClassName.TABLE_RIGHT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),
|
|
@@ -6,10 +6,8 @@ export function tableSelectionKeymapPlugin(editorSelectionAPI) {
|
|
|
6
6
|
var list = {};
|
|
7
7
|
bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
|
|
8
8
|
bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
|
|
12
|
-
}
|
|
9
|
+
bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
|
|
10
|
+
bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
|
|
13
11
|
if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
|
|
14
12
|
bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
|
|
15
13
|
}
|
package/dist/esm/ui/ui-styles.js
CHANGED
|
@@ -6,7 +6,7 @@ import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWid
|
|
|
6
6
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
7
7
|
import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
|
|
8
8
|
import { TableCssClassName as ClassName } from '../types';
|
|
9
|
-
import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize,
|
|
9
|
+
import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
|
|
10
10
|
var InsertLine = function InsertLine(cssString) {
|
|
11
11
|
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n background: ", ";\n display: none;\n position: absolute;\n z-index: ", ";\n ", "\n }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor, akEditorUnitZIndex, cssString);
|
|
12
12
|
};
|
|
@@ -66,7 +66,7 @@ export var DeleteButton = function DeleteButton() {
|
|
|
66
66
|
return css(_templateObject12 || (_templateObject12 = _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(tableCellSelectedDeleteIconBackground, ";\n color: ").concat(tableCellSelectedDeleteIconColor, ";\n ")), ClassName.CONTROLS_DELETE_BUTTON, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor);
|
|
67
67
|
};
|
|
68
68
|
export var OverflowShadow = function OverflowShadow(isDragAndDropEnabled) {
|
|
69
|
-
return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: ", "px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", "
|
|
69
|
+
return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: ", "px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", " 140%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", " 140%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: ", ";\n }\n .", " {\n ", "\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop, tableMarginTop, akEditorShadowZIndex, tableOverflowShadowWidthWide, ClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", getBooleanFF('platform.editor.custom-table-width') ? "calc(100% - ".concat(tableOverflowShadowWidthWide, "px)") : "calc(100% - ".concat(tableOverflowShadowWidthWide - 10, "px)"), ClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), ClassName.TABLE_LEFT_SHADOW, tableBorderColor);
|
|
70
70
|
};
|
|
71
71
|
var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEnabled) {
|
|
72
72
|
if (!isDragAndDropEnabled) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "7.6.
|
|
3
|
+
"version": "7.6.7",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@atlaskit/adf-schema": "^35.8.0",
|
|
32
32
|
"@atlaskit/custom-steps": "^0.0.17",
|
|
33
|
-
"@atlaskit/editor-common": "^78.
|
|
33
|
+
"@atlaskit/editor-common": "^78.23.0",
|
|
34
34
|
"@atlaskit/editor-palette": "1.5.3",
|
|
35
35
|
"@atlaskit/editor-plugin-analytics": "^1.0.0",
|
|
36
36
|
"@atlaskit/editor-plugin-content-insertion": "^1.0.0",
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
"@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
|
|
47
47
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.0",
|
|
48
48
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
|
|
49
|
-
"@atlaskit/primitives": "^5.
|
|
49
|
+
"@atlaskit/primitives": "^5.5.0",
|
|
50
50
|
"@atlaskit/theme": "^12.7.0",
|
|
51
51
|
"@atlaskit/toggle": "^13.0.0",
|
|
52
|
-
"@atlaskit/tokens": "^1.
|
|
52
|
+
"@atlaskit/tokens": "^1.43.0",
|
|
53
53
|
"@atlaskit/tooltip": "^18.1.0",
|
|
54
54
|
"@babel/runtime": "^7.0.0",
|
|
55
55
|
"@emotion/react": "^11.7.1",
|
|
@@ -116,9 +116,6 @@
|
|
|
116
116
|
"platform.editor.resizing-table-height-improvement": {
|
|
117
117
|
"type": "boolean"
|
|
118
118
|
},
|
|
119
|
-
"platform.editor.table.increase-shadow-visibility_lh89r": {
|
|
120
|
-
"type": "boolean"
|
|
121
|
-
},
|
|
122
119
|
"platform.editor.table.shift-arrowup-fix": {
|
|
123
120
|
"type": "boolean"
|
|
124
121
|
},
|
|
@@ -128,9 +125,6 @@
|
|
|
128
125
|
"platform.editor.a11y-table-resizing_uapcv": {
|
|
129
126
|
"type": "boolean"
|
|
130
127
|
},
|
|
131
|
-
"platform.editor.a11y.table-selection_9uv33": {
|
|
132
|
-
"type": "boolean"
|
|
133
|
-
},
|
|
134
128
|
"platform.editor.menu.group-items": {
|
|
135
129
|
"type": "boolean"
|
|
136
130
|
},
|
|
@@ -203,22 +203,23 @@ export const activateNextResizeArea =
|
|
|
203
203
|
);
|
|
204
204
|
|
|
205
205
|
const $nextCell = nextCell($currentCell, 'horiz', direction);
|
|
206
|
-
if (ariaNotify && getIntl) {
|
|
207
|
-
let columnDirection = '';
|
|
208
206
|
|
|
207
|
+
if (ariaNotify && getIntl) {
|
|
209
208
|
if (direction === 1) {
|
|
210
|
-
|
|
209
|
+
ariaNotify(
|
|
210
|
+
getIntl().formatMessage(messages.focusedOtherResize, {
|
|
211
|
+
direction: 'right',
|
|
212
|
+
}),
|
|
213
|
+
);
|
|
211
214
|
}
|
|
212
215
|
|
|
213
216
|
if (direction === -1) {
|
|
214
|
-
|
|
217
|
+
ariaNotify(
|
|
218
|
+
getIntl().formatMessage(messages.focusedOtherResize, {
|
|
219
|
+
direction: 'left',
|
|
220
|
+
}),
|
|
221
|
+
);
|
|
215
222
|
}
|
|
216
|
-
|
|
217
|
-
ariaNotify(
|
|
218
|
-
getIntl().formatMessage(messages.focusedOtherResize, {
|
|
219
|
-
direction: columnDirection,
|
|
220
|
-
}),
|
|
221
|
-
);
|
|
222
223
|
}
|
|
223
224
|
|
|
224
225
|
if ($nextCell) {
|
|
@@ -797,13 +797,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
|
|
|
797
797
|
position: 'absolute',
|
|
798
798
|
right: getBooleanFF('platform.editor.custom-table-width')
|
|
799
799
|
? `${
|
|
800
|
-
|
|
801
|
-
'platform.editor.table.increase-shadow-visibility_lh89r',
|
|
802
|
-
)
|
|
803
|
-
? token('space.400', '32px') // tableOverflowShadowWidthWide
|
|
804
|
-
: token('space.100', '8px') // tableOverflowShadowWidth
|
|
800
|
+
token('space.400', '32px') // tableOverflowShadowWidthWide
|
|
805
801
|
}`
|
|
806
|
-
:
|
|
802
|
+
: // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
803
|
+
'22px',
|
|
807
804
|
}}
|
|
808
805
|
>
|
|
809
806
|
<div
|
|
@@ -42,19 +42,17 @@ export function tableSelectionKeymapPlugin(
|
|
|
42
42
|
list,
|
|
43
43
|
);
|
|
44
44
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
);
|
|
45
|
+
bindKeymapArrayWithCommand(
|
|
46
|
+
selectColumn,
|
|
47
|
+
selectColumns(editorSelectionAPI)(true),
|
|
48
|
+
list,
|
|
49
|
+
);
|
|
51
50
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
51
|
+
bindKeymapArrayWithCommand(
|
|
52
|
+
selectRow,
|
|
53
|
+
selectRows(editorSelectionAPI)(true),
|
|
54
|
+
list,
|
|
55
|
+
);
|
|
58
56
|
|
|
59
57
|
if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
|
|
60
58
|
bindKeymapWithCommand(
|
package/src/ui/ui-styles.ts
CHANGED
|
@@ -38,7 +38,6 @@ import {
|
|
|
38
38
|
tableDeleteButtonSize,
|
|
39
39
|
tableHeaderCellBackgroundColor,
|
|
40
40
|
tableInsertColumnButtonSize,
|
|
41
|
-
tableOverflowShadowWidth,
|
|
42
41
|
tableOverflowShadowWidthWide,
|
|
43
42
|
tableToolbarDeleteColor,
|
|
44
43
|
tableToolbarSelectedColor,
|
|
@@ -346,22 +345,13 @@ export const OverflowShadow = (
|
|
|
346
345
|
pointer-events: none;
|
|
347
346
|
top: ${tableMarginTop}px;
|
|
348
347
|
z-index: ${akEditorShadowZIndex};
|
|
349
|
-
width: ${
|
|
350
|
-
'platform.editor.table.increase-shadow-visibility_lh89r',
|
|
351
|
-
)
|
|
352
|
-
? tableOverflowShadowWidthWide
|
|
353
|
-
: tableOverflowShadowWidth}px;
|
|
348
|
+
width: ${tableOverflowShadowWidthWide}px;
|
|
354
349
|
}
|
|
355
350
|
.${ClassName.TABLE_LEFT_SHADOW} {
|
|
356
351
|
background: linear-gradient(
|
|
357
352
|
to left,
|
|
358
353
|
transparent 0,
|
|
359
|
-
${token('elevation.shadow.overflow.spread', N40A)}
|
|
360
|
-
${getBooleanFF(
|
|
361
|
-
'platform.editor.table.increase-shadow-visibility_lh89r',
|
|
362
|
-
)
|
|
363
|
-
? 140
|
|
364
|
-
: 100}%
|
|
354
|
+
${token('elevation.shadow.overflow.spread', N40A)} 140%
|
|
365
355
|
),
|
|
366
356
|
linear-gradient(
|
|
367
357
|
to right,
|
|
@@ -377,12 +367,7 @@ export const OverflowShadow = (
|
|
|
377
367
|
background: linear-gradient(
|
|
378
368
|
to right,
|
|
379
369
|
transparent 0,
|
|
380
|
-
${token('elevation.shadow.overflow.spread', N40A)}
|
|
381
|
-
${getBooleanFF(
|
|
382
|
-
'platform.editor.table.increase-shadow-visibility_lh89r',
|
|
383
|
-
)
|
|
384
|
-
? 140
|
|
385
|
-
: 100}%
|
|
370
|
+
${token('elevation.shadow.overflow.spread', N40A)} 140%
|
|
386
371
|
),
|
|
387
372
|
linear-gradient(
|
|
388
373
|
to left,
|
|
@@ -390,16 +375,8 @@ export const OverflowShadow = (
|
|
|
390
375
|
transparent 1px
|
|
391
376
|
);
|
|
392
377
|
left: ${getBooleanFF('platform.editor.custom-table-width')
|
|
393
|
-
? `calc(100% - ${
|
|
394
|
-
|
|
395
|
-
? tableOverflowShadowWidthWide
|
|
396
|
-
: tableOverflowShadowWidth
|
|
397
|
-
}px)`
|
|
398
|
-
: `calc(100% - ${
|
|
399
|
-
getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r')
|
|
400
|
-
? tableOverflowShadowWidthWide - 10
|
|
401
|
-
: -2
|
|
402
|
-
}px)`};
|
|
378
|
+
? `calc(100% - ${tableOverflowShadowWidthWide}px)`
|
|
379
|
+
: `calc(100% - ${tableOverflowShadowWidthWide - 10}px)`};
|
|
403
380
|
}
|
|
404
381
|
.${ClassName.WITH_CONTROLS} {
|
|
405
382
|
${overflowShadowWidhoutDnD(isDragAndDropEnabled)}
|