@atlaskit/editor-plugin-text-color 1.1.8 → 1.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 (7) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/ui/ToolbarTextColor/index.js +11 -12
  3. package/dist/es2019/ui/ToolbarTextColor/index.js +11 -12
  4. package/dist/esm/ui/ToolbarTextColor/index.js +11 -12
  5. package/dist/types/types.d.ts +5 -1
  6. package/dist/types-ts4.5/types.d.ts +3 -1
  7. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-text-color
2
2
 
3
+ ## 1.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#99242](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99242)
8
+ [`854acdf04f29`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/854acdf04f29) -
9
+ Adjust tooltip text for editor toolbar buttons
10
+ - Updated dependencies
11
+
12
+ ## 1.2.0
13
+
14
+ ### Minor Changes
15
+
16
+ - [#98130](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98130)
17
+ [`6a3c0d9d6382`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6a3c0d9d6382) -
18
+ [ED-23154] Add highlight option to main toolbar in editor
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies
23
+
3
24
  ## 1.1.8
4
25
 
5
26
  ### Patch Changes
package/dist/cjs/ui/ToolbarTextColor/index.js CHANGED
@@ -90,8 +90,7 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
90
90
  });
91
91
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenChange", function (_ref) {
92
92
  var isOpen = _ref.isOpen,
93
- logCloseEvent = _ref.logCloseEvent,
94
- event = _ref.event;
93
+ logCloseEvent = _ref.logCloseEvent;
95
94
  _this.setState({
96
95
  isOpen: isOpen
97
96
  });
@@ -105,10 +104,6 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
105
104
  noSelect: isOpen === false
106
105
  }));
107
106
  }
108
- if (!isOpen && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
109
- var _this$toolbarItemRef;
110
- (_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 || (_this$toolbarItemRef = _this$toolbarItemRef.current) === null || _this$toolbarItemRef === void 0 || _this$toolbarItemRef.focus();
111
- }
112
107
  });
113
108
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hide", function (e) {
114
109
  var isOpen = _this.state.isOpen;
@@ -120,15 +115,15 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
120
115
  isOpen: false
121
116
  });
122
117
  if (e instanceof KeyboardEvent && e.key === 'Escape') {
123
- var _this$toolbarItemRef2;
124
- (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 || (_this$toolbarItemRef2 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef2 === void 0 || _this$toolbarItemRef2.focus();
118
+ var _this$toolbarItemRef;
119
+ (_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 || (_this$toolbarItemRef = _this$toolbarItemRef.current) === null || _this$toolbarItemRef === void 0 || _this$toolbarItemRef.focus();
125
120
  }
126
121
  }
127
122
  });
128
123
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hideonEsc", function (e) {
129
- var _this$toolbarItemRef3;
124
+ var _this$toolbarItemRef2;
130
125
  _this.hide(e);
131
- (_this$toolbarItemRef3 = _this.toolbarItemRef) === null || _this$toolbarItemRef3 === void 0 || (_this$toolbarItemRef3 = _this$toolbarItemRef3.current) === null || _this$toolbarItemRef3 === void 0 || _this$toolbarItemRef3.focus();
126
+ (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 || (_this$toolbarItemRef2 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef2 === void 0 || _this$toolbarItemRef2.focus();
132
127
  });
133
128
  return _this;
134
129
  }
@@ -159,6 +154,7 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
159
154
  fitWidth = 242;
160
155
  }
161
156
  var selectedColor = this.getSelectedColor(pluginState);
157
+ // TODO: This doesn't work, the label isn't translated
162
158
  var selectedColorPaletteItemLabel = (_palette$find = palette.find(function (paletteItem) {
163
159
  return paletteItem.value === pluginState.color;
164
160
  })) === null || _palette$find === void 0 ? void 0 : _palette$find.label;
