@atlaskit/editor-plugin-highlight 12.1.31 → 12.1.32

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-highlight
 
+## 12.1.32
+
+### Patch Changes
+
+- [`245230d12da8d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/245230d12da8d) -
+  [ux] [EDITOR-8142] add red highlight color and filter out the transparent/ default highlight color
+  behind platform_editor_lovability_text_bg_color_patch_1
+- Updated dependencies
+
 ## 12.1.31
 
 ### Patch Changes

package/dist/cjs/ui/HighlightColorMenuItem.js

@@ -122,7 +122,10 @@ function HighlightColorMenuItem(_ref3) {
     var iconColor = getTextColorIconColor(defaultColor, textColor, isNewColorPaletteEnabled);
     var highlightPalette = isNewColorPaletteEnabled ? _uiColor.highlightColorPaletteNew : _uiColor.highlightColorPalette;
     return highlightPalette.filter(function (color) {
-      return isNewColorPaletteEnabled || color.value !== _uiColor.REMOVE_HIGHLIGHT_COLOR;
+      if (!isNewColorPaletteEnabled || (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1')) {
+        return color.value !== _uiColor.REMOVE_HIGHLIGHT_COLOR;
+      }
+      return color.label !== 'Red';
     }).map(function (color) {
       return _objectSpread(_objectSpread({}, color), {}, {
         decorator: isNewColorPaletteEnabled && color.value === _uiColor.REMOVE_HIGHLIGHT_COLOR ? /*#__PURE__*/React.createElement(NoColorIconDecorator, {

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

@@ -1,16 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PaletteDropdown = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+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); }
 var HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
 var HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW = 10;
 var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props) {
@@ -25,7 +27,18 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
     handleClickOutside = props.handleClickOutside,
     handleEscapeKeydown = props.handleEscapeKeydown;
   var isNewColorPaletteEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true);
-  var highlightPalette = isNewColorPaletteEnabled ? _uiColor.highlightColorPaletteNew : _uiColor.highlightColorPalette;
+  var isRedHighlightEnabled = (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1');
+  var highlightPalette = (0, _react.useMemo)(function () {
+    if (isNewColorPaletteEnabled) {
+      return _uiColor.highlightColorPaletteNew.filter(function (color) {
+        if (isRedHighlightEnabled) {
+          return color.value !== _uiColor.REMOVE_HIGHLIGHT_COLOR;
+        }
+        return color.label !== 'Red';
+      });
+    }
+    return _uiColor.highlightColorPalette;
+  }, [isNewColorPaletteEnabled, isRedHighlightEnabled]);
   var colorPickerColumns = isNewColorPaletteEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW : HIGHLIGHT_COLOR_PICKER_COLUMNS;
 
   // pixels, used to determine where to horizontally position the dropdown when space is limited

package/dist/es2019/ui/HighlightColorMenuItem.js

@@ -110,7 +110,12 @@ export function HighlightColorMenuItem({
     const isSelected = color => color.value === selectedColor;
     const iconColor = getTextColorIconColor(defaultColor, textColor, isNewColorPaletteEnabled);
     const highlightPalette = isNewColorPaletteEnabled ? highlightColorPaletteNew : highlightColorPalette;
-    return highlightPalette.filter(color => isNewColorPaletteEnabled || color.value !== REMOVE_HIGHLIGHT_COLOR).map(color => ({
+    return highlightPalette.filter(color => {
+      if (!isNewColorPaletteEnabled || fg('platform_editor_lovability_text_bg_color_patch_1')) {
+        return color.value !== REMOVE_HIGHLIGHT_COLOR;
+      }
+      return color.label !== 'Red';
+    }).map(color => ({
       ...color,
       decorator: isNewColorPaletteEnabled && color.value === REMOVE_HIGHLIGHT_COLOR ? /*#__PURE__*/React.createElement(NoColorIconDecorator, {
         isSelected: isSelected(color),

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

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ColorPalette, REMOVE_HIGHLIGHT_COLOR, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteNew } 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 { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
 const HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW = 10;
@@ -20,7 +21,18 @@ export const PaletteDropdown = props => {
     handleEscapeKeydown
   } = props;
   const isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
-  const highlightPalette = isNewColorPaletteEnabled ? highlightColorPaletteNew : highlightColorPalette;
+  const isRedHighlightEnabled = fg('platform_editor_lovability_text_bg_color_patch_1');
+  const highlightPalette = useMemo(() => {
+    if (isNewColorPaletteEnabled) {
+      return highlightColorPaletteNew.filter(color => {
+        if (isRedHighlightEnabled) {
+          return color.value !== REMOVE_HIGHLIGHT_COLOR;
+        }
+        return color.label !== 'Red';
+      });
+    }
+    return highlightColorPalette;
+  }, [isNewColorPaletteEnabled, isRedHighlightEnabled]);
   const colorPickerColumns = isNewColorPaletteEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW : HIGHLIGHT_COLOR_PICKER_COLUMNS;
 
   // pixels, used to determine where to horizontally position the dropdown when space is limited

package/dist/esm/ui/HighlightColorMenuItem.js

@@ -113,7 +113,10 @@ export function HighlightColorMenuItem(_ref3) {
     var iconColor = getTextColorIconColor(defaultColor, textColor, isNewColorPaletteEnabled);
     var highlightPalette = isNewColorPaletteEnabled ? highlightColorPaletteNew : highlightColorPalette;
     return highlightPalette.filter(function (color) {
-      return isNewColorPaletteEnabled || color.value !== REMOVE_HIGHLIGHT_COLOR;
+      if (!isNewColorPaletteEnabled || fg('platform_editor_lovability_text_bg_color_patch_1')) {
+        return color.value !== REMOVE_HIGHLIGHT_COLOR;
+      }
+      return color.label !== 'Red';
     }).map(function (color) {
       return _objectSpread(_objectSpread({}, color), {}, {
         decorator: isNewColorPaletteEnabled && color.value === REMOVE_HIGHLIGHT_COLOR ? /*#__PURE__*/React.createElement(NoColorIconDecorator, {

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

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ColorPalette, REMOVE_HIGHLIGHT_COLOR, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteNew } 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 { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
 var HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW = 10;
@@ -18,7 +19,18 @@ export var PaletteDropdown = function PaletteDropdown(props) {
     handleClickOutside = props.handleClickOutside,
     handleEscapeKeydown = props.handleEscapeKeydown;
   var isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
-  var highlightPalette = isNewColorPaletteEnabled ? highlightColorPaletteNew : highlightColorPalette;
+  var isRedHighlightEnabled = fg('platform_editor_lovability_text_bg_color_patch_1');
+  var highlightPalette = useMemo(function () {
+    if (isNewColorPaletteEnabled) {
+      return highlightColorPaletteNew.filter(function (color) {
+        if (isRedHighlightEnabled) {
+          return color.value !== REMOVE_HIGHLIGHT_COLOR;
+        }
+        return color.label !== 'Red';
+      });
+    }
+    return highlightColorPalette;
+  }, [isNewColorPaletteEnabled, isRedHighlightEnabled]);
   var colorPickerColumns = isNewColorPaletteEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW : HIGHLIGHT_COLOR_PICKER_COLUMNS;
 
   // pixels, used to determine where to horizontally position the dropdown when space is limited

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-highlight",
-	"version": "12.1.31",
+	"version": "12.1.32",
 	"description": "Highlight plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/icon": "^37.0.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/primitives": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^126.2.0",
+		"@atlaskit/tmp-editor-statsig": "^126.3.0",
 		"@atlaskit/tokens": "^16.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"