@atlaskit/editor-plugin-table 25.0.6 → 25.1.0

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.
Files changed (21) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/pm-plugins/commands/commands-with-analytics.js +1 -1
  3. package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +8 -4
  4. package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +8 -3
  5. package/dist/cjs/ui/TableMenu/shared/items/BackgroundColorItem.js +8 -4
  6. package/dist/cjs/ui/consts.js +5 -1
  7. package/dist/cjs/ui/toolbar.js +7 -2
  8. package/dist/es2019/pm-plugins/commands/commands-with-analytics.js +2 -2
  9. package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +10 -6
  10. package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +10 -5
  11. package/dist/es2019/ui/TableMenu/shared/items/BackgroundColorItem.js +9 -5
  12. package/dist/es2019/ui/consts.js +4 -0
  13. package/dist/es2019/ui/toolbar.js +8 -3
  14. package/dist/esm/pm-plugins/commands/commands-with-analytics.js +2 -2
  15. package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +10 -6
  16. package/dist/esm/ui/FloatingDragMenu/DragMenu.js +10 -5
  17. package/dist/esm/ui/TableMenu/shared/items/BackgroundColorItem.js +9 -5
  18. package/dist/esm/ui/consts.js +4 -0
  19. package/dist/esm/ui/toolbar.js +8 -3
  20. package/dist/types/ui/consts.d.ts +1 -0
  21. package/package.json +9 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 25.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`b0682afb9fdf1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b0682afb9fdf1) -
8
+ Add lime, orange and magenta colours to the table cell background colour palette.
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
3
14
  ## 25.0.6
4
15
 
5
16
  ### Patch Changes
package/dist/cjs/pm-plugins/commands/commands-with-analytics.js CHANGED
@@ -134,7 +134,7 @@ var setColorWithAnalytics = exports.setColorWithAnalytics = function setColorWit
134
134
  actionSubjectId: null,
135
135
  attributes: {
136
136
  inputMethod: inputMethod,
137
- cellColor: (_tableNodes.tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
137
+ cellColor: (_tableNodes.tableBackgroundColorNameByHex.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
138
138
  horizontalCells: horizontalCells,
139
139
  verticalCells: verticalCells,
140
140
  totalCells: totalCells,
package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js CHANGED
@@ -38,6 +38,7 @@ var _tableColumnDelete = _interopRequireDefault(require("@atlaskit/icon/core/tab
38
38
  var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
39
39
  var _tableRowAddBelow = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-below"));
40
40
  var _tableRowDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-row-delete"));
41
+ var _fg = require("@atlaskit/platform-feature-flags/fg");
41
42
  var _primitives = require("@atlaskit/primitives");
42
43
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
43
44
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -133,10 +134,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
133
134
  var _node$attrs, _node$attrs2;
134
135
  var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
135
136
  var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
136
- var selectedRowAndColumnFromPalette = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.cellBackgroundColorPalette,
137
+ var isMoreColorsEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _fg.fg)('platform_editor_lovability_text_bg_color_patch_2');
138
+ var activePalette = isMoreColorsEnabled ? _uiColor.cellBackgroundColorPaletteNew : _uiColor.cellBackgroundColorPalette;
139
+ var activeCols = isMoreColorsEnabled ? _consts.colorPaletteColumns : _consts.colorPalletteColumns;
140
+ var selectedRowAndColumnFromPalette = (0, _uiColor.getSelectedRowAndColumnFromPalette)(activePalette,
137
141
  // Ignored via go/ees005
138
142
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
139
- background, _consts.colorPalletteColumns);
143
+ background, activeCols);
140
144
  var selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
141
145
  var selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
142
146
  return {
@@ -188,13 +192,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
188
192
  ,
189
193
  isOpenedByKeyboard: isCellMenuOpenByKeyboard
190
194
  }, (0, _react2.jsx)(_uiColor.ColorPalette, {
191
- cols: 7,
195
+ cols: activeCols,
192
196
  onClick: _this.setColor,
193
197
  selectedColor: (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.background) || '#ffffff'
194
198
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
195
199
  ,
196
200
  paletteOptions: {
197
- palette: _uiColor.cellBackgroundColorPalette,
201
+ palette: activePalette,
198
202
  paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
199
203
  hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
200
204
  }
package/dist/cjs/ui/FloatingDragMenu/DragMenu.js CHANGED
@@ -23,7 +23,9 @@ var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
23
23
  var _tableMap = require("@atlaskit/editor-tables/table-map");
24
24
  var _utils2 = require("@atlaskit/editor-tables/utils");
25
25
  var _paintBucket = _interopRequireDefault(require("@atlaskit/icon/core/paint-bucket"));
26
+ var _fg = require("@atlaskit/platform-feature-flags/fg");
26
27
  var _primitives = require("@atlaskit/primitives");
28
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
27
29
  var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
28
30
  var _commands = require("../../pm-plugins/commands");
29
31
  var _commandsWithAnalytics = require("../../pm-plugins/commands/commands-with-analytics");
@@ -282,7 +284,10 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
282
284
  targetCellPosition = _getTablePluginState.targetCellPosition;
283
285
  var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
284
286
  var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
285
- var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.cellBackgroundColorPalette, background, _consts.colorPalletteColumns),
287
+ var isMoreColorsEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _fg.fg)('platform_editor_lovability_text_bg_color_patch_2');
288
+ var activePalette = isMoreColorsEnabled ? _uiColor.cellBackgroundColorPaletteNew : _uiColor.cellBackgroundColorPalette;
289
+ var activeCols = isMoreColorsEnabled ? _consts.colorPaletteColumns : _consts.colorPalletteColumns;
290
+ var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(activePalette, background, activeCols),
286
291
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
287
292
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
288
293
  return {
@@ -335,7 +340,7 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
335
340
  isPopupPositioned: true,
336
341
  isOpenedByKeyboard: isKeyboardModeActive
337
342
  }, (0, _react2.jsx)(_uiColor.ColorPalette, {
338
- cols: _consts.colorPalletteColumns
343
+ cols: activeCols
339
344
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
340
345
  ,
341
346
  onClick: function onClick(color) {
@@ -345,7 +350,7 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
345
350
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
346
351
  ,
347
352
  paletteOptions: {
348
- palette: _uiColor.cellBackgroundColorPalette,
353
+ palette: activePalette,
349
354
  paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
350
355
  hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
351
356
  }
package/dist/cjs/ui/TableMenu/shared/items/BackgroundColorItem.js CHANGED
@@ -15,14 +15,15 @@ var _messages = require("@atlaskit/editor-common/messages");
15
15
  var _uiColor = require("@atlaskit/editor-common/ui-color");
16
16
  var _editorPalette = require("@atlaskit/editor-palette");
17
17
  var _editorToolbar = require("@atlaskit/editor-toolbar");
18
+ var _fg = require("@atlaskit/platform-feature-flags/fg");
18
19
  var _compiled = require("@atlaskit/primitives/compiled");
19
20
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
20
21
  var _commands = require("../../../../pm-plugins/commands");
21
22
  var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
22
23
  var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
24
+ var _consts = require("../../../../ui/consts");
23
25
  var _TableMenuContext = require("../TableMenuContext");
24
26
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
25
- var colorPaletteColumns = 7;
26
27
  var colorPaletteStyles = {
27
28
  container: "_1rjcu2gc",
28
29
  elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
@@ -64,13 +65,16 @@ var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColor
64
65
  backgroundColor: selectedColor
65
66
  };
66
67
  }, [selectedColor]);
68
+ var isMoreColorsEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _fg.fg)('platform_editor_lovability_text_bg_color_patch_2');
69
+ var activePalette = isMoreColorsEnabled ? _uiColor.cellBackgroundColorPaletteNew : _uiColor.cellBackgroundColorPalette;
70
+ var activeCols = isMoreColorsEnabled ? _consts.colorPaletteColumns : _consts.colorPalletteColumns;
67
71
  var paletteOptions = (0, _react.useMemo)(function () {
68
72
  return {
69
- palette: _uiColor.cellBackgroundColorPalette,
73
+ palette: activePalette,
70
74
  paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
71
75
  hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
72
76
  };
73
- }, []);
77
+ }, [activePalette]);
74
78
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
75
79
  elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.PaintBucketIcon, {
76
80
  color: "currentColor",
@@ -90,7 +94,7 @@ var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColor
90
94
  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
91
95
  xcss: colorPaletteStyles.container
92
96
  }, /*#__PURE__*/_react.default.createElement(_uiColor.ColorPalette, {
93
- cols: colorPaletteColumns,
97
+ cols: activeCols,
94
98
  onClick: onClick,
95
99
  selectedColor: colorPreviewStyle.backgroundColor,
96
100
  paletteOptions: paletteOptions
package/dist/cjs/ui/consts.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tableResizerWidth = exports.tablePopupMenuFitHeight = exports.tablePadding = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellSelectedColor = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableColumnControlsHeight = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.nativeStickyHeaderZIndex = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragRowControlsWidth = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.belowNativeStickyHeaderZIndex = exports.aboveNativeStickyHeaderZIndex = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = exports.TABLE_DRAG_MENU_PADDING_TOP = exports.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
6
+ exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tableResizerWidth = exports.tablePopupMenuFitHeight = exports.tablePadding = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellSelectedColor = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableColumnControlsHeight = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.nativeStickyHeaderZIndex = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragRowControlsWidth = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.colorPaletteColumns = exports.belowNativeStickyHeaderZIndex = exports.aboveNativeStickyHeaderZIndex = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = exports.TABLE_DRAG_MENU_PADDING_TOP = exports.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
7
7
  var _styles = require("@atlaskit/editor-common/styles");
8
8
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
9
9
  var _types = require("../types");
@@ -83,5 +83,9 @@ var dragMenuDropdownWidth = exports.dragMenuDropdownWidth = 250;
83
83
  var dragTableInsertColumnButtonSize = exports.dragTableInsertColumnButtonSize = 16;
84
84
  var dropTargetExtendedWidth = exports.dropTargetExtendedWidth = 150;
85
85
  var dragRowControlsWidth = exports.dragRowControlsWidth = 14;
86
+ // Column count for the 7-column palette. Kept under its original (misspelled) name so existing
87
+ // importers are not broken.
86
88
  var colorPalletteColumns = exports.colorPalletteColumns = 7;
89
+ // Column count for the expanded palette, which adds lime, orange and magenta columns.
90
+ var colorPaletteColumns = exports.colorPaletteColumns = 10;
87
91
  var tableResizerWidth = exports.tableResizerWidth = 8;
package/dist/cjs/ui/toolbar.js CHANGED
@@ -35,6 +35,7 @@ var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize")
35
35
  var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
36
36
  var _shrinkHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-horizontal"));
37
37
  var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
38
+ var _fg = require("@atlaskit/platform-feature-flags/fg");
38
39
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
39
40
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
40
41
  var _commands = require("../pm-plugins/commands");
@@ -53,6 +54,7 @@ var _table = require("../pm-plugins/utils/table");
53
54
  var _applyMeasuredWidthToSelectedTable = require("../pm-plugins/utils/tableMode/apply-measured-width-to-selected-table");
54
55
  var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
55
56
  var _types = require("../types");
57
+ var _consts = require("./consts");
56
58
  var _FloatingAlignmentButtons = require("./FloatingAlignmentButtons/FloatingAlignmentButtons");
57
59
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
58
60
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -669,7 +671,9 @@ var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalytics
669
671
  }
670
672
  var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
671
673
  var currentBackground = (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
672
- var defaultPalette = _uiColor.cellBackgroundColorPalette.find(function (item) {
674
+ var isMoreColorsEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _fg.fg)('platform_editor_lovability_text_bg_color_patch_2');
675
+ var activePalette = isMoreColorsEnabled ? _uiColor.cellBackgroundColorPaletteNew : _uiColor.cellBackgroundColorPalette;
676
+ var defaultPalette = activePalette.find(function (item) {
673
677
  return item.value === currentBackground;
674
678
  }) || {
675
679
  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
@@ -683,8 +687,9 @@ var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalytics
683
687
  type: 'select',
684
688
  isAriaExpanded: true,
685
689
  selectType: 'color',
690
+ cols: isMoreColorsEnabled ? _consts.colorPaletteColumns : _consts.colorPalletteColumns,
686
691
  defaultValue: defaultPalette,
687
- options: _uiColor.cellBackgroundColorPalette,
692
+ options: activePalette,
688
693
  returnEscToButton: true,
689
694
  // Ignored via go/ees005
690
695
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
package/dist/es2019/pm-plugins/commands/commands-with-analytics.js CHANGED
@@ -1,4 +1,4 @@
1
- import { tableBackgroundColorPalette } from '@atlaskit/adf-schema/tableNodes';
1
+ import { tableBackgroundColorNameByHex } from '@atlaskit/adf-schema/tableNodes';
2
2
  import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_DISPLAY_MODE } from '@atlaskit/editor-common/analytics';
3
3
  import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
4
4
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -119,7 +119,7 @@ export const setColorWithAnalytics = editorAnalyticsAPI => (inputMethod, cellCol
119
119
  actionSubjectId: null,
120
120
  attributes: {
121
121
  inputMethod,
122
- cellColor: (tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
122
+ cellColor: (tableBackgroundColorNameByHex.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
123
123
  horizontalCells,
124
124
  verticalCells,
125
125
  totalCells,
package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js CHANGED
@@ -16,7 +16,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
16
16
  import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
17
17
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
18
18
  import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
19
- import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
19
+ import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
20
20
  import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
21
21
  import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
22
22
  import { closestElement } from '@atlaskit/editor-common/utils';
@@ -32,6 +32,7 @@ import TableColumnDeleteIcon from '@atlaskit/icon/core/table-column-delete';
32
32
  import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
33
33
  import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
34
34
  import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
35
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
35
36
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
36
37
  import { Box, xcss } from '@atlaskit/primitives';
37
38
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -45,7 +46,7 @@ import { canMergeCells } from '../../pm-plugins/transforms/merge';
45
46
  import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../pm-plugins/utils/selection';
46
47
  import { getMergedCellsPositions } from '../../pm-plugins/utils/table';
47
48
  import { TableCssClassName as ClassName } from '../../types';
48
- import { colorPalletteColumns, contextualMenuDropdownWidthDnD } from '../consts';
49
+ import { colorPaletteColumns, colorPalletteColumns, contextualMenuDropdownWidthDnD } from '../consts';
49
50
  import { cellColourPreviewStyles } from './styles';
50
51
  const dropdownMenuSection = {
51
52
  hasSeparator: true
@@ -121,10 +122,13 @@ export class ContextualMenu extends Component {
121
122
  var _node$attrs, _node$attrs2;
122
123
  const node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
123
124
  const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
124
- const selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette,
125
+ const isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
126
+ const activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
127
+ const activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPalletteColumns;
128
+ const selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(activePalette,
125
129
  // Ignored via go/ees005
126
130
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
127
- background, colorPalletteColumns);
131
+ background, activeCols);
128
132
  const selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
129
133
  const selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
130
134
  return {
@@ -176,13 +180,13 @@ export class ContextualMenu extends Component {
176
180
  ,
177
181
  isOpenedByKeyboard: isCellMenuOpenByKeyboard
178
182
  }, jsx(ColorPalette, {
179
- cols: 7,
183
+ cols: activeCols,
180
184
  onClick: this.setColor,
181
185
  selectedColor: (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.background) || '#ffffff'
182
186
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
183
187
  ,
184
188
  paletteOptions: {
185
- palette: cellBackgroundColorPalette,
189
+ palette: activePalette,
186
190
  paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
187
191
  hexToPaletteColor: hexToEditorBackgroundPaletteColor
188
192
  }
package/dist/es2019/ui/FloatingDragMenu/DragMenu.js CHANGED
@@ -12,7 +12,7 @@ import { injectIntl } from 'react-intl';
12
12
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
13
13
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
14
14
  import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
15
- import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
15
+ import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
16
16
  import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
17
17
  import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
18
18
  import { closestElement } from '@atlaskit/editor-common/utils';
@@ -21,8 +21,10 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
21
21
  import { TableMap } from '@atlaskit/editor-tables/table-map';
22
22
  import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
23
23
  import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
24
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
24
25
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
25
26
  import { Box, xcss } from '@atlaskit/primitives';
27
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
26
28
  import Toggle from '@atlaskit/toggle';
27
29
  import { clearHoverSelection, hoverColumns, hoverRows } from '../../pm-plugins/commands';
28
30
  import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
@@ -33,7 +35,7 @@ import { getDragMenuConfig } from '../../pm-plugins/utils/drag-menu';
33
35
  import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled } from '../../pm-plugins/utils/nodes';
34
36
  import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../pm-plugins/utils/selection';
35
37
  import { TableCssClassName as ClassName } from '../../types';
36
- import { colorPalletteColumns } from '../consts';
38
+ import { colorPaletteColumns, colorPalletteColumns } from '../consts';
37
39
  import { DropdownMenu } from './DropdownMenu';
38
40
  import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
39
41
  const MapDragMenuOptionIdToMessage = {
@@ -275,10 +277,13 @@ const DragMenu = /*#__PURE__*/React.memo(({
275
277
  } = getTablePluginState(editorView.state);
276
278
  const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
277
279
  const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
280
+ const isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
281
+ const activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
282
+ const activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPalletteColumns;
278
283
  const {
279
284
  selectedRowIndex,
280
285
  selectedColumnIndex
281
- } = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette, background, colorPalletteColumns);
286
+ } = getSelectedRowAndColumnFromPalette(activePalette, background, activeCols);
282
287
  return {
283
288
  key: 'background',
284
289
  content: formatMessage(messages.backgroundColor),
@@ -329,7 +334,7 @@ const DragMenu = /*#__PURE__*/React.memo(({
329
334
  isPopupPositioned: true,
330
335
  isOpenedByKeyboard: isKeyboardModeActive
331
336
  }, jsx(ColorPalette, {
332
- cols: colorPalletteColumns
337
+ cols: activeCols
333
338
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
334
339
  ,
335
340
  onClick: color => {
@@ -339,7 +344,7 @@ const DragMenu = /*#__PURE__*/React.memo(({
339
344
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
340
345
  ,
341
346
  paletteOptions: {
342
- palette: cellBackgroundColorPalette,
347
+ palette: activePalette,
343
348
  paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
344
349
  hexToPaletteColor: hexToEditorBackgroundPaletteColor
345
350
  }
package/dist/es2019/ui/TableMenu/shared/items/BackgroundColorItem.js CHANGED
@@ -5,16 +5,17 @@ import React, { useCallback, useMemo } from 'react';
5
5
  import { useIntl } from 'react-intl';
6
6
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
7
7
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
8
- import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
8
+ import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette } from '@atlaskit/editor-common/ui-color';
9
9
  import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
10
10
  import { NestedDropdownRightIcon, PaintBucketIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
11
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
11
12
  import { Box } from '@atlaskit/primitives/compiled';
12
13
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
13
14
  import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
14
15
  import { setColorWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
15
16
  import { getPluginState } from '../../../../pm-plugins/plugin-factory';
17
+ import { colorPaletteColumns, colorPalletteColumns } from '../../../../ui/consts';
16
18
  import { useTableMenuContext } from '../TableMenuContext';
17
- const colorPaletteColumns = 7;
18
19
  const colorPaletteStyles = {
19
20
  container: "_1rjcu2gc",
20
21
  elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
@@ -58,13 +59,16 @@ export const BackgroundColorItem = ({
58
59
  const colorPreviewStyle = useMemo(() => ({
59
60
  backgroundColor: selectedColor
60
61
  }), [selectedColor]);
62
+ const isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
63
+ const activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
64
+ const activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPalletteColumns;
61
65
  const paletteOptions = useMemo(() => {
62
66
  return {
63
- palette: cellBackgroundColorPalette,
67
+ palette: activePalette,
64
68
  paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
65
69
  hexToPaletteColor: hexToEditorBackgroundPaletteColor
66
70
  };
67
- }, []);
71
+ }, [activePalette]);
68
72
  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
69
73
  elemBefore: /*#__PURE__*/React.createElement(PaintBucketIcon, {
70
74
  color: "currentColor",
@@ -84,7 +88,7 @@ export const BackgroundColorItem = ({
84
88
  }, /*#__PURE__*/React.createElement(Box, {
85
89
  xcss: colorPaletteStyles.container
86
90
  }, /*#__PURE__*/React.createElement(ColorPalette, {
87
- cols: colorPaletteColumns,
91
+ cols: activeCols,
88
92
  onClick: onClick,
89
93
  selectedColor: colorPreviewStyle.backgroundColor,
90
94
  paletteOptions: paletteOptions
package/dist/es2019/ui/consts.js CHANGED
@@ -78,5 +78,9 @@ export const dragMenuDropdownWidth = 250;
78
78
  export const dragTableInsertColumnButtonSize = 16;
79
79
  export const dropTargetExtendedWidth = 150;
80
80
  export const dragRowControlsWidth = 14;
81
+ // Column count for the 7-column palette. Kept under its original (misspelled) name so existing
82
+ // importers are not broken.
81
83
  export const colorPalletteColumns = 7;
84
+ // Column count for the expanded palette, which adds lime, orange and magenta columns.
85
+ export const colorPaletteColumns = 10;
82
86
  export const tableResizerWidth = 8;
package/dist/es2019/ui/toolbar.js CHANGED
@@ -15,7 +15,7 @@ import commonMessages, { tableMessages as messages } from '@atlaskit/editor-comm
15
15
  import { isNestedTablesSupported, isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
16
16
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
17
17
  import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
18
- import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
18
+ import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette, cellBackgroundColorPaletteNew } from '@atlaskit/editor-common/ui-color';
19
19
  import { closestElement, getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
20
20
  import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
21
21
  import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -29,6 +29,7 @@ import CustomizeIcon from '@atlaskit/icon/core/customize';
29
29
  import DeleteIcon from '@atlaskit/icon/core/delete';
30
30
  import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
31
31
  import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
32
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
32
33
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
33
34
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
34
35
  import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from '../pm-plugins/commands';
@@ -47,6 +48,7 @@ import { getMergedCellsPositions } from '../pm-plugins/utils/table';
47
48
  import { applyMeasuredWidthToSelectedTable } from '../pm-plugins/utils/tableMode/apply-measured-width-to-selected-table';
48
49
  import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
49
50
  import { TableCssClassName } from '../types';
51
+ import { colorPaletteColumns, colorPalletteColumns } from './consts';
50
52
  import { FloatingAlignmentButtons } from './FloatingAlignmentButtons/FloatingAlignmentButtons';
51
53
  export const getToolbarMenuConfig = (config, state, {
52
54
  formatMessage
@@ -625,7 +627,9 @@ const getColorPicker = (state, menu, {
625
627
  }
626
628
  const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
627
629
  const currentBackground = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
628
- const defaultPalette = cellBackgroundColorPalette.find(item => item.value === currentBackground) || {
630
+ const isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
631
+ const activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
632
+ const defaultPalette = activePalette.find(item => item.value === currentBackground) || {
629
633
  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
630
634
  label: 'Custom',
631
635
  value: currentBackground,
@@ -637,8 +641,9 @@ const getColorPicker = (state, menu, {
637
641
  type: 'select',
638
642
  isAriaExpanded: true,
639
643
  selectType: 'color',
644
+ cols: isMoreColorsEnabled ? colorPaletteColumns : colorPalletteColumns,
640
645
  defaultValue: defaultPalette,
641
- options: cellBackgroundColorPalette,
646
+ options: activePalette,
642
647
  returnEscToButton: true,
643
648
  // Ignored via go/ees005
644
649
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
package/dist/esm/pm-plugins/commands/commands-with-analytics.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  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; }
3
3
  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) { _defineProperty(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; }
4
- import { tableBackgroundColorPalette } from '@atlaskit/adf-schema/tableNodes';
4
+ import { tableBackgroundColorNameByHex } from '@atlaskit/adf-schema/tableNodes';
5
5
  import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_DISPLAY_MODE } from '@atlaskit/editor-common/analytics';
6
6
  import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
7
7
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -127,7 +127,7 @@ export var setColorWithAnalytics = function setColorWithAnalytics(editorAnalytic
127
127
  actionSubjectId: null,
128
128
  attributes: {
129
129
  inputMethod: inputMethod,
130
- cellColor: (tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
130
+ cellColor: (tableBackgroundColorNameByHex.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
131
131
  horizontalCells: horizontalCells,
132
132
  verticalCells: verticalCells,
133
133
  totalCells: totalCells,
package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js CHANGED
@@ -26,7 +26,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
26
26
  import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
27
27
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
28
28
  import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
29
- import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
29
+ import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
30
30
  import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
31
31
  import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
32
32
  import { closestElement } from '@atlaskit/editor-common/utils';
@@ -42,6 +42,7 @@ import TableColumnDeleteIcon from '@atlaskit/icon/core/table-column-delete';
42
42
  import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
43
43
  import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
44
44
  import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
45
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
45
46
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
46
47
  import { Box, xcss } from '@atlaskit/primitives';
47
48
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -55,7 +56,7 @@ import { canMergeCells } from '../../pm-plugins/transforms/merge';
55
56
  import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../pm-plugins/utils/selection';
56
57
  import { getMergedCellsPositions } from '../../pm-plugins/utils/table';
57
58
  import { TableCssClassName as ClassName } from '../../types';
58
- import { colorPalletteColumns, contextualMenuDropdownWidthDnD } from '../consts';
59
+ import { colorPaletteColumns, colorPalletteColumns, contextualMenuDropdownWidthDnD } from '../consts';
59
60
  import { cellColourPreviewStyles } from './styles';
60
61
  var dropdownMenuSection = {
61
62
  hasSeparator: true
@@ -130,10 +131,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
130
131
  var _node$attrs, _node$attrs2;
131
132
  var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
132
133
  var background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
133
- var selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette,
134
+ var isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
135
+ var activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
136
+ var activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPalletteColumns;
137
+ var selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(activePalette,
134
138
  // Ignored via go/ees005
135
139
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
136
- background, colorPalletteColumns);
140
+ background, activeCols);
137
141
  var selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
138
142
  var selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
139
143
  return {
@@ -185,13 +189,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
185
189
  ,
186
190
  isOpenedByKeyboard: isCellMenuOpenByKeyboard
187
191
  }, jsx(ColorPalette, {
188
- cols: 7,
192
+ cols: activeCols,
189
193
  onClick: _this.setColor,
190
194
  selectedColor: (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.background) || '#ffffff'
191
195
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
192
196
  ,
193
197
  paletteOptions: {
194
- palette: cellBackgroundColorPalette,
198
+ palette: activePalette,
195
199
  paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
196
200
  hexToPaletteColor: hexToEditorBackgroundPaletteColor
197
201
  }
package/dist/esm/ui/FloatingDragMenu/DragMenu.js CHANGED
@@ -14,7 +14,7 @@ import { injectIntl } from 'react-intl';
14
14
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
15
15
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
16
16
  import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
17
- import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
17
+ import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
18
18
  import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
19
19
  import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
20
20
  import { closestElement } from '@atlaskit/editor-common/utils';
@@ -23,8 +23,10 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
23
23
  import { TableMap } from '@atlaskit/editor-tables/table-map';
24
24
  import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
25
25
  import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
26
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
26
27
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
27
28
  import { Box, xcss } from '@atlaskit/primitives';
29
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
28
30
  import Toggle from '@atlaskit/toggle';
29
31
  import { clearHoverSelection, hoverColumns, hoverRows } from '../../pm-plugins/commands';
30
32
  import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
@@ -35,7 +37,7 @@ import { getDragMenuConfig } from '../../pm-plugins/utils/drag-menu';
35
37
  import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled } from '../../pm-plugins/utils/nodes';
36
38
  import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../pm-plugins/utils/selection';
37
39
  import { TableCssClassName as ClassName } from '../../types';
38
- import { colorPalletteColumns } from '../consts';
40
+ import { colorPaletteColumns, colorPalletteColumns } from '../consts';
39
41
  import { DropdownMenu } from './DropdownMenu';
40
42
  import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
41
43
  var MapDragMenuOptionIdToMessage = {
@@ -271,7 +273,10 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
271
273
  targetCellPosition = _getTablePluginState.targetCellPosition;
272
274
  var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
273
275
  var background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
274
- var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette, background, colorPalletteColumns),
276
+ var isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
277
+ var activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
278
+ var activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPalletteColumns;
279
+ var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(activePalette, background, activeCols),
275
280
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
276
281
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
277
282
  return {
@@ -324,7 +329,7 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
324
329
  isPopupPositioned: true,
325
330
  isOpenedByKeyboard: isKeyboardModeActive
326
331
  }, jsx(ColorPalette, {
327
- cols: colorPalletteColumns
332
+ cols: activeCols
328
333
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
329
334
  ,
330
335
  onClick: function onClick(color) {
@@ -334,7 +339,7 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
334
339
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
335
340
  ,
336
341
  paletteOptions: {
337
- palette: cellBackgroundColorPalette,
342
+ palette: activePalette,
338
343
  paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
339
344
  hexToPaletteColor: hexToEditorBackgroundPaletteColor
340
345
  }
package/dist/esm/ui/TableMenu/shared/items/BackgroundColorItem.js CHANGED
@@ -5,16 +5,17 @@ import React, { useCallback, useMemo } from 'react';
5
5
  import { useIntl } from 'react-intl';
6
6
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
7
7
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
8
- import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
8
+ import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette } from '@atlaskit/editor-common/ui-color';
9
9
  import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
10
10
  import { NestedDropdownRightIcon, PaintBucketIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
11
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
11
12
  import { Box } from '@atlaskit/primitives/compiled';
12
13
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
13
14
  import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
14
15
  import { setColorWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
15
16
  import { getPluginState } from '../../../../pm-plugins/plugin-factory';
17
+ import { colorPaletteColumns, colorPalletteColumns } from '../../../../ui/consts';
16
18
  import { useTableMenuContext } from '../TableMenuContext';
17
- var colorPaletteColumns = 7;
18
19
  var colorPaletteStyles = {
19
20
  container: "_1rjcu2gc",
20
21
  elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
@@ -56,13 +57,16 @@ export var BackgroundColorItem = function BackgroundColorItem(_ref) {
56
57
  backgroundColor: selectedColor
57
58
  };
58
59
  }, [selectedColor]);
60
+ var isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
61
+ var activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
62
+ var activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPalletteColumns;
59
63
  var paletteOptions = useMemo(function () {
60
64
  return {
61
- palette: cellBackgroundColorPalette,
65
+ palette: activePalette,
62
66
  paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
63
67
  hexToPaletteColor: hexToEditorBackgroundPaletteColor
64
68
  };
65
- }, []);
69
+ }, [activePalette]);
66
70
  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
67
71
  elemBefore: /*#__PURE__*/React.createElement(PaintBucketIcon, {
68
72
  color: "currentColor",
@@ -82,7 +86,7 @@ export var BackgroundColorItem = function BackgroundColorItem(_ref) {
82
86
  }, /*#__PURE__*/React.createElement(Box, {
83
87
  xcss: colorPaletteStyles.container
84
88
  }, /*#__PURE__*/React.createElement(ColorPalette, {
85
- cols: colorPaletteColumns,
89
+ cols: activeCols,
86
90
  onClick: onClick,
87
91
  selectedColor: colorPreviewStyle.backgroundColor,
88
92
  paletteOptions: paletteOptions
package/dist/esm/ui/consts.js CHANGED
@@ -78,5 +78,9 @@ export var dragMenuDropdownWidth = 250;
78
78
  export var dragTableInsertColumnButtonSize = 16;
79
79
  export var dropTargetExtendedWidth = 150;
80
80
  export var dragRowControlsWidth = 14;
81
+ // Column count for the 7-column palette. Kept under its original (misspelled) name so existing
82
+ // importers are not broken.
81
83
  export var colorPalletteColumns = 7;
84
+ // Column count for the expanded palette, which adds lime, orange and magenta columns.
85
+ export var colorPaletteColumns = 10;
82
86
  export var tableResizerWidth = 8;
package/dist/esm/ui/toolbar.js CHANGED
@@ -21,7 +21,7 @@ import commonMessages, { tableMessages as messages } from '@atlaskit/editor-comm
21
21
  import { isNestedTablesSupported, isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
22
22
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
23
23
  import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
24
- import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
24
+ import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette, cellBackgroundColorPaletteNew } from '@atlaskit/editor-common/ui-color';
25
25
  import { closestElement, getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
26
26
  import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
27
27
  import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -35,6 +35,7 @@ import CustomizeIcon from '@atlaskit/icon/core/customize';
35
35
  import DeleteIcon from '@atlaskit/icon/core/delete';
36
36
  import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
37
37
  import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
38
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
38
39
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
39
40
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
40
41
  import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from '../pm-plugins/commands';
@@ -53,6 +54,7 @@ import { getMergedCellsPositions } from '../pm-plugins/utils/table';
53
54
  import { applyMeasuredWidthToSelectedTable } from '../pm-plugins/utils/tableMode/apply-measured-width-to-selected-table';
54
55
  import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
55
56
  import { TableCssClassName } from '../types';
57
+ import { colorPaletteColumns, colorPalletteColumns } from './consts';
56
58
  import { FloatingAlignmentButtons } from './FloatingAlignmentButtons/FloatingAlignmentButtons';
57
59
  export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
58
60
  var formatMessage = _ref.formatMessage;
@@ -662,7 +664,9 @@ var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalytics
662
664
  }
663
665
  var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
664
666
  var currentBackground = (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
665
- var defaultPalette = cellBackgroundColorPalette.find(function (item) {
667
+ var isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
668
+ var activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
669
+ var defaultPalette = activePalette.find(function (item) {
666
670
  return item.value === currentBackground;
667
671
  }) || {
668
672
  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
@@ -676,8 +680,9 @@ var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalytics
676
680
  type: 'select',
677
681
  isAriaExpanded: true,
678
682
  selectType: 'color',
683
+ cols: isMoreColorsEnabled ? colorPaletteColumns : colorPalletteColumns,
679
684
  defaultValue: defaultPalette,
680
- options: cellBackgroundColorPalette,
685
+ options: activePalette,
681
686
  returnEscToButton: true,
682
687
  // Ignored via go/ees005
683
688
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
package/dist/types/ui/consts.d.ts CHANGED
@@ -64,4 +64,5 @@ export declare const dragTableInsertColumnButtonSize = 16;
64
64
  export declare const dropTargetExtendedWidth = 150;
65
65
  export declare const dragRowControlsWidth = 14;
66
66
  export declare const colorPalletteColumns = 7;
67
+ export declare const colorPaletteColumns = 10;
67
68
  export declare const tableResizerWidth = 8;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "25.0.6",
3
+ "version": "25.1.0",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -20,7 +20,7 @@
20
20
  "singleton": true
21
21
  },
22
22
  "dependencies": {
23
- "@atlaskit/adf-schema": "^56.5.0",
23
+ "@atlaskit/adf-schema": "^56.6.0",
24
24
  "@atlaskit/button": "^25.0.0",
25
25
  "@atlaskit/custom-steps": "^1.0.0",
26
26
  "@atlaskit/editor-palette": "^3.4.0",
@@ -29,12 +29,12 @@
29
29
  "@atlaskit/editor-plugin-batch-attribute-updates": "^13.0.0",
30
30
  "@atlaskit/editor-plugin-content-insertion": "^13.0.0",
31
31
  "@atlaskit/editor-plugin-editor-viewmode": "^15.0.0",
32
- "@atlaskit/editor-plugin-extension": "16.0.4",
32
+ "@atlaskit/editor-plugin-extension": "16.1.0",
33
33
  "@atlaskit/editor-plugin-guideline": "^13.0.0",
34
34
  "@atlaskit/editor-plugin-interaction": "^24.0.0",
35
35
  "@atlaskit/editor-plugin-limited-mode": "^10.0.0",
36
36
  "@atlaskit/editor-plugin-selection": "^13.0.0",
37
- "@atlaskit/editor-plugin-toolbar": "^10.0.0",
37
+ "@atlaskit/editor-plugin-toolbar": "^10.1.0",
38
38
  "@atlaskit/editor-plugin-ui-control-registry": "^7.0.0",
39
39
  "@atlaskit/editor-plugin-user-intent": "^11.0.0",
40
40
  "@atlaskit/editor-plugin-width": "^14.0.0",
@@ -53,7 +53,7 @@
53
53
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
54
54
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
55
55
  "@atlaskit/primitives": "^22.2.0",
56
- "@atlaskit/tmp-editor-statsig": "^141.0.0",
56
+ "@atlaskit/tmp-editor-statsig": "^141.1.0",
57
57
  "@atlaskit/toggle": "^17.1.0",
58
58
  "@atlaskit/tokens": "^16.3.0",
59
59
  "@atlaskit/tooltip": "^24.0.0",
@@ -68,7 +68,7 @@
68
68
  "uuid": "^3.1.0"
69
69
  },
70
70
  "peerDependencies": {
71
- "@atlaskit/editor-common": "^117.2.0",
71
+ "@atlaskit/editor-common": "^117.3.0",
72
72
  "react": "^18.2.0 || ^19.2.0",
73
73
  "react-dom": "^18.2.0 || ^19.2.0",
74
74
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -157,6 +157,9 @@
157
157
  },
158
158
  "platform_editor_table_flicker_issue": {
159
159
  "type": "boolean"
160
+ },
161
+ "platform_editor_lovability_text_bg_color_patch_2": {
162
+ "type": "boolean"
160
163
  }
161
164
  },
162
165
  "devDependencies": {