@@ -166,6 +162,7 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
166
162
  var labelTextColor = formatMessage(_messages.textColorMessages.textColor, {
167
163
  selectedColorName: selectedColorPaletteItemLabelText
168
164
  });
165
+ var tooltipTextColor = formatMessage(_messages.textColorMessages.textColorTooltip);
169
166
  var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(palette, pluginState.color),
170
167
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
171
168
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
@@ -198,7 +195,7 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
198
195
  "aria-label": labelTextColor,
199
196
  "aria-expanded": isOpen,
200
197
  "aria-haspopup": true,
201
- title: labelTextColor,
198
+ title: tooltipTextColor,
202
199
  onClick: this.toggleOpen,
203
200
  onKeyDown: this.onKeyDown,
204
201
  ref: this.toolbarItemRef,
@@ -229,7 +226,9 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
229
226
  hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
230
227
  paletteColorTooltipMessages: _uiColor.textPaletteTooltipMessages
231
228
  }
232
- }))), (0, _react2.jsx)("span", {
229
+ }))),
230
+ // Only render the separator if the highlight toolbar option isn't being rendered after it
231
+ !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.highlight) && (0, _react2.jsx)("span", {
233
232
  css: _styles.separatorStyles
234
233
  }))
235
234
  );
package/dist/es2019/ui/ToolbarTextColor/index.js CHANGED
@@ -67,8 +67,7 @@ export class ToolbarTextColor extends React.Component {
67
67
  });
68
68
  _defineProperty(this, "handleOpenChange", ({
69
69
  isOpen,
70
- logCloseEvent,
71
- event
70
+ logCloseEvent
72
71
  }) => {
73
72
  this.setState({
74
73
  isOpen
@@ -83,10 +82,6 @@ export class ToolbarTextColor extends React.Component {
83
82
  noSelect: isOpen === false
84
83
  }));
85
84
  }
86
- if (!isOpen && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
87
- var _this$toolbarItemRef, _this$toolbarItemRef$;
88
- (_this$toolbarItemRef = this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
89
- }
90
85
  });
91
86
  _defineProperty(this, "hide", e => {
92
87
  const {
@@ -100,15 +95,15 @@ export class ToolbarTextColor extends React.Component {
100
95
  isOpen: false
101
96
  });
102
97
  if (e instanceof KeyboardEvent && e.key === 'Escape') {
103
- var _this$toolbarItemRef2, _this$toolbarItemRef3;
104
- (_this$toolbarItemRef2 = this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
98
+ var _this$toolbarItemRef, _this$toolbarItemRef$;
99
+ (_this$toolbarItemRef = this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
105
100
  }
106
101
  }
107
102
  });
108
103
  _defineProperty(this, "hideonEsc", e => {
109
- var _this$toolbarItemRef4, _this$toolbarItemRef5;
104
+ var _this$toolbarItemRef2, _this$toolbarItemRef3;
110
105
  this.hide(e);
111
- (_this$toolbarItemRef4 = this.toolbarItemRef) === null || _this$toolbarItemRef4 === void 0 ? void 0 : (_this$toolbarItemRef5 = _this$toolbarItemRef4.current) === null || _this$toolbarItemRef5 === void 0 ? void 0 : _this$toolbarItemRef5.focus();
106
+ (_this$toolbarItemRef2 = this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
112
107
  });
113
108
  }
114
109
  render() {
@@ -139,11 +134,13 @@ export class ToolbarTextColor extends React.Component {
139
134
  fitWidth = 242;
140
135
  }
141
136
  const selectedColor = this.getSelectedColor(pluginState);
137
+ // TODO: This doesn't work, the label isn't translated
142
138
  const selectedColorPaletteItemLabel = (_palette$find = palette.find(paletteItem => paletteItem.value === pluginState.color)) === null || _palette$find === void 0 ? void 0 : _palette$find.label;
143
139
  const selectedColorPaletteItemLabelText = selectedColorPaletteItemLabel || '';
144
140
  const labelTextColor = formatMessage(messages.textColor, {
145
141
  selectedColorName: selectedColorPaletteItemLabelText
146
142
  });
143
+ const tooltipTextColor = formatMessage(messages.textColorTooltip);
147
144
  const {
148
145
  selectedRowIndex,
149
146
  selectedColumnIndex
@@ -177,7 +174,7 @@ export class ToolbarTextColor extends React.Component {
177
174
  "aria-label": labelTextColor,
178
175
  "aria-expanded": isOpen,
179
176
  "aria-haspopup": true,
180
- title: labelTextColor,
177
+ title: tooltipTextColor,
181
178
  onClick: this.toggleOpen,
182
179
  onKeyDown: this.onKeyDown,
183
180
  ref: this.toolbarItemRef,
@@ -208,7 +205,9 @@ export class ToolbarTextColor extends React.Component {
208
205
  hexToPaletteColor: hexToEditorTextPaletteColor,
209
206
  paletteColorTooltipMessages: textPaletteTooltipMessages
210
207
  }
211
- }))), jsx("span", {
208
+ }))),
209
+ // Only render the separator if the highlight toolbar option isn't being rendered after it
210
+ !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.highlight) && jsx("span", {
212
211
  css: separatorStyles
213
212
  }))
