@atlaskit/editor-plugin-highlight 3.0.19 → 3.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 (8) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/ui/HighlightColorMenuItem.compiled.css +4 -1
  3. package/dist/cjs/ui/HighlightColorMenuItem.js +35 -6
  4. package/dist/es2019/ui/HighlightColorMenuItem.compiled.css +4 -1
  5. package/dist/es2019/ui/HighlightColorMenuItem.js +40 -10
  6. package/dist/esm/ui/HighlightColorMenuItem.compiled.css +4 -1
  7. package/dist/esm/ui/HighlightColorMenuItem.js +36 -7
  8. package/package.json +8 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 3.1.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.0.19
4
15
 
5
16
  ### Patch Changes
package/dist/cjs/ui/HighlightColorMenuItem.compiled.css CHANGED
@@ -1,6 +1,9 @@
1
1
 
2
2
  ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
3
3
  ._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
4
+ ._195gv77o{margin-inline:var(--ds-space-025,2px)}
4
5
  ._1dqonqa1{border-style:solid}
5
6
  ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
6
- ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
7
+ ._18u01n1a{margin-left:-1px}
8
+ ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
9
+ ._1e0c1o8l{display:inline-block}
package/dist/cjs/ui/HighlightColorMenuItem.js CHANGED
@@ -20,17 +20,40 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
20
20
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
21
21
  var _editorPalette = require("@atlaskit/editor-palette");
22
22
  var _editorToolbar = require("@atlaskit/editor-toolbar");
23
+ var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--editor-done"));
24
+ var _textStyle = _interopRequireDefault(require("@atlaskit/icon/core/text-style"));
23
25
  var _compiled = require("@atlaskit/primitives/compiled");
26
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
24
27
  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
28
  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; }
26
29
  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; }
27
30
  var styles = {
28
31
  container: "_zulpu2gc _19pkpxbi",
29
- removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
32
+ removeHighlightButton: "_2rkoglpi _195gv77o _189ee4h9 _1dqonqa1 _1h6dmuej",
33
+ icon: "_1e0c1o8l _18u01n1a"
30
34
  };
31
- function HighlightColorMenuItem(_ref) {
32
- var api = _ref.api,
33
- parents = _ref.parents;
35
+ var TextColorIconDecorator = function TextColorIconDecorator(_ref) {
36
+ var label = _ref.label,
37
+ isSelected = _ref.isSelected;
38
+ var iconColor = "var(--ds-icon, #000000)";
39
+ return isSelected ? /*#__PURE__*/React.createElement(_checkMarkEditorDone.default, {
40
+ color: iconColor,
41
+ LEGACY_primaryColor: iconColor,
42
+ label: label
43
+ }) : /*#__PURE__*/React.createElement(_compiled.Box, {
44
+ as: "span",
45
+ xcss: styles.icon
46
+ }, /*#__PURE__*/React.createElement(_textStyle.default, {
47
+ label: label,
48
+ color: iconColor,
49
+ shouldRecommendSmallIcon: true,
50
+ spacing: "spacious",
51
+ size: "small"
52
+ }));
53
+ };
54
+ function HighlightColorMenuItem(_ref2) {
55
+ var api = _ref2.api,
56
+ parents = _ref2.parents;
34
57
  var _useIntl = (0, _reactIntlNext.useIntl)(),
35
58
  formatMessage = _useIntl.formatMessage;
36
59
  var activeColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
@@ -47,18 +70,24 @@ function HighlightColorMenuItem(_ref) {
47
70
  }
48
71
  }, [api, closeMenu, parents]);
