@atlaskit/editor-plugin-find-replace
Version:
find replace plugin for @atlaskit/editor-core
285 lines (282 loc) • 12.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _new = _interopRequireDefault(require("@atlaskit/button/new"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = require("@atlaskit/editor-common/messages");
var _form = require("@atlaskit/form");
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/core/chevron-up"));
var _primitives = require("@atlaskit/primitives");
var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _FindReplaceTooltipButton = require("./FindReplaceTooltipButton");
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); }
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
var replaceContainerStyles = (0, _primitives.xcss)({
padding: 'space.100'
});
var replaceWithLabelStyle = (0, _primitives.xcss)({
paddingBottom: 'space.050'
});
var actionButtonContainerStyles = (0, _primitives.xcss)({
paddingTop: 'space.200'
});
var actionButtonParentInlineStyles = (0, _primitives.xcss)({
justifyContent: 'space-between',
flexDirection: 'row-reverse'
});
var actionButtonParentInlineStylesNew = (0, _primitives.xcss)({
justifyContent: 'space-between',
flexDirection: 'row-reverse',
flexWrap: 'wrap'
});
var actionButtonInlineStyles = (0, _primitives.xcss)({
gap: 'space.075'
});
var closeButtonInlineStyles = (0, _primitives.xcss)({
marginRight: 'auto'
});
var Replace = function Replace(_ref) {
var canReplace = _ref.canReplace,
initialReplaceText = _ref.replaceText,
onReplace = _ref.onReplace,
onReplaceAll = _ref.onReplaceAll,
onReplaceTextfieldRefSet = _ref.onReplaceTextfieldRefSet,
onArrowUp = _ref.onArrowUp,
onCancel = _ref.onCancel,
count = _ref.count,
onFindNext = _ref.onFindNext,
onFindPrev = _ref.onFindPrev,
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
setFindTyped = _ref.setFindTyped,
findTyped = _ref.findTyped,
focusToolbarButton = _ref.focusToolbarButton,
formatMessage = _ref.intl.formatMessage;
var _useState = (0, _react.useState)(initialReplaceText || ''),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
replaceText = _useState2[0],
setReplaceText = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
isComposing = _useState4[0],
setIsComposing = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
isHelperMessageVisible = _useState6[0],
setIsHelperMessageVisible = _useState6[1];
var _useState7 = (0, _react.useState)(false),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
fakeSuccessReplacementMessageUpdate = _useState8[0],
setFakeSuccessReplacementMessageUpdate = _useState8[1];
var _useState9 = (0, _react.useState)(0),
_useState0 = (0, _slicedToArray2.default)(_useState9, 2),
replaceCount = _useState0[0],
setReplaceCount = _useState0[1];
var replaceTextfieldRef = (0, _react.useRef)(null);
var successReplacementMessageRef = (0, _react.useRef)(null);
var replaceWith = formatMessage(_messages.findReplaceMessages.replaceWith);
var replaceAll = formatMessage(_messages.findReplaceMessages.replaceAll);
var findPrevious = formatMessage(_messages.findReplaceMessages.findPrevious);
var closeFindReplaceDialog = formatMessage(_messages.findReplaceMessages.closeFindReplaceDialog);
(0, _react.useEffect)(function () {
onReplaceTextfieldRefSet(replaceTextfieldRef);
}, [onReplaceTextfieldRefSet]);
(0, _react.useEffect)(function () {
setReplaceText(initialReplaceText || '');
}, [initialReplaceText]);
var skipWhileComposing = function skipWhileComposing(fn) {
if (!isComposing) {
fn();
}
};
var triggerSuccessReplacementMessageUpdate = function triggerSuccessReplacementMessageUpdate(currentReplaceCount) {
if (replaceCount === currentReplaceCount) {
setFakeSuccessReplacementMessageUpdate(!fakeSuccessReplacementMessageUpdate);
}
if (successReplacementMessageRef.current) {
var ariaLiveRegion = successReplacementMessageRef.current.querySelector('[aria-live="polite"]');
ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.removeAttribute('aria-live');
ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.setAttribute('aria-live', 'polite');
}
};
var handleReplaceClick = function handleReplaceClick() {
return skipWhileComposing(function () {
onReplace({
triggerMethod: _analytics.TRIGGER_METHOD.BUTTON,
replaceText: replaceText
});
triggerSuccessReplacementMessageUpdate(1);
setIsHelperMessageVisible(true);
setReplaceCount(1);
setFindTyped(false);
});
};
var handleReplaceChange = function handleReplaceChange(event) {
return skipWhileComposing(function () {
updateReplaceValue(event.target.value);
});
};
var updateReplaceValue = function updateReplaceValue(text) {
if (dispatchAnalyticsEvent) {
dispatchAnalyticsEvent({
eventType: _analytics.EVENT_TYPE.TRACK,
action: _analytics.ACTION.CHANGED_REPLACEMENT_TEXT,
actionSubject: _analytics.ACTION_SUBJECT.FIND_REPLACE_DIALOG
});
}
setReplaceText(text);
};
var handleReplaceKeyDown = function handleReplaceKeyDown(event) {
return skipWhileComposing(function () {
if (event.key === 'Enter') {
onReplace({
triggerMethod: _analytics.TRIGGER_METHOD.KEYBOARD,
replaceText: replaceText
});
} else if (event.key === 'ArrowUp') {
onArrowUp();
}
});
};
var handleReplaceAllClick = function handleReplaceAllClick() {
return skipWhileComposing(function () {
onReplaceAll({
replaceText: replaceText
});
setIsHelperMessageVisible(true);
if (count.totalReplaceable && (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
triggerSuccessReplacementMessageUpdate(count.totalReplaceable);
setReplaceCount(count.totalReplaceable);
} else {
triggerSuccessReplacementMessageUpdate(count.total);
setReplaceCount(count.total);
}
setFindTyped(false);
});
};
var handleCompositionStart = function handleCompositionStart() {
setIsComposing(true);
};
var handleCompositionEnd = function handleCompositionEnd(event) {
setIsComposing(false);
// type for React.CompositionEvent doesn't set type for target correctly
updateReplaceValue(event.target.value);
};
var clearSearch = function clearSearch() {
onCancel({
triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
});
focusToolbarButton();
};
var handleFindNextClick = function handleFindNextClick() {
if (!isComposing) {
onFindNext({
triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
});
}
};
var handleFindPrevClick = function handleFindPrevClick() {
if (!isComposing) {
onFindPrev({
triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
});
}
};
var resultsReplace = formatMessage(_messages.findReplaceMessages.replaceSuccess, {
numberOfMatches: replaceCount
});
return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
xcss: replaceContainerStyles
}, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
xcss: replaceWithLabelStyle
}, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
id: "replace-text-field-label",
size: "medium",
weight: "bold",
color: "color.text.subtle"
}, replaceWith)), /*#__PURE__*/_react.default.createElement(_textfield.default, {
name: "replace",
"aria-labelledby": "replace-text-field-label",
testId: "replace-field",
appearance: "standard",
defaultValue: replaceText,
ref: replaceTextfieldRef,
autoComplete: "off",
onChange: handleReplaceChange,
onKeyDown: handleReplaceKeyDown,
onCompositionStart: handleCompositionStart,
onCompositionEnd: handleCompositionEnd
}), isHelperMessageVisible && !findTyped && /*#__PURE__*/_react.default.createElement("div", {
ref: successReplacementMessageRef
}, /*#__PURE__*/_react.default.createElement(_form.ValidMessage, {
testId: "message-success-replacement"
}, fakeSuccessReplacementMessageUpdate ?
// @ts-ignore - TS1501 TypeScript 5.9.2 upgrade
resultsReplace.replace(/ /, "\xA0") : resultsReplace)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
xcss: actionButtonContainerStyles
}, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
xcss: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? [actionButtonInlineStyles, actionButtonParentInlineStylesNew] : [actionButtonInlineStyles, actionButtonParentInlineStyles]
}, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
xcss: actionButtonInlineStyles
}, /*#__PURE__*/_react.default.createElement(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
title: formatMessage(_messages.findReplaceMessages.findNext)
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
icon: function icon(iconProps) {
return /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
label: iconProps.label,
size: "small"
});
},
iconLabel: formatMessage(_messages.findReplaceMessages.findNext),
keymapDescription: 'Enter',
onClick: handleFindNextClick,
disabled: count.total <= 1
}), /*#__PURE__*/_react.default.createElement(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
title: findPrevious
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
icon: function icon(iconProps) {
return /*#__PURE__*/_react.default.createElement(_chevronUp.default, {
label: iconProps.label,
size: "small"
});
},
iconLabel: findPrevious,
keymapDescription: 'Shift Enter',
onClick: handleFindPrevClick,
disabled: count.total <= 1
}), /*#__PURE__*/_react.default.createElement(_new.default, {
testId: 'Replace',
id: "replace-button",
onClick: handleReplaceClick,
isDisabled: !canReplace
}, formatMessage(_messages.findReplaceMessages.replace)), /*#__PURE__*/_react.default.createElement(_new.default, {
appearance: "primary",
testId: replaceAll,
id: "replaceAll-button",
onClick: handleReplaceAllClick,
isDisabled: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? count.totalReplaceable === 0 : !canReplace
}, replaceAll)), (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
xcss: closeButtonInlineStyles
}, /*#__PURE__*/_react.default.createElement(_new.default, {
appearance: "subtle",
testId: closeFindReplaceDialog,
onClick: clearSearch
}, closeFindReplaceDialog)) : /*#__PURE__*/_react.default.createElement(_new.default, {
appearance: "subtle",
testId: closeFindReplaceDialog,
onClick: clearSearch
}, closeFindReplaceDialog))));
};
// eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = (0, _reactIntl.injectIntl)(Replace);
var _default = exports.default = _default_1;