214
213
  );
package/dist/esm/ui/ToolbarTextColor/index.js CHANGED
@@ -84,8 +84,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
84
84
  });
85
85
  _defineProperty(_assertThisInitialized(_this), "handleOpenChange", function (_ref) {
86
86
  var isOpen = _ref.isOpen,
87
- logCloseEvent = _ref.logCloseEvent,
88
- event = _ref.event;
87
+ logCloseEvent = _ref.logCloseEvent;
89
88
  _this.setState({
90
89
  isOpen: isOpen
91
90
  });
@@ -99,10 +98,6 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
99
98
  noSelect: isOpen === false
100
99
  }));
101
100
  }
102
- if (!isOpen && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
103
- var _this$toolbarItemRef;
104
- (_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 || (_this$toolbarItemRef = _this$toolbarItemRef.current) === null || _this$toolbarItemRef === void 0 || _this$toolbarItemRef.focus();
105
- }
106
101
  });
107
102
  _defineProperty(_assertThisInitialized(_this), "hide", function (e) {
108
103
  var isOpen = _this.state.isOpen;
@@ -114,15 +109,15 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
114
109
  isOpen: false
115
110
  });
116
111
  if (e instanceof KeyboardEvent && e.key === 'Escape') {
117
- var _this$toolbarItemRef2;
118
- (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 || (_this$toolbarItemRef2 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef2 === void 0 || _this$toolbarItemRef2.focus();
112
+ var _this$toolbarItemRef;
113
+ (_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 || (_this$toolbarItemRef = _this$toolbarItemRef.current) === null || _this$toolbarItemRef === void 0 || _this$toolbarItemRef.focus();
119
114
  }
120
115
  }
121
116
  });
122
117
  _defineProperty(_assertThisInitialized(_this), "hideonEsc", function (e) {
123
- var _this$toolbarItemRef3;
118
+ var _this$toolbarItemRef2;
124
119
  _this.hide(e);
125
- (_this$toolbarItemRef3 = _this.toolbarItemRef) === null || _this$toolbarItemRef3 === void 0 || (_this$toolbarItemRef3 = _this$toolbarItemRef3.current) === null || _this$toolbarItemRef3 === void 0 || _this$toolbarItemRef3.focus();
120
+ (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 || (_this$toolbarItemRef2 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef2 === void 0 || _this$toolbarItemRef2.focus();
126
121
  });
127
122
  return _this;
128
123
  }
@@ -153,6 +148,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
153
148
  fitWidth = 242;
154
149
  }
155
150
  var selectedColor = this.getSelectedColor(pluginState);
