@atlaskit/editor-plugin-text-color 3.1.16 → 3.2.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 (5) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/ui/TextColorHighlightMenu.js +31 -1
  3. package/dist/es2019/ui/TextColorHighlightMenu.js +32 -2
  4. package/dist/esm/ui/TextColorHighlightMenu.js +32 -2
  5. package/package.json +4 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/editor-plugin-text-color
2
2
 
3
+ ## 3.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`1eba43a7b680d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1eba43a7b680d) -
8
+ [ux] ED-29000 - Address paper cut issues in ColorPalette
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
3
14
  ## 3.1.16
4
15
 
5
16
  ### Patch Changes
package/dist/cjs/ui/TextColorHighlightMenu.js CHANGED
@@ -12,20 +12,50 @@ var _react = _interopRequireDefault(require("react"));
12
12
  var _reactIntlNext = require("react-intl-next");
13
13
  var _messages = require("@atlaskit/editor-common/messages");
14
14
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
15
+ var _editorPalette = require("@atlaskit/editor-palette");
15
16
  var _editorToolbar = require("@atlaskit/editor-toolbar");
16
17
  var _compiled = require("@atlaskit/primitives/compiled");
18
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
17
19
  var styles = {
18
20
  menu: "_1rjcv77o _18zru2gc"
19
21
  };
22
+ var getIconColor = function getIconColor(textColor, defaultColor, highlightColor) {
23
+ if (highlightColor || !textColor || textColor === defaultColor && defaultColor) {
24
+ return "var(--ds-text, #172B4D)";
25
+ }
26
+ return (0, _editorPalette.hexToEditorTextPaletteColor)(textColor) || "var(--ds-text, #172B4D)";
27
+ };
20
28
  var TextColorHighlightMenu = exports.TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
21
29
  var children = _ref.children,
22
30
  api = _ref.api;
31
+ var isHighlightPluginExisted = !!(api !== null && api !== void 0 && api.highlight);
23
32
  var isTextColorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.disabled');
24
33
  var highlightColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
25
34
  var textColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.color');
26
35
  var _useIntl = (0, _reactIntlNext.useIntl)(),
27
36
  formatMessage = _useIntl.formatMessage;
28
- return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
37
+ var defaultColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.defaultColor');
38
+ var iconColor = getIconColor(textColor, defaultColor, highlightColor);
39
+ var highlightColorIcon = highlightColor ? highlightColor : (0, _editorToolbar.getContrastingBackgroundColor)(iconColor);
40
+ return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
41
+ content: formatMessage(isHighlightPluginExisted ? _messages.textColorMessages.textColorHighlightTooltip : _messages.textColorMessages.textColorTooltip)
42
+ }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
43
+ iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarColorSwatch, {
44
+ highlightColor: highlightColorIcon
45
+ }, /*#__PURE__*/_react.default.createElement(_editorToolbar.TextColorIcon, {
46
+ label: formatMessage(_messages.textColorMessages.textColorTooltip),
47
+ iconColor: iconColor,
48
+ shouldRecommendSmallIcon: true,
49
+ size: 'small',
50
+ isDisabled: isTextColorDisabled,
51
+ spacing: 'compact'
52
+ })),
53
+ isDisabled: isTextColorDisabled,
54
+ testId: "text-color-highlight-menu",
55
+ hasSectionMargin: false
56
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
57
+ xcss: styles.menu
58
+ }, children))) : /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
29
59
  iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarColorSwatch, {
30
60
  highlightColor: highlightColor || ''
31
61
  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.TextColorIcon, {
package/dist/es2019/ui/TextColorHighlightMenu.js CHANGED
@@ -5,22 +5,52 @@ import React from 'react';
5
5
  import { useIntl } from 'react-intl-next';
6
6
  import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
7
7
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
8
- import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
8
+ import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
9
+ import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu, ToolbarTooltip, getContrastingBackgroundColor } from '@atlaskit/editor-toolbar';
9
10
  import { Box } from '@atlaskit/primitives/compiled';
11
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
12
  const styles = {
11
13
  menu: "_1rjcv77o _18zru2gc"
12
14
  };
15
+ const getIconColor = (textColor, defaultColor, highlightColor) => {
16
+ if (highlightColor || !textColor || textColor === defaultColor && defaultColor) {
17
+ return "var(--ds-text, #172B4D)";
18
+ }
19
+ return hexToEditorTextPaletteColor(textColor) || "var(--ds-text, #172B4D)";
20
+ };
13
21
  export const TextColorHighlightMenu = ({
14
22
  children,
15
23
  api
16
24
  }) => {
25
+ const isHighlightPluginExisted = !!(api !== null && api !== void 0 && api.highlight);
17
26
  const isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
18
27
  const highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
19
28
  const textColor = useSharedPluginStateSelector(api, 'textColor.color');
20
29
  const {
21
30
  formatMessage
22
31
  } = useIntl();
23
- return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
32
+ const defaultColor = useSharedPluginStateSelector(api, 'textColor.defaultColor');
33
+ const iconColor = getIconColor(textColor, defaultColor, highlightColor);
34
+ const highlightColorIcon = highlightColor ? highlightColor : getContrastingBackgroundColor(iconColor);
35
+ return expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ToolbarTooltip, {
36
+ content: formatMessage(isHighlightPluginExisted ? messages.textColorHighlightTooltip : messages.textColorTooltip)
37
+ }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
38
+ iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
39
+ highlightColor: highlightColorIcon
40
+ }, /*#__PURE__*/React.createElement(TextColorIcon, {
41
+ label: formatMessage(messages.textColorTooltip),
42
+ iconColor: iconColor,
43
+ shouldRecommendSmallIcon: true,
44
+ size: 'small',
45
+ isDisabled: isTextColorDisabled,
46
+ spacing: 'compact'
47
+ })),
48
+ isDisabled: isTextColorDisabled,
49
+ testId: "text-color-highlight-menu",
50
+ hasSectionMargin: false
51
+ }, /*#__PURE__*/React.createElement(Box, {
52
+ xcss: styles.menu
53
+ }, children))) : /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
24
54
  iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
