@atlaskit/editor-plugin-find-replace 1.7.4 → 1.7.6
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/FindReplaceToolbarButtonWithState.js +4 -2
- package/dist/cjs/plugin.js +6 -1
- package/dist/cjs/ui/FindReplaceToolbarButton.js +40 -4
- package/dist/es2019/FindReplaceToolbarButtonWithState.js +4 -2
- package/dist/es2019/plugin.js +6 -1
- package/dist/es2019/ui/FindReplaceToolbarButton.js +40 -4
- package/dist/esm/FindReplaceToolbarButtonWithState.js +4 -2
- package/dist/esm/plugin.js +6 -1
- package/dist/esm/ui/FindReplaceToolbarButton.js +40 -4
- package/dist/types/FindReplaceToolbarButtonWithState.d.ts +1 -1
- package/dist/types/types.d.ts +1 -0
- package/dist/types/ui/FindReplaceToolbarButton.d.ts +1 -0
- package/dist/types-ts4.5/FindReplaceToolbarButtonWithState.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +1 -0
- package/dist/types-ts4.5/ui/FindReplaceToolbarButton.d.ts +1 -0
- package/package.json +11 -5
- package/.eslintrc.js +0 -30
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-find-replace
|
|
2
2
|
|
|
3
|
+
## 1.7.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#143665](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143665)
|
|
8
|
+
[`4a6a4168461a8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4a6a4168461a8) -
|
|
9
|
+
remove find replace toolbar button on smaller screens
|
|
10
|
+
|
|
11
|
+
## 1.7.5
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 1.7.4
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -49,7 +49,8 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
|
|
|
49
49
|
containerElement = _ref2.containerElement,
|
|
50
50
|
dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
|
|
51
51
|
takeFullWidth = _ref2.takeFullWidth,
|
|
52
|
-
api = _ref2.api
|
|
52
|
+
api = _ref2.api,
|
|
53
|
+
isButtonHidden = _ref2.isButtonHidden;
|
|
53
54
|
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
54
55
|
var _useSharedPluginState = useSharedPluginStateNoDebounce(api),
|
|
55
56
|
findReplaceState = _useSharedPluginState.findReplaceState;
|
|
@@ -159,7 +160,8 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
|
|
|
159
160
|
onFindPrev: handleFindPrev,
|
|
160
161
|
onReplace: handleReplace,
|
|
161
162
|
onReplaceAll: handleReplaceAll,
|
|
162
|
-
takeFullWidth: !!takeFullWidth
|
|
163
|
+
takeFullWidth: !!takeFullWidth,
|
|
164
|
+
isButtonHidden: isButtonHidden
|
|
163
165
|
});
|
|
164
166
|
};
|
|
165
167
|
var _default = exports.default = /*#__PURE__*/_react.default.memo(FindReplaceToolbarButtonWithState);
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.findReplacePlugin = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _types = require("@atlaskit/editor-common/types");
|
|
10
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
9
11
|
var _FindReplaceToolbarButtonWithState = _interopRequireDefault(require("./FindReplaceToolbarButtonWithState"));
|
|
10
12
|
var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
|
|
11
13
|
var _main = require("./pm-plugins/main");
|
|
@@ -19,9 +21,11 @@ var findReplacePlugin = exports.findReplacePlugin = function findReplacePlugin(_
|
|
|
19
21
|
popupsMountPoint = _ref2.popupsMountPoint,
|
|
20
22
|
popupsScrollableElement = _ref2.popupsScrollableElement,
|
|
21
23
|
isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
|
|
24
|
+
toolbarSize = _ref2.toolbarSize,
|
|
22
25
|
editorView = _ref2.editorView,
|
|
23
26
|
containerElement = _ref2.containerElement,
|
|
24
27
|
dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
|
|
28
|
+
var isButtonHidden = (0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes') ? toolbarSize < _types.ToolbarSize.XL : false;
|
|
25
29
|
if (props !== null && props !== void 0 && props.twoLineEditorToolbar) {
|
|
26
30
|
return null;
|
|
27
31
|
} else {
|
|
@@ -34,7 +38,8 @@ var findReplacePlugin = exports.findReplacePlugin = function findReplacePlugin(_
|
|
|
34
38
|
containerElement: containerElement,
|
|
35
39
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
36
40
|
takeFullWidth: props === null || props === void 0 ? void 0 : props.takeFullWidth,
|
|
37
|
-
api: api
|
|
41
|
+
api: api,
|
|
42
|
+
isButtonHidden: isButtonHidden
|
|
38
43
|
});
|
|
39
44
|
}
|
|
40
45
|
};
|
|
@@ -23,6 +23,7 @@ var _messages = require("@atlaskit/editor-common/messages");
|
|
|
23
23
|
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
|
|
24
24
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
25
25
|
var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
|
|
26
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
26
27
|
var _FindReplace = _interopRequireDefault(require("./FindReplace"));
|
|
27
28
|
var _templateObject;
|
|
28
29
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
@@ -35,9 +36,22 @@ function _createSuper(t) { var r = _isNativeReflectConstruct(); return function
|
|
|
35
36
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
36
37
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
37
38
|
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);
|
|
38
|
-
var
|
|
39
|
+
var TriggerButtonWrapper = function TriggerButtonWrapper(_ref) {
|
|
40
|
+
var isButtonHidden = _ref.isButtonHidden,
|
|
41
|
+
children = _ref.children;
|
|
42
|
+
return (0, _react2.jsx)("div", {
|
|
43
|
+
css: {
|
|
44
|
+
display: isButtonHidden ? 'none' : 'block'
|
|
45
|
+
}
|
|
46
|
+
}, children);
|
|
47
|
+
};
|
|
48
|
+
var toolbarButtonWrapperFullWidth = (0, _react2.css)({
|
|
39
49
|
flexGrow: 1
|
|
40
50
|
});
|
|
51
|
+
var toolbarButtonWrapperHidden = (0, _react2.css)({
|
|
52
|
+
flexGrow: 0,
|
|
53
|
+
padding: 0
|
|
54
|
+
});
|
|
41
55
|
var wrapper = (0, _react2.css)({
|
|
42
56
|
display: 'flex',
|
|
43
57
|
flexDirection: 'column'
|
|
@@ -95,12 +109,14 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
95
109
|
index = _this$props.index,
|
|
96
110
|
numMatches = _this$props.numMatches,
|
|
97
111
|
formatMessage = _this$props.intl.formatMessage,
|
|
98
|
-
takeFullWidth = _this$props.takeFullWidth
|
|
112
|
+
takeFullWidth = _this$props.takeFullWidth,
|
|
113
|
+
_this$props$isButtonH = _this$props.isButtonHidden,
|
|
114
|
+
isButtonHidden = _this$props$isButtonH === void 0 ? false : _this$props$isButtonH;
|
|
99
115
|
var title = formatMessage(_messages.findReplaceMessages.findReplaceToolbarButton);
|
|
100
116
|
var stackBelowOtherEditorFloatingPanels = _editorSharedStyles.akEditorFloatingPanelZIndex - 1;
|
|
101
117
|
var keymap = (0, _keymaps.findKeymapByDescription)('Find');
|
|
102
118
|
return (0, _react2.jsx)("div", {
|
|
103
|
-
css: [toolbarButtonWrapper, takeFullWidth &&
|
|
119
|
+
css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWidth, isButtonHidden && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes') && toolbarButtonWrapperHidden]
|
|
104
120
|
}, (0, _react2.jsx)(_uiMenu.Dropdown, {
|
|
105
121
|
mountTo: popupsMountPoint,
|
|
106
122
|
boundariesElement: popupsBoundariesElement,
|
|
@@ -125,7 +141,27 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
125
141
|
type: _uiMenu.ArrowKeyNavigationType.MENU,
|
|
126
142
|
disableArrowKeyNavigation: true
|
|
127
143
|
},
|
|
128
|
-
trigger: (0, _react2.jsx)(
|
|
144
|
+
trigger: (0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes') ? (0, _react2.jsx)(TriggerButtonWrapper, {
|
|
145
|
+
isButtonHidden: isButtonHidden
|
|
146
|
+
}, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
|
|
147
|
+
buttonId: _uiMenu.TOOLBAR_BUTTON.FIND_REPLACE,
|
|
148
|
+
testId: "editor-toolbar__".concat(_uiMenu.TOOLBAR_BUTTON.FIND_REPLACE),
|
|
149
|
+
spacing: isReducedSpacing ? 'none' : 'default',
|
|
150
|
+
selected: isActive,
|
|
151
|
+
title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
|
|
152
|
+
description: title,
|
|
153
|
+
keymap: keymap
|
|
154
|
+
}),
|
|
155
|
+
iconBefore: (0, _react2.jsx)(_search.default, {
|
|
156
|
+
label: title
|
|
157
|
+
}),
|
|
158
|
+
onClick: this.toggleOpen,
|
|
159
|
+
"aria-expanded": isActive,
|
|
160
|
+
"aria-haspopup": true,
|
|
161
|
+
"aria-label": keymap ? (0, _keymaps.tooltip)(keymap, title) : title,
|
|
162
|
+
"aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(keymap),
|
|
163
|
+
ref: this.toolbarButtonRef
|
|
164
|
+
})) : (0, _react2.jsx)(_uiMenu.ToolbarButton, {
|
|
129
165
|
buttonId: _uiMenu.TOOLBAR_BUTTON.FIND_REPLACE,
|
|
130
166
|
testId: "editor-toolbar__".concat(_uiMenu.TOOLBAR_BUTTON.FIND_REPLACE),
|
|
131
167
|
spacing: isReducedSpacing ? 'none' : 'default',
|
|
@@ -36,7 +36,8 @@ const FindReplaceToolbarButtonWithState = ({
|
|
|
36
36
|
containerElement,
|
|
37
37
|
dispatchAnalyticsEvent,
|
|
38
38
|
takeFullWidth,
|
|
39
|
-
api
|
|
39
|
+
api,
|
|
40
|
+
isButtonHidden
|
|
40
41
|
}) => {
|
|
41
42
|
var _api$analytics;
|
|
42
43
|
const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
@@ -144,7 +145,8 @@ const FindReplaceToolbarButtonWithState = ({
|
|
|
144
145
|
onFindPrev: handleFindPrev,
|
|
145
146
|
onReplace: handleReplace,
|
|
146
147
|
onReplaceAll: handleReplaceAll,
|
|
147
|
-
takeFullWidth: !!takeFullWidth
|
|
148
|
+
takeFullWidth: !!takeFullWidth,
|
|
149
|
+
isButtonHidden: isButtonHidden
|
|
148
150
|
});
|
|
149
151
|
};
|
|
150
152
|
export default /*#__PURE__*/React.memo(FindReplaceToolbarButtonWithState);
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { ToolbarSize } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
4
|
import FindReplaceToolbarButtonWithState from './FindReplaceToolbarButtonWithState';
|
|
3
5
|
import keymapPlugin from './pm-plugins/keymap';
|
|
4
6
|
import { createPlugin } from './pm-plugins/main';
|
|
@@ -13,10 +15,12 @@ export const findReplacePlugin = ({
|
|
|
13
15
|
popupsMountPoint,
|
|
14
16
|
popupsScrollableElement,
|
|
15
17
|
isToolbarReducedSpacing,
|
|
18
|
+
toolbarSize,
|
|
16
19
|
editorView,
|
|
17
20
|
containerElement,
|
|
18
21
|
dispatchAnalyticsEvent
|
|
19
22
|
}) => {
|
|
23
|
+
const isButtonHidden = fg('platform_editor_toolbar_responsive_fixes') ? toolbarSize < ToolbarSize.XL : false;
|
|
20
24
|
if (props !== null && props !== void 0 && props.twoLineEditorToolbar) {
|
|
21
25
|
return null;
|
|
22
26
|
} else {
|
|
@@ -29,7 +33,8 @@ export const findReplacePlugin = ({
|
|
|
29
33
|
containerElement: containerElement,
|
|
30
34
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
31
35
|
takeFullWidth: props === null || props === void 0 ? void 0 : props.takeFullWidth,
|
|
32
|
-
api: api
|
|
36
|
+
api: api,
|
|
37
|
+
isButtonHidden: isButtonHidden
|
|
33
38
|
});
|
|
34
39
|
}
|
|
35
40
|
};
|
|
@@ -16,6 +16,7 @@ import { findReplaceMessages as messages } from '@atlaskit/editor-common/message
|
|
|
16
16
|
import { ArrowKeyNavigationType, Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
17
17
|
import { akEditorFloatingPanelZIndex, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
|
|
18
18
|
import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
|
|
19
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
19
20
|
import FindReplace from './FindReplace';
|
|
20
21
|
|
|
21
22
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
@@ -31,9 +32,23 @@ const toolbarButtonWrapper = css`
|
|
|
31
32
|
padding: 0;
|
|
32
33
|
}
|
|
33
34
|
`;
|
|
34
|
-
const
|
|
35
|
+
const TriggerButtonWrapper = ({
|
|
36
|
+
isButtonHidden,
|
|
37
|
+
children
|
|
38
|
+
}) => {
|
|
39
|
+
return jsx("div", {
|
|
40
|
+
css: {
|
|
41
|
+
display: isButtonHidden ? 'none' : 'block'
|
|
42
|
+
}
|
|
43
|
+
}, children);
|
|
44
|
+
};
|
|
45
|
+
const toolbarButtonWrapperFullWidth = css({
|
|
35
46
|
flexGrow: 1
|
|
36
47
|
});
|
|
48
|
+
const toolbarButtonWrapperHidden = css({
|
|
49
|
+
flexGrow: 0,
|
|
50
|
+
padding: 0
|
|
51
|
+
});
|
|
37
52
|
const wrapper = css({
|
|
38
53
|
display: 'flex',
|
|
39
54
|
flexDirection: 'column'
|
|
@@ -82,13 +97,14 @@ class FindReplaceToolbarButton extends React.PureComponent {
|
|
|
82
97
|
intl: {
|
|
83
98
|
formatMessage
|
|
84
99
|
},
|
|
85
|
-
takeFullWidth
|
|
100
|
+
takeFullWidth,
|
|
101
|
+
isButtonHidden = false
|
|
86
102
|
} = this.props;
|
|
87
103
|
const title = formatMessage(messages.findReplaceToolbarButton);
|
|
88
104
|
const stackBelowOtherEditorFloatingPanels = akEditorFloatingPanelZIndex - 1;
|
|
89
105
|
const keymap = findKeymapByDescription('Find');
|
|
90
106
|
return jsx("div", {
|
|
91
|
-
css: [toolbarButtonWrapper, takeFullWidth &&
|
|
107
|
+
css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWidth, isButtonHidden && fg('platform_editor_toolbar_responsive_fixes') && toolbarButtonWrapperHidden]
|
|
92
108
|
}, jsx(Dropdown, {
|
|
93
109
|
mountTo: popupsMountPoint,
|
|
94
110
|
boundariesElement: popupsBoundariesElement,
|
|
@@ -113,7 +129,27 @@ class FindReplaceToolbarButton extends React.PureComponent {
|
|
|
113
129
|
type: ArrowKeyNavigationType.MENU,
|
|
114
130
|
disableArrowKeyNavigation: true
|
|
115
131
|
},
|
|
116
|
-
trigger: jsx(
|
|
132
|
+
trigger: fg('platform_editor_toolbar_responsive_fixes') ? jsx(TriggerButtonWrapper, {
|
|
133
|
+
isButtonHidden: isButtonHidden
|
|
134
|
+
}, jsx(ToolbarButton, {
|
|
135
|
+
buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
|
|
136
|
+
testId: `editor-toolbar__${TOOLBAR_BUTTON.FIND_REPLACE}`,
|
|
137
|
+
spacing: isReducedSpacing ? 'none' : 'default',
|
|
138
|
+
selected: isActive,
|
|
139
|
+
title: jsx(ToolTipContent, {
|
|
140
|
+
description: title,
|
|
141
|
+
keymap: keymap
|
|
142
|
+
}),
|
|
143
|
+
iconBefore: jsx(EditorSearchIcon, {
|
|
144
|
+
label: title
|
|
145
|
+
}),
|
|
146
|
+
onClick: this.toggleOpen,
|
|
147
|
+
"aria-expanded": isActive,
|
|
148
|
+
"aria-haspopup": true,
|
|
149
|
+
"aria-label": keymap ? tooltip(keymap, title) : title,
|
|
150
|
+
"aria-keyshortcuts": getAriaKeyshortcuts(keymap),
|
|
151
|
+
ref: this.toolbarButtonRef
|
|
152
|
+
})) : jsx(ToolbarButton, {
|
|
117
153
|
buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
|
|
118
154
|
testId: `editor-toolbar__${TOOLBAR_BUTTON.FIND_REPLACE}`,
|
|
119
155
|
spacing: isReducedSpacing ? 'none' : 'default',
|
|
@@ -40,7 +40,8 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
|
|
|
40
40
|
containerElement = _ref2.containerElement,
|
|
41
41
|
dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
|
|
42
42
|
takeFullWidth = _ref2.takeFullWidth,
|
|
43
|
-
api = _ref2.api
|
|
43
|
+
api = _ref2.api,
|
|
44
|
+
isButtonHidden = _ref2.isButtonHidden;
|
|
44
45
|
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
45
46
|
var _useSharedPluginState = useSharedPluginStateNoDebounce(api),
|
|
46
47
|
findReplaceState = _useSharedPluginState.findReplaceState;
|
|
@@ -150,7 +151,8 @@ var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithSta
|
|
|
150
151
|
onFindPrev: handleFindPrev,
|
|
151
152
|
onReplace: handleReplace,
|
|
152
153
|
onReplaceAll: handleReplaceAll,
|
|
153
|
-
takeFullWidth: !!takeFullWidth
|
|
154
|
+
takeFullWidth: !!takeFullWidth,
|
|
155
|
+
isButtonHidden: isButtonHidden
|
|
154
156
|
});
|
|
155
157
|
};
|
|
156
158
|
export default /*#__PURE__*/React.memo(FindReplaceToolbarButtonWithState);
|
package/dist/esm/plugin.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { ToolbarSize } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
4
|
import FindReplaceToolbarButtonWithState from './FindReplaceToolbarButtonWithState';
|
|
3
5
|
import keymapPlugin from './pm-plugins/keymap';
|
|
4
6
|
import { createPlugin } from './pm-plugins/main';
|
|
@@ -12,9 +14,11 @@ export var findReplacePlugin = function findReplacePlugin(_ref) {
|
|
|
12
14
|
popupsMountPoint = _ref2.popupsMountPoint,
|
|
13
15
|
popupsScrollableElement = _ref2.popupsScrollableElement,
|
|
14
16
|
isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
|
|
17
|
+
toolbarSize = _ref2.toolbarSize,
|
|
15
18
|
editorView = _ref2.editorView,
|
|
16
19
|
containerElement = _ref2.containerElement,
|
|
17
20
|
dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
|
|
21
|
+
var isButtonHidden = fg('platform_editor_toolbar_responsive_fixes') ? toolbarSize < ToolbarSize.XL : false;
|
|
18
22
|
if (props !== null && props !== void 0 && props.twoLineEditorToolbar) {
|
|
19
23
|
return null;
|
|
20
24
|
} else {
|
|
@@ -27,7 +31,8 @@ export var findReplacePlugin = function findReplacePlugin(_ref) {
|
|
|
27
31
|
containerElement: containerElement,
|
|
28
32
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
29
33
|
takeFullWidth: props === null || props === void 0 ? void 0 : props.takeFullWidth,
|
|
30
|
-
api: api
|
|
34
|
+
api: api,
|
|
35
|
+
isButtonHidden: isButtonHidden
|
|
31
36
|
});
|
|
32
37
|
}
|
|
33
38
|
};
|
|
@@ -26,13 +26,27 @@ import { findReplaceMessages as messages } from '@atlaskit/editor-common/message
|
|
|
26
26
|
import { ArrowKeyNavigationType, Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
27
27
|
import { akEditorFloatingPanelZIndex, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
|
|
28
28
|
import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
|
|
29
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
29
30
|
import FindReplace from './FindReplace';
|
|
30
31
|
|
|
31
32
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
|
|
32
33
|
var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)", akEditorMobileMaxWidth);
|
|
33
|
-
var
|
|
34
|
+
var TriggerButtonWrapper = function TriggerButtonWrapper(_ref) {
|
|
35
|
+
var isButtonHidden = _ref.isButtonHidden,
|
|
36
|
+
children = _ref.children;
|
|
37
|
+
return jsx("div", {
|
|
38
|
+
css: {
|
|
39
|
+
display: isButtonHidden ? 'none' : 'block'
|
|
40
|
+
}
|
|
41
|
+
}, children);
|
|
42
|
+
};
|
|
43
|
+
var toolbarButtonWrapperFullWidth = css({
|
|
34
44
|
flexGrow: 1
|
|
35
45
|
});
|
|
46
|
+
var toolbarButtonWrapperHidden = css({
|
|
47
|
+
flexGrow: 0,
|
|
48
|
+
padding: 0
|
|
49
|
+
});
|
|
36
50
|
var wrapper = css({
|
|
37
51
|
display: 'flex',
|
|
38
52
|
flexDirection: 'column'
|
|
@@ -90,12 +104,14 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
90
104
|
index = _this$props.index,
|
|
91
105
|
numMatches = _this$props.numMatches,
|
|
92
106
|
formatMessage = _this$props.intl.formatMessage,
|
|
93
|
-
takeFullWidth = _this$props.takeFullWidth
|
|
107
|
+
takeFullWidth = _this$props.takeFullWidth,
|
|
108
|
+
_this$props$isButtonH = _this$props.isButtonHidden,
|
|
109
|
+
isButtonHidden = _this$props$isButtonH === void 0 ? false : _this$props$isButtonH;
|
|
94
110
|
var title = formatMessage(messages.findReplaceToolbarButton);
|
|
95
111
|
var stackBelowOtherEditorFloatingPanels = akEditorFloatingPanelZIndex - 1;
|
|
96
112
|
var keymap = findKeymapByDescription('Find');
|
|
97
113
|
return jsx("div", {
|
|
98
|
-
css: [toolbarButtonWrapper, takeFullWidth &&
|
|
114
|
+
css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWidth, isButtonHidden && fg('platform_editor_toolbar_responsive_fixes') && toolbarButtonWrapperHidden]
|
|
99
115
|
}, jsx(Dropdown, {
|
|
100
116
|
mountTo: popupsMountPoint,
|
|
101
117
|
boundariesElement: popupsBoundariesElement,
|
|
@@ -120,7 +136,27 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
120
136
|
type: ArrowKeyNavigationType.MENU,
|
|
121
137
|
disableArrowKeyNavigation: true
|
|
122
138
|
},
|
|
123
|
-
trigger: jsx(
|
|
139
|
+
trigger: fg('platform_editor_toolbar_responsive_fixes') ? jsx(TriggerButtonWrapper, {
|
|
140
|
+
isButtonHidden: isButtonHidden
|
|
141
|
+
}, jsx(ToolbarButton, {
|
|
142
|
+
buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
|
|
143
|
+
testId: "editor-toolbar__".concat(TOOLBAR_BUTTON.FIND_REPLACE),
|
|
144
|
+
spacing: isReducedSpacing ? 'none' : 'default',
|
|
145
|
+
selected: isActive,
|
|
146
|
+
title: jsx(ToolTipContent, {
|
|
147
|
+
description: title,
|
|
148
|
+
keymap: keymap
|
|
149
|
+
}),
|
|
150
|
+
iconBefore: jsx(EditorSearchIcon, {
|
|
151
|
+
label: title
|
|
152
|
+
}),
|
|
153
|
+
onClick: this.toggleOpen,
|
|
154
|
+
"aria-expanded": isActive,
|
|
155
|
+
"aria-haspopup": true,
|
|
156
|
+
"aria-label": keymap ? tooltip(keymap, title) : title,
|
|
157
|
+
"aria-keyshortcuts": getAriaKeyshortcuts(keymap),
|
|
158
|
+
ref: this.toolbarButtonRef
|
|
159
|
+
})) : jsx(ToolbarButton, {
|
|
124
160
|
buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
|
|
125
161
|
testId: "editor-toolbar__".concat(TOOLBAR_BUTTON.FIND_REPLACE),
|
|
126
162
|
spacing: isReducedSpacing ? 'none' : 'default',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { FindReplaceToolbarButtonWithStateProps } from './types';
|
|
3
|
-
declare const _default: React.MemoExoticComponent<({ popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, isToolbarReducedSpacing, editorView, containerElement, dispatchAnalyticsEvent, takeFullWidth, api, }: FindReplaceToolbarButtonWithStateProps) => JSX.Element | null>;
|
|
3
|
+
declare const _default: React.MemoExoticComponent<({ popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, isToolbarReducedSpacing, editorView, containerElement, dispatchAnalyticsEvent, takeFullWidth, api, isButtonHidden, }: FindReplaceToolbarButtonWithStateProps) => JSX.Element | null>;
|
|
4
4
|
export default _default;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ export type FindReplaceToolbarButtonWithStateProps = {
|
|
|
35
35
|
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
36
36
|
takeFullWidth?: boolean;
|
|
37
37
|
api: ExtractInjectionAPI<FindReplacePlugin> | undefined;
|
|
38
|
+
isButtonHidden?: boolean;
|
|
38
39
|
};
|
|
39
40
|
export type FindReplaceToolbarButtonActionProps = Omit<FindReplaceToolbarButtonWithStateProps, 'api'>;
|
|
40
41
|
type Config = {
|
|
@@ -17,6 +17,7 @@ export interface FindReplaceToolbarButtonProps extends Omit<FindReplaceProps, 'c
|
|
|
17
17
|
popupsScrollableElement?: HTMLElement;
|
|
18
18
|
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
19
19
|
takeFullWidth: boolean;
|
|
20
|
+
isButtonHidden?: boolean;
|
|
20
21
|
}
|
|
21
22
|
declare const _default: React.FC<import("react-intl-next").WithIntlProps<FindReplaceToolbarButtonProps & WrappedComponentProps>> & {
|
|
22
23
|
WrappedComponent: React.ComponentType<FindReplaceToolbarButtonProps & WrappedComponentProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { FindReplaceToolbarButtonWithStateProps } from './types';
|
|
3
|
-
declare const _default: React.MemoExoticComponent<({ popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, isToolbarReducedSpacing, editorView, containerElement, dispatchAnalyticsEvent, takeFullWidth, api, }: FindReplaceToolbarButtonWithStateProps) => JSX.Element | null>;
|
|
3
|
+
declare const _default: React.MemoExoticComponent<({ popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, isToolbarReducedSpacing, editorView, containerElement, dispatchAnalyticsEvent, takeFullWidth, api, isButtonHidden, }: FindReplaceToolbarButtonWithStateProps) => JSX.Element | null>;
|
|
4
4
|
export default _default;
|
|
@@ -35,6 +35,7 @@ export type FindReplaceToolbarButtonWithStateProps = {
|
|
|
35
35
|
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
36
36
|
takeFullWidth?: boolean;
|
|
37
37
|
api: ExtractInjectionAPI<FindReplacePlugin> | undefined;
|
|
38
|
+
isButtonHidden?: boolean;
|
|
38
39
|
};
|
|
39
40
|
export type FindReplaceToolbarButtonActionProps = Omit<FindReplaceToolbarButtonWithStateProps, 'api'>;
|
|
40
41
|
type Config = {
|
|
@@ -17,6 +17,7 @@ export interface FindReplaceToolbarButtonProps extends Omit<FindReplaceProps, 'c
|
|
|
17
17
|
popupsScrollableElement?: HTMLElement;
|
|
18
18
|
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
19
19
|
takeFullWidth: boolean;
|
|
20
|
+
isButtonHidden?: boolean;
|
|
20
21
|
}
|
|
21
22
|
declare const _default: React.FC<import("react-intl-next").WithIntlProps<FindReplaceToolbarButtonProps & WrappedComponentProps>> & {
|
|
22
23
|
WrappedComponent: React.ComponentType<FindReplaceToolbarButtonProps & WrappedComponentProps>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-find-replace",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.6",
|
|
4
4
|
"description": "find replace plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -32,18 +32,19 @@
|
|
|
32
32
|
"./styles": "./src/styles.ts"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@atlaskit/button": "^20.
|
|
36
|
-
"@atlaskit/editor-common": "^
|
|
35
|
+
"@atlaskit/button": "^20.2.0",
|
|
36
|
+
"@atlaskit/editor-common": "^91.0.0",
|
|
37
37
|
"@atlaskit/editor-plugin-analytics": "^1.8.0",
|
|
38
38
|
"@atlaskit/editor-plugin-primary-toolbar": "^2.0.0",
|
|
39
39
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
40
40
|
"@atlaskit/editor-shared-styles": "^2.13.0",
|
|
41
41
|
"@atlaskit/form": "^10.5.0",
|
|
42
42
|
"@atlaskit/icon": "^22.18.0",
|
|
43
|
-
"@atlaskit/
|
|
43
|
+
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
44
|
+
"@atlaskit/primitives": "^12.2.0",
|
|
44
45
|
"@atlaskit/textfield": "^6.5.0",
|
|
45
46
|
"@atlaskit/theme": "^13.0.0",
|
|
46
|
-
"@atlaskit/tokens": "^1.
|
|
47
|
+
"@atlaskit/tokens": "^1.61.0",
|
|
47
48
|
"@atlaskit/tooltip": "^18.7.0",
|
|
48
49
|
"@babel/runtime": "^7.0.0",
|
|
49
50
|
"@emotion/react": "^11.7.1",
|
|
@@ -103,5 +104,10 @@
|
|
|
103
104
|
"@atlaskit/editor-plugin-analytics"
|
|
104
105
|
]
|
|
105
106
|
}
|
|
107
|
+
},
|
|
108
|
+
"platform-feature-flags": {
|
|
109
|
+
"platform_editor_toolbar_responsive_fixes": {
|
|
110
|
+
"type": "boolean"
|
|
111
|
+
}
|
|
106
112
|
}
|
|
107
113
|
}
|
package/.eslintrc.js
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
rules: {
|
|
3
|
-
'@typescript-eslint/no-duplicate-imports': 'error',
|
|
4
|
-
'@typescript-eslint/no-explicit-any': 'error',
|
|
5
|
-
'@atlaskit/design-system/ensure-design-token-usage/preview': [
|
|
6
|
-
'error',
|
|
7
|
-
{ domains: ['spacing'], shouldEnforceFallbacks: false },
|
|
8
|
-
],
|
|
9
|
-
'@typescript-eslint/ban-types': [
|
|
10
|
-
'error',
|
|
11
|
-
{
|
|
12
|
-
types: {
|
|
13
|
-
'React.FC':
|
|
14
|
-
'Please use types directly on props instead, and explicitly define children if required',
|
|
15
|
-
'React.FunctionalComponent':
|
|
16
|
-
'Please use types directly on props instead, and explicitly define children if required',
|
|
17
|
-
},
|
|
18
|
-
extendDefaults: false,
|
|
19
|
-
},
|
|
20
|
-
],
|
|
21
|
-
},
|
|
22
|
-
overrides: [
|
|
23
|
-
{
|
|
24
|
-
files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
|
|
25
|
-
rules: {
|
|
26
|
-
'@typescript-eslint/no-explicit-any': 'off',
|
|
27
|
-
},
|
|
28
|
-
},
|
|
29
|
-
],
|
|
30
|
-
};
|