@atlaskit/editor-plugin-find-replace
Version:
find replace plugin for @atlaskit/editor-core
208 lines (207 loc) • 10.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _analytics = require("@atlaskit/editor-common/analytics");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _FindReplace = _interopRequireDefault(require("./FindReplace"));
var _templateObject;
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
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)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\tflex: 1 1 auto;\n\tflex-grow: 0;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tpadding: 0 ", ";\n\t@media (max-width: ", "px) {\n\t\tjustify-content: center;\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorMobileMaxWidth);
var TriggerButtonWrapper = function TriggerButtonWrapper(_ref) {
var isButtonHidden = _ref.isButtonHidden,
children = _ref.children;
return (0, _react2.jsx)("div", {
css: {
display: isButtonHidden ? 'none' : 'block'
}
}, children);
};
var toolbarButtonWrapperFullWidth = (0, _react2.css)({
flexGrow: 1
});
var toolbarButtonWrapperHidden = (0, _react2.css)({
flexGrow: 0,
padding: 0
});
var wrapper = (0, _react2.css)({
display: 'flex',
flexDirection: 'column'
});
var dropdownWidthNewDesign = 382;
// eslint-disable-next-line @repo/internal/react/no-class-components
var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
function FindReplaceToolbarButton() {
var _this;
(0, _classCallCheck2.default)(this, FindReplaceToolbarButton);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, FindReplaceToolbarButton, [].concat(args));
(0, _defineProperty2.default)(_this, "state", {
openedByClick: false
});
(0, _defineProperty2.default)(_this, "toggleOpen", function () {
if (_this.props.isActive) {
_this.props.onCancel({
triggerMethod: _analytics.TRIGGER_METHOD.TOOLBAR
});
} else {
_this.setState({
openedByClick: true
});
_this.props.onActivate();
}
});
(0, _defineProperty2.default)(_this, "focusToolbarButton", function () {
if (_this.state.openedByClick && _this.toolbarButtonRef.current) {
_this.toolbarButtonRef.current.focus();
}
_this.setState({
openedByClick: false
});
});
(0, _defineProperty2.default)(_this, "toolbarButtonRef", /*#__PURE__*/_react.default.createRef());
return _this;
}
(0, _inherits2.default)(FindReplaceToolbarButton, _React$PureComponent);
return (0, _createClass2.default)(FindReplaceToolbarButton, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
popupsMountPoint = _this$props.popupsMountPoint,
popupsBoundariesElement = _this$props.popupsBoundariesElement,
popupsScrollableElement = _this$props.popupsScrollableElement,
isReducedSpacing = _this$props.isReducedSpacing,
findText = _this$props.findText,
replaceText = _this$props.replaceText,
isActive = _this$props.isActive,
index = _this$props.index,
numMatches = _this$props.numMatches,
numReplaceable = _this$props.numReplaceable,
formatMessage = _this$props.intl.formatMessage,
takeFullWidth = _this$props.takeFullWidth,
_this$props$isButtonH = _this$props.isButtonHidden,
isButtonHidden = _this$props$isButtonH === void 0 ? false : _this$props$isButtonH;
var title = formatMessage(_messages.findReplaceMessages.findReplaceToolbarButton);
var stackBelowOtherEditorFloatingPanels = _editorSharedStyles.akEditorFloatingPanelZIndex - 1;
var keymap = (0, _keymaps.findKeymapByDescription)('Find');
return (0, _react2.jsx)("div", {
css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWidth, isButtonHidden && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes') && toolbarButtonWrapperHidden]
}, (0, _react2.jsx)(_uiMenu.Dropdown, {
mountTo: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
isOpen: isActive
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
handleEscapeKeydown: function handleEscapeKeydown() {
if (isActive) {
_this2.props.onCancel({
triggerMethod: _analytics.TRIGGER_METHOD.KEYBOARD
});
if (_this2.state.openedByClick && _this2.toolbarButtonRef.current) {
_this2.toolbarButtonRef.current.focus();
}
_this2.setState({
openedByClick: false
});
}
},
fitWidth: dropdownWidthNewDesign,
zIndex: stackBelowOtherEditorFloatingPanels
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
arrowKeyNavigationProviderOptions: {
type: _uiMenu.ArrowKeyNavigationType.MENU,
disableArrowKeyNavigation: true
},
trigger: (0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes') ? (0, _react2.jsx)(TriggerButtonWrapper, {
isButtonHidden: isButtonHidden
}, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
buttonId: _uiMenu.TOOLBAR_BUTTON.FIND_REPLACE,
testId: "editor-toolbar__".concat(_uiMenu.TOOLBAR_BUTTON.FIND_REPLACE),
spacing: isReducedSpacing ? 'none' : 'default',
selected: isActive,
title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
description: title,
keymap: keymap
}),
iconBefore: (0, _react2.jsx)(_search.default, {
label: title,
spacing: "spacious"
}),
onClick: this.toggleOpen,
"aria-expanded": isActive,
"aria-haspopup": true,
"aria-label": keymap ? (0, _keymaps.tooltip)(keymap, title) : title,
"aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(keymap),
ref: this.toolbarButtonRef
})) : (0, _react2.jsx)(_uiMenu.ToolbarButton, {
buttonId: _uiMenu.TOOLBAR_BUTTON.FIND_REPLACE,
testId: "editor-toolbar__".concat(_uiMenu.TOOLBAR_BUTTON.FIND_REPLACE),
spacing: isReducedSpacing ? 'none' : 'default',
selected: isActive,
title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
description: title,
keymap: keymap
}),
iconBefore: (0, _react2.jsx)(_search.default, {
label: title,
spacing: "spacious"
}),
onClick: this.toggleOpen,
"aria-expanded": isActive,
"aria-haspopup": true,
"aria-label": keymap ? (0, _keymaps.tooltip)(keymap, title) : title,
"aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(keymap),
ref: this.toolbarButtonRef
})
}, (0, _react2.jsx)("div", {
css: wrapper
}, (0, _react2.jsx)(_FindReplace.default, (0, _extends2.default)({
findText: findText,
replaceText: replaceText
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
count: {
index: index,
total: numMatches,
totalReplaceable: numReplaceable
},
focusToolbarButton: this.focusToolbarButton
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, this.props)))));
}
}]);
}(_react.default.PureComponent); // eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = (0, _reactIntl.injectIntl)(FindReplaceToolbarButton);
var _default = exports.default = _default_1;