@atlaskit/editor-plugin-table 15.0.1 → 15.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 15.0.2
+
+### Patch Changes
+
+- [`d9c862034d9c9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d9c862034d9c9) -
+  [ux] EDITOR-1681 fix pasting tables background colors in dark mode
+- Updated dependencies
+
 ## 15.0.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/commands/misc.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+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;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -24,6 +24,8 @@ var _nodes = require("../utils/nodes");
 var _updatePluginStateDecorations = require("../utils/update-plugin-state-decorations");
 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; }
 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; }
+var DARK_MODE_CELL_COLOR = '#1f1f21';
+var DARK_MODE_HEADER_COLOR = '#303134';
 var setEditorFocus = exports.setEditorFocus = function setEditorFocus(editorHasFocus) {
   return (0, _pluginFactory.createCommand)({
     type: 'SET_EDITOR_FOCUS',
@@ -124,11 +126,30 @@ var transformSliceRemoveCellBackgroundColor = exports.transformSliceRemoveCellBa
     return maybeCell;
   });
 };
-var transformSliceToAddTableHeaders = exports.transformSliceToAddTableHeaders = function transformSliceToAddTableHeaders(slice, schema) {
+var transformSliceToFixDarkModeDefaultBackgroundColor = exports.transformSliceToFixDarkModeDefaultBackgroundColor = function transformSliceToFixDarkModeDefaultBackgroundColor(slice, schema) {
+  // the background attr in adf should always store the light mode value of the background color
+  // and tables which have been created without a background color set will have background as undefined
+  // in the undefined case, when pasting from renderer, we get a background color which is the dark mode color
+  // we need to convert it back to undefined, otherwise it will be interpreted as a light mode value and be inverted
   var _schema$nodes2 = schema.nodes,
-    table = _schema$nodes2.table,
-    tableHeader = _schema$nodes2.tableHeader,
-    tableRow = _schema$nodes2.tableRow;
+    tableCell = _schema$nodes2.tableCell,
+    tableHeader = _schema$nodes2.tableHeader;
+  return (0, _utils.mapSlice)(slice, function (maybeCell) {
+    if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
+      var cellAttrs = _objectSpread({}, maybeCell.attrs);
+      if (maybeCell.type === tableCell && cellAttrs.background === DARK_MODE_CELL_COLOR || maybeCell.type === tableHeader && cellAttrs.background === DARK_MODE_HEADER_COLOR) {
+        cellAttrs.background = undefined;
+      }
+      return maybeCell.type.createChecked(cellAttrs, maybeCell.content, maybeCell.marks);
+    }
+    return maybeCell;
+  });
+};
+var transformSliceToAddTableHeaders = exports.transformSliceToAddTableHeaders = function transformSliceToAddTableHeaders(slice, schema) {
+  var _schema$nodes3 = schema.nodes,
+    table = _schema$nodes3.table,
+    tableHeader = _schema$nodes3.tableHeader,
+    tableRow = _schema$nodes3.tableRow;
   return (0, _utils.mapSlice)(slice, function (maybeTable) {
     if (maybeTable.type === table) {
       var firstRow = maybeTable.firstChild;
@@ -145,9 +166,9 @@ var transformSliceToAddTableHeaders = exports.transformSliceToAddTableHeaders =
   });
 };
 var transformSliceToRemoveColumnsWidths = exports.transformSliceToRemoveColumnsWidths = function transformSliceToRemoveColumnsWidths(slice, schema) {
-  var _schema$nodes3 = schema.nodes,
-    tableHeader = _schema$nodes3.tableHeader,
-    tableCell = _schema$nodes3.tableCell;
+  var _schema$nodes4 = schema.nodes,
+    tableHeader = _schema$nodes4.tableHeader,
+    tableCell = _schema$nodes4.tableCell;
   return (0, _utils.mapSlice)(slice, function (maybeCell) {
     if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
       if (!maybeCell.attrs.colwidth) {
@@ -161,9 +182,9 @@ var transformSliceToRemoveColumnsWidths = exports.transformSliceToRemoveColumnsW
   });
 };
 var countCellsInSlice = exports.countCellsInSlice = function countCellsInSlice(slice, schema, type) {
-  var _schema$nodes4 = schema.nodes,
-    tableHeader = _schema$nodes4.tableHeader,
-    tableCell = _schema$nodes4.tableCell;
+  var _schema$nodes5 = schema.nodes,
+    tableHeader = _schema$nodes5.tableHeader,
+    tableCell = _schema$nodes5.tableCell;
   var count = 0;
   if (!type) {
     return count;

package/dist/cjs/pm-plugins/main.js

@@ -270,6 +270,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         // from the paste slice
         if (!pluginConfig.allowBackgroundColor) {
           slice = (0, _misc.transformSliceRemoveCellBackgroundColor)(slice, schema);
+        } else if ((0, _platformFeatureFlags.fg)('platform_editor_table_paste_in_dark_mode')) {
+          slice = (0, _misc.transformSliceToFixDarkModeDefaultBackgroundColor)(slice, schema);
         }
         slice = (0, _transforms.transformSliceToRemoveOpenNestedExpand)(slice, schema);
         if ((0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes')) {

package/dist/cjs/ui/DragHandle/index.js

@@ -218,7 +218,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     "aria-label": formatMessage(isRow ? _messages.tableMessages.rowDragHandle : _messages.tableMessages.columnDragHandle),
     "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
     "aria-haspopup": "menu"
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOver: function onMouseOver(e) {
       if ((0, _expValEquals.expValEquals)('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
@@ -226,7 +226,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
       }
       _onMouseOver && _onMouseOver(e);
     }
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOut: function onMouseOut(e) {
       if ((0, _expValEquals.expValEquals)('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -732,7 +732,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         (0, _react2.jsx)("div", {
-          "data-testid": "table-cell-contextual-menu",
+          "data-testid": "table-cell-contextual-menu"
+          // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+          ,
           onMouseLeave: this.closeSubmenu,
           ref: this.dropdownMenuRef
         }, (0, _react2.jsx)(_uiMenu.DropdownMenu, {

package/dist/cjs/ui/FloatingDeleteButton/DeleteButton.js

@@ -23,8 +23,12 @@ var DeleteButton = function DeleteButton(_ref) {
       className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: style,
-      onMouseEnter: onMouseEnter,
+      style: style
+      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+      ,
+      onMouseEnter: onMouseEnter
+      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+      ,
       onMouseLeave: onMouseLeave
     }, /*#__PURE__*/_react.default.createElement("button", {
       type: "button",

package/dist/cjs/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -99,10 +99,10 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
           danger: isActive && isInDanger
         }),
         onClick: this.selectTable
-        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
         ,
         onMouseOver: this.hoverTable
-        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
         ,
         onMouseOut: this.clearHoverSelection
       }), !isHeaderRowEnabled &&

package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -50,7 +50,7 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     "aria-label": formatMessage(_messages.tableMessages.cornerControl),
     type: "button",
     onClick: handleOnClick
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOut: handleMouseOut,
     contentEditable: false
@@ -103,7 +103,7 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     "aria-label": formatMessage(_messages.tableMessages.cornerControl),
     type: "button",
     onClick: handleOnClick
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOut: handleMouseOut,
     contentEditable: false

package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js

@@ -157,7 +157,7 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           ,
           style: _this2.getCellStyles(index, rowHeight)
-          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
           ,
           onMouseOver: function onMouseOver() {
             return updateCellHoverLocation(index);
@@ -179,12 +179,12 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
           onClick: function onClick(event) {
             return _this2.selectRow(index, event);
           }
-          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
           ,
           onMouseOver: function onMouseOver() {
             return _this2.hoverRows(index);
           }
-          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
           ,
           onMouseOut: _this2.clearHoverSelection
         }, hasHeaderRow ? index > 0 ? index : null : index + 1);

package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -106,12 +106,12 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
             onClick: function onClick(event) {
               return _this2.props.selectRow(startIndex, event.shiftKey);
             }
-            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
             ,
             onMouseOver: function onMouseOver() {
               return _this2.props.hoverRows([startIndex]);
             }
-            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
             ,
             onMouseOut: _this2.clearHoverSelection,
             "data-start-index": startIndex,

package/dist/es2019/pm-plugins/commands/misc.js

@@ -13,6 +13,8 @@ import { fixAutoSizedTable } from '../transforms/fix-tables';
 import { createColumnControlsDecoration, createColumnSelectedDecoration } from '../utils/decoration';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isIsolating } from '../utils/nodes';
 import { updatePluginStateDecorations } from '../utils/update-plugin-state-decorations';
+const DARK_MODE_CELL_COLOR = '#1f1f21';
+const DARK_MODE_HEADER_COLOR = '#303134';
 export const setEditorFocus = editorHasFocus => createCommand({
   type: 'SET_EDITOR_FOCUS',
   data: {
@@ -121,6 +123,28 @@ export const transformSliceRemoveCellBackgroundColor = (slice, schema) => {
     return maybeCell;
   });
 };
+export const transformSliceToFixDarkModeDefaultBackgroundColor = (slice, schema) => {
+  // the background attr in adf should always store the light mode value of the background color
+  // and tables which have been created without a background color set will have background as undefined
+  // in the undefined case, when pasting from renderer, we get a background color which is the dark mode color
+  // we need to convert it back to undefined, otherwise it will be interpreted as a light mode value and be inverted
+  const {
+    tableCell,
+    tableHeader
+  } = schema.nodes;
+  return mapSlice(slice, maybeCell => {
+    if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
+      const cellAttrs = {
+        ...maybeCell.attrs
+      };
+      if (maybeCell.type === tableCell && cellAttrs.background === DARK_MODE_CELL_COLOR || maybeCell.type === tableHeader && cellAttrs.background === DARK_MODE_HEADER_COLOR) {
+        cellAttrs.background = undefined;
+      }
+      return maybeCell.type.createChecked(cellAttrs, maybeCell.content, maybeCell.marks);
+    }
+    return maybeCell;
+  });
+};
 export const transformSliceToAddTableHeaders = (slice, schema) => {
   const {
     table,

package/dist/es2019/pm-plugins/main.js

@@ -14,7 +14,7 @@ import { TableCssClassName as ClassName } from '../types';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleTripleClick, whenTableInFocus, withCellTracking } from '../ui/event-handlers';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from './commands';
 import { stopKeyboardColumnResizing } from './commands/column-resize';
-import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from './commands/misc';
+import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToFixDarkModeDefaultBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from './commands/misc';
 import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
@@ -262,6 +262,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         // from the paste slice
         if (!pluginConfig.allowBackgroundColor) {
           slice = transformSliceRemoveCellBackgroundColor(slice, schema);
+        } else if (fg('platform_editor_table_paste_in_dark_mode')) {
+          slice = transformSliceToFixDarkModeDefaultBackgroundColor(slice, schema);
         }
         slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
         if (fg('platform_editor_use_nested_table_pm_nodes')) {

package/dist/es2019/ui/DragHandle/index.js

@@ -211,7 +211,7 @@ const DragHandleComponent = ({
     "aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
     "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
     "aria-haspopup": "menu"
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOver: e => {
       if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
@@ -219,7 +219,7 @@ const DragHandleComponent = ({
       }
       onMouseOver && onMouseOver(e);
     }
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOut: e => {
       if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -791,7 +791,9 @@ export class ContextualMenu extends Component {
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       jsx("div", {
-        "data-testid": "table-cell-contextual-menu",
+        "data-testid": "table-cell-contextual-menu"
+        // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+        ,
         onMouseLeave: this.closeSubmenu,
         ref: this.dropdownMenuRef
       }, jsx(DropdownMenu, {

package/dist/es2019/ui/FloatingDeleteButton/DeleteButton.js

@@ -18,8 +18,12 @@ React.createElement("div", {
   className: ClassName.CONTROLS_DELETE_BUTTON_WRAP
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   ,
-  style: style,
-  onMouseEnter: onMouseEnter,
+  style: style
+  // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+  ,
+  onMouseEnter: onMouseEnter
+  // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+  ,
   onMouseLeave: onMouseLeave
 }, /*#__PURE__*/React.createElement("button", {
   type: "button",

package/dist/es2019/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -83,10 +83,10 @@ class CornerControlComponent extends Component {
         danger: isActive && isInDanger
       }),
       onClick: this.selectTable
-      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
       ,
       onMouseOver: this.hoverTable
-      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
       ,
       onMouseOut: this.clearHoverSelection
     }), !isHeaderRowEnabled &&

package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -50,7 +50,7 @@ const DragCornerControlsComponent = ({
     "aria-label": formatMessage(messages.cornerControl),
     type: "button",
     onClick: handleOnClick
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOut: handleMouseOut,
     contentEditable: false
@@ -111,7 +111,7 @@ const DragCornerControlsComponentWithSelection = ({
     "aria-label": formatMessage(messages.cornerControl),
     type: "button",
     onClick: handleOnClick
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOut: handleMouseOut,
     contentEditable: false

package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js

@@ -141,7 +141,7 @@ export default class NumberColumn extends Component {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
       style: this.getCellStyles(index, rowHeight)
-      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
       ,
       onMouseOver: () => updateCellHoverLocation(index)
     }, hasHeaderRow ? index > 0 ? index : null : index + 1) :
@@ -159,10 +159,10 @@ export default class NumberColumn extends Component {
       ,
       style: this.getCellStyles(index, rowHeight),
       onClick: event => this.selectRow(index, event)
-      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
       ,
       onMouseOver: () => this.hoverRows(index)
-      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
       ,
       onMouseOut: this.clearHoverSelection
     }, hasHeaderRow ? index > 0 ? index : null : index + 1)));

package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -85,10 +85,10 @@ class RowControlsComponent extends Component {
           ,
           className: `${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`,
           onClick: event => this.props.selectRow(startIndex, event.shiftKey)
-          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
           ,
           onMouseOver: () => this.props.hoverRows([startIndex])
-          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
           ,
           onMouseOut: this.clearHoverSelection,
           "data-start-index": startIndex,

package/dist/esm/pm-plugins/commands/misc.js

@@ -17,6 +17,8 @@ import { fixAutoSizedTable } from '../transforms/fix-tables';
 import { createColumnControlsDecoration, createColumnSelectedDecoration } from '../utils/decoration';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isIsolating } from '../utils/nodes';
 import { updatePluginStateDecorations } from '../utils/update-plugin-state-decorations';
+var DARK_MODE_CELL_COLOR = '#1f1f21';
+var DARK_MODE_HEADER_COLOR = '#303134';
 export var setEditorFocus = function setEditorFocus(editorHasFocus) {
   return createCommand({
     type: 'SET_EDITOR_FOCUS',
@@ -117,11 +119,30 @@ export var transformSliceRemoveCellBackgroundColor = function transformSliceRemo
     return maybeCell;
   });
 };
-export var transformSliceToAddTableHeaders = function transformSliceToAddTableHeaders(slice, schema) {
+export var transformSliceToFixDarkModeDefaultBackgroundColor = function transformSliceToFixDarkModeDefaultBackgroundColor(slice, schema) {
+  // the background attr in adf should always store the light mode value of the background color
+  // and tables which have been created without a background color set will have background as undefined
+  // in the undefined case, when pasting from renderer, we get a background color which is the dark mode color
+  // we need to convert it back to undefined, otherwise it will be interpreted as a light mode value and be inverted
   var _schema$nodes2 = schema.nodes,
-    table = _schema$nodes2.table,
-    tableHeader = _schema$nodes2.tableHeader,
-    tableRow = _schema$nodes2.tableRow;
+    tableCell = _schema$nodes2.tableCell,
+    tableHeader = _schema$nodes2.tableHeader;
+  return mapSlice(slice, function (maybeCell) {
+    if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
+      var cellAttrs = _objectSpread({}, maybeCell.attrs);
+      if (maybeCell.type === tableCell && cellAttrs.background === DARK_MODE_CELL_COLOR || maybeCell.type === tableHeader && cellAttrs.background === DARK_MODE_HEADER_COLOR) {
+        cellAttrs.background = undefined;
+      }
+      return maybeCell.type.createChecked(cellAttrs, maybeCell.content, maybeCell.marks);
+    }
+    return maybeCell;
+  });
+};
+export var transformSliceToAddTableHeaders = function transformSliceToAddTableHeaders(slice, schema) {
+  var _schema$nodes3 = schema.nodes,
+    table = _schema$nodes3.table,
+    tableHeader = _schema$nodes3.tableHeader,
+    tableRow = _schema$nodes3.tableRow;
   return mapSlice(slice, function (maybeTable) {
     if (maybeTable.type === table) {
       var firstRow = maybeTable.firstChild;
@@ -138,9 +159,9 @@ export var transformSliceToAddTableHeaders = function transformSliceToAddTableHe
   });
 };
 export var transformSliceToRemoveColumnsWidths = function transformSliceToRemoveColumnsWidths(slice, schema) {
-  var _schema$nodes3 = schema.nodes,
-    tableHeader = _schema$nodes3.tableHeader,
-    tableCell = _schema$nodes3.tableCell;
+  var _schema$nodes4 = schema.nodes,
+    tableHeader = _schema$nodes4.tableHeader,
+    tableCell = _schema$nodes4.tableCell;
   return mapSlice(slice, function (maybeCell) {
     if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
       if (!maybeCell.attrs.colwidth) {
@@ -154,9 +175,9 @@ export var transformSliceToRemoveColumnsWidths = function transformSliceToRemove
   });
 };
 export var countCellsInSlice = function countCellsInSlice(slice, schema, type) {
-  var _schema$nodes4 = schema.nodes,
-    tableHeader = _schema$nodes4.tableHeader,
-    tableCell = _schema$nodes4.tableCell;
+  var _schema$nodes5 = schema.nodes,
+    tableHeader = _schema$nodes5.tableHeader,
+    tableCell = _schema$nodes5.tableCell;
   var count = 0;
   if (!type) {
     return count;

package/dist/esm/pm-plugins/main.js

@@ -17,7 +17,7 @@ import { TableCssClassName as ClassName } from '../types';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleTripleClick, whenTableInFocus, withCellTracking } from '../ui/event-handlers';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from './commands';
 import { stopKeyboardColumnResizing } from './commands/column-resize';
-import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from './commands/misc';
+import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToFixDarkModeDefaultBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from './commands/misc';
 import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
@@ -263,6 +263,8 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         // from the paste slice
         if (!pluginConfig.allowBackgroundColor) {
           slice = transformSliceRemoveCellBackgroundColor(slice, schema);
+        } else if (fg('platform_editor_table_paste_in_dark_mode')) {
+          slice = transformSliceToFixDarkModeDefaultBackgroundColor(slice, schema);
         }
         slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
         if (fg('platform_editor_use_nested_table_pm_nodes')) {

package/dist/esm/ui/DragHandle/index.js

@@ -209,7 +209,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     "aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
     "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
     "aria-haspopup": "menu"
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOver: function onMouseOver(e) {
       if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
@@ -217,7 +217,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
       }
       _onMouseOver && _onMouseOver(e);
     }
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOut: function onMouseOut(e) {
       if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {

package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js

@@ -726,7 +726,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         jsx("div", {
-          "data-testid": "table-cell-contextual-menu",
+          "data-testid": "table-cell-contextual-menu"
+          // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+          ,
           onMouseLeave: this.closeSubmenu,
           ref: this.dropdownMenuRef
         }, jsx(DropdownMenu, {

package/dist/esm/ui/FloatingDeleteButton/DeleteButton.js

@@ -16,8 +16,12 @@ var DeleteButton = function DeleteButton(_ref) {
       className: ClassName.CONTROLS_DELETE_BUTTON_WRAP
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: style,
-      onMouseEnter: onMouseEnter,
+      style: style
+      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+      ,
+      onMouseEnter: onMouseEnter
+      // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+      ,
       onMouseLeave: onMouseLeave
     }, /*#__PURE__*/React.createElement("button", {
       type: "button",

package/dist/esm/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -90,10 +90,10 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
           danger: isActive && isInDanger
         }),
         onClick: this.selectTable
-        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
         ,
         onMouseOver: this.hoverTable
-        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
         ,
         onMouseOut: this.clearHoverSelection
       }), !isHeaderRowEnabled &&

package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -41,7 +41,7 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     "aria-label": formatMessage(messages.cornerControl),
     type: "button",
     onClick: handleOnClick
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOut: handleMouseOut,
     contentEditable: false
@@ -94,7 +94,7 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
     "aria-label": formatMessage(messages.cornerControl),
     type: "button",
     onClick: handleOnClick
-    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
     ,
     onMouseOut: handleMouseOut,
     contentEditable: false

package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js

@@ -148,7 +148,7 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           ,
           style: _this2.getCellStyles(index, rowHeight)
-          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
           ,
           onMouseOver: function onMouseOver() {
             return updateCellHoverLocation(index);
@@ -170,12 +170,12 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
           onClick: function onClick(event) {
             return _this2.selectRow(index, event);
           }
-          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
           ,
           onMouseOver: function onMouseOver() {
             return _this2.hoverRows(index);
           }
-          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+          // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
           ,
           onMouseOut: _this2.clearHoverSelection
         }, hasHeaderRow ? index > 0 ? index : null : index + 1);

package/dist/esm/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -97,12 +97,12 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
             onClick: function onClick(event) {
               return _this2.props.selectRow(startIndex, event.shiftKey);
             }
-            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
             ,
             onMouseOver: function onMouseOver() {
               return _this2.props.hoverRows([startIndex]);
             }
-            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, @atlassian/a11y/mouse-events-have-key-events
             ,
             onMouseOut: _this2.clearHoverSelection,
             "data-start-index": startIndex,

package/dist/types/pm-plugins/commands/misc.d.ts

@@ -11,6 +11,7 @@ export declare const setTableRef: (ref?: HTMLTableElement) => Command;
 export declare const setCellAttr: (name: string, value: any) => Command;
 export declare const triggerUnlessTableHeader: (command: Command) => Command;
 export declare const transformSliceRemoveCellBackgroundColor: (slice: Slice, schema: Schema) => Slice;
+export declare const transformSliceToFixDarkModeDefaultBackgroundColor: (slice: Slice, schema: Schema) => Slice;
 export declare const transformSliceToAddTableHeaders: (slice: Slice, schema: Schema) => Slice;
 export declare const transformSliceToRemoveColumnsWidths: (slice: Slice, schema: Schema) => Slice;
 export declare const countCellsInSlice: (slice: Slice, schema: Schema, type?: "row" | "column") => number;

package/dist/types-ts4.5/pm-plugins/commands/misc.d.ts

@@ -11,6 +11,7 @@ export declare const setTableRef: (ref?: HTMLTableElement) => Command;
 export declare const setCellAttr: (name: string, value: any) => Command;
 export declare const triggerUnlessTableHeader: (command: Command) => Command;
 export declare const transformSliceRemoveCellBackgroundColor: (slice: Slice, schema: Schema) => Slice;
+export declare const transformSliceToFixDarkModeDefaultBackgroundColor: (slice: Slice, schema: Schema) => Slice;
 export declare const transformSliceToAddTableHeaders: (slice: Slice, schema: Schema) => Slice;
 export declare const transformSliceToRemoveColumnsWidths: (slice: Slice, schema: Schema) => Slice;
 export declare const countCellsInSlice: (slice: Slice, schema: Schema, type?: "row" | "column") => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "15.0.1",
+	"version": "15.0.2",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
 		"@atlaskit/custom-steps": "^0.14.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^6.0.0",
-		"@atlaskit/editor-plugin-analytics": "^6.0.0",
+		"@atlaskit/editor-plugin-analytics": "^6.1.0",
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^6.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^6.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^8.0.0",
@@ -72,7 +72,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.2.0",
+		"@atlaskit/editor-common": "^110.4.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -156,6 +156,9 @@
 		},
 		"platform_editor_adf_with_localid": {
 			"type": "boolean"
+		},
+		"platform_editor_table_paste_in_dark_mode": {
+			"type": "boolean"
 		}
 	}
 }