@atlaskit/editor-plugin-highlight 3.0.3 → 3.0.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-highlight
 
+## 3.0.4
+
+### Patch Changes
+
+- [#185643](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185643)
+  [`5954e6c1fbac5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5954e6c1fbac5) -
+  [ux] [ED-28432] Add orange highlight color and reorder color swatches
+- Updated dependencies
+
 ## 3.0.3
 
 ### Patch Changes

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

@@ -8,6 +8,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _preset = require("@atlaskit/editor-common/preset");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _changeColor = require("../editor-commands/change-color");
 var _palette = require("../editor-commands/palette");
 function keymapPlugin(_ref) {
@@ -24,19 +25,23 @@ function keymapPlugin(_ref) {
     inputMethod: _analytics.INPUT_METHOD.SHORTCUT
   }), list);
   var analyticsApi = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  // NOTE: This will work with fallback until we clean up `editor_text_highlight_orange_to_yellow`
-  var color = _uiColor.highlightColorPalette.find(function (_ref2) {
+  var color = (0, _expValEquals.expValEquals)('platform_editor_add_orange_highlight_color', 'cohort', 'test') ? _uiColor.highlightColorPaletteNext.find(function (_ref2) {
     var label = _ref2.label;
     return label === 'Yellow';
+  }) : _uiColor.highlightColorPalette.find(function (_ref3) {
+    var label = _ref3.label;
+    return label === 'Yellow';
   }) || {
     value: '#fedec8'
   };
-  (0, _keymaps.bindKeymapWithCommand)(
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  _keymaps.applyYellowHighlight.common, (0, _preset.editorCommandToPMCommand)((0, _changeColor.changeColor)(analyticsApi)({
-    color: color.value,
-    inputMethod: _analytics.INPUT_METHOD.SHORTCUT
-  })), list);
+  if (color) {
+    (0, _keymaps.bindKeymapWithCommand)(
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    _keymaps.applyYellowHighlight.common, (0, _preset.editorCommandToPMCommand)((0, _changeColor.changeColor)(analyticsApi)({
+      color: color.value,
+      inputMethod: _analytics.INPUT_METHOD.SHORTCUT
+    })), list);
+  }
   return (0, _keymaps.keymap)(list);
 }

package/dist/cjs/ui/shared/PaletteDropdown.js

@@ -11,8 +11,10 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 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 HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
 var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props) {
   var popupsMountPoint = props.popupsMountPoint,
     popupsBoundariesElement = props.popupsBoundariesElement,
@@ -24,21 +26,26 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
     isOpenedByKeyboard = props.isOpenedByKeyboard,
     handleClickOutside = props.handleClickOutside,
     handleEscapeKeydown = props.handleEscapeKeydown;
+  var isOrangeHighlightEnabled = (0, _expValEquals.expValEquals)('platform_editor_add_orange_highlight_color', 'cohort', 'test');
 
   // pixels, used to determine where to horizontally position the dropdown when space is limited
   // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
-  var fitWidth = 242;
-  var colorPalette = _uiColor.highlightColorPalette;
-  colorPalette = _uiColor.highlightColorPalette.map(function (item) {
-    if (item.label === 'Orange') {
-      return _objectSpread(_objectSpread({}, item), {}, {
-        label: 'Yellow',
-        message: _uiColor.colorPaletteMessages.yellow
-      });
-    }
-    return item;
-  });
-  var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(colorPalette, activeColor),
+  var fitWidth = isOrangeHighlightEnabled ? 274 : 242;
+  var colorPalette;
+  if (isOrangeHighlightEnabled) {
+    colorPalette = _uiColor.highlightColorPaletteNext;
+  } else {
+    colorPalette = _uiColor.highlightColorPalette.map(function (item) {
+      if (item.label === 'Orange') {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          label: 'Yellow',
+          message: _uiColor.colorPaletteMessages.yellow
+        });
+      }
+      return item;
+    });
+  }
+  var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(colorPalette, activeColor, isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined),
     selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
     selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
   return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
@@ -62,6 +69,7 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "highlight-color-palette"
   }, /*#__PURE__*/_react.default.createElement(_uiColor.ColorPalette, {
+    cols: isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined,
     onClick: onColorChange,
     selectedColor: activeColor,
     paletteOptions: {

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

@@ -1,7 +1,8 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { bindKeymapWithCommand, keymap, toggleHighlightPalette, applyYellowHighlight } from '@atlaskit/editor-common/keymaps';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
-import { highlightColorPalette } from '@atlaskit/editor-common/ui-color';
+import { highlightColorPalette, highlightColorPaletteNext } from '@atlaskit/editor-common/ui-color';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { changeColor } from '../editor-commands/change-color';
 import { togglePalette } from '../editor-commands/palette';
 export function keymapPlugin({
@@ -19,18 +20,21 @@ export function keymapPlugin({
     inputMethod: INPUT_METHOD.SHORTCUT
   }), list);
   const analyticsApi = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  // NOTE: This will work with fallback until we clean up `editor_text_highlight_orange_to_yellow`
-  const color = highlightColorPalette.find(({
+  const color = expValEquals('platform_editor_add_orange_highlight_color', 'cohort', 'test') ? highlightColorPaletteNext.find(({
+    label
+  }) => label === 'Yellow') : highlightColorPalette.find(({
     label
   }) => label === 'Yellow') || {
     value: '#fedec8'
   };
-  bindKeymapWithCommand(
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  applyYellowHighlight.common, editorCommandToPMCommand(changeColor(analyticsApi)({
-    color: color.value,
-    inputMethod: INPUT_METHOD.SHORTCUT
-  })), list);
+  if (color) {
+    bindKeymapWithCommand(
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    applyYellowHighlight.common, editorCommandToPMCommand(changeColor(analyticsApi)({
+      color: color.value,
+      inputMethod: INPUT_METHOD.SHORTCUT
+    })), list);
+  }
   return keymap(list);
 }

package/dist/es2019/ui/shared/PaletteDropdown.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import { ColorPalette, colorPaletteMessages, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
+import { ColorPalette, colorPaletteMessages, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteNext } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+const HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
 export const PaletteDropdown = props => {
   const {
     popupsMountPoint,
@@ -16,25 +18,30 @@ export const PaletteDropdown = props => {
     handleClickOutside,
     handleEscapeKeydown
   } = props;
+  const isOrangeHighlightEnabled = expValEquals('platform_editor_add_orange_highlight_color', 'cohort', 'test');
 
   // pixels, used to determine where to horizontally position the dropdown when space is limited
   // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
-  const fitWidth = 242;
-  let colorPalette = highlightColorPalette;
-  colorPalette = highlightColorPalette.map(item => {
-    if (item.label === 'Orange') {
-      return {
-        ...item,
-        label: 'Yellow',
-        message: colorPaletteMessages.yellow
-      };
-    }
-    return item;
-  });
+  const fitWidth = isOrangeHighlightEnabled ? 274 : 242;
+  let colorPalette;
+  if (isOrangeHighlightEnabled) {
+    colorPalette = highlightColorPaletteNext;
+  } else {
+    colorPalette = highlightColorPalette.map(item => {
+      if (item.label === 'Orange') {
+        return {
+          ...item,
+          label: 'Yellow',
+          message: colorPaletteMessages.yellow
+        };
+      }
+      return item;
+    });
+  }
   const {
     selectedRowIndex,
     selectedColumnIndex
-  } = getSelectedRowAndColumnFromPalette(colorPalette, activeColor);
+  } = getSelectedRowAndColumnFromPalette(colorPalette, activeColor, isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined);
   return /*#__PURE__*/React.createElement(Dropdown, {
     mountTo: popupsMountPoint,
     boundariesElement: popupsBoundariesElement,
@@ -56,6 +63,7 @@ export const PaletteDropdown = props => {
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": "highlight-color-palette"
   }, /*#__PURE__*/React.createElement(ColorPalette, {
+    cols: isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined,
     onClick: onColorChange,
     selectedColor: activeColor,
     paletteOptions: {

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

@@ -1,7 +1,8 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { bindKeymapWithCommand, keymap, toggleHighlightPalette, applyYellowHighlight } from '@atlaskit/editor-common/keymaps';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
-import { highlightColorPalette } from '@atlaskit/editor-common/ui-color';
+import { highlightColorPalette, highlightColorPaletteNext } from '@atlaskit/editor-common/ui-color';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { changeColor } from '../editor-commands/change-color';
 import { togglePalette } from '../editor-commands/palette';
 export function keymapPlugin(_ref) {
@@ -18,19 +19,23 @@ export function keymapPlugin(_ref) {
     inputMethod: INPUT_METHOD.SHORTCUT
   }), list);
   var analyticsApi = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  // NOTE: This will work with fallback until we clean up `editor_text_highlight_orange_to_yellow`
-  var color = highlightColorPalette.find(function (_ref2) {
+  var color = expValEquals('platform_editor_add_orange_highlight_color', 'cohort', 'test') ? highlightColorPaletteNext.find(function (_ref2) {
     var label = _ref2.label;
     return label === 'Yellow';
+  }) : highlightColorPalette.find(function (_ref3) {
+    var label = _ref3.label;
+    return label === 'Yellow';
   }) || {
     value: '#fedec8'
   };
-  bindKeymapWithCommand(
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  applyYellowHighlight.common, editorCommandToPMCommand(changeColor(analyticsApi)({
-    color: color.value,
-    inputMethod: INPUT_METHOD.SHORTCUT
-  })), list);
+  if (color) {
+    bindKeymapWithCommand(
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    applyYellowHighlight.common, editorCommandToPMCommand(changeColor(analyticsApi)({
+      color: color.value,
+      inputMethod: INPUT_METHOD.SHORTCUT
+    })), list);
+  }
   return keymap(list);
 }

package/dist/esm/ui/shared/PaletteDropdown.js

@@ -2,10 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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; }
 import React from 'react';
-import { ColorPalette, colorPaletteMessages, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
+import { ColorPalette, colorPaletteMessages, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteNext } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+var HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
 export var PaletteDropdown = function PaletteDropdown(props) {
   var popupsMountPoint = props.popupsMountPoint,
     popupsBoundariesElement = props.popupsBoundariesElement,
@@ -17,21 +19,26 @@ export var PaletteDropdown = function PaletteDropdown(props) {
     isOpenedByKeyboard = props.isOpenedByKeyboard,
     handleClickOutside = props.handleClickOutside,
     handleEscapeKeydown = props.handleEscapeKeydown;
+  var isOrangeHighlightEnabled = expValEquals('platform_editor_add_orange_highlight_color', 'cohort', 'test');
 
   // pixels, used to determine where to horizontally position the dropdown when space is limited
   // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
-  var fitWidth = 242;
-  var colorPalette = highlightColorPalette;
-  colorPalette = highlightColorPalette.map(function (item) {
-    if (item.label === 'Orange') {
-      return _objectSpread(_objectSpread({}, item), {}, {
-        label: 'Yellow',
-        message: colorPaletteMessages.yellow
-      });
-    }
-    return item;
-  });
-  var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(colorPalette, activeColor),
+  var fitWidth = isOrangeHighlightEnabled ? 274 : 242;
+  var colorPalette;
+  if (isOrangeHighlightEnabled) {
+    colorPalette = highlightColorPaletteNext;
+  } else {
+    colorPalette = highlightColorPalette.map(function (item) {
+      if (item.label === 'Orange') {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          label: 'Yellow',
+          message: colorPaletteMessages.yellow
+        });
+      }
+      return item;
+    });
+  }
+  var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(colorPalette, activeColor, isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined),
     selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
     selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
   return /*#__PURE__*/React.createElement(Dropdown, {
@@ -55,6 +62,7 @@ export var PaletteDropdown = function PaletteDropdown(props) {
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": "highlight-color-palette"
   }, /*#__PURE__*/React.createElement(ColorPalette, {
+    cols: isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined,
     onClick: onColorChange,
     selectedColor: activeColor,
     paletteOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-highlight",
-	"version": "3.0.3",
+	"version": "3.0.4",
 	"description": "Highlight plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^49.0.5",
+		"@atlaskit/adf-schema": "^49.0.6",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^3.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.0.0",
@@ -47,13 +47,13 @@
 		"@atlaskit/icon": "^27.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.10.0",
-		"@atlaskit/tmp-editor-statsig": "^9.3.0",
-		"@atlaskit/tokens": "^5.4.0",
+		"@atlaskit/tmp-editor-statsig": "^9.6.0",
+		"@atlaskit/tokens": "^5.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.7.0",
+		"@atlaskit/editor-common": "^107.8.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},