@atlaskit/editor-plugin-table 15.0.0 → 15.0.2
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 +18 -0
- package/dist/cjs/nodeviews/TableComponent.js +10 -3
- package/dist/cjs/pm-plugins/commands/misc.js +32 -11
- package/dist/cjs/pm-plugins/main.js +2 -0
- package/dist/cjs/ui/DragHandle/index.js +2 -2
- package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +3 -1
- package/dist/cjs/ui/FloatingDeleteButton/DeleteButton.js +6 -2
- package/dist/cjs/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +2 -2
- package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js +2 -2
- package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +3 -3
- package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js +2 -2
- package/dist/es2019/nodeviews/TableComponent.js +10 -3
- package/dist/es2019/pm-plugins/commands/misc.js +24 -0
- package/dist/es2019/pm-plugins/main.js +3 -1
- package/dist/es2019/ui/DragHandle/index.js +2 -2
- package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +3 -1
- package/dist/es2019/ui/FloatingDeleteButton/DeleteButton.js +6 -2
- package/dist/es2019/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +2 -2
- package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js +2 -2
- package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +3 -3
- package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js +2 -2
- package/dist/esm/nodeviews/TableComponent.js +10 -3
- package/dist/esm/pm-plugins/commands/misc.js +31 -10
- package/dist/esm/pm-plugins/main.js +3 -1
- package/dist/esm/ui/DragHandle/index.js +2 -2
- package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +3 -1
- package/dist/esm/ui/FloatingDeleteButton/DeleteButton.js +6 -2
- package/dist/esm/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +2 -2
- package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js +2 -2
- package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +3 -3
- package/dist/esm/ui/TableFloatingControls/RowControls/ClassicControls.js +2 -2
- package/dist/types/pm-plugins/commands/misc.d.ts +1 -0
- package/dist/types-ts4.5/pm-plugins/commands/misc.d.ts +1 -0
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 15.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`d9c862034d9c9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d9c862034d9c9) -
|
|
8
|
+
[ux] EDITOR-1681 fix pasting tables background colors in dark mode
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 15.0.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`199b1024b2b0e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/199b1024b2b0e) -
|
|
16
|
+
Remove hover decoration on table unmount, to fix issues of delete decorations persisting
|
|
17
|
+
- [`99d1f21e15dcc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/99d1f21e15dcc) -
|
|
18
|
+
clean up platform_editor_nodevisibility_resize_sync
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 15.0.0
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -452,9 +452,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
452
452
|
element: this.table,
|
|
453
453
|
onFirstVisible: function onFirstVisible() {
|
|
454
454
|
_this2.initialiseEventListenersAfterMount();
|
|
455
|
-
// force width
|
|
455
|
+
// force width calculation - missed resize event under firefox when
|
|
456
456
|
// table is nested within bodied extension
|
|
457
|
-
if (_this2.wrapper
|
|
457
|
+
if (_this2.wrapper) {
|
|
458
458
|
var _this2$wrapper;
|
|
459
459
|
_this2.wrapperWidth = (_this2$wrapper = _this2.wrapper) === null || _this2$wrapper === void 0 ? void 0 : _this2$wrapper.clientWidth;
|
|
460
460
|
}
|
|
@@ -571,7 +571,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
571
571
|
allowColumnResizing = _this$props8.allowColumnResizing,
|
|
572
572
|
allowTableResizing = _this$props8.allowTableResizing,
|
|
573
573
|
eventDispatcher = _this$props8.eventDispatcher,
|
|
574
|
-
isDragAndDropEnabled = _this$props8.isDragAndDropEnabled
|
|
574
|
+
isDragAndDropEnabled = _this$props8.isDragAndDropEnabled,
|
|
575
|
+
view = _this$props8.view,
|
|
576
|
+
isInDanger = _this$props8.isInDanger;
|
|
575
577
|
if (this.wrapper && !isIE11) {
|
|
576
578
|
// Ignored via go/ees005
|
|
577
579
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -596,6 +598,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
596
598
|
this.handleWindowResizeDebounced.cancel();
|
|
597
599
|
}
|
|
598
600
|
this.handleWindowResizeNewDebounced.cancel();
|
|
601
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
|
|
602
|
+
if (isInDanger) {
|
|
603
|
+
(0, _commands.clearHoverSelection)()(view.state, view.dispatch);
|
|
604
|
+
}
|
|
605
|
+
}
|
|
599
606
|
if (!allowTableResizing && allowColumnResizing) {
|
|
600
607
|
// Ignored via go/ees005
|
|
601
608
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignmentWithTableContentWithPos = exports.setTableAlignment = exports.setMultipleCellAttrs = exports.setFocusToCellMenu = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
|
|
7
|
+
exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToFixDarkModeDefaultBackgroundColor = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignmentWithTableContentWithPos = exports.setTableAlignment = exports.setMultipleCellAttrs = exports.setFocusToCellMenu = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
10
|
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
|
|
@@ -24,6 +24,8 @@ var _nodes = require("../utils/nodes");
|
|
|
24
24
|
var _updatePluginStateDecorations = require("../utils/update-plugin-state-decorations");
|
|
25
25
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
26
26
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
27
|
+
var DARK_MODE_CELL_COLOR = '#1f1f21';
|
|
28
|
+
var DARK_MODE_HEADER_COLOR = '#303134';
|
|
27
29
|
var setEditorFocus = exports.setEditorFocus = function setEditorFocus(editorHasFocus) {
|
|
28
30
|
return (0, _pluginFactory.createCommand)({
|
|
29
31
|
type: 'SET_EDITOR_FOCUS',
|
|
@@ -124,11 +126,30 @@ var transformSliceRemoveCellBackgroundColor = exports.transformSliceRemoveCellBa
|
|
|
124
126
|
return maybeCell;
|
|
125
127
|
});
|
|
126
128
|
};
|
|
127
|
-
var
|
|
129
|
+
var transformSliceToFixDarkModeDefaultBackgroundColor = exports.transformSliceToFixDarkModeDefaultBackgroundColor = function transformSliceToFixDarkModeDefaultBackgroundColor(slice, schema) {
|
|
130
|
+
// the background attr in adf should always store the light mode value of the background color
|
|
131
|
+
// and tables which have been created without a background color set will have background as undefined
|
|
132
|
+
// in the undefined case, when pasting from renderer, we get a background color which is the dark mode color
|
|
133
|
+
// we need to convert it back to undefined, otherwise it will be interpreted as a light mode value and be inverted
|
|
128
134
|
var _schema$nodes2 = schema.nodes,
|
|
129
|
-
|
|
130
|
-
tableHeader = _schema$nodes2.tableHeader
|
|
131
|
-
|
|
135
|
+
tableCell = _schema$nodes2.tableCell,
|
|
136
|
+
tableHeader = _schema$nodes2.tableHeader;
|
|
137
|
+
return (0, _utils.mapSlice)(slice, function (maybeCell) {
|
|
138
|
+
if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
|
|
139
|
+
var cellAttrs = _objectSpread({}, maybeCell.attrs);
|
|
140
|
+
if (maybeCell.type === tableCell && cellAttrs.background === DARK_MODE_CELL_COLOR || maybeCell.type === tableHeader && cellAttrs.background === DARK_MODE_HEADER_COLOR) {
|
|
141
|
+
cellAttrs.background = undefined;
|
|
142
|
+
}
|
|
143
|
+
return maybeCell.type.createChecked(cellAttrs, maybeCell.content, maybeCell.marks);
|
|
144
|
+
}
|
|
145
|
+
return maybeCell;
|
|
146
|
+
});
|
|
147
|
+
};
|
|
148
|
+
var transformSliceToAddTableHeaders = exports.transformSliceToAddTableHeaders = function transformSliceToAddTableHeaders(slice, schema) {
|
|
149
|
+
var _schema$nodes3 = schema.nodes,
|
|
150
|
+
table = _schema$nodes3.table,
|
|
151
|
+
tableHeader = _schema$nodes3.tableHeader,
|
|
152
|
+
tableRow = _schema$nodes3.tableRow;
|
|
132
153
|
return (0, _utils.mapSlice)(slice, function (maybeTable) {
|
|
133
154
|
if (maybeTable.type === table) {
|
|
134
155
|
var firstRow = maybeTable.firstChild;
|
|
@@ -145,9 +166,9 @@ var transformSliceToAddTableHeaders = exports.transformSliceToAddTableHeaders =
|
|
|
145
166
|
});
|
|
146
167
|
};
|
|
147
168
|
var transformSliceToRemoveColumnsWidths = exports.transformSliceToRemoveColumnsWidths = function transformSliceToRemoveColumnsWidths(slice, schema) {
|
|
148
|
-
var _schema$
|
|
149
|
-
tableHeader = _schema$
|
|
150
|
-
tableCell = _schema$
|
|
169
|
+
var _schema$nodes4 = schema.nodes,
|
|
170
|
+
tableHeader = _schema$nodes4.tableHeader,
|
|
171
|
+
tableCell = _schema$nodes4.tableCell;
|
|
151
172
|
return (0, _utils.mapSlice)(slice, function (maybeCell) {
|
|
152
173
|
if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
|
|
153
174
|
if (!maybeCell.attrs.colwidth) {
|
|
@@ -161,9 +182,9 @@ var transformSliceToRemoveColumnsWidths = exports.transformSliceToRemoveColumnsW
|
|
|
161
182
|
});
|
|
162
183
|
};
|
|
163
184
|
var countCellsInSlice = exports.countCellsInSlice = function countCellsInSlice(slice, schema, type) {
|
|
164
|
-
var _schema$
|
|
165
|
-
tableHeader = _schema$
|
|
166
|
-
tableCell = _schema$
|
|
185
|
+
var _schema$nodes5 = schema.nodes,
|
|
186
|
+
tableHeader = _schema$nodes5.tableHeader,
|
|
187
|
+
tableCell = _schema$nodes5.tableCell;
|
|
167
188
|
var count = 0;
|
|
168
189
|
if (!type) {
|
|
169
190
|
return count;
|
|
@@ -270,6 +270,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
|
|
|
270
270
|
// from the paste slice
|
|
271
271
|
if (!pluginConfig.allowBackgroundColor) {
|
|
272
272
|
slice = (0, _misc.transformSliceRemoveCellBackgroundColor)(slice, schema);
|
|
273
|
+
} else if ((0, _platformFeatureFlags.fg)('platform_editor_table_paste_in_dark_mode')) {
|
|
274
|
+
slice = (0, _misc.transformSliceToFixDarkModeDefaultBackgroundColor)(slice, schema);
|
|
273
275
|
}
|
|
274
276
|
slice = (0, _transforms.transformSliceToRemoveOpenNestedExpand)(slice, schema);
|
|
275
277
|
if ((0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes')) {
|
|
@@ -218,7 +218,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
|
218
218
|
"aria-label": formatMessage(isRow ? _messages.tableMessages.rowDragHandle : _messages.tableMessages.columnDragHandle),
|
|
219
219
|
"aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
|
|
220
220
|
"aria-haspopup": "menu"
|
|
221
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
221
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
222
222
|
,
|
|
223
223
|
onMouseOver: function onMouseOver(e) {
|
|
224
224
|
if ((0, _expValEquals.expValEquals)('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
|
|
@@ -226,7 +226,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
|
226
226
|
}
|
|
227
227
|
_onMouseOver && _onMouseOver(e);
|
|
228
228
|
}
|
|
229
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
229
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
230
230
|
,
|
|
231
231
|
onMouseOut: function onMouseOut(e) {
|
|
232
232
|
if ((0, _expValEquals.expValEquals)('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
|
|
@@ -732,7 +732,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
732
732
|
return (
|
|
733
733
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
734
734
|
(0, _react2.jsx)("div", {
|
|
735
|
-
"data-testid": "table-cell-contextual-menu"
|
|
735
|
+
"data-testid": "table-cell-contextual-menu"
|
|
736
|
+
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
737
|
+
,
|
|
736
738
|
onMouseLeave: this.closeSubmenu,
|
|
737
739
|
ref: this.dropdownMenuRef
|
|
738
740
|
}, (0, _react2.jsx)(_uiMenu.DropdownMenu, {
|
|
@@ -23,8 +23,12 @@ var DeleteButton = function DeleteButton(_ref) {
|
|
|
23
23
|
className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP
|
|
24
24
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
25
25
|
,
|
|
26
|
-
style: style
|
|
27
|
-
|
|
26
|
+
style: style
|
|
27
|
+
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
28
|
+
,
|
|
29
|
+
onMouseEnter: onMouseEnter
|
|
30
|
+
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
31
|
+
,
|
|
28
32
|
onMouseLeave: onMouseLeave
|
|
29
33
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
30
34
|
type: "button",
|
|
@@ -99,10 +99,10 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
|
|
|
99
99
|
danger: isActive && isInDanger
|
|
100
100
|
}),
|
|
101
101
|
onClick: this.selectTable
|
|
102
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
102
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
103
103
|
,
|
|
104
104
|
onMouseOver: this.hoverTable
|
|
105
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
105
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
106
106
|
,
|
|
107
107
|
onMouseOut: this.clearHoverSelection
|
|
108
108
|
}), !isHeaderRowEnabled &&
|
|
@@ -50,7 +50,7 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
|
|
|
50
50
|
"aria-label": formatMessage(_messages.tableMessages.cornerControl),
|
|
51
51
|
type: "button",
|
|
52
52
|
onClick: handleOnClick
|
|
53
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
53
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
54
54
|
,
|
|
55
55
|
onMouseOut: handleMouseOut,
|
|
56
56
|
contentEditable: false
|
|
@@ -103,7 +103,7 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
|
|
|
103
103
|
"aria-label": formatMessage(_messages.tableMessages.cornerControl),
|
|
104
104
|
type: "button",
|
|
105
105
|
onClick: handleOnClick
|
|
106
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
106
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
107
107
|
,
|
|
108
108
|
onMouseOut: handleMouseOut,
|
|
109
109
|
contentEditable: false
|
|
@@ -157,7 +157,7 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
157
157
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
158
158
|
,
|
|
159
159
|
style: _this2.getCellStyles(index, rowHeight)
|
|
160
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
160
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
161
161
|
,
|
|
162
162
|
onMouseOver: function onMouseOver() {
|
|
163
163
|
return updateCellHoverLocation(index);
|
|
@@ -179,12 +179,12 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
179
179
|
onClick: function onClick(event) {
|
|
180
180
|
return _this2.selectRow(index, event);
|
|
181
181
|
}
|
|
182
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
182
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
183
183
|
,
|
|
184
184
|
onMouseOver: function onMouseOver() {
|
|
185
185
|
return _this2.hoverRows(index);
|
|
186
186
|
}
|
|
187
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
187
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
188
188
|
,
|
|
189
189
|
onMouseOut: _this2.clearHoverSelection
|
|
190
190
|
}, hasHeaderRow ? index > 0 ? index : null : index + 1);
|
|
@@ -106,12 +106,12 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
|
|
|
106
106
|
onClick: function onClick(event) {
|
|
107
107
|
return _this2.props.selectRow(startIndex, event.shiftKey);
|
|
108
108
|
}
|
|
109
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
109
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
110
110
|
,
|
|
111
111
|
onMouseOver: function onMouseOver() {
|
|
112
112
|
return _this2.props.hoverRows([startIndex]);
|
|
113
113
|
}
|
|
114
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
114
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
115
115
|
,
|
|
116
116
|
onMouseOut: _this2.clearHoverSelection,
|
|
117
117
|
"data-start-index": startIndex,
|
|
@@ -439,9 +439,9 @@ class TableComponent extends React.Component {
|
|
|
439
439
|
element: this.table,
|
|
440
440
|
onFirstVisible: () => {
|
|
441
441
|
this.initialiseEventListenersAfterMount();
|
|
442
|
-
// force width
|
|
442
|
+
// force width calculation - missed resize event under firefox when
|
|
443
443
|
// table is nested within bodied extension
|
|
444
|
-
if (this.wrapper
|
|
444
|
+
if (this.wrapper) {
|
|
445
445
|
var _this$wrapper;
|
|
446
446
|
this.wrapperWidth = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.clientWidth;
|
|
447
447
|
}
|
|
@@ -543,7 +543,9 @@ class TableComponent extends React.Component {
|
|
|
543
543
|
allowColumnResizing,
|
|
544
544
|
allowTableResizing,
|
|
545
545
|
eventDispatcher,
|
|
546
|
-
isDragAndDropEnabled
|
|
546
|
+
isDragAndDropEnabled,
|
|
547
|
+
view,
|
|
548
|
+
isInDanger
|
|
547
549
|
} = this.props;
|
|
548
550
|
if (this.wrapper && !isIE11) {
|
|
549
551
|
// Ignored via go/ees005
|
|
@@ -569,6 +571,11 @@ class TableComponent extends React.Component {
|
|
|
569
571
|
this.handleWindowResizeDebounced.cancel();
|
|
570
572
|
}
|
|
571
573
|
this.handleWindowResizeNewDebounced.cancel();
|
|
574
|
+
if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
|
|
575
|
+
if (isInDanger) {
|
|
576
|
+
clearHoverSelection()(view.state, view.dispatch);
|
|
577
|
+
}
|
|
578
|
+
}
|
|
572
579
|
if (!allowTableResizing && allowColumnResizing) {
|
|
573
580
|
// Ignored via go/ees005
|
|
574
581
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -13,6 +13,8 @@ import { fixAutoSizedTable } from '../transforms/fix-tables';
|
|
|
13
13
|
import { createColumnControlsDecoration, createColumnSelectedDecoration } from '../utils/decoration';
|
|
14
14
|
import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isIsolating } from '../utils/nodes';
|
|
15
15
|
import { updatePluginStateDecorations } from '../utils/update-plugin-state-decorations';
|
|
16
|
+
const DARK_MODE_CELL_COLOR = '#1f1f21';
|
|
17
|
+
const DARK_MODE_HEADER_COLOR = '#303134';
|
|
16
18
|
export const setEditorFocus = editorHasFocus => createCommand({
|
|
17
19
|
type: 'SET_EDITOR_FOCUS',
|
|
18
20
|
data: {
|
|
@@ -121,6 +123,28 @@ export const transformSliceRemoveCellBackgroundColor = (slice, schema) => {
|
|
|
121
123
|
return maybeCell;
|
|
122
124
|
});
|
|
123
125
|
};
|
|
126
|
+
export const transformSliceToFixDarkModeDefaultBackgroundColor = (slice, schema) => {
|
|
127
|
+
// the background attr in adf should always store the light mode value of the background color
|
|
128
|
+
// and tables which have been created without a background color set will have background as undefined
|
|
129
|
+
// in the undefined case, when pasting from renderer, we get a background color which is the dark mode color
|
|
130
|
+
// we need to convert it back to undefined, otherwise it will be interpreted as a light mode value and be inverted
|
|
131
|
+
const {
|
|
132
|
+
tableCell,
|
|
133
|
+
tableHeader
|
|
134
|
+
} = schema.nodes;
|
|
135
|
+
return mapSlice(slice, maybeCell => {
|
|
136
|
+
if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
|
|
137
|
+
const cellAttrs = {
|
|
138
|
+
...maybeCell.attrs
|
|
139
|
+
};
|
|
140
|
+
if (maybeCell.type === tableCell && cellAttrs.background === DARK_MODE_CELL_COLOR || maybeCell.type === tableHeader && cellAttrs.background === DARK_MODE_HEADER_COLOR) {
|
|
141
|
+
cellAttrs.background = undefined;
|
|
142
|
+
}
|
|
143
|
+
return maybeCell.type.createChecked(cellAttrs, maybeCell.content, maybeCell.marks);
|
|
144
|
+
}
|
|
145
|
+
return maybeCell;
|
|
146
|
+
});
|
|
147
|
+
};
|
|
124
148
|
export const transformSliceToAddTableHeaders = (slice, schema) => {
|
|
125
149
|
const {
|
|
126
150
|
table,
|
|
@@ -14,7 +14,7 @@ import { TableCssClassName as ClassName } from '../types';
|
|
|
14
14
|
import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleTripleClick, whenTableInFocus, withCellTracking } from '../ui/event-handlers';
|
|
15
15
|
import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from './commands';
|
|
16
16
|
import { stopKeyboardColumnResizing } from './commands/column-resize';
|
|
17
|
-
import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from './commands/misc';
|
|
17
|
+
import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToFixDarkModeDefaultBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from './commands/misc';
|
|
18
18
|
import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
|
|
19
19
|
import { createPluginState, getPluginState } from './plugin-factory';
|
|
20
20
|
import { pluginKey } from './plugin-key';
|
|
@@ -262,6 +262,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
|
|
|
262
262
|
// from the paste slice
|
|
263
263
|
if (!pluginConfig.allowBackgroundColor) {
|
|
264
264
|
slice = transformSliceRemoveCellBackgroundColor(slice, schema);
|
|
265
|
+
} else if (fg('platform_editor_table_paste_in_dark_mode')) {
|
|
266
|
+
slice = transformSliceToFixDarkModeDefaultBackgroundColor(slice, schema);
|
|
265
267
|
}
|
|
266
268
|
slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
|
|
267
269
|
if (fg('platform_editor_use_nested_table_pm_nodes')) {
|
|
@@ -211,7 +211,7 @@ const DragHandleComponent = ({
|
|
|
211
211
|
"aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
|
|
212
212
|
"aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
|
|
213
213
|
"aria-haspopup": "menu"
|
|
214
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
214
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
215
215
|
,
|
|
216
216
|
onMouseOver: e => {
|
|
217
217
|
if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
|
|
@@ -219,7 +219,7 @@ const DragHandleComponent = ({
|
|
|
219
219
|
}
|
|
220
220
|
onMouseOver && onMouseOver(e);
|
|
221
221
|
}
|
|
222
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
222
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
223
223
|
,
|
|
224
224
|
onMouseOut: e => {
|
|
225
225
|
if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
|
|
@@ -791,7 +791,9 @@ export class ContextualMenu extends Component {
|
|
|
791
791
|
return (
|
|
792
792
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
793
793
|
jsx("div", {
|
|
794
|
-
"data-testid": "table-cell-contextual-menu"
|
|
794
|
+
"data-testid": "table-cell-contextual-menu"
|
|
795
|
+
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
796
|
+
,
|
|
795
797
|
onMouseLeave: this.closeSubmenu,
|
|
796
798
|
ref: this.dropdownMenuRef
|
|
797
799
|
}, jsx(DropdownMenu, {
|
|
@@ -18,8 +18,12 @@ React.createElement("div", {
|
|
|
18
18
|
className: ClassName.CONTROLS_DELETE_BUTTON_WRAP
|
|
19
19
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
20
20
|
,
|
|
21
|
-
style: style
|
|
22
|
-
|
|
21
|
+
style: style
|
|
22
|
+
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
23
|
+
,
|
|
24
|
+
onMouseEnter: onMouseEnter
|
|
25
|
+
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
26
|
+
,
|
|
23
27
|
onMouseLeave: onMouseLeave
|
|
24
28
|
}, /*#__PURE__*/React.createElement("button", {
|
|
25
29
|
type: "button",
|
|
@@ -83,10 +83,10 @@ class CornerControlComponent extends Component {
|
|
|
83
83
|
danger: isActive && isInDanger
|
|
84
84
|
}),
|
|
85
85
|
onClick: this.selectTable
|
|
86
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
86
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
87
87
|
,
|
|
88
88
|
onMouseOver: this.hoverTable
|
|
89
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
89
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
90
90
|
,
|
|
91
91
|
onMouseOut: this.clearHoverSelection
|
|
92
92
|
}), !isHeaderRowEnabled &&
|
|
@@ -50,7 +50,7 @@ const DragCornerControlsComponent = ({
|
|
|
50
50
|
"aria-label": formatMessage(messages.cornerControl),
|
|
51
51
|
type: "button",
|
|
52
52
|
onClick: handleOnClick
|
|
53
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
53
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
54
54
|
,
|
|
55
55
|
onMouseOut: handleMouseOut,
|
|
56
56
|
contentEditable: false
|
|
@@ -111,7 +111,7 @@ const DragCornerControlsComponentWithSelection = ({
|
|
|
111
111
|
"aria-label": formatMessage(messages.cornerControl),
|
|
112
112
|
type: "button",
|
|
113
113
|
onClick: handleOnClick
|
|
114
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
114
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
115
115
|
,
|
|
116
116
|
onMouseOut: handleMouseOut,
|
|
117
117
|
contentEditable: false
|
|
@@ -141,7 +141,7 @@ export default class NumberColumn extends Component {
|
|
|
141
141
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
142
142
|
,
|
|
143
143
|
style: this.getCellStyles(index, rowHeight)
|
|
144
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
144
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
145
145
|
,
|
|
146
146
|
onMouseOver: () => updateCellHoverLocation(index)
|
|
147
147
|
}, hasHeaderRow ? index > 0 ? index : null : index + 1) :
|
|
@@ -159,10 +159,10 @@ export default class NumberColumn extends Component {
|
|
|
159
159
|
,
|
|
160
160
|
style: this.getCellStyles(index, rowHeight),
|
|
161
161
|
onClick: event => this.selectRow(index, event)
|
|
162
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
162
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
163
163
|
,
|
|
164
164
|
onMouseOver: () => this.hoverRows(index)
|
|
165
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
165
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
166
166
|
,
|
|
167
167
|
onMouseOut: this.clearHoverSelection
|
|
168
168
|
}, hasHeaderRow ? index > 0 ? index : null : index + 1)));
|
|
@@ -85,10 +85,10 @@ class RowControlsComponent extends Component {
|
|
|
85
85
|
,
|
|
86
86
|
className: `${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`,
|
|
87
87
|
onClick: event => this.props.selectRow(startIndex, event.shiftKey)
|
|
88
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
88
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
89
89
|
,
|
|
90
90
|
onMouseOver: () => this.props.hoverRows([startIndex])
|
|
91
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
91
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
92
92
|
,
|
|
93
93
|
onMouseOut: this.clearHoverSelection,
|
|
94
94
|
"data-start-index": startIndex,
|
|
@@ -446,9 +446,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
446
446
|
element: this.table,
|
|
447
447
|
onFirstVisible: function onFirstVisible() {
|
|
448
448
|
_this2.initialiseEventListenersAfterMount();
|
|
449
|
-
// force width
|
|
449
|
+
// force width calculation - missed resize event under firefox when
|
|
450
450
|
// table is nested within bodied extension
|
|
451
|
-
if (_this2.wrapper
|
|
451
|
+
if (_this2.wrapper) {
|
|
452
452
|
var _this2$wrapper;
|
|
453
453
|
_this2.wrapperWidth = (_this2$wrapper = _this2.wrapper) === null || _this2$wrapper === void 0 ? void 0 : _this2$wrapper.clientWidth;
|
|
454
454
|
}
|
|
@@ -565,7 +565,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
565
565
|
allowColumnResizing = _this$props8.allowColumnResizing,
|
|
566
566
|
allowTableResizing = _this$props8.allowTableResizing,
|
|
567
567
|
eventDispatcher = _this$props8.eventDispatcher,
|
|
568
|
-
isDragAndDropEnabled = _this$props8.isDragAndDropEnabled
|
|
568
|
+
isDragAndDropEnabled = _this$props8.isDragAndDropEnabled,
|
|
569
|
+
view = _this$props8.view,
|
|
570
|
+
isInDanger = _this$props8.isInDanger;
|
|
569
571
|
if (this.wrapper && !isIE11) {
|
|
570
572
|
// Ignored via go/ees005
|
|
571
573
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -590,6 +592,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
590
592
|
this.handleWindowResizeDebounced.cancel();
|
|
591
593
|
}
|
|
592
594
|
this.handleWindowResizeNewDebounced.cancel();
|
|
595
|
+
if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
|
|
596
|
+
if (isInDanger) {
|
|
597
|
+
clearHoverSelection()(view.state, view.dispatch);
|
|
598
|
+
}
|
|
599
|
+
}
|
|
593
600
|
if (!allowTableResizing && allowColumnResizing) {
|
|
594
601
|
// Ignored via go/ees005
|
|
595
602
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -17,6 +17,8 @@ import { fixAutoSizedTable } from '../transforms/fix-tables';
|
|
|
17
17
|
import { createColumnControlsDecoration, createColumnSelectedDecoration } from '../utils/decoration';
|
|
18
18
|
import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isIsolating } from '../utils/nodes';
|
|
19
19
|
import { updatePluginStateDecorations } from '../utils/update-plugin-state-decorations';
|
|
20
|
+
var DARK_MODE_CELL_COLOR = '#1f1f21';
|
|
21
|
+
var DARK_MODE_HEADER_COLOR = '#303134';
|
|
20
22
|
export var setEditorFocus = function setEditorFocus(editorHasFocus) {
|
|
21
23
|
return createCommand({
|
|
22
24
|
type: 'SET_EDITOR_FOCUS',
|
|
@@ -117,11 +119,30 @@ export var transformSliceRemoveCellBackgroundColor = function transformSliceRemo
|
|
|
117
119
|
return maybeCell;
|
|
118
120
|
});
|
|
119
121
|
};
|
|
120
|
-
export var
|
|
122
|
+
export var transformSliceToFixDarkModeDefaultBackgroundColor = function transformSliceToFixDarkModeDefaultBackgroundColor(slice, schema) {
|
|
123
|
+
// the background attr in adf should always store the light mode value of the background color
|
|
124
|
+
// and tables which have been created without a background color set will have background as undefined
|
|
125
|
+
// in the undefined case, when pasting from renderer, we get a background color which is the dark mode color
|
|
126
|
+
// we need to convert it back to undefined, otherwise it will be interpreted as a light mode value and be inverted
|
|
121
127
|
var _schema$nodes2 = schema.nodes,
|
|
122
|
-
|
|
123
|
-
tableHeader = _schema$nodes2.tableHeader
|
|
124
|
-
|
|
128
|
+
tableCell = _schema$nodes2.tableCell,
|
|
129
|
+
tableHeader = _schema$nodes2.tableHeader;
|
|
130
|
+
return mapSlice(slice, function (maybeCell) {
|
|
131
|
+
if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
|
|
132
|
+
var cellAttrs = _objectSpread({}, maybeCell.attrs);
|
|
133
|
+
if (maybeCell.type === tableCell && cellAttrs.background === DARK_MODE_CELL_COLOR || maybeCell.type === tableHeader && cellAttrs.background === DARK_MODE_HEADER_COLOR) {
|
|
134
|
+
cellAttrs.background = undefined;
|
|
135
|
+
}
|
|
136
|
+
return maybeCell.type.createChecked(cellAttrs, maybeCell.content, maybeCell.marks);
|
|
137
|
+
}
|
|
138
|
+
return maybeCell;
|
|
139
|
+
});
|
|
140
|
+
};
|
|
141
|
+
export var transformSliceToAddTableHeaders = function transformSliceToAddTableHeaders(slice, schema) {
|
|
142
|
+
var _schema$nodes3 = schema.nodes,
|
|
143
|
+
table = _schema$nodes3.table,
|
|
144
|
+
tableHeader = _schema$nodes3.tableHeader,
|
|
145
|
+
tableRow = _schema$nodes3.tableRow;
|
|
125
146
|
return mapSlice(slice, function (maybeTable) {
|
|
126
147
|
if (maybeTable.type === table) {
|
|
127
148
|
var firstRow = maybeTable.firstChild;
|
|
@@ -138,9 +159,9 @@ export var transformSliceToAddTableHeaders = function transformSliceToAddTableHe
|
|
|
138
159
|
});
|
|
139
160
|
};
|
|
140
161
|
export var transformSliceToRemoveColumnsWidths = function transformSliceToRemoveColumnsWidths(slice, schema) {
|
|
141
|
-
var _schema$
|
|
142
|
-
tableHeader = _schema$
|
|
143
|
-
tableCell = _schema$
|
|
162
|
+
var _schema$nodes4 = schema.nodes,
|
|
163
|
+
tableHeader = _schema$nodes4.tableHeader,
|
|
164
|
+
tableCell = _schema$nodes4.tableCell;
|
|
144
165
|
return mapSlice(slice, function (maybeCell) {
|
|
145
166
|
if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
|
|
146
167
|
if (!maybeCell.attrs.colwidth) {
|
|
@@ -154,9 +175,9 @@ export var transformSliceToRemoveColumnsWidths = function transformSliceToRemove
|
|
|
154
175
|
});
|
|
155
176
|
};
|
|
156
177
|
export var countCellsInSlice = function countCellsInSlice(slice, schema, type) {
|
|
157
|
-
var _schema$
|
|
158
|
-
tableHeader = _schema$
|
|
159
|
-
tableCell = _schema$
|
|
178
|
+
var _schema$nodes5 = schema.nodes,
|
|
179
|
+
tableHeader = _schema$nodes5.tableHeader,
|
|
180
|
+
tableCell = _schema$nodes5.tableCell;
|
|
160
181
|
var count = 0;
|
|
161
182
|
if (!type) {
|
|
162
183
|
return count;
|
|
@@ -17,7 +17,7 @@ import { TableCssClassName as ClassName } from '../types';
|
|
|
17
17
|
import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleTripleClick, whenTableInFocus, withCellTracking } from '../ui/event-handlers';
|
|
18
18
|
import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from './commands';
|
|
19
19
|
import { stopKeyboardColumnResizing } from './commands/column-resize';
|
|
20
|
-
import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from './commands/misc';
|
|
20
|
+
import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToFixDarkModeDefaultBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from './commands/misc';
|
|
21
21
|
import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
|
|
22
22
|
import { createPluginState, getPluginState } from './plugin-factory';
|
|
23
23
|
import { pluginKey } from './plugin-key';
|
|
@@ -263,6 +263,8 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
|
|
|
263
263
|
// from the paste slice
|
|
264
264
|
if (!pluginConfig.allowBackgroundColor) {
|
|
265
265
|
slice = transformSliceRemoveCellBackgroundColor(slice, schema);
|
|
266
|
+
} else if (fg('platform_editor_table_paste_in_dark_mode')) {
|
|
267
|
+
slice = transformSliceToFixDarkModeDefaultBackgroundColor(slice, schema);
|
|
266
268
|
}
|
|
267
269
|
slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
|
|
268
270
|
if (fg('platform_editor_use_nested_table_pm_nodes')) {
|
|
@@ -209,7 +209,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
|
209
209
|
"aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
|
|
210
210
|
"aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
|
|
211
211
|
"aria-haspopup": "menu"
|
|
212
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
212
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
213
213
|
,
|
|
214
214
|
onMouseOver: function onMouseOver(e) {
|
|
215
215
|
if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
|
|
@@ -217,7 +217,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
|
217
217
|
}
|
|
218
218
|
_onMouseOver && _onMouseOver(e);
|
|
219
219
|
}
|
|
220
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
220
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
221
221
|
,
|
|
222
222
|
onMouseOut: function onMouseOut(e) {
|
|
223
223
|
if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
|
|
@@ -726,7 +726,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
|
|
|
726
726
|
return (
|
|
727
727
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
728
728
|
jsx("div", {
|
|
729
|
-
"data-testid": "table-cell-contextual-menu"
|
|
729
|
+
"data-testid": "table-cell-contextual-menu"
|
|
730
|
+
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
731
|
+
,
|
|
730
732
|
onMouseLeave: this.closeSubmenu,
|
|
731
733
|
ref: this.dropdownMenuRef
|
|
732
734
|
}, jsx(DropdownMenu, {
|
|
@@ -16,8 +16,12 @@ var DeleteButton = function DeleteButton(_ref) {
|
|
|
16
16
|
className: ClassName.CONTROLS_DELETE_BUTTON_WRAP
|
|
17
17
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
18
18
|
,
|
|
19
|
-
style: style
|
|
20
|
-
|
|
19
|
+
style: style
|
|
20
|
+
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
21
|
+
,
|
|
22
|
+
onMouseEnter: onMouseEnter
|
|
23
|
+
// eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
|
|
24
|
+
,
|
|
21
25
|
onMouseLeave: onMouseLeave
|
|
22
26
|
}, /*#__PURE__*/React.createElement("button", {
|
|
23
27
|
type: "button",
|
|
@@ -90,10 +90,10 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
|
|
|
90
90
|
danger: isActive && isInDanger
|
|
91
91
|
}),
|
|
92
92
|
onClick: this.selectTable
|
|
93
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
93
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
94
94
|
,
|
|
95
95
|
onMouseOver: this.hoverTable
|
|
96
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
96
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
97
97
|
,
|
|
98
98
|
onMouseOut: this.clearHoverSelection
|
|
99
99
|
}), !isHeaderRowEnabled &&
|
|
@@ -41,7 +41,7 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
|
|
|
41
41
|
"aria-label": formatMessage(messages.cornerControl),
|
|
42
42
|
type: "button",
|
|
43
43
|
onClick: handleOnClick
|
|
44
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
44
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
45
45
|
,
|
|
46
46
|
onMouseOut: handleMouseOut,
|
|
47
47
|
contentEditable: false
|
|
@@ -94,7 +94,7 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
|
|
|
94
94
|
"aria-label": formatMessage(messages.cornerControl),
|
|
95
95
|
type: "button",
|
|
96
96
|
onClick: handleOnClick
|
|
97
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
97
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
98
98
|
,
|
|
99
99
|
onMouseOut: handleMouseOut,
|
|
100
100
|
contentEditable: false
|
|
@@ -148,7 +148,7 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
|
|
|
148
148
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
149
149
|
,
|
|
150
150
|
style: _this2.getCellStyles(index, rowHeight)
|
|
151
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
151
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
152
152
|
,
|
|
153
153
|
onMouseOver: function onMouseOver() {
|
|
154
154
|
return updateCellHoverLocation(index);
|
|
@@ -170,12 +170,12 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
|
|
|
170
170
|
onClick: function onClick(event) {
|
|
171
171
|
return _this2.selectRow(index, event);
|
|
172
172
|
}
|
|
173
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
173
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
174
174
|
,
|
|
175
175
|
onMouseOver: function onMouseOver() {
|
|
176
176
|
return _this2.hoverRows(index);
|
|
177
177
|
}
|
|
178
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
178
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
179
179
|
,
|
|
180
180
|
onMouseOut: _this2.clearHoverSelection
|
|
181
181
|
}, hasHeaderRow ? index > 0 ? index : null : index + 1);
|
|
@@ -97,12 +97,12 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
|
|
|
97
97
|
onClick: function onClick(event) {
|
|
98
98
|
return _this2.props.selectRow(startIndex, event.shiftKey);
|
|
99
99
|
}
|
|
100
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
100
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
101
101
|
,
|
|
102
102
|
onMouseOver: function onMouseOver() {
|
|
103
103
|
return _this2.props.hoverRows([startIndex]);
|
|
104
104
|
}
|
|
105
|
-
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
105
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
|
|
106
106
|
,
|
|
107
107
|
onMouseOut: _this2.clearHoverSelection,
|
|
108
108
|
"data-start-index": startIndex,
|
|
@@ -11,6 +11,7 @@ export declare const setTableRef: (ref?: HTMLTableElement) => Command;
|
|
|
11
11
|
export declare const setCellAttr: (name: string, value: any) => Command;
|
|
12
12
|
export declare const triggerUnlessTableHeader: (command: Command) => Command;
|
|
13
13
|
export declare const transformSliceRemoveCellBackgroundColor: (slice: Slice, schema: Schema) => Slice;
|
|
14
|
+
export declare const transformSliceToFixDarkModeDefaultBackgroundColor: (slice: Slice, schema: Schema) => Slice;
|
|
14
15
|
export declare const transformSliceToAddTableHeaders: (slice: Slice, schema: Schema) => Slice;
|
|
15
16
|
export declare const transformSliceToRemoveColumnsWidths: (slice: Slice, schema: Schema) => Slice;
|
|
16
17
|
export declare const countCellsInSlice: (slice: Slice, schema: Schema, type?: "row" | "column") => number;
|
|
@@ -11,6 +11,7 @@ export declare const setTableRef: (ref?: HTMLTableElement) => Command;
|
|
|
11
11
|
export declare const setCellAttr: (name: string, value: any) => Command;
|
|
12
12
|
export declare const triggerUnlessTableHeader: (command: Command) => Command;
|
|
13
13
|
export declare const transformSliceRemoveCellBackgroundColor: (slice: Slice, schema: Schema) => Slice;
|
|
14
|
+
export declare const transformSliceToFixDarkModeDefaultBackgroundColor: (slice: Slice, schema: Schema) => Slice;
|
|
14
15
|
export declare const transformSliceToAddTableHeaders: (slice: Slice, schema: Schema) => Slice;
|
|
15
16
|
export declare const transformSliceToRemoveColumnsWidths: (slice: Slice, schema: Schema) => Slice;
|
|
16
17
|
export declare const countCellsInSlice: (slice: Slice, schema: Schema, type?: "row" | "column") => number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "15.0.
|
|
3
|
+
"version": "15.0.2",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@atlaskit/custom-steps": "^0.14.0",
|
|
34
34
|
"@atlaskit/editor-palette": "^2.1.0",
|
|
35
35
|
"@atlaskit/editor-plugin-accessibility-utils": "^6.0.0",
|
|
36
|
-
"@atlaskit/editor-plugin-analytics": "^6.
|
|
36
|
+
"@atlaskit/editor-plugin-analytics": "^6.1.0",
|
|
37
37
|
"@atlaskit/editor-plugin-batch-attribute-updates": "^6.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-content-insertion": "^6.0.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-viewmode": "^8.0.0",
|
|
@@ -57,12 +57,12 @@
|
|
|
57
57
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
58
58
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
|
|
59
59
|
"@atlaskit/primitives": "^14.15.0",
|
|
60
|
-
"@atlaskit/react-ufo": "^4.
|
|
60
|
+
"@atlaskit/react-ufo": "^4.11.0",
|
|
61
61
|
"@atlaskit/theme": "^21.0.0",
|
|
62
|
-
"@atlaskit/tmp-editor-statsig": "^12.
|
|
62
|
+
"@atlaskit/tmp-editor-statsig": "^12.32.0",
|
|
63
63
|
"@atlaskit/toggle": "^15.1.0",
|
|
64
|
-
"@atlaskit/tokens": "^6.
|
|
65
|
-
"@atlaskit/tooltip": "^20.
|
|
64
|
+
"@atlaskit/tokens": "^6.4.0",
|
|
65
|
+
"@atlaskit/tooltip": "^20.5.0",
|
|
66
66
|
"@babel/runtime": "^7.0.0",
|
|
67
67
|
"@emotion/react": "^11.7.1",
|
|
68
68
|
"classnames": "^2.2.5",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"uuid": "^3.1.0"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|
|
75
|
-
"@atlaskit/editor-common": "^110.
|
|
75
|
+
"@atlaskit/editor-common": "^110.4.0",
|
|
76
76
|
"react": "^18.2.0",
|
|
77
77
|
"react-dom": "^18.2.0",
|
|
78
78
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
@@ -154,10 +154,10 @@
|
|
|
154
154
|
"platform_editor_table_fw_numcol_overflow_fix": {
|
|
155
155
|
"type": "boolean"
|
|
156
156
|
},
|
|
157
|
-
"
|
|
157
|
+
"platform_editor_adf_with_localid": {
|
|
158
158
|
"type": "boolean"
|
|
159
159
|
},
|
|
160
|
-
"
|
|
160
|
+
"platform_editor_table_paste_in_dark_mode": {
|
|
161
161
|
"type": "boolean"
|
|
162
162
|
}
|
|
163
163
|
}
|