49
72
  var colorPalette = (0, _react.useMemo)(function () {
73
+ var isSelected = function isSelected(color) {
74
+ return color.value === activeColor;
75
+ };
50
76
  return _uiColor.highlightColorPaletteNext.filter(function (color) {
51
77
  return color.value !== _uiColor.REMOVE_HIGHLIGHT_COLOR;
52
78
  }).map(function (color) {
53
79
  return _objectSpread(_objectSpread({}, color), {}, {
54
- decorator: /*#__PURE__*/React.createElement(_editorToolbar.TextColorIcon, {
80
+ decorator: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(TextColorIconDecorator, {
81
+ label: color.label,
82
+ isSelected: isSelected(color)
83
+ }) : /*#__PURE__*/React.createElement(_editorToolbar.TextColorIcon, {
55
84
  label: color.label,
56
85
  size: "small",
57
86
  spacing: "spacious"
58
87
  })
59
88
  });
60
89
  });
61
- }, []);
90
+ }, [activeColor]);
62
91
  return /*#__PURE__*/React.createElement(_compiled.Stack, {
63
92
  xcss: styles.container,
64
93
  testId: "highlight-color-menu-item"
package/dist/es2019/ui/HighlightColorMenuItem.compiled.css CHANGED
@@ -1,6 +1,9 @@
1
1
 
2
2
  ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
3
3
  ._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
4
+ ._195gv77o{margin-inline:var(--ds-space-025,2px)}
4
5
  ._1dqonqa1{border-style:solid}
5
6
  ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
6
- ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
7
+ ._18u01n1a{margin-left:-1px}
8
+ ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
9
+ ._1e0c1o8l{display:inline-block}
package/dist/es2019/ui/HighlightColorMenuItem.js CHANGED
@@ -11,10 +11,34 @@ import { REMOVE_HIGHLIGHT_COLOR, highlightColorPaletteNext } from '@atlaskit/edi
11
11
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
12
12
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
13
13
  import { ColorPalette, TextColorIcon, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
14
- import { Stack, Text } from '@atlaskit/primitives/compiled';
14
+ import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
15
+ import Icon from '@atlaskit/icon/core/text-style';
16
+ import { Stack, Text, Box } from '@atlaskit/primitives/compiled';
17
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
15
18
  const styles = {
16
19
  container: "_zulpu2gc _19pkpxbi",
17
- removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
20
+ removeHighlightButton: "_2rkoglpi _195gv77o _189ee4h9 _1dqonqa1 _1h6dmuej",
21
+ icon: "_1e0c1o8l _18u01n1a"
22
+ };
23
+ const TextColorIconDecorator = ({
24
+ label,
25
+ isSelected
26
+ }) => {
27
+ const iconColor = "var(--ds-icon, #000000)";
28
+ return isSelected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
29
+ color: iconColor,
30
+ LEGACY_primaryColor: iconColor,
31
+ label: label
32
+ }) : /*#__PURE__*/React.createElement(Box, {
33
+ as: "span",
34
+ xcss: styles.icon
35
+ }, /*#__PURE__*/React.createElement(Icon, {
36
+ label: label,
37
+ color: iconColor,
38
+ shouldRecommendSmallIcon: true,
39
+ spacing: "spacious",
40
+ size: "small"
41
+ }));
18
42
  };
19
43
  export function HighlightColorMenuItem({
20
44
  api,
@@ -37,14 +61,20 @@ export function HighlightColorMenuItem({
37
61
  closeMenu();
38
62
  }
39
63
  }, [api, closeMenu, parents]);
40
- const colorPalette = useMemo(() => highlightColorPaletteNext.filter(color => color.value !== REMOVE_HIGHLIGHT_COLOR).map(color => ({
41
- ...color,
42
- decorator: /*#__PURE__*/React.createElement(TextColorIcon, {
43
- label: color.label,
44
- size: "small",
45
- spacing: "spacious"
46
- })
47
- })), []);
64
+ const colorPalette = useMemo(() => {
65
+ const isSelected = color => color.value === activeColor;
66
+ return highlightColorPaletteNext.filter(color => color.value !== REMOVE_HIGHLIGHT_COLOR).map(color => ({
67
+ ...color,
68
+ decorator: expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(TextColorIconDecorator, {
69
+ label: color.label,
70
+ isSelected: isSelected(color)
71
+ }) : /*#__PURE__*/React.createElement(TextColorIcon, {
72
+ label: color.label,
73
+ size: "small",
74
+ spacing: "spacious"
75
+ })
76
+ }));
77
+ }, [activeColor]);
48
78
  return /*#__PURE__*/React.createElement(Stack, {
49
79
  xcss: styles.container,
50
80
  testId: "highlight-color-menu-item"
package/dist/esm/ui/HighlightColorMenuItem.compiled.css CHANGED
@@ -1,6 +1,9 @@
1
1
 
2
2
  ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
3
3
  ._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
4
+ ._195gv77o{margin-inline:var(--ds-space-025,2px)}
4
5
  ._1dqonqa1{border-style:solid}
5
6
  ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
6
- ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
7
+ ._18u01n1a{margin-left:-1px}
8
+ ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
9
+ ._1e0c1o8l{display:inline-block}
package/dist/esm/ui/HighlightColorMenuItem.js CHANGED
@@ -14,14 +14,37 @@ import { REMOVE_HIGHLIGHT_COLOR, highlightColorPaletteNext } from '@atlaskit/edi
14
14
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
15
15
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
16
16
  import { ColorPalette, TextColorIcon, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
17
- import { Stack, Text } from '@atlaskit/primitives/compiled';
17
+ import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
18
+ import Icon from '@atlaskit/icon/core/text-style';
19
+ import { Stack, Text, Box } from '@atlaskit/primitives/compiled';
20
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
18
21
  var styles = {
19
22
  container: "_zulpu2gc _19pkpxbi",
20
- removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
23
+ removeHighlightButton: "_2rkoglpi _195gv77o _189ee4h9 _1dqonqa1 _1h6dmuej",
24
+ icon: "_1e0c1o8l _18u01n1a"
21
25
  };
22
- export function HighlightColorMenuItem(_ref) {
23
- var api = _ref.api,
24
- parents = _ref.parents;
26
+ var TextColorIconDecorator = function TextColorIconDecorator(_ref) {
27
+ var label = _ref.label,
28
+ isSelected = _ref.isSelected;
29
+ var iconColor = "var(--ds-icon, #000000)";
30
+ return isSelected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
31
+ color: iconColor,
32
+ LEGACY_primaryColor: iconColor,
33
+ label: label
34
+ }) : /*#__PURE__*/React.createElement(Box, {
35
+ as: "span",
36
+ xcss: styles.icon
37
+ }, /*#__PURE__*/React.createElement(Icon, {
38
+ label: label,
39
+ color: iconColor,
40
+ shouldRecommendSmallIcon: true,
41
+ spacing: "spacious",
42
+ size: "small"
43
+ }));
44
+ };
45
+ export function HighlightColorMenuItem(_ref2) {
46
+ var api = _ref2.api,
47
+ parents = _ref2.parents;
25
48
  var _useIntl = useIntl(),
26
49
  formatMessage = _useIntl.formatMessage;
27
50
  var activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
@@ -38,18 +61,24 @@ export function HighlightColorMenuItem(_ref) {
38
61
  }
39
62
  }, [api, closeMenu, parents]);
40
63
  var colorPalette = useMemo(function () {
64
+ var isSelected = function isSelected(color) {
65
+ return color.value === activeColor;
66
+ };
41
67
  return highlightColorPaletteNext.filter(function (color) {
42
68
  return color.value !== REMOVE_HIGHLIGHT_COLOR;
43
69
  }).map(function (color) {
44
70
  return _objectSpread(_objectSpread({}, color), {}, {
45
- decorator: /*#__PURE__*/React.createElement(TextColorIcon, {
71
+ decorator: expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(TextColorIconDecorator, {
72
+ label: color.label,
73
+ isSelected: isSelected(color)
74
+ }) : /*#__PURE__*/React.createElement(TextColorIcon, {
46
75
  label: color.label,
47
76
  size: "small",
48
77
  spacing: "spacious"
49
78
  })
50
79
  });
51
80
  });
52
- }, []);
81
+ }, [activeColor]);
53
82
  return /*#__PURE__*/React.createElement(Stack, {
54
83
  xcss: styles.container,
55
84
  testId: "highlight-color-menu-item"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "3.0.19",
3
+ "version": "3.1.0",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,11 +31,8 @@
31
31
  "*.compiled.css"
32
32
  ],
33
33
  "atlaskit:src": "src/index.ts",
34
- "af:exports": {
35
- ".": "./src/index.ts"
36
- },
37
34
  "dependencies": {
38
- "@atlaskit/adf-schema": "^50.2.1",
35
+ "@atlaskit/adf-schema": "^50.2.2",
39
36
  "@atlaskit/button": "^23.4.0",
40
37
  "@atlaskit/css": "^0.12.0",
41
38
  "@atlaskit/editor-palette": "^2.1.0",
@@ -47,18 +44,18 @@
47
44
  "@atlaskit/editor-prosemirror": "7.0.0",
48
45
  "@atlaskit/editor-shared-styles": "^3.6.0",
49
46
  "@atlaskit/editor-tables": "^2.9.0",
50
- "@atlaskit/editor-toolbar": "^0.3.0",
47
+ "@atlaskit/editor-toolbar": "^0.4.0",
51
48
  "@atlaskit/editor-toolbar-model": "^0.1.0",
52
- "@atlaskit/icon": "^28.0.0",
49
+ "@atlaskit/icon": "^28.1.0",
53
50
  "@atlaskit/platform-feature-flags": "^1.1.0",
54
- "@atlaskit/primitives": "^14.11.0",
55
- "@atlaskit/tmp-editor-statsig": "^11.5.0",
56
- "@atlaskit/tokens": "^6.0.0",
51
+ "@atlaskit/primitives": "^14.12.0",
52
+ "@atlaskit/tmp-editor-statsig": "^11.8.0",
53
+ "@atlaskit/tokens": "^6.1.0",
57
54
  "@babel/runtime": "^7.0.0",
58
55
  "@emotion/react": "^11.7.1"
59
56
  },
60
57
  "peerDependencies": {
61
- "@atlaskit/editor-common": "^107.28.0",
58
+ "@atlaskit/editor-common": "^107.32.0",
62
59
  "react": "^18.2.0",
63
60
  "react-intl-next": "npm:react-intl@^5.18.1"
64
61
  },