@atlaskit/editor-plugin-text-color 3.1.16 → 3.2.1

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 (11) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/ui/TextColorHighlightMenu.js +31 -1
  3. package/dist/cjs/ui/TextColorMenuItem.compiled.css +1 -1
  4. package/dist/cjs/ui/TextColorMenuItem.js +1 -1
  5. package/dist/es2019/ui/TextColorHighlightMenu.js +32 -2
  6. package/dist/es2019/ui/TextColorMenuItem.compiled.css +1 -1
  7. package/dist/es2019/ui/TextColorMenuItem.js +1 -1
  8. package/dist/esm/ui/TextColorHighlightMenu.js +32 -2
  9. package/dist/esm/ui/TextColorMenuItem.compiled.css +1 -1
  10. package/dist/esm/ui/TextColorMenuItem.js +1 -1
  11. package/package.json +6 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-text-color
2
2
 
3
+ ## 3.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`bf3ab0c552ba7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf3ab0c552ba7) -
8
+ [ux] ED-29000 Add keyboard navigation to colour palette and minor UI fixes
9
+ - [`a2cd8c46a3e94`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2cd8c46a3e94) -
10
+ EDITOR-1442 Bump adf-schema
11
+ - Updated dependencies
12
+
13
+ ## 3.2.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [`1eba43a7b680d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1eba43a7b680d) -
18
+ [ux] ED-29000 - Address paper cut issues in ColorPalette
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies
23
+
3
24
  ## 3.1.16
4
25
 
5
26
  ### 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/cjs/ui/TextColorMenuItem.compiled.css CHANGED
@@ -1 +1 @@
1
- ._zulpu2gc{gap:var(--ds-space-100,8px)}
1
+ ._zulp12x7{gap:var(--ds-space-075,6px)}
package/dist/cjs/ui/TextColorMenuItem.js CHANGED
@@ -19,7 +19,7 @@ var _editorToolbar = require("@atlaskit/editor-toolbar");
19
19
  var _compiled = require("@atlaskit/primitives/compiled");
20
20
  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); }
21
21
  var styles = {
22
- container: "_zulpu2gc"
22
+ container: "_zulp12x7"
23
23
  };
24
24
  function TextColorMenuItem(_ref) {
25
25
  var api = _ref.api,
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/es2019/ui/TextColorMenuItem.compiled.css CHANGED
@@ -1 +1 @@
1
- ._zulpu2gc{gap:var(--ds-space-100,8px)}
1
+ ._zulp12x7{gap:var(--ds-space-075,6px)}
package/dist/es2019/ui/TextColorMenuItem.js CHANGED
@@ -11,7 +11,7 @@ import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
11
11
  import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
12
12
  import { Stack, Text } from '@atlaskit/primitives/compiled';
13
13
  const styles = {
14
- container: "_zulpu2gc"
14
+ container: "_zulp12x7"
15
15
  };
16
16
  export function TextColorMenuItem({
17
17
  api,
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/dist/esm/ui/TextColorMenuItem.compiled.css CHANGED
@@ -1 +1 @@
1
- ._zulpu2gc{gap:var(--ds-space-100,8px)}
1
+ ._zulp12x7{gap:var(--ds-space-075,6px)}
package/dist/esm/ui/TextColorMenuItem.js CHANGED
@@ -11,7 +11,7 @@ import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
11
11
  import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
12
12
  import { Stack, Text } from '@atlaskit/primitives/compiled';
13
13
  var styles = {
14
- container: "_zulpu2gc"
14
+ container: "_zulp12x7"
15
15
  };
16
16
  export function TextColorMenuItem(_ref) {
17
17
  var api = _ref.api,
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.1",
4
4
  "description": "Text color plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -28,34 +28,31 @@
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
- "@atlaskit/adf-schema": "^50.2.2",
32
+ "@atlaskit/adf-schema": "^50.2.3",
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.5.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",
50
47
  "@atlaskit/primitives": "^14.12.0",
51
48
  "@atlaskit/theme": "^20.0.0",
52
- "@atlaskit/tmp-editor-statsig": "^11.8.0",
49
+ "@atlaskit/tmp-editor-statsig": "^11.9.0",
53
50
  "@atlaskit/tokens": "^6.1.0",
54
51
  "@babel/runtime": "^7.0.0",
55
52
  "@emotion/react": "^11.7.1"
56
53
  },
57
54
  "peerDependencies": {
58
- "@atlaskit/editor-common": "^107.31.0",
55
+ "@atlaskit/editor-common": "^107.33.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"