@atlaskit/editor-plugin-highlight 1.18.7 → 1.19.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 1.19.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#167675](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167675)
8
+ [`9c0185ccd82d3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9c0185ccd82d3) -
9
+ [ux] Enables Highlight color option in the Selection toolbar.
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 1.18.8
16
+
17
+ ### Patch Changes
18
+
19
+ - [#165765](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165765)
20
+ [`3f441f30e6507`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f441f30e6507) -
21
+ Bump adf-schema to 46.0.0
22
+ - Updated dependencies
23
+
3
24
  ## 1.18.7
4
25
 
5
26
  ### Patch Changes
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.highlightPlugin = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _adfSchema = require("@atlaskit/adf-schema");
10
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
10
11
  var _commands = require("./commands");
11
12
  var _keymap = require("./pm-plugins/keymap");
12
13
  var _main = require("./pm-plugins/main");
@@ -74,7 +75,9 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
74
75
  },
75
76
  pluginsOptions: {
76
77
  selectionToolbar: function selectionToolbar() {
77
- if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment)) {
78
+ if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment) && (0, _experiments.editorExperiment)('contextual_formatting_toolbar', false, {
79
+ exposure: true
80
+ })) {
78
81
  return;
79
82
  }
80
83
  var toolbarCustom = {
@@ -11,10 +11,17 @@ var _react2 = require("@emotion/react");
11
11
  var _reactIntlNext = require("react-intl-next");
12
12
  var _analytics = require("@atlaskit/editor-common/analytics");
13
13
  var _hooks = require("@atlaskit/editor-common/hooks");
14
+ var _icons = require("@atlaskit/editor-common/icons");
15
+ var _keymaps = require("@atlaskit/editor-common/keymaps");
14
16
  var _messages = require("@atlaskit/editor-common/messages");
17
+ var _styles = require("@atlaskit/editor-common/styles");
15
18
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
16
19
  var _editorPalette = require("@atlaskit/editor-palette");
20
+ var _highlight = _interopRequireDefault(require("@atlaskit/icon/core/highlight"));
17
21
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
22
+ var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
23
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
24
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
18
25
  var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
19
26
  var _PaletteDropdown = require("./shared/PaletteDropdown");
20
27
  var _useDropdownEvents2 = require("./shared/useDropdownEvents");
@@ -25,7 +32,7 @@ var _useDropdownEvents2 = require("./shared/useDropdownEvents");
25
32
 
26
33
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
27
34
 
28
- var expandIconContainerStyle = (0, _react2.css)({
35
+ var expandIconContainerHighlightStyle = (0, _react2.css)({
29
36
  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
30
37
  });
31
38
  var highlightIconContainerStyle = (0, _react2.css)({
@@ -76,33 +83,57 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
76
83
  // Get the design token for the active color (if it exists) to modify the toolbar
77
84
  // icon, but show the nice rainbow if none is selected
78
85
  var activeColorToken = highlightState.activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
86
+ var title = (0, _experiments.editorExperiment)('contextual_formatting_toolbar', true) ? (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
79
87
  return (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
80
88
  isOpen: isDropdownOpen && !highlightState.disabled,
81
89
  activeColor: highlightState.activeColor,
82
90
  trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
83
91
  buttonId: _uiMenu.TOOLBAR_BUTTON.BACKGROUND_COLOR,
84
- spacing: 'compact',
92
+ spacing: (0, _experiments.editorExperiment)('contextual_formatting_toolbar', true) ? 'none' : 'compact',
85
93
  disabled: highlightState.disabled,
86
94
  selected: isDropdownOpen,
87
- "aria-label": toolbarButtonLabel,
95
+ "aria-label": title,
88
96
  "aria-expanded": isDropdownOpen,
89
97
  "aria-haspopup": true,
90
- title: toolbarButtonLabel,
98
+ title: title,
91
99
  onClick: handleClick,
92
100
  onKeyDown: handleKeyDown,
93
101
  ref: toolbarItemRef,
94
- iconBefore: (0, _react2.jsx)("span", {
102
+ iconBefore:
103
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
104
+ (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
105
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
106
+ (0, _react2.jsx)("div", {
107
+ css: _styles.triggerWrapperStylesWithPadding
108
+ }, (0, _react2.jsx)(_icons.DynamicStrokeIconDecoration, {
109
+ selectedColor: activeColorToken,
110
+ disabled: highlightState.disabled,
111
+ icon: (0, _react2.jsx)(_highlight.default, {
112
+ label: "",
113
+ color: "currentColor",
114
+ spacing: "spacious"
115
+ })
116
+ }),
117
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
118
+ (0, _react2.jsx)("span", {
119
+ css: _styles.expandIconContainerStyle
120
+ }, (0, _react2.jsx)(_chevronDown2.default, {
121
+ label: "",
122
+ color: "currentColor"
123
+ }))) : (0, _react2.jsx)("span", {
95
124
  css: highlightIconContainerStyle
96
125
  }, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
97
126
  selectedColor: activeColorToken,
98
127
  disabled: highlightState.disabled
99
128
  })),
100
- iconAfter: (0, _react2.jsx)("span", {
101
- css: expandIconContainerStyle
129
+ iconAfter:
130
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
131
+ (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? undefined : (0, _react2.jsx)("span", {
132
+ css: expandIconContainerHighlightStyle
102
133
  }, (0, _react2.jsx)(_chevronDown.default, {
103
134
  label: ""
104
135
  }))
105
- }, formatMessage(_messages.highlightMessages.highlightFloatingToolbar)),
136
+ }, (0, _experiments.editorExperiment)('contextual_formatting_toolbar', false) && formatMessage(_messages.highlightMessages.highlightFloatingToolbar)),
106
137
  onColorChange: function onColorChange(color) {
107
138
  return handleColorChange({
108
139
  color: color,
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { backgroundColor } from '@atlaskit/adf-schema';
3
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
3
4
  import { changeColor } from './commands';
4
5
  import { keymapPlugin } from './pm-plugins/keymap';
5
6
  import { createPlugin, highlightPluginKey } from './pm-plugins/main';
@@ -61,7 +62,9 @@ export const highlightPlugin = ({
61
62
  },
62
63
  pluginsOptions: {
63
64
  selectionToolbar() {
64
- if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment)) {
65
+ if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment) && editorExperiment('contextual_formatting_toolbar', false, {
66
+ exposure: true
67
+ })) {
65
68
  return;
66
69
  }
67
70
  const toolbarCustom = {
@@ -9,14 +9,21 @@ import { css, jsx } from '@emotion/react';
9
9
  import { injectIntl } from 'react-intl-next';
10
10
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
11
11
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
12
+ import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
13
+ import { toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
12
14
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
15
+ import { expandIconContainerStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
13
16
  import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
14
17
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
18
+ import HighlightIcon from '@atlaskit/icon/core/highlight';
15
19
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
20
+ import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
21
+ import { fg } from '@atlaskit/platform-feature-flags';
22
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
16
23
  import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
17
24
  import { PaletteDropdown } from './shared/PaletteDropdown';
18
25
  import { useDropdownEvents } from './shared/useDropdownEvents';
19
- const expandIconContainerStyle = css({
26
+ const expandIconContainerHighlightStyle = css({
20
27
  margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
21
28
  });
22
29
  const highlightIconContainerStyle = css({
@@ -69,33 +76,57 @@ const FloatingToolbarHighlightColor = ({
69
76
  // Get the design token for the active color (if it exists) to modify the toolbar
70
77
  // icon, but show the nice rainbow if none is selected
71
78
  const activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
79
+ const title = editorExperiment('contextual_formatting_toolbar', true) ? tooltip(toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
72
80
  return jsx(PaletteDropdown, {
73
81
  isOpen: isDropdownOpen && !highlightState.disabled,
74
82
  activeColor: highlightState.activeColor,
75
83
  trigger: jsx(ToolbarButton, {
76
84
  buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
77
- spacing: 'compact',
85
+ spacing: editorExperiment('contextual_formatting_toolbar', true) ? 'none' : 'compact',
78
86
  disabled: highlightState.disabled,
79
87
  selected: isDropdownOpen,
80
- "aria-label": toolbarButtonLabel,
88
+ "aria-label": title,
81
89
  "aria-expanded": isDropdownOpen,
82
90
  "aria-haspopup": true,
83
- title: toolbarButtonLabel,
91
+ title: title,
84
92
  onClick: handleClick,
85
93
  onKeyDown: handleKeyDown,
86
94
  ref: toolbarItemRef,
87
- iconBefore: jsx("span", {
95
+ iconBefore:
96
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
97
+ fg('platform-visual-refresh-icons') ?
98
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
99
+ jsx("div", {
100
+ css: triggerWrapperStylesWithPadding
101
+ }, jsx(DynamicStrokeIconDecoration, {
102
+ selectedColor: activeColorToken,
103
+ disabled: highlightState.disabled,
104
+ icon: jsx(HighlightIcon, {
105
+ label: "",
106
+ color: "currentColor",
107
+ spacing: "spacious"
108
+ })
109
+ }),
110
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
111
+ jsx("span", {
112
+ css: expandIconContainerStyle
113
+ }, jsx(ChevronDownIcon, {
114
+ label: "",
115
+ color: "currentColor"
116
+ }))) : jsx("span", {
88
117
  css: highlightIconContainerStyle
89
118
  }, jsx(EditorHighlightIcon, {
90
119
  selectedColor: activeColorToken,
91
120
  disabled: highlightState.disabled
92
121
  })),
93
- iconAfter: jsx("span", {
94
- css: expandIconContainerStyle
122
+ iconAfter:
123
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
124
+ fg('platform-visual-refresh-icons') ? undefined : jsx("span", {
125
+ css: expandIconContainerHighlightStyle
95
126
  }, jsx(ExpandIcon, {
96
127
  label: ""
97
128
  }))
98
- }, formatMessage(messages.highlightFloatingToolbar)),
129
+ }, editorExperiment('contextual_formatting_toolbar', false) && formatMessage(messages.highlightFloatingToolbar)),
99
130
  onColorChange: color => handleColorChange({
100
131
  color,
101
132
  inputMethod: INPUT_METHOD.FLOATING_TB
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { backgroundColor } from '@atlaskit/adf-schema';
3
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
3
4
  import { changeColor } from './commands';
4
5
  import { keymapPlugin } from './pm-plugins/keymap';
5
6
  import { createPlugin, highlightPluginKey } from './pm-plugins/main';
@@ -67,7 +68,9 @@ export var highlightPlugin = function highlightPlugin(_ref) {
67
68
  },
68
69
  pluginsOptions: {
69
70
  selectionToolbar: function selectionToolbar() {
70
- if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment)) {
71
+ if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment) && editorExperiment('contextual_formatting_toolbar', false, {
72
+ exposure: true
73
+ })) {
71
74
  return;
72
75
  }
73
76
  var toolbarCustom = {
@@ -10,14 +10,21 @@ import { css, jsx } from '@emotion/react';
10
10
  import { injectIntl } from 'react-intl-next';
11
11
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
12
12
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
13
+ import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
14
+ import { toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
13
15
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
16
+ import { expandIconContainerStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
14
17
  import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
15
18
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
19
+ import HighlightIcon from '@atlaskit/icon/core/highlight';
16
20
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
21
+ import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
22
+ import { fg } from '@atlaskit/platform-feature-flags';
23
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
17
24
  import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
18
25
  import { PaletteDropdown } from './shared/PaletteDropdown';
19
26
  import { useDropdownEvents } from './shared/useDropdownEvents';
20
- var expandIconContainerStyle = css({
27
+ var expandIconContainerHighlightStyle = css({
21
28
  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
22
29
  });
23
30
  var highlightIconContainerStyle = css({
@@ -68,33 +75,57 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
68
75
  // Get the design token for the active color (if it exists) to modify the toolbar
69
76
  // icon, but show the nice rainbow if none is selected
70
77
  var activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
78
+ var title = editorExperiment('contextual_formatting_toolbar', true) ? tooltip(toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
71
79
  return jsx(PaletteDropdown, {
72
80
  isOpen: isDropdownOpen && !highlightState.disabled,
73
81
  activeColor: highlightState.activeColor,
74
82
  trigger: jsx(ToolbarButton, {
75
83
  buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
76
- spacing: 'compact',
84
+ spacing: editorExperiment('contextual_formatting_toolbar', true) ? 'none' : 'compact',
77
85
  disabled: highlightState.disabled,
78
86
  selected: isDropdownOpen,
79
- "aria-label": toolbarButtonLabel,
87
+ "aria-label": title,
80
88
  "aria-expanded": isDropdownOpen,
81
89
  "aria-haspopup": true,
82
- title: toolbarButtonLabel,
90
+ title: title,
83
91
  onClick: handleClick,
84
92
  onKeyDown: handleKeyDown,
85
93
  ref: toolbarItemRef,
86
- iconBefore: jsx("span", {
94
+ iconBefore:
95
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
96
+ fg('platform-visual-refresh-icons') ?
97
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
98
+ jsx("div", {
99
+ css: triggerWrapperStylesWithPadding
100
+ }, jsx(DynamicStrokeIconDecoration, {
101
+ selectedColor: activeColorToken,
102
+ disabled: highlightState.disabled,
103
+ icon: jsx(HighlightIcon, {
104
+ label: "",
105
+ color: "currentColor",
106
+ spacing: "spacious"
107
+ })
108
+ }),
109
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
110
+ jsx("span", {
111
+ css: expandIconContainerStyle
112
+ }, jsx(ChevronDownIcon, {
113
+ label: "",
114
+ color: "currentColor"
115
+ }))) : jsx("span", {
87
116
  css: highlightIconContainerStyle
88
117
  }, jsx(EditorHighlightIcon, {
89
118
  selectedColor: activeColorToken,
90
119
  disabled: highlightState.disabled
91
120
  })),
92
- iconAfter: jsx("span", {
93
- css: expandIconContainerStyle
121
+ iconAfter:
122
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
123
+ fg('platform-visual-refresh-icons') ? undefined : jsx("span", {
124
+ css: expandIconContainerHighlightStyle
94
125
  }, jsx(ExpandIcon, {
95
126
  label: ""
96
127
  }))
97
- }, formatMessage(messages.highlightFloatingToolbar)),
128
+ }, editorExperiment('contextual_formatting_toolbar', false) && formatMessage(messages.highlightFloatingToolbar)),
98
129
  onColorChange: function onColorChange(color) {
99
130
  return handleColorChange({
100
131
  color: color,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "1.18.7",
3
+ "version": "1.19.0",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -36,8 +36,8 @@
36
36
  ".": "./src/index.ts"
37
37
  },
38
38
  "dependencies": {
39
- "@atlaskit/adf-schema": "^44.2.0",
40
- "@atlaskit/editor-common": "^95.0.0",
39
+ "@atlaskit/adf-schema": "^46.1.0",
40
+ "@atlaskit/editor-common": "^95.9.0",
41
41
  "@atlaskit/editor-palette": "1.6.3",
42
42
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
43
43
  "@atlaskit/editor-plugin-primary-toolbar": "^2.0.0",
@@ -45,10 +45,11 @@
45
45
  "@atlaskit/editor-prosemirror": "6.0.0",
46
46
  "@atlaskit/editor-shared-styles": "^3.2.0",
47
47
  "@atlaskit/editor-tables": "^2.8.0",
48
- "@atlaskit/icon": "^22.24.0",
48
+ "@atlaskit/icon": "^22.27.0",
49
49
  "@atlaskit/platform-feature-flags": "^0.3.0",
50
- "@atlaskit/primitives": "^13.2.0",
51
- "@atlaskit/tokens": "^2.3.0",
50
+ "@atlaskit/primitives": "^13.3.0",
51
+ "@atlaskit/tmp-editor-statsig": "^2.21.0",
52
+ "@atlaskit/tokens": "^2.4.0",
52
53
  "@babel/runtime": "^7.0.0",
53
54
  "@emotion/react": "^11.7.1"
54
55
  },
@@ -106,6 +107,9 @@
106
107
  "editor_inline_comments_on_inline_nodes": {
107
108
  "type": "boolean",
108
109
  "referenceOnly": "true"
110
+ },
111
+ "platform-visual-refresh-icons": {
112
+ "type": "boolean"
109
113
  }
110
114
  }
111
115
  }