151
+ // TODO: This doesn't work, the label isn't translated
156
152
  var selectedColorPaletteItemLabel = (_palette$find = palette.find(function (paletteItem) {
157
153
  return paletteItem.value === pluginState.color;
158
154
  })) === null || _palette$find === void 0 ? void 0 : _palette$find.label;
@@ -160,6 +156,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
160
156
  var labelTextColor = formatMessage(messages.textColor, {
161
157
  selectedColorName: selectedColorPaletteItemLabelText
162
158
  });
159
+ var tooltipTextColor = formatMessage(messages.textColorTooltip);
163
160
  var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(palette, pluginState.color),
164
161
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
165
162
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
@@ -192,7 +189,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
192
189
  "aria-label": labelTextColor,
193
190
  "aria-expanded": isOpen,
194
191
  "aria-haspopup": true,
195
- title: labelTextColor,
192
+ title: tooltipTextColor,
196
193
  onClick: this.toggleOpen,
197
194
  onKeyDown: this.onKeyDown,
198
195
  ref: this.toolbarItemRef,
@@ -223,7 +220,9 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
223
220
  hexToPaletteColor: hexToEditorTextPaletteColor,
224
221
  paletteColorTooltipMessages: textPaletteTooltipMessages
225
222
  }
226
- }))), jsx("span", {
223
+ }))),
224
+ // Only render the separator if the highlight toolbar option isn't being rendered after it
225
+ !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.highlight) && jsx("span", {
227
226
  css: separatorStyles
228
227
  }))
229
228
  );
package/dist/types/types.d.ts CHANGED
@@ -1,10 +1,14 @@
1
1
  import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
2
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
3
+ import type { HighlightPlugin } from '@atlaskit/editor-plugin-highlight';
3
4
  import type { TextColorPluginConfig, TextColorPluginState } from './pm-plugins/main';
4
5
  type Config = TextColorPluginConfig | boolean;
5
6
  export type TextColorPlugin = NextEditorPlugin<'textColor', {
6
7
  pluginConfiguration: Config | undefined;
7
- dependencies: [OptionalPlugin<AnalyticsPlugin>];
8
+ dependencies: [
9
+ OptionalPlugin<AnalyticsPlugin>,
10
+ OptionalPlugin<HighlightPlugin>
11
+ ];
8
12
  actions: {
9
13
  changeColor: (color: string) => Command;
10
14
  };
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
2
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
3
+ import type { HighlightPlugin } from '@atlaskit/editor-plugin-highlight';
3
4
  import type { TextColorPluginConfig, TextColorPluginState } from './pm-plugins/main';
4
5
  type Config = TextColorPluginConfig | boolean;
5
6
  export type TextColorPlugin = NextEditorPlugin<'textColor', {
6
7
  pluginConfiguration: Config | undefined;
7
8
  dependencies: [
8
- OptionalPlugin<AnalyticsPlugin>
9
+ OptionalPlugin<AnalyticsPlugin>,
10
+ OptionalPlugin<HighlightPlugin>
9
11
  ];
10
12
  actions: {
11
13
  changeColor: (color: string) => Command;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-text-color",
3
- "version": "1.1.8",
3
+ "version": "1.2.1",
4
4
  "description": "Text color plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,9 +34,10 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@atlaskit/adf-schema": "^36.1.0",
37
- "@atlaskit/editor-common": "^79.2.0",
37
+ "@atlaskit/editor-common": "^79.6.0",
38
38
  "@atlaskit/editor-palette": "1.6.0",
39
39
  "@atlaskit/editor-plugin-analytics": "^1.1.0",
40
+ "@atlaskit/editor-plugin-highlight": "^1.1.0",
40
41
  "@atlaskit/editor-prosemirror": "4.0.1",
41
42
  "@atlaskit/editor-shared-styles": "^2.10.0",
42
43
  "@atlaskit/editor-tables": "^2.7.0",