@atlaskit/editor-plugin-find-replace 2.1.0 → 2.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.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/ui/FindReplace.js +25 -1
- package/dist/cjs/ui/ReplaceNext.js +244 -0
- package/dist/es2019/ui/FindReplace.js +25 -1
- package/dist/es2019/ui/ReplaceNext.js +213 -0
- package/dist/esm/ui/FindReplace.js +25 -1
- package/dist/esm/ui/ReplaceNext.js +234 -0
- package/dist/types/ui/FindReplace.d.ts +4 -0
- package/dist/types/ui/ReplaceNext.d.ts +38 -0
- package/dist/types-ts4.5/ui/FindReplace.d.ts +4 -0
- package/dist/types-ts4.5/ui/ReplaceNext.d.ts +38 -0
- package/package.json +10 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-find-replace
|
|
2
2
|
|
|
3
|
+
## 2.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 2.2.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#141241](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/141241)
|
|
14
|
+
[`d2a481db48c8b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2a481db48c8b) -
|
|
15
|
+
[ux] [A11Y-9990] Refactor Replace component to fix tab ordering
|
|
16
|
+
|
|
3
17
|
## 2.1.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
|
@@ -13,8 +13,10 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
|
|
|
13
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
14
|
var _react = _interopRequireDefault(require("react"));
|
|
15
15
|
var _react2 = require("@emotion/react");
|
|
16
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
17
|
var _Find = _interopRequireDefault(require("./Find"));
|
|
17
18
|
var _Replace = _interopRequireDefault(require("./Replace"));
|
|
19
|
+
var _ReplaceNext = _interopRequireDefault(require("./ReplaceNext"));
|
|
18
20
|
var _uiStyles = require("./ui-styles");
|
|
19
21
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
20
22
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */ /* eslint-disable @atlaskit/design-system/prefer-primitives */ /**
|
|
@@ -29,7 +31,14 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
29
31
|
_this = _callSuper(this, FindReplace, [props]);
|
|
30
32
|
(0, _defineProperty2.default)(_this, "findTextfield", null);
|
|
31
33
|
(0, _defineProperty2.default)(_this, "replaceTextfield", null);
|
|
34
|
+
/**
|
|
35
|
+
* Delete this function on cleanup of
|
|
36
|
+
* editor_a11y_refactor_find_replace_style
|
|
37
|
+
*/
|
|
32
38
|
(0, _defineProperty2.default)(_this, "handleTabNavigation", function (event) {
|
|
39
|
+
if ((0, _platformFeatureFlags.fg)('editor_a11y_refactor_find_replace_style')) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
33
42
|
if (event.key === 'Tab') {
|
|
34
43
|
event.preventDefault();
|
|
35
44
|
var modalFindReplace = _this.modalRef.current;
|
|
@@ -137,7 +146,22 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
137
146
|
role: "presentation",
|
|
138
147
|
css: _uiStyles.ruleStyles,
|
|
139
148
|
id: "replace-hr-element"
|
|
140
|
-
}), (0, _react2.jsx)(
|
|
149
|
+
}), (0, _platformFeatureFlags.fg)('editor_a11y_refactor_find_replace_style') ? (0, _react2.jsx)(_ReplaceNext.default, {
|
|
150
|
+
canReplace: count.total > 0,
|
|
151
|
+
replaceText: replaceText,
|
|
152
|
+
onReplace: onReplace,
|
|
153
|
+
onReplaceAll: onReplaceAll,
|
|
154
|
+
onReplaceTextfieldRefSet: this.setReplaceTextfieldRef,
|
|
155
|
+
onArrowUp: this.setFocusToFind,
|
|
156
|
+
onCancel: onCancel,
|
|
157
|
+
count: count,
|
|
158
|
+
onFindPrev: onFindPrev,
|
|
159
|
+
onFindNext: onFindNext,
|
|
160
|
+
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
161
|
+
findTyped: this.state.findTyped,
|
|
162
|
+
setFindTyped: this.setFindTyped,
|
|
163
|
+
focusToolbarButton: focusToolbarButton
|
|
164
|
+
}) : (0, _react2.jsx)(_Replace.default, {
|
|
141
165
|
canReplace: count.total > 0,
|
|
142
166
|
replaceText: replaceText,
|
|
143
167
|
onReplace: onReplace,
|
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _reactIntlNext = require("react-intl-next");
|
|
12
|
+
var _new = _interopRequireDefault(require("@atlaskit/button/new"));
|
|
13
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
14
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
15
|
+
var _form = require("@atlaskit/form");
|
|
16
|
+
var _chevronDownHipchatChevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down--hipchat-chevron-down"));
|
|
17
|
+
var _chevronUpHipchatChevronUp = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-up--hipchat-chevron-up"));
|
|
18
|
+
var _primitives = require("@atlaskit/primitives");
|
|
19
|
+
var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
|
|
20
|
+
var _FindReplaceTooltipButton = require("./FindReplaceTooltipButton");
|
|
21
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
22
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
23
|
+
var replaceContainerStyles = (0, _primitives.xcss)({
|
|
24
|
+
padding: 'space.100'
|
|
25
|
+
});
|
|
26
|
+
var replaceWithLabelStyle = (0, _primitives.xcss)({
|
|
27
|
+
paddingBottom: 'space.050'
|
|
28
|
+
});
|
|
29
|
+
var actionButtonContainerStyles = (0, _primitives.xcss)({
|
|
30
|
+
paddingTop: 'space.200'
|
|
31
|
+
});
|
|
32
|
+
var actionButtonParentInlineStyles = (0, _primitives.xcss)({
|
|
33
|
+
justifyContent: 'space-between',
|
|
34
|
+
flexDirection: 'row-reverse'
|
|
35
|
+
});
|
|
36
|
+
var actionButtonInlineStyles = (0, _primitives.xcss)({
|
|
37
|
+
gap: 'space.075'
|
|
38
|
+
});
|
|
39
|
+
var Replace = function Replace(_ref) {
|
|
40
|
+
var canReplace = _ref.canReplace,
|
|
41
|
+
initialReplaceText = _ref.replaceText,
|
|
42
|
+
onReplace = _ref.onReplace,
|
|
43
|
+
onReplaceAll = _ref.onReplaceAll,
|
|
44
|
+
onReplaceTextfieldRefSet = _ref.onReplaceTextfieldRefSet,
|
|
45
|
+
onArrowUp = _ref.onArrowUp,
|
|
46
|
+
onCancel = _ref.onCancel,
|
|
47
|
+
count = _ref.count,
|
|
48
|
+
onFindNext = _ref.onFindNext,
|
|
49
|
+
onFindPrev = _ref.onFindPrev,
|
|
50
|
+
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
|
|
51
|
+
setFindTyped = _ref.setFindTyped,
|
|
52
|
+
findTyped = _ref.findTyped,
|
|
53
|
+
focusToolbarButton = _ref.focusToolbarButton,
|
|
54
|
+
formatMessage = _ref.intl.formatMessage;
|
|
55
|
+
var _useState = (0, _react.useState)(initialReplaceText || ''),
|
|
56
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
57
|
+
replaceText = _useState2[0],
|
|
58
|
+
setReplaceText = _useState2[1];
|
|
59
|
+
var _useState3 = (0, _react.useState)(false),
|
|
60
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
61
|
+
isComposing = _useState4[0],
|
|
62
|
+
setIsComposing = _useState4[1];
|
|
63
|
+
var _useState5 = (0, _react.useState)(false),
|
|
64
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
65
|
+
isHelperMessageVisible = _useState6[0],
|
|
66
|
+
setIsHelperMessageVisible = _useState6[1];
|
|
67
|
+
var _useState7 = (0, _react.useState)(false),
|
|
68
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
69
|
+
fakeSuccessReplacementMessageUpdate = _useState8[0],
|
|
70
|
+
setFakeSuccessReplacementMessageUpdate = _useState8[1];
|
|
71
|
+
var _useState9 = (0, _react.useState)(0),
|
|
72
|
+
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
73
|
+
replaceCount = _useState10[0],
|
|
74
|
+
setReplaceCount = _useState10[1];
|
|
75
|
+
var replaceTextfieldRef = (0, _react.useRef)(null);
|
|
76
|
+
var successReplacementMessageRef = (0, _react.useRef)(null);
|
|
77
|
+
var replaceWith = formatMessage(_messages.findReplaceMessages.replaceWith);
|
|
78
|
+
var replaceAll = formatMessage(_messages.findReplaceMessages.replaceAll);
|
|
79
|
+
var findPrevious = formatMessage(_messages.findReplaceMessages.findPrevious);
|
|
80
|
+
var closeFindReplaceDialog = formatMessage(_messages.findReplaceMessages.closeFindReplaceDialog);
|
|
81
|
+
(0, _react.useEffect)(function () {
|
|
82
|
+
onReplaceTextfieldRefSet(replaceTextfieldRef);
|
|
83
|
+
}, [onReplaceTextfieldRefSet]);
|
|
84
|
+
(0, _react.useEffect)(function () {
|
|
85
|
+
setReplaceText(initialReplaceText || '');
|
|
86
|
+
}, [initialReplaceText]);
|
|
87
|
+
var skipWhileComposing = function skipWhileComposing(fn) {
|
|
88
|
+
if (!isComposing) {
|
|
89
|
+
fn();
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
var triggerSuccessReplacementMessageUpdate = function triggerSuccessReplacementMessageUpdate(currentReplaceCount) {
|
|
93
|
+
if (replaceCount === currentReplaceCount) {
|
|
94
|
+
setFakeSuccessReplacementMessageUpdate(!fakeSuccessReplacementMessageUpdate);
|
|
95
|
+
}
|
|
96
|
+
if (successReplacementMessageRef.current) {
|
|
97
|
+
var ariaLiveRegion = successReplacementMessageRef.current.querySelector('[aria-live="polite"]');
|
|
98
|
+
ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.removeAttribute('aria-live');
|
|
99
|
+
ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.setAttribute('aria-live', 'polite');
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
var handleReplaceClick = function handleReplaceClick() {
|
|
103
|
+
return skipWhileComposing(function () {
|
|
104
|
+
onReplace({
|
|
105
|
+
triggerMethod: _analytics.TRIGGER_METHOD.BUTTON,
|
|
106
|
+
replaceText: replaceText
|
|
107
|
+
});
|
|
108
|
+
triggerSuccessReplacementMessageUpdate(1);
|
|
109
|
+
setIsHelperMessageVisible(true);
|
|
110
|
+
setReplaceCount(1);
|
|
111
|
+
setFindTyped(false);
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
var handleReplaceChange = function handleReplaceChange(event) {
|
|
115
|
+
return skipWhileComposing(function () {
|
|
116
|
+
updateReplaceValue(event.target.value);
|
|
117
|
+
});
|
|
118
|
+
};
|
|
119
|
+
var updateReplaceValue = function updateReplaceValue(text) {
|
|
120
|
+
if (dispatchAnalyticsEvent) {
|
|
121
|
+
dispatchAnalyticsEvent({
|
|
122
|
+
eventType: _analytics.EVENT_TYPE.TRACK,
|
|
123
|
+
action: _analytics.ACTION.CHANGED_REPLACEMENT_TEXT,
|
|
124
|
+
actionSubject: _analytics.ACTION_SUBJECT.FIND_REPLACE_DIALOG
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
setReplaceText(text);
|
|
128
|
+
};
|
|
129
|
+
var handleReplaceKeyDown = function handleReplaceKeyDown(event) {
|
|
130
|
+
return skipWhileComposing(function () {
|
|
131
|
+
if (event.key === 'Enter') {
|
|
132
|
+
onReplace({
|
|
133
|
+
triggerMethod: _analytics.TRIGGER_METHOD.KEYBOARD,
|
|
134
|
+
replaceText: replaceText
|
|
135
|
+
});
|
|
136
|
+
} else if (event.key === 'ArrowUp') {
|
|
137
|
+
onArrowUp();
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
};
|
|
141
|
+
var handleReplaceAllClick = function handleReplaceAllClick() {
|
|
142
|
+
return skipWhileComposing(function () {
|
|
143
|
+
onReplaceAll({
|
|
144
|
+
replaceText: replaceText
|
|
145
|
+
});
|
|
146
|
+
setIsHelperMessageVisible(true);
|
|
147
|
+
triggerSuccessReplacementMessageUpdate(count.total);
|
|
148
|
+
setReplaceCount(count.total);
|
|
149
|
+
setFindTyped(false);
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
var handleCompositionStart = function handleCompositionStart() {
|
|
153
|
+
setIsComposing(true);
|
|
154
|
+
};
|
|
155
|
+
var handleCompositionEnd = function handleCompositionEnd(event) {
|
|
156
|
+
setIsComposing(false);
|
|
157
|
+
updateReplaceValue(event.currentTarget.value);
|
|
158
|
+
};
|
|
159
|
+
var clearSearch = function clearSearch() {
|
|
160
|
+
onCancel({
|
|
161
|
+
triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
|
|
162
|
+
});
|
|
163
|
+
focusToolbarButton();
|
|
164
|
+
};
|
|
165
|
+
var handleFindNextClick = function handleFindNextClick() {
|
|
166
|
+
if (!isComposing) {
|
|
167
|
+
onFindNext({
|
|
168
|
+
triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
};
|
|
172
|
+
var handleFindPrevClick = function handleFindPrevClick() {
|
|
173
|
+
if (!isComposing) {
|
|
174
|
+
onFindPrev({
|
|
175
|
+
triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
var resultsReplace = formatMessage(_messages.findReplaceMessages.replaceSuccess, {
|
|
180
|
+
numberOfMatches: replaceCount
|
|
181
|
+
});
|
|
182
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
183
|
+
xcss: replaceContainerStyles
|
|
184
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
185
|
+
xcss: replaceWithLabelStyle
|
|
186
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
187
|
+
id: "replace-text-field-label",
|
|
188
|
+
size: "medium",
|
|
189
|
+
weight: "bold",
|
|
190
|
+
color: "color.text.subtle"
|
|
191
|
+
}, replaceWith)), /*#__PURE__*/_react.default.createElement(_textfield.default, {
|
|
192
|
+
name: "replace",
|
|
193
|
+
"aria-labelledby": "replace-text-field-label",
|
|
194
|
+
testId: "replace-field",
|
|
195
|
+
appearance: "standard",
|
|
196
|
+
defaultValue: replaceText,
|
|
197
|
+
ref: replaceTextfieldRef,
|
|
198
|
+
autoComplete: "off",
|
|
199
|
+
onChange: handleReplaceChange,
|
|
200
|
+
onKeyDown: handleReplaceKeyDown,
|
|
201
|
+
onCompositionStart: handleCompositionStart,
|
|
202
|
+
onCompositionEnd: handleCompositionEnd
|
|
203
|
+
}), isHelperMessageVisible && !findTyped && /*#__PURE__*/_react.default.createElement("div", {
|
|
204
|
+
ref: successReplacementMessageRef
|
|
205
|
+
}, /*#__PURE__*/_react.default.createElement(_form.ValidMessage, {
|
|
206
|
+
testId: "message-success-replacement"
|
|
207
|
+
}, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(/ /, "\xA0") : resultsReplace)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
208
|
+
xcss: actionButtonContainerStyles
|
|
209
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
|
|
210
|
+
xcss: [actionButtonInlineStyles, actionButtonParentInlineStyles]
|
|
211
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
|
|
212
|
+
xcss: actionButtonInlineStyles
|
|
213
|
+
}, /*#__PURE__*/_react.default.createElement(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
|
|
214
|
+
title: formatMessage(_messages.findReplaceMessages.findNext),
|
|
215
|
+
icon: _chevronDownHipchatChevronDown.default,
|
|
216
|
+
iconLabel: formatMessage(_messages.findReplaceMessages.findNext),
|
|
217
|
+
keymapDescription: 'Enter',
|
|
218
|
+
onClick: handleFindNextClick,
|
|
219
|
+
disabled: count.total <= 1
|
|
220
|
+
}), /*#__PURE__*/_react.default.createElement(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
|
|
221
|
+
title: findPrevious,
|
|
222
|
+
icon: _chevronUpHipchatChevronUp.default,
|
|
223
|
+
iconLabel: findPrevious,
|
|
224
|
+
keymapDescription: 'Shift Enter',
|
|
225
|
+
onClick: handleFindPrevClick,
|
|
226
|
+
disabled: count.total <= 1
|
|
227
|
+
}), /*#__PURE__*/_react.default.createElement(_new.default, {
|
|
228
|
+
testId: 'Replace',
|
|
229
|
+
id: "replace-button",
|
|
230
|
+
onClick: handleReplaceClick,
|
|
231
|
+
isDisabled: !canReplace
|
|
232
|
+
}, formatMessage(_messages.findReplaceMessages.replace)), /*#__PURE__*/_react.default.createElement(_new.default, {
|
|
233
|
+
appearance: "primary",
|
|
234
|
+
testId: replaceAll,
|
|
235
|
+
id: "replaceAll-button",
|
|
236
|
+
onClick: handleReplaceAllClick,
|
|
237
|
+
isDisabled: !canReplace
|
|
238
|
+
}, replaceAll)), /*#__PURE__*/_react.default.createElement(_new.default, {
|
|
239
|
+
appearance: "subtle",
|
|
240
|
+
testId: closeFindReplaceDialog,
|
|
241
|
+
onClick: clearSearch
|
|
242
|
+
}, closeFindReplaceDialog))));
|
|
243
|
+
};
|
|
244
|
+
var _default = exports.default = (0, _reactIntlNext.injectIntl)(Replace);
|
|
@@ -9,8 +9,10 @@ import React from 'react';
|
|
|
9
9
|
|
|
10
10
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
11
11
|
import { jsx } from '@emotion/react';
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
13
|
import Find from './Find';
|
|
13
14
|
import Replace from './Replace';
|
|
15
|
+
import ReplaceNext from './ReplaceNext';
|
|
14
16
|
import { ruleStyles, wrapperPaddingStyles, wrapperStyles } from './ui-styles';
|
|
15
17
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
16
18
|
class FindReplace extends React.PureComponent {
|
|
@@ -18,7 +20,14 @@ class FindReplace extends React.PureComponent {
|
|
|
18
20
|
super(props);
|
|
19
21
|
_defineProperty(this, "findTextfield", null);
|
|
20
22
|
_defineProperty(this, "replaceTextfield", null);
|
|
23
|
+
/**
|
|
24
|
+
* Delete this function on cleanup of
|
|
25
|
+
* editor_a11y_refactor_find_replace_style
|
|
26
|
+
*/
|
|
21
27
|
_defineProperty(this, "handleTabNavigation", event => {
|
|
28
|
+
if (fg('editor_a11y_refactor_find_replace_style')) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
22
31
|
if (event.key === 'Tab') {
|
|
23
32
|
event.preventDefault();
|
|
24
33
|
const modalFindReplace = this.modalRef.current;
|
|
@@ -115,7 +124,22 @@ class FindReplace extends React.PureComponent {
|
|
|
115
124
|
role: "presentation",
|
|
116
125
|
css: ruleStyles,
|
|
117
126
|
id: "replace-hr-element"
|
|
118
|
-
}), jsx(
|
|
127
|
+
}), fg('editor_a11y_refactor_find_replace_style') ? jsx(ReplaceNext, {
|
|
128
|
+
canReplace: count.total > 0,
|
|
129
|
+
replaceText: replaceText,
|
|
130
|
+
onReplace: onReplace,
|
|
131
|
+
onReplaceAll: onReplaceAll,
|
|
132
|
+
onReplaceTextfieldRefSet: this.setReplaceTextfieldRef,
|
|
133
|
+
onArrowUp: this.setFocusToFind,
|
|
134
|
+
onCancel: onCancel,
|
|
135
|
+
count: count,
|
|
136
|
+
onFindPrev: onFindPrev,
|
|
137
|
+
onFindNext: onFindNext,
|
|
138
|
+
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
139
|
+
findTyped: this.state.findTyped,
|
|
140
|
+
setFindTyped: this.setFindTyped,
|
|
141
|
+
focusToolbarButton: focusToolbarButton
|
|
142
|
+
}) : jsx(Replace, {
|
|
119
143
|
canReplace: count.total > 0,
|
|
120
144
|
replaceText: replaceText,
|
|
121
145
|
onReplace: onReplace,
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
import React, { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import { injectIntl } from 'react-intl-next';
|
|
3
|
+
import Button from '@atlaskit/button/new';
|
|
4
|
+
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
|
+
import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
|
+
import { ValidMessage } from '@atlaskit/form';
|
|
7
|
+
import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down--hipchat-chevron-down';
|
|
8
|
+
import ChevronUpIcon from '@atlaskit/icon/utility/migration/chevron-up--hipchat-chevron-up';
|
|
9
|
+
import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
|
|
10
|
+
import Textfield from '@atlaskit/textfield';
|
|
11
|
+
import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
|
|
12
|
+
const replaceContainerStyles = xcss({
|
|
13
|
+
padding: 'space.100'
|
|
14
|
+
});
|
|
15
|
+
const replaceWithLabelStyle = xcss({
|
|
16
|
+
paddingBottom: 'space.050'
|
|
17
|
+
});
|
|
18
|
+
const actionButtonContainerStyles = xcss({
|
|
19
|
+
paddingTop: 'space.200'
|
|
20
|
+
});
|
|
21
|
+
const actionButtonParentInlineStyles = xcss({
|
|
22
|
+
justifyContent: 'space-between',
|
|
23
|
+
flexDirection: 'row-reverse'
|
|
24
|
+
});
|
|
25
|
+
const actionButtonInlineStyles = xcss({
|
|
26
|
+
gap: 'space.075'
|
|
27
|
+
});
|
|
28
|
+
const Replace = ({
|
|
29
|
+
canReplace,
|
|
30
|
+
replaceText: initialReplaceText,
|
|
31
|
+
onReplace,
|
|
32
|
+
onReplaceAll,
|
|
33
|
+
onReplaceTextfieldRefSet,
|
|
34
|
+
onArrowUp,
|
|
35
|
+
onCancel,
|
|
36
|
+
count,
|
|
37
|
+
onFindNext,
|
|
38
|
+
onFindPrev,
|
|
39
|
+
dispatchAnalyticsEvent,
|
|
40
|
+
setFindTyped,
|
|
41
|
+
findTyped,
|
|
42
|
+
focusToolbarButton,
|
|
43
|
+
intl: {
|
|
44
|
+
formatMessage
|
|
45
|
+
}
|
|
46
|
+
}) => {
|
|
47
|
+
const [replaceText, setReplaceText] = useState(initialReplaceText || '');
|
|
48
|
+
const [isComposing, setIsComposing] = useState(false);
|
|
49
|
+
const [isHelperMessageVisible, setIsHelperMessageVisible] = useState(false);
|
|
50
|
+
const [fakeSuccessReplacementMessageUpdate, setFakeSuccessReplacementMessageUpdate] = useState(false);
|
|
51
|
+
const [replaceCount, setReplaceCount] = useState(0);
|
|
52
|
+
const replaceTextfieldRef = useRef(null);
|
|
53
|
+
const successReplacementMessageRef = useRef(null);
|
|
54
|
+
const replaceWith = formatMessage(messages.replaceWith);
|
|
55
|
+
const replaceAll = formatMessage(messages.replaceAll);
|
|
56
|
+
const findPrevious = formatMessage(messages.findPrevious);
|
|
57
|
+
const closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
onReplaceTextfieldRefSet(replaceTextfieldRef);
|
|
60
|
+
}, [onReplaceTextfieldRefSet]);
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
setReplaceText(initialReplaceText || '');
|
|
63
|
+
}, [initialReplaceText]);
|
|
64
|
+
const skipWhileComposing = fn => {
|
|
65
|
+
if (!isComposing) {
|
|
66
|
+
fn();
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
const triggerSuccessReplacementMessageUpdate = currentReplaceCount => {
|
|
70
|
+
if (replaceCount === currentReplaceCount) {
|
|
71
|
+
setFakeSuccessReplacementMessageUpdate(!fakeSuccessReplacementMessageUpdate);
|
|
72
|
+
}
|
|
73
|
+
if (successReplacementMessageRef.current) {
|
|
74
|
+
const ariaLiveRegion = successReplacementMessageRef.current.querySelector('[aria-live="polite"]');
|
|
75
|
+
ariaLiveRegion === null || ariaLiveRegion === void 0 ? void 0 : ariaLiveRegion.removeAttribute('aria-live');
|
|
76
|
+
ariaLiveRegion === null || ariaLiveRegion === void 0 ? void 0 : ariaLiveRegion.setAttribute('aria-live', 'polite');
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
const handleReplaceClick = () => skipWhileComposing(() => {
|
|
80
|
+
onReplace({
|
|
81
|
+
triggerMethod: TRIGGER_METHOD.BUTTON,
|
|
82
|
+
replaceText
|
|
83
|
+
});
|
|
84
|
+
triggerSuccessReplacementMessageUpdate(1);
|
|
85
|
+
setIsHelperMessageVisible(true);
|
|
86
|
+
setReplaceCount(1);
|
|
87
|
+
setFindTyped(false);
|
|
88
|
+
});
|
|
89
|
+
const handleReplaceChange = event => skipWhileComposing(() => {
|
|
90
|
+
updateReplaceValue(event.target.value);
|
|
91
|
+
});
|
|
92
|
+
const updateReplaceValue = text => {
|
|
93
|
+
if (dispatchAnalyticsEvent) {
|
|
94
|
+
dispatchAnalyticsEvent({
|
|
95
|
+
eventType: EVENT_TYPE.TRACK,
|
|
96
|
+
action: ACTION.CHANGED_REPLACEMENT_TEXT,
|
|
97
|
+
actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
setReplaceText(text);
|
|
101
|
+
};
|
|
102
|
+
const handleReplaceKeyDown = event => skipWhileComposing(() => {
|
|
103
|
+
if (event.key === 'Enter') {
|
|
104
|
+
onReplace({
|
|
105
|
+
triggerMethod: TRIGGER_METHOD.KEYBOARD,
|
|
106
|
+
replaceText
|
|
107
|
+
});
|
|
108
|
+
} else if (event.key === 'ArrowUp') {
|
|
109
|
+
onArrowUp();
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
const handleReplaceAllClick = () => skipWhileComposing(() => {
|
|
113
|
+
onReplaceAll({
|
|
114
|
+
replaceText
|
|
115
|
+
});
|
|
116
|
+
setIsHelperMessageVisible(true);
|
|
117
|
+
triggerSuccessReplacementMessageUpdate(count.total);
|
|
118
|
+
setReplaceCount(count.total);
|
|
119
|
+
setFindTyped(false);
|
|
120
|
+
});
|
|
121
|
+
const handleCompositionStart = () => {
|
|
122
|
+
setIsComposing(true);
|
|
123
|
+
};
|
|
124
|
+
const handleCompositionEnd = event => {
|
|
125
|
+
setIsComposing(false);
|
|
126
|
+
updateReplaceValue(event.currentTarget.value);
|
|
127
|
+
};
|
|
128
|
+
const clearSearch = () => {
|
|
129
|
+
onCancel({
|
|
130
|
+
triggerMethod: TRIGGER_METHOD.BUTTON
|
|
131
|
+
});
|
|
132
|
+
focusToolbarButton();
|
|
133
|
+
};
|
|
134
|
+
const handleFindNextClick = () => {
|
|
135
|
+
if (!isComposing) {
|
|
136
|
+
onFindNext({
|
|
137
|
+
triggerMethod: TRIGGER_METHOD.BUTTON
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
const handleFindPrevClick = () => {
|
|
142
|
+
if (!isComposing) {
|
|
143
|
+
onFindPrev({
|
|
144
|
+
triggerMethod: TRIGGER_METHOD.BUTTON
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
const resultsReplace = formatMessage(messages.replaceSuccess, {
|
|
149
|
+
numberOfMatches: replaceCount
|
|
150
|
+
});
|
|
151
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
152
|
+
xcss: replaceContainerStyles
|
|
153
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
154
|
+
xcss: replaceWithLabelStyle
|
|
155
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
156
|
+
id: "replace-text-field-label",
|
|
157
|
+
size: "medium",
|
|
158
|
+
weight: "bold",
|
|
159
|
+
color: "color.text.subtle"
|
|
160
|
+
}, replaceWith)), /*#__PURE__*/React.createElement(Textfield, {
|
|
161
|
+
name: "replace",
|
|
162
|
+
"aria-labelledby": "replace-text-field-label",
|
|
163
|
+
testId: "replace-field",
|
|
164
|
+
appearance: "standard",
|
|
165
|
+
defaultValue: replaceText,
|
|
166
|
+
ref: replaceTextfieldRef,
|
|
167
|
+
autoComplete: "off",
|
|
168
|
+
onChange: handleReplaceChange,
|
|
169
|
+
onKeyDown: handleReplaceKeyDown,
|
|
170
|
+
onCompositionStart: handleCompositionStart,
|
|
171
|
+
onCompositionEnd: handleCompositionEnd
|
|
172
|
+
}), isHelperMessageVisible && !findTyped && /*#__PURE__*/React.createElement("div", {
|
|
173
|
+
ref: successReplacementMessageRef
|
|
174
|
+
}, /*#__PURE__*/React.createElement(ValidMessage, {
|
|
175
|
+
testId: "message-success-replacement"
|
|
176
|
+
}, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(/ /u, '\u00a0') : resultsReplace)), /*#__PURE__*/React.createElement(Box, {
|
|
177
|
+
xcss: actionButtonContainerStyles
|
|
178
|
+
}, /*#__PURE__*/React.createElement(Inline, {
|
|
179
|
+
xcss: [actionButtonInlineStyles, actionButtonParentInlineStyles]
|
|
180
|
+
}, /*#__PURE__*/React.createElement(Inline, {
|
|
181
|
+
xcss: actionButtonInlineStyles
|
|
182
|
+
}, /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
|
|
183
|
+
title: formatMessage(messages.findNext),
|
|
184
|
+
icon: ChevronDownIcon,
|
|
185
|
+
iconLabel: formatMessage(messages.findNext),
|
|
186
|
+
keymapDescription: 'Enter',
|
|
187
|
+
onClick: handleFindNextClick,
|
|
188
|
+
disabled: count.total <= 1
|
|
189
|
+
}), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
|
|
190
|
+
title: findPrevious,
|
|
191
|
+
icon: ChevronUpIcon,
|
|
192
|
+
iconLabel: findPrevious,
|
|
193
|
+
keymapDescription: 'Shift Enter',
|
|
194
|
+
onClick: handleFindPrevClick,
|
|
195
|
+
disabled: count.total <= 1
|
|
196
|
+
}), /*#__PURE__*/React.createElement(Button, {
|
|
197
|
+
testId: 'Replace',
|
|
198
|
+
id: "replace-button",
|
|
199
|
+
onClick: handleReplaceClick,
|
|
200
|
+
isDisabled: !canReplace
|
|
201
|
+
}, formatMessage(messages.replace)), /*#__PURE__*/React.createElement(Button, {
|
|
202
|
+
appearance: "primary",
|
|
203
|
+
testId: replaceAll,
|
|
204
|
+
id: "replaceAll-button",
|
|
205
|
+
onClick: handleReplaceAllClick,
|
|
206
|
+
isDisabled: !canReplace
|
|
207
|
+
}, replaceAll)), /*#__PURE__*/React.createElement(Button, {
|
|
208
|
+
appearance: "subtle",
|
|
209
|
+
testId: closeFindReplaceDialog,
|
|
210
|
+
onClick: clearSearch
|
|
211
|
+
}, closeFindReplaceDialog))));
|
|
212
|
+
};
|
|
213
|
+
export default injectIntl(Replace);
|
|
@@ -16,8 +16,10 @@ import React from 'react';
|
|
|
16
16
|
|
|
17
17
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
18
18
|
import { jsx } from '@emotion/react';
|
|
19
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
19
20
|
import Find from './Find';
|
|
20
21
|
import Replace from './Replace';
|
|
22
|
+
import ReplaceNext from './ReplaceNext';
|
|
21
23
|
import { ruleStyles, wrapperPaddingStyles, wrapperStyles } from './ui-styles';
|
|
22
24
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
23
25
|
var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
|
|
@@ -27,7 +29,14 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
27
29
|
_this = _callSuper(this, FindReplace, [props]);
|
|
28
30
|
_defineProperty(_this, "findTextfield", null);
|
|
29
31
|
_defineProperty(_this, "replaceTextfield", null);
|
|
32
|
+
/**
|
|
33
|
+
* Delete this function on cleanup of
|
|
34
|
+
* editor_a11y_refactor_find_replace_style
|
|
35
|
+
*/
|
|
30
36
|
_defineProperty(_this, "handleTabNavigation", function (event) {
|
|
37
|
+
if (fg('editor_a11y_refactor_find_replace_style')) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
31
40
|
if (event.key === 'Tab') {
|
|
32
41
|
event.preventDefault();
|
|
33
42
|
var modalFindReplace = _this.modalRef.current;
|
|
@@ -135,7 +144,22 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
135
144
|
role: "presentation",
|
|
136
145
|
css: ruleStyles,
|
|
137
146
|
id: "replace-hr-element"
|
|
138
|
-
}), jsx(
|
|
147
|
+
}), fg('editor_a11y_refactor_find_replace_style') ? jsx(ReplaceNext, {
|
|
148
|
+
canReplace: count.total > 0,
|
|
149
|
+
replaceText: replaceText,
|
|
150
|
+
onReplace: onReplace,
|
|
151
|
+
onReplaceAll: onReplaceAll,
|
|
152
|
+
onReplaceTextfieldRefSet: this.setReplaceTextfieldRef,
|
|
153
|
+
onArrowUp: this.setFocusToFind,
|
|
154
|
+
onCancel: onCancel,
|
|
155
|
+
count: count,
|
|
156
|
+
onFindPrev: onFindPrev,
|
|
157
|
+
onFindNext: onFindNext,
|
|
158
|
+
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
159
|
+
findTyped: this.state.findTyped,
|
|
160
|
+
setFindTyped: this.setFindTyped,
|
|
161
|
+
focusToolbarButton: focusToolbarButton
|
|
162
|
+
}) : jsx(Replace, {
|
|
139
163
|
canReplace: count.total > 0,
|
|
140
164
|
replaceText: replaceText,
|
|
141
165
|
onReplace: onReplace,
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
+
import React, { useState, useRef, useEffect } from 'react';
|
|
3
|
+
import { injectIntl } from 'react-intl-next';
|
|
4
|
+
import Button from '@atlaskit/button/new';
|
|
5
|
+
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
|
|
6
|
+
import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
|
|
7
|
+
import { ValidMessage } from '@atlaskit/form';
|
|
8
|
+
import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down--hipchat-chevron-down';
|
|
9
|
+
import ChevronUpIcon from '@atlaskit/icon/utility/migration/chevron-up--hipchat-chevron-up';
|
|
10
|
+
import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
|
|
11
|
+
import Textfield from '@atlaskit/textfield';
|
|
12
|
+
import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
|
|
13
|
+
var replaceContainerStyles = xcss({
|
|
14
|
+
padding: 'space.100'
|
|
15
|
+
});
|
|
16
|
+
var replaceWithLabelStyle = xcss({
|
|
17
|
+
paddingBottom: 'space.050'
|
|
18
|
+
});
|
|
19
|
+
var actionButtonContainerStyles = xcss({
|
|
20
|
+
paddingTop: 'space.200'
|
|
21
|
+
});
|
|
22
|
+
var actionButtonParentInlineStyles = xcss({
|
|
23
|
+
justifyContent: 'space-between',
|
|
24
|
+
flexDirection: 'row-reverse'
|
|
25
|
+
});
|
|
26
|
+
var actionButtonInlineStyles = xcss({
|
|
27
|
+
gap: 'space.075'
|
|
28
|
+
});
|
|
29
|
+
var Replace = function Replace(_ref) {
|
|
30
|
+
var canReplace = _ref.canReplace,
|
|
31
|
+
initialReplaceText = _ref.replaceText,
|
|
32
|
+
onReplace = _ref.onReplace,
|
|
33
|
+
onReplaceAll = _ref.onReplaceAll,
|
|
34
|
+
onReplaceTextfieldRefSet = _ref.onReplaceTextfieldRefSet,
|
|
35
|
+
onArrowUp = _ref.onArrowUp,
|
|
36
|
+
onCancel = _ref.onCancel,
|
|
37
|
+
count = _ref.count,
|
|
38
|
+
onFindNext = _ref.onFindNext,
|
|
39
|
+
onFindPrev = _ref.onFindPrev,
|
|
40
|
+
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
|
|
41
|
+
setFindTyped = _ref.setFindTyped,
|
|
42
|
+
findTyped = _ref.findTyped,
|
|
43
|
+
focusToolbarButton = _ref.focusToolbarButton,
|
|
44
|
+
formatMessage = _ref.intl.formatMessage;
|
|
45
|
+
var _useState = useState(initialReplaceText || ''),
|
|
46
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
47
|
+
replaceText = _useState2[0],
|
|
48
|
+
setReplaceText = _useState2[1];
|
|
49
|
+
var _useState3 = useState(false),
|
|
50
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
51
|
+
isComposing = _useState4[0],
|
|
52
|
+
setIsComposing = _useState4[1];
|
|
53
|
+
var _useState5 = useState(false),
|
|
54
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
55
|
+
isHelperMessageVisible = _useState6[0],
|
|
56
|
+
setIsHelperMessageVisible = _useState6[1];
|
|
57
|
+
var _useState7 = useState(false),
|
|
58
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
59
|
+
fakeSuccessReplacementMessageUpdate = _useState8[0],
|
|
60
|
+
setFakeSuccessReplacementMessageUpdate = _useState8[1];
|
|
61
|
+
var _useState9 = useState(0),
|
|
62
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
63
|
+
replaceCount = _useState10[0],
|
|
64
|
+
setReplaceCount = _useState10[1];
|
|
65
|
+
var replaceTextfieldRef = useRef(null);
|
|
66
|
+
var successReplacementMessageRef = useRef(null);
|
|
67
|
+
var replaceWith = formatMessage(messages.replaceWith);
|
|
68
|
+
var replaceAll = formatMessage(messages.replaceAll);
|
|
69
|
+
var findPrevious = formatMessage(messages.findPrevious);
|
|
70
|
+
var closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
|
|
71
|
+
useEffect(function () {
|
|
72
|
+
onReplaceTextfieldRefSet(replaceTextfieldRef);
|
|
73
|
+
}, [onReplaceTextfieldRefSet]);
|
|
74
|
+
useEffect(function () {
|
|
75
|
+
setReplaceText(initialReplaceText || '');
|
|
76
|
+
}, [initialReplaceText]);
|
|
77
|
+
var skipWhileComposing = function skipWhileComposing(fn) {
|
|
78
|
+
if (!isComposing) {
|
|
79
|
+
fn();
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
var triggerSuccessReplacementMessageUpdate = function triggerSuccessReplacementMessageUpdate(currentReplaceCount) {
|
|
83
|
+
if (replaceCount === currentReplaceCount) {
|
|
84
|
+
setFakeSuccessReplacementMessageUpdate(!fakeSuccessReplacementMessageUpdate);
|
|
85
|
+
}
|
|
86
|
+
if (successReplacementMessageRef.current) {
|
|
87
|
+
var ariaLiveRegion = successReplacementMessageRef.current.querySelector('[aria-live="polite"]');
|
|
88
|
+
ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.removeAttribute('aria-live');
|
|
89
|
+
ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.setAttribute('aria-live', 'polite');
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
var handleReplaceClick = function handleReplaceClick() {
|
|
93
|
+
return skipWhileComposing(function () {
|
|
94
|
+
onReplace({
|
|
95
|
+
triggerMethod: TRIGGER_METHOD.BUTTON,
|
|
96
|
+
replaceText: replaceText
|
|
97
|
+
});
|
|
98
|
+
triggerSuccessReplacementMessageUpdate(1);
|
|
99
|
+
setIsHelperMessageVisible(true);
|
|
100
|
+
setReplaceCount(1);
|
|
101
|
+
setFindTyped(false);
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
var handleReplaceChange = function handleReplaceChange(event) {
|
|
105
|
+
return skipWhileComposing(function () {
|
|
106
|
+
updateReplaceValue(event.target.value);
|
|
107
|
+
});
|
|
108
|
+
};
|
|
109
|
+
var updateReplaceValue = function updateReplaceValue(text) {
|
|
110
|
+
if (dispatchAnalyticsEvent) {
|
|
111
|
+
dispatchAnalyticsEvent({
|
|
112
|
+
eventType: EVENT_TYPE.TRACK,
|
|
113
|
+
action: ACTION.CHANGED_REPLACEMENT_TEXT,
|
|
114
|
+
actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
setReplaceText(text);
|
|
118
|
+
};
|
|
119
|
+
var handleReplaceKeyDown = function handleReplaceKeyDown(event) {
|
|
120
|
+
return skipWhileComposing(function () {
|
|
121
|
+
if (event.key === 'Enter') {
|
|
122
|
+
onReplace({
|
|
123
|
+
triggerMethod: TRIGGER_METHOD.KEYBOARD,
|
|
124
|
+
replaceText: replaceText
|
|
125
|
+
});
|
|
126
|
+
} else if (event.key === 'ArrowUp') {
|
|
127
|
+
onArrowUp();
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
};
|
|
131
|
+
var handleReplaceAllClick = function handleReplaceAllClick() {
|
|
132
|
+
return skipWhileComposing(function () {
|
|
133
|
+
onReplaceAll({
|
|
134
|
+
replaceText: replaceText
|
|
135
|
+
});
|
|
136
|
+
setIsHelperMessageVisible(true);
|
|
137
|
+
triggerSuccessReplacementMessageUpdate(count.total);
|
|
138
|
+
setReplaceCount(count.total);
|
|
139
|
+
setFindTyped(false);
|
|
140
|
+
});
|
|
141
|
+
};
|
|
142
|
+
var handleCompositionStart = function handleCompositionStart() {
|
|
143
|
+
setIsComposing(true);
|
|
144
|
+
};
|
|
145
|
+
var handleCompositionEnd = function handleCompositionEnd(event) {
|
|
146
|
+
setIsComposing(false);
|
|
147
|
+
updateReplaceValue(event.currentTarget.value);
|
|
148
|
+
};
|
|
149
|
+
var clearSearch = function clearSearch() {
|
|
150
|
+
onCancel({
|
|
151
|
+
triggerMethod: TRIGGER_METHOD.BUTTON
|
|
152
|
+
});
|
|
153
|
+
focusToolbarButton();
|
|
154
|
+
};
|
|
155
|
+
var handleFindNextClick = function handleFindNextClick() {
|
|
156
|
+
if (!isComposing) {
|
|
157
|
+
onFindNext({
|
|
158
|
+
triggerMethod: TRIGGER_METHOD.BUTTON
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
var handleFindPrevClick = function handleFindPrevClick() {
|
|
163
|
+
if (!isComposing) {
|
|
164
|
+
onFindPrev({
|
|
165
|
+
triggerMethod: TRIGGER_METHOD.BUTTON
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
var resultsReplace = formatMessage(messages.replaceSuccess, {
|
|
170
|
+
numberOfMatches: replaceCount
|
|
171
|
+
});
|
|
172
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
173
|
+
xcss: replaceContainerStyles
|
|
174
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
175
|
+
xcss: replaceWithLabelStyle
|
|
176
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
177
|
+
id: "replace-text-field-label",
|
|
178
|
+
size: "medium",
|
|
179
|
+
weight: "bold",
|
|
180
|
+
color: "color.text.subtle"
|
|
181
|
+
}, replaceWith)), /*#__PURE__*/React.createElement(Textfield, {
|
|
182
|
+
name: "replace",
|
|
183
|
+
"aria-labelledby": "replace-text-field-label",
|
|
184
|
+
testId: "replace-field",
|
|
185
|
+
appearance: "standard",
|
|
186
|
+
defaultValue: replaceText,
|
|
187
|
+
ref: replaceTextfieldRef,
|
|
188
|
+
autoComplete: "off",
|
|
189
|
+
onChange: handleReplaceChange,
|
|
190
|
+
onKeyDown: handleReplaceKeyDown,
|
|
191
|
+
onCompositionStart: handleCompositionStart,
|
|
192
|
+
onCompositionEnd: handleCompositionEnd
|
|
193
|
+
}), isHelperMessageVisible && !findTyped && /*#__PURE__*/React.createElement("div", {
|
|
194
|
+
ref: successReplacementMessageRef
|
|
195
|
+
}, /*#__PURE__*/React.createElement(ValidMessage, {
|
|
196
|
+
testId: "message-success-replacement"
|
|
197
|
+
}, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(/ /, "\xA0") : resultsReplace)), /*#__PURE__*/React.createElement(Box, {
|
|
198
|
+
xcss: actionButtonContainerStyles
|
|
199
|
+
}, /*#__PURE__*/React.createElement(Inline, {
|
|
200
|
+
xcss: [actionButtonInlineStyles, actionButtonParentInlineStyles]
|
|
201
|
+
}, /*#__PURE__*/React.createElement(Inline, {
|
|
202
|
+
xcss: actionButtonInlineStyles
|
|
203
|
+
}, /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
|
|
204
|
+
title: formatMessage(messages.findNext),
|
|
205
|
+
icon: ChevronDownIcon,
|
|
206
|
+
iconLabel: formatMessage(messages.findNext),
|
|
207
|
+
keymapDescription: 'Enter',
|
|
208
|
+
onClick: handleFindNextClick,
|
|
209
|
+
disabled: count.total <= 1
|
|
210
|
+
}), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
|
|
211
|
+
title: findPrevious,
|
|
212
|
+
icon: ChevronUpIcon,
|
|
213
|
+
iconLabel: findPrevious,
|
|
214
|
+
keymapDescription: 'Shift Enter',
|
|
215
|
+
onClick: handleFindPrevClick,
|
|
216
|
+
disabled: count.total <= 1
|
|
217
|
+
}), /*#__PURE__*/React.createElement(Button, {
|
|
218
|
+
testId: 'Replace',
|
|
219
|
+
id: "replace-button",
|
|
220
|
+
onClick: handleReplaceClick,
|
|
221
|
+
isDisabled: !canReplace
|
|
222
|
+
}, formatMessage(messages.replace)), /*#__PURE__*/React.createElement(Button, {
|
|
223
|
+
appearance: "primary",
|
|
224
|
+
testId: replaceAll,
|
|
225
|
+
id: "replaceAll-button",
|
|
226
|
+
onClick: handleReplaceAllClick,
|
|
227
|
+
isDisabled: !canReplace
|
|
228
|
+
}, replaceAll)), /*#__PURE__*/React.createElement(Button, {
|
|
229
|
+
appearance: "subtle",
|
|
230
|
+
testId: closeFindReplaceDialog,
|
|
231
|
+
onClick: clearSearch
|
|
232
|
+
}, closeFindReplaceDialog))));
|
|
233
|
+
};
|
|
234
|
+
export default injectIntl(Replace);
|
|
@@ -42,6 +42,10 @@ declare class FindReplace extends React.PureComponent<FindReplaceProps> {
|
|
|
42
42
|
constructor(props: FindReplaceProps);
|
|
43
43
|
componentDidMount(): void;
|
|
44
44
|
componentWillUnmount(): void;
|
|
45
|
+
/**
|
|
46
|
+
* Delete this function on cleanup of
|
|
47
|
+
* editor_a11y_refactor_find_replace_style
|
|
48
|
+
*/
|
|
45
49
|
handleTabNavigation: (event: KeyboardEvent) => void;
|
|
46
50
|
state: {
|
|
47
51
|
findTyped: boolean;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { WrappedComponentProps } from 'react-intl-next';
|
|
3
|
+
import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
4
|
+
import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
|
+
export type ReplaceProps = {
|
|
6
|
+
canReplace: boolean;
|
|
7
|
+
replaceText?: string;
|
|
8
|
+
onReplace: ({ triggerMethod, replaceText, }: {
|
|
9
|
+
triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
|
|
10
|
+
replaceText: string;
|
|
11
|
+
}) => void;
|
|
12
|
+
onReplaceAll: ({ replaceText }: {
|
|
13
|
+
replaceText: string;
|
|
14
|
+
}) => void;
|
|
15
|
+
onReplaceTextfieldRefSet: (ref: React.RefObject<HTMLInputElement>) => void;
|
|
16
|
+
onArrowUp: () => void;
|
|
17
|
+
onCancel: ({ triggerMethod, }: {
|
|
18
|
+
triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.BUTTON;
|
|
19
|
+
}) => void;
|
|
20
|
+
count: {
|
|
21
|
+
index: number;
|
|
22
|
+
total: number;
|
|
23
|
+
};
|
|
24
|
+
onFindNext: ({ triggerMethod, }: {
|
|
25
|
+
triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
|
|
26
|
+
}) => void;
|
|
27
|
+
onFindPrev: ({ triggerMethod, }: {
|
|
28
|
+
triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
|
|
29
|
+
}) => void;
|
|
30
|
+
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
31
|
+
setFindTyped: (value: boolean) => void;
|
|
32
|
+
findTyped: boolean;
|
|
33
|
+
focusToolbarButton: () => void;
|
|
34
|
+
};
|
|
35
|
+
declare const _default: React.FC<import("react-intl-next").WithIntlProps<ReplaceProps & WrappedComponentProps>> & {
|
|
36
|
+
WrappedComponent: React.ComponentType<ReplaceProps & WrappedComponentProps>;
|
|
37
|
+
};
|
|
38
|
+
export default _default;
|
|
@@ -42,6 +42,10 @@ declare class FindReplace extends React.PureComponent<FindReplaceProps> {
|
|
|
42
42
|
constructor(props: FindReplaceProps);
|
|
43
43
|
componentDidMount(): void;
|
|
44
44
|
componentWillUnmount(): void;
|
|
45
|
+
/**
|
|
46
|
+
* Delete this function on cleanup of
|
|
47
|
+
* editor_a11y_refactor_find_replace_style
|
|
48
|
+
*/
|
|
45
49
|
handleTabNavigation: (event: KeyboardEvent) => void;
|
|
46
50
|
state: {
|
|
47
51
|
findTyped: boolean;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { WrappedComponentProps } from 'react-intl-next';
|
|
3
|
+
import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
4
|
+
import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
|
+
export type ReplaceProps = {
|
|
6
|
+
canReplace: boolean;
|
|
7
|
+
replaceText?: string;
|
|
8
|
+
onReplace: ({ triggerMethod, replaceText, }: {
|
|
9
|
+
triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
|
|
10
|
+
replaceText: string;
|
|
11
|
+
}) => void;
|
|
12
|
+
onReplaceAll: ({ replaceText }: {
|
|
13
|
+
replaceText: string;
|
|
14
|
+
}) => void;
|
|
15
|
+
onReplaceTextfieldRefSet: (ref: React.RefObject<HTMLInputElement>) => void;
|
|
16
|
+
onArrowUp: () => void;
|
|
17
|
+
onCancel: ({ triggerMethod, }: {
|
|
18
|
+
triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.BUTTON;
|
|
19
|
+
}) => void;
|
|
20
|
+
count: {
|
|
21
|
+
index: number;
|
|
22
|
+
total: number;
|
|
23
|
+
};
|
|
24
|
+
onFindNext: ({ triggerMethod, }: {
|
|
25
|
+
triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
|
|
26
|
+
}) => void;
|
|
27
|
+
onFindPrev: ({ triggerMethod, }: {
|
|
28
|
+
triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
|
|
29
|
+
}) => void;
|
|
30
|
+
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
31
|
+
setFindTyped: (value: boolean) => void;
|
|
32
|
+
findTyped: boolean;
|
|
33
|
+
focusToolbarButton: () => void;
|
|
34
|
+
};
|
|
35
|
+
declare const _default: React.FC<import("react-intl-next").WithIntlProps<ReplaceProps & WrappedComponentProps>> & {
|
|
36
|
+
WrappedComponent: React.ComponentType<ReplaceProps & WrappedComponentProps>;
|
|
37
|
+
};
|
|
38
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-find-replace",
|
|
3
|
-
"version": "2.1
|
|
3
|
+
"version": "2.2.1",
|
|
4
4
|
"description": "find replace plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,19 +33,19 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/button": "^23.0.0",
|
|
36
|
-
"@atlaskit/editor-common": "^
|
|
36
|
+
"@atlaskit/editor-common": "^104.0.0",
|
|
37
37
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
38
38
|
"@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
|
|
39
39
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
40
40
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
41
41
|
"@atlaskit/form": "^12.0.0",
|
|
42
|
-
"@atlaskit/icon": "^25.
|
|
42
|
+
"@atlaskit/icon": "^25.6.0",
|
|
43
43
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
44
|
-
"@atlaskit/primitives": "^14.
|
|
44
|
+
"@atlaskit/primitives": "^14.7.0",
|
|
45
45
|
"@atlaskit/textfield": "^8.0.0",
|
|
46
46
|
"@atlaskit/theme": "^18.0.0",
|
|
47
|
-
"@atlaskit/tmp-editor-statsig": "^4.
|
|
48
|
-
"@atlaskit/tokens": "^4.
|
|
47
|
+
"@atlaskit/tmp-editor-statsig": "^4.16.0",
|
|
48
|
+
"@atlaskit/tokens": "^4.8.0",
|
|
49
49
|
"@atlaskit/tooltip": "^20.0.0",
|
|
50
50
|
"@babel/runtime": "^7.0.0",
|
|
51
51
|
"@emotion/react": "^11.7.1",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"raf-schd": "^4.0.3"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@af/visual-regression": "
|
|
56
|
+
"@af/visual-regression": "workspace:^",
|
|
57
57
|
"@atlaskit/editor-plugin-block-type": "^5.1.0",
|
|
58
58
|
"@atlaskit/editor-plugin-text-formatting": "^2.2.0",
|
|
59
59
|
"@testing-library/react": "^13.4.0",
|
|
@@ -115,6 +115,9 @@
|
|
|
115
115
|
},
|
|
116
116
|
"platform_editor_controls_move_actions": {
|
|
117
117
|
"type": "boolean"
|
|
118
|
+
},
|
|
119
|
+
"editor_a11y_refactor_find_replace_style": {
|
|
120
|
+
"type": "boolean"
|
|
118
121
|
}
|
|
119
122
|
}
|
|
120
123
|
}
|