25
55
  highlightColor: highlightColor || ''
26
56
  }, /*#__PURE__*/React.createElement(TextColorIcon, {
package/dist/esm/ui/TextColorHighlightMenu.js CHANGED
@@ -5,20 +5,50 @@ import React from 'react';
5
5
  import { useIntl } from 'react-intl-next';
6
6
  import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
7
7
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
8
- import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
8
+ import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
9
+ import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu, ToolbarTooltip, getContrastingBackgroundColor } from '@atlaskit/editor-toolbar';
9
10
  import { Box } from '@atlaskit/primitives/compiled';
11
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
12
  var styles = {
11
13
  menu: "_1rjcv77o _18zru2gc"
12
14
  };
15
+ var getIconColor = function getIconColor(textColor, defaultColor, highlightColor) {
16
+ if (highlightColor || !textColor || textColor === defaultColor && defaultColor) {
17
+ return "var(--ds-text, #172B4D)";
18
+ }
19
+ return hexToEditorTextPaletteColor(textColor) || "var(--ds-text, #172B4D)";
20
+ };
13
21
  export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
14
22
  var children = _ref.children,
15
23
  api = _ref.api;
24
+ var isHighlightPluginExisted = !!(api !== null && api !== void 0 && api.highlight);
16
25
  var isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
17
26
  var highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
18
27
  var textColor = useSharedPluginStateSelector(api, 'textColor.color');
19
28
  var _useIntl = useIntl(),
20
29
  formatMessage = _useIntl.formatMessage;
21
- return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
30
+ var defaultColor = useSharedPluginStateSelector(api, 'textColor.defaultColor');
31
+ var iconColor = getIconColor(textColor, defaultColor, highlightColor);
32
+ var highlightColorIcon = highlightColor ? highlightColor : getContrastingBackgroundColor(iconColor);
33
+ return expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ToolbarTooltip, {
34
+ content: formatMessage(isHighlightPluginExisted ? messages.textColorHighlightTooltip : messages.textColorTooltip)
35
+ }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
36
+ iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
37
+ highlightColor: highlightColorIcon
38
+ }, /*#__PURE__*/React.createElement(TextColorIcon, {
39
+ label: formatMessage(messages.textColorTooltip),
40
+ iconColor: iconColor,
41
+ shouldRecommendSmallIcon: true,
42
+ size: 'small',
43
+ isDisabled: isTextColorDisabled,
44
+ spacing: 'compact'
45
+ })),
46
+ isDisabled: isTextColorDisabled,
47
+ testId: "text-color-highlight-menu",
48
+ hasSectionMargin: false
49
+ }, /*#__PURE__*/React.createElement(Box, {
50
+ xcss: styles.menu
51
+ }, children))) : /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
22
52
  iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
23
53
  highlightColor: highlightColor || ''
24
54
  }, /*#__PURE__*/React.createElement(TextColorIcon, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-text-color",
3
- "version": "3.1.16",
3
+ "version": "3.2.0",
4
4
  "description": "Text color plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -28,22 +28,19 @@
28
28
  "*.compiled.css"
29
29
  ],
30
30
  "atlaskit:src": "src/index.ts",
31
- "af:exports": {
32
- ".": "./src/index.ts"
33
- },
34
31
  "dependencies": {
35
32
  "@atlaskit/adf-schema": "^50.2.2",
36
33
  "@atlaskit/css": "^0.12.0",
37
34
  "@atlaskit/editor-palette": "^2.1.0",
38
35
  "@atlaskit/editor-plugin-analytics": "^3.0.0",
39
- "@atlaskit/editor-plugin-highlight": "^3.0.0",
36
+ "@atlaskit/editor-plugin-highlight": "^3.1.0",
40
37
  "@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
41
38
  "@atlaskit/editor-plugin-selection-toolbar": "^4.3.0",
42
39
  "@atlaskit/editor-plugin-toolbar": "^0.4.0",
43
40
  "@atlaskit/editor-prosemirror": "7.0.0",
44
41
  "@atlaskit/editor-shared-styles": "^3.6.0",
45
42
  "@atlaskit/editor-tables": "^2.9.0",
46
- "@atlaskit/editor-toolbar": "^0.3.0",
43
+ "@atlaskit/editor-toolbar": "^0.4.0",
47
44
  "@atlaskit/editor-toolbar-model": "^0.1.0",
48
45
  "@atlaskit/icon": "^28.1.0",
49
46
  "@atlaskit/platform-feature-flags": "^1.1.0",
@@ -55,7 +52,7 @@
55
52
  "@emotion/react": "^11.7.1"
56
53
  },
57
54
  "peerDependencies": {
58
- "@atlaskit/editor-common": "^107.31.0",
55
+ "@atlaskit/editor-common": "^107.32.0",
59
56
  "react": "^18.2.0",
60
57
  "react-dom": "^18.2.0",
61
58
  "react-intl-next": "npm:react-intl@^5.18.1"