@atlaskit/editor-plugin-floating-toolbar 3.2.5 → 3.3.0
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 +12 -0
- package/dist/cjs/ui/DropdownMenu.js +12 -180
- package/dist/es2019/ui/DropdownMenu.js +13 -181
- package/dist/esm/ui/DropdownMenu.js +13 -180
- package/dist/types/ui/Dropdown.d.ts +1 -1
- package/dist/types/ui/DropdownMenu.d.ts +5 -0
- package/dist/types-ts4.5/ui/Dropdown.d.ts +1 -1
- package/dist/types-ts4.5/ui/DropdownMenu.d.ts +5 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-floating-toolbar
|
|
2
2
|
|
|
3
|
+
## 3.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#127253](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127253)
|
|
8
|
+
[`a2593d5c73ccb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2593d5c73ccb) -
|
|
9
|
+
[ux] Table overflow menu on floating toolbar
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 3.2.5
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.menuItemDimensions = exports.itemSpacing = exports.default = void 0;
|
|
8
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
7
|
var _react = require("react");
|
|
10
8
|
var _react2 = require("@emotion/react");
|
|
11
9
|
var _reactIntlNext = require("react-intl-next");
|
|
12
10
|
var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
|
|
13
|
-
var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--editor-done"));
|
|
14
11
|
var _menu = require("@atlaskit/menu");
|
|
15
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
16
12
|
var _constants = require("@atlaskit/theme/constants");
|
|
17
13
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
18
|
-
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
19
14
|
/**
|
|
20
15
|
* @jsxRuntime classic
|
|
21
16
|
* @jsx jsx
|
|
@@ -31,11 +26,6 @@ var menuItemDimensions = exports.menuItemDimensions = {
|
|
|
31
26
|
width: 175,
|
|
32
27
|
height: 32
|
|
33
28
|
};
|
|
34
|
-
var spacerStyles = (0, _react2.css)({
|
|
35
|
-
display: 'flex',
|
|
36
|
-
flex: 1,
|
|
37
|
-
padding: "var(--ds-space-100, 8px)"
|
|
38
|
-
});
|
|
39
29
|
var separatorStyles = (0, _react2.css)({
|
|
40
30
|
background: "var(--ds-border, #091E4224)",
|
|
41
31
|
height: "var(--ds-space-025, 1px)"
|
|
@@ -59,10 +49,6 @@ var menuContainerStyles = (0, _react2.css)({
|
|
|
59
49
|
}
|
|
60
50
|
}
|
|
61
51
|
});
|
|
62
|
-
var labelStyles = (0, _react2.css)({
|
|
63
|
-
display: 'inline-block',
|
|
64
|
-
width: '100%'
|
|
65
|
-
});
|
|
66
52
|
|
|
67
53
|
// TODO: ED-26959 - Migrate away from gridSize
|
|
68
54
|
// Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
|
|
@@ -70,170 +56,6 @@ var itemSpacing = exports.itemSpacing = (0, _constants.gridSize)() / 2;
|
|
|
70
56
|
|
|
71
57
|
// Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check
|
|
72
58
|
|
|
73
|
-
var DropdownButtonItem = _menu.ButtonItem;
|
|
74
|
-
var DropdownMenuItem = function DropdownMenuItem(props) {
|
|
75
|
-
var item = props.item,
|
|
76
|
-
hide = props.hide,
|
|
77
|
-
dispatchCommand = props.dispatchCommand,
|
|
78
|
-
editorView = props.editorView,
|
|
79
|
-
showSelected = props.showSelected,
|
|
80
|
-
intl = props.intl;
|
|
81
|
-
var itemSelected = item.selected;
|
|
82
|
-
var iconBefore = (0, _react.useMemo)(function () {
|
|
83
|
-
if (item.icon) {
|
|
84
|
-
return item.icon;
|
|
85
|
-
} else {
|
|
86
|
-
return (0, _react2.jsx)(SelectedIconBefore, {
|
|
87
|
-
itemSelected: itemSelected,
|
|
88
|
-
showSelected: showSelected,
|
|
89
|
-
intl: intl
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
}, [itemSelected, showSelected, intl, item.icon]);
|
|
93
|
-
var _useState = (0, _react.useState)(item.tooltip || ''),
|
|
94
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
95
|
-
tooltipContent = _useState2[0],
|
|
96
|
-
setTooltipContent = _useState2[1];
|
|
97
|
-
var handleItemMouseOut = (0, _react.useCallback)(function () {
|
|
98
|
-
setTooltipContent('');
|
|
99
|
-
if (item.onMouseOut) {
|
|
100
|
-
dispatchCommand(item.onMouseOut);
|
|
101
|
-
}
|
|
102
|
-
}, [item.onMouseOut, dispatchCommand]);
|
|
103
|
-
var handleItemMouseDown = (0, _react.useCallback)(function (e) {
|
|
104
|
-
e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
|
|
105
|
-
if (item.onMouseDown) {
|
|
106
|
-
dispatchCommand(item.onMouseDown);
|
|
107
|
-
}
|
|
108
|
-
}, [item.onMouseDown, dispatchCommand]);
|
|
109
|
-
var handleItemMouseOver = (0, _react.useCallback)(function () {
|
|
110
|
-
setTooltipContent(item.tooltip || '');
|
|
111
|
-
if (item.onMouseOver) {
|
|
112
|
-
dispatchCommand(item.onMouseOver);
|
|
113
|
-
}
|
|
114
|
-
}, [item.tooltip, item.onMouseOver, dispatchCommand]);
|
|
115
|
-
var handleItemMouseEnter = (0, _react.useCallback)(function (e) {
|
|
116
|
-
if (item.onMouseEnter) {
|
|
117
|
-
e.preventDefault();
|
|
118
|
-
dispatchCommand(item.onMouseEnter);
|
|
119
|
-
}
|
|
120
|
-
}, [item.onMouseEnter, dispatchCommand]);
|
|
121
|
-
var handleItemMouseLeave = (0, _react.useCallback)(function (e) {
|
|
122
|
-
if (item.onMouseLeave) {
|
|
123
|
-
e.preventDefault();
|
|
124
|
-
dispatchCommand(item.onMouseLeave);
|
|
125
|
-
}
|
|
126
|
-
}, [item.onMouseLeave, dispatchCommand]);
|
|
127
|
-
var handleItemOnFocus = (0, _react.useCallback)(function (e) {
|
|
128
|
-
if (item.onFocus) {
|
|
129
|
-
e.preventDefault();
|
|
130
|
-
dispatchCommand(item.onFocus);
|
|
131
|
-
}
|
|
132
|
-
}, [item.onFocus, dispatchCommand]);
|
|
133
|
-
var handleItemOnBlur = (0, _react.useCallback)(function (e) {
|
|
134
|
-
if (item.onBlur) {
|
|
135
|
-
e.preventDefault();
|
|
136
|
-
dispatchCommand(item.onBlur);
|
|
137
|
-
}
|
|
138
|
-
}, [item.onBlur, dispatchCommand]);
|
|
139
|
-
var handleItemClick = (0, _react.useCallback)(function () {
|
|
140
|
-
/**
|
|
141
|
-
* The order of dispatching the event and hide() is important, because
|
|
142
|
-
* the ClickAreaBlock will be relying on the element to calculate the
|
|
143
|
-
* click coordinate.
|
|
144
|
-
* For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
|
|
145
|
-
*/
|
|
146
|
-
dispatchCommand(item.onClick);
|
|
147
|
-
hide();
|
|
148
|
-
if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
|
|
149
|
-
editorView === null || editorView === void 0 || editorView.focus();
|
|
150
|
-
}
|
|
151
|
-
}, [dispatchCommand, item.onClick, hide, editorView]);
|
|
152
|
-
|
|
153
|
-
/* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
|
|
154
|
-
var labelRef = (0, _react.useRef)(null);
|
|
155
|
-
var handleTitleWrapperMouseEvent = (0, _react.useCallback)(
|
|
156
|
-
// Ignored via go/ees005
|
|
157
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
158
|
-
function (e) {
|
|
159
|
-
if (item.disabled) {
|
|
160
|
-
e.stopPropagation();
|
|
161
|
-
e.preventDefault();
|
|
162
|
-
}
|
|
163
|
-
}, [item.disabled]);
|
|
164
|
-
|
|
165
|
-
// Ignored via go/ees005
|
|
166
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
167
|
-
var isAriaChecked = function isAriaChecked(item) {
|
|
168
|
-
var selected = item.selected,
|
|
169
|
-
domItemOptions = item.domItemOptions;
|
|
170
|
-
return (domItemOptions === null || domItemOptions === void 0 ? void 0 : domItemOptions.type) === 'item-checkbox' ? selected : undefined;
|
|
171
|
-
};
|
|
172
|
-
|
|
173
|
-
// Ignored via go/ees005
|
|
174
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
175
|
-
var hasRole = function hasRole(item) {
|
|
176
|
-
var _item$domItemOptions;
|
|
177
|
-
return ((_item$domItemOptions = item.domItemOptions) === null || _item$domItemOptions === void 0 ? void 0 : _item$domItemOptions.type) === 'item-checkbox' ? 'menuitemcheckbox' : undefined;
|
|
178
|
-
};
|
|
179
|
-
(0, _react.useEffect)(function () {
|
|
180
|
-
var labelRefCurrent = labelRef.current;
|
|
181
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
182
|
-
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
|
|
183
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
184
|
-
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
|
|
185
|
-
return function () {
|
|
186
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
187
|
-
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
|
|
188
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
189
|
-
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
|
|
190
|
-
};
|
|
191
|
-
});
|
|
192
|
-
var itemContent = (0, _react2.jsx)(DropdownButtonItem, {
|
|
193
|
-
isSelected: itemSelected,
|
|
194
|
-
iconBefore: iconBefore,
|
|
195
|
-
iconAfter: item.elemAfter,
|
|
196
|
-
onClick: handleItemClick,
|
|
197
|
-
"data-testid": item.testId,
|
|
198
|
-
isDisabled: item.disabled,
|
|
199
|
-
onMouseDown: handleItemMouseDown,
|
|
200
|
-
onMouseOver: handleItemMouseOver,
|
|
201
|
-
onMouseEnter: handleItemMouseEnter,
|
|
202
|
-
onMouseLeave: handleItemMouseLeave,
|
|
203
|
-
onMouseOut: handleItemMouseOut,
|
|
204
|
-
onFocus: handleItemOnFocus,
|
|
205
|
-
onBlur: handleItemOnBlur,
|
|
206
|
-
role: hasRole(item),
|
|
207
|
-
"aria-checked": isAriaChecked(item)
|
|
208
|
-
}, (0, _react2.jsx)("span", {
|
|
209
|
-
ref: labelRef,
|
|
210
|
-
css: labelStyles
|
|
211
|
-
}, item.title));
|
|
212
|
-
if (tooltipContent) {
|
|
213
|
-
return (0, _react2.jsx)(_tooltip.default, {
|
|
214
|
-
content: tooltipContent
|
|
215
|
-
}, itemContent);
|
|
216
|
-
}
|
|
217
|
-
return itemContent;
|
|
218
|
-
};
|
|
219
|
-
var SelectedIconBefore = function SelectedIconBefore(_ref) {
|
|
220
|
-
var itemSelected = _ref.itemSelected,
|
|
221
|
-
intl = _ref.intl,
|
|
222
|
-
showSelected = _ref.showSelected;
|
|
223
|
-
if (showSelected && itemSelected) {
|
|
224
|
-
return (0, _react2.jsx)("span", {
|
|
225
|
-
"aria-hidden": "true"
|
|
226
|
-
}, (0, _react2.jsx)(_checkMarkEditorDone.default, {
|
|
227
|
-
LEGACY_primaryColor: "var(--ds-icon-selected, ".concat(_colors.B400, ")"),
|
|
228
|
-
LEGACY_size: "small",
|
|
229
|
-
label: intl.formatMessage(_floatingToolbar.messages.confirmModalOK),
|
|
230
|
-
spacing: "none"
|
|
231
|
-
}));
|
|
232
|
-
}
|
|
233
|
-
return (0, _react2.jsx)("span", {
|
|
234
|
-
css: spacerStyles
|
|
235
|
-
});
|
|
236
|
-
};
|
|
237
59
|
var Dropdown = /*#__PURE__*/(0, _react.memo)(function (props) {
|
|
238
60
|
var hide = props.hide,
|
|
239
61
|
dispatchCommand = props.dispatchCommand,
|
|
@@ -250,7 +72,7 @@ var Dropdown = /*#__PURE__*/(0, _react.memo)(function (props) {
|
|
|
250
72
|
return !('hidden' in item) || !item.hidden;
|
|
251
73
|
}).map(function (item, idx) {
|
|
252
74
|
if (!('type' in item)) {
|
|
253
|
-
return (0, _react2.jsx)(DropdownMenuItem
|
|
75
|
+
return (0, _react2.jsx)(_floatingToolbar.DropdownMenuItem
|
|
254
76
|
// Ignored via go/ees005
|
|
255
77
|
// eslint-disable-next-line react/no-array-index-key
|
|
256
78
|
, {
|
|
@@ -276,6 +98,16 @@ var Dropdown = /*#__PURE__*/(0, _react.memo)(function (props) {
|
|
|
276
98
|
css: headingStyles
|
|
277
99
|
}, (0, _react2.jsx)(_menu.HeadingItem, null, item.title));
|
|
278
100
|
}
|
|
101
|
+
if (item.type === 'custom') {
|
|
102
|
+
var dropdownMenuOptions = {
|
|
103
|
+
hide: hide,
|
|
104
|
+
dispatchCommand: dispatchCommand,
|
|
105
|
+
editorView: editorView,
|
|
106
|
+
showSelected: showSelected,
|
|
107
|
+
intl: intl
|
|
108
|
+
};
|
|
109
|
+
return item.render(editorView, dropdownMenuOptions);
|
|
110
|
+
}
|
|
279
111
|
}));
|
|
280
112
|
}
|
|
281
113
|
return (0, _react2.jsx)("div", {
|
|
@@ -284,7 +116,7 @@ var Dropdown = /*#__PURE__*/(0, _react.memo)(function (props) {
|
|
|
284
116
|
}, items.filter(function (item) {
|
|
285
117
|
return !item.hidden;
|
|
286
118
|
}).map(function (item, idx) {
|
|
287
|
-
return (0, _react2.jsx)(DropdownMenuItem
|
|
119
|
+
return (0, _react2.jsx)(_floatingToolbar.DropdownMenuItem
|
|
288
120
|
// Ignored via go/ees005
|
|
289
121
|
// eslint-disable-next-line react/no-array-index-key
|
|
290
122
|
, {
|
|
@@ -2,30 +2,22 @@
|
|
|
2
2
|
* @jsxRuntime classic
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
|
-
import { memo
|
|
5
|
+
import { memo } from 'react';
|
|
6
6
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
9
|
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
10
10
|
|
|
11
11
|
import { injectIntl } from 'react-intl-next';
|
|
12
|
-
import {
|
|
13
|
-
import
|
|
14
|
-
import { ButtonItem, HeadingItem } from '@atlaskit/menu';
|
|
15
|
-
import { B400 } from '@atlaskit/theme/colors';
|
|
12
|
+
import { DropdownMenuItem } from '@atlaskit/editor-common/floating-toolbar';
|
|
13
|
+
import { HeadingItem } from '@atlaskit/menu';
|
|
16
14
|
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
17
15
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
18
16
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
19
|
-
import Tooltip from '@atlaskit/tooltip';
|
|
20
17
|
export const menuItemDimensions = {
|
|
21
18
|
width: 175,
|
|
22
19
|
height: 32
|
|
23
20
|
};
|
|
24
|
-
const spacerStyles = css({
|
|
25
|
-
display: 'flex',
|
|
26
|
-
flex: 1,
|
|
27
|
-
padding: "var(--ds-space-100, 8px)"
|
|
28
|
-
});
|
|
29
21
|
const separatorStyles = css({
|
|
30
22
|
background: "var(--ds-border, #091E4224)",
|
|
31
23
|
height: "var(--ds-space-025, 1px)"
|
|
@@ -49,10 +41,6 @@ const menuContainerStyles = css({
|
|
|
49
41
|
}
|
|
50
42
|
}
|
|
51
43
|
});
|
|
52
|
-
const labelStyles = css({
|
|
53
|
-
display: 'inline-block',
|
|
54
|
-
width: '100%'
|
|
55
|
-
});
|
|
56
44
|
|
|
57
45
|
// TODO: ED-26959 - Migrate away from gridSize
|
|
58
46
|
// Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
|
|
@@ -60,172 +48,6 @@ export const itemSpacing = gridSize() / 2;
|
|
|
60
48
|
|
|
61
49
|
// Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check
|
|
62
50
|
|
|
63
|
-
const DropdownButtonItem = ButtonItem;
|
|
64
|
-
const DropdownMenuItem = props => {
|
|
65
|
-
const {
|
|
66
|
-
item,
|
|
67
|
-
hide,
|
|
68
|
-
dispatchCommand,
|
|
69
|
-
editorView,
|
|
70
|
-
showSelected,
|
|
71
|
-
intl
|
|
72
|
-
} = props;
|
|
73
|
-
const itemSelected = item.selected;
|
|
74
|
-
const iconBefore = useMemo(() => {
|
|
75
|
-
if (item.icon) {
|
|
76
|
-
return item.icon;
|
|
77
|
-
} else {
|
|
78
|
-
return jsx(SelectedIconBefore, {
|
|
79
|
-
itemSelected: itemSelected,
|
|
80
|
-
showSelected: showSelected,
|
|
81
|
-
intl: intl
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
}, [itemSelected, showSelected, intl, item.icon]);
|
|
85
|
-
const [tooltipContent, setTooltipContent] = useState(item.tooltip || '');
|
|
86
|
-
const handleItemMouseOut = useCallback(() => {
|
|
87
|
-
setTooltipContent('');
|
|
88
|
-
if (item.onMouseOut) {
|
|
89
|
-
dispatchCommand(item.onMouseOut);
|
|
90
|
-
}
|
|
91
|
-
}, [item.onMouseOut, dispatchCommand]);
|
|
92
|
-
const handleItemMouseDown = useCallback(e => {
|
|
93
|
-
e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
|
|
94
|
-
if (item.onMouseDown) {
|
|
95
|
-
dispatchCommand(item.onMouseDown);
|
|
96
|
-
}
|
|
97
|
-
}, [item.onMouseDown, dispatchCommand]);
|
|
98
|
-
const handleItemMouseOver = useCallback(() => {
|
|
99
|
-
setTooltipContent(item.tooltip || '');
|
|
100
|
-
if (item.onMouseOver) {
|
|
101
|
-
dispatchCommand(item.onMouseOver);
|
|
102
|
-
}
|
|
103
|
-
}, [item.tooltip, item.onMouseOver, dispatchCommand]);
|
|
104
|
-
const handleItemMouseEnter = useCallback(e => {
|
|
105
|
-
if (item.onMouseEnter) {
|
|
106
|
-
e.preventDefault();
|
|
107
|
-
dispatchCommand(item.onMouseEnter);
|
|
108
|
-
}
|
|
109
|
-
}, [item.onMouseEnter, dispatchCommand]);
|
|
110
|
-
const handleItemMouseLeave = useCallback(e => {
|
|
111
|
-
if (item.onMouseLeave) {
|
|
112
|
-
e.preventDefault();
|
|
113
|
-
dispatchCommand(item.onMouseLeave);
|
|
114
|
-
}
|
|
115
|
-
}, [item.onMouseLeave, dispatchCommand]);
|
|
116
|
-
const handleItemOnFocus = useCallback(e => {
|
|
117
|
-
if (item.onFocus) {
|
|
118
|
-
e.preventDefault();
|
|
119
|
-
dispatchCommand(item.onFocus);
|
|
120
|
-
}
|
|
121
|
-
}, [item.onFocus, dispatchCommand]);
|
|
122
|
-
const handleItemOnBlur = useCallback(e => {
|
|
123
|
-
if (item.onBlur) {
|
|
124
|
-
e.preventDefault();
|
|
125
|
-
dispatchCommand(item.onBlur);
|
|
126
|
-
}
|
|
127
|
-
}, [item.onBlur, dispatchCommand]);
|
|
128
|
-
const handleItemClick = useCallback(() => {
|
|
129
|
-
/**
|
|
130
|
-
* The order of dispatching the event and hide() is important, because
|
|
131
|
-
* the ClickAreaBlock will be relying on the element to calculate the
|
|
132
|
-
* click coordinate.
|
|
133
|
-
* For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
|
|
134
|
-
*/
|
|
135
|
-
dispatchCommand(item.onClick);
|
|
136
|
-
hide();
|
|
137
|
-
if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
|
|
138
|
-
editorView === null || editorView === void 0 ? void 0 : editorView.focus();
|
|
139
|
-
}
|
|
140
|
-
}, [dispatchCommand, item.onClick, hide, editorView]);
|
|
141
|
-
|
|
142
|
-
/* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
|
|
143
|
-
const labelRef = useRef(null);
|
|
144
|
-
const handleTitleWrapperMouseEvent = useCallback(
|
|
145
|
-
// Ignored via go/ees005
|
|
146
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
147
|
-
e => {
|
|
148
|
-
if (item.disabled) {
|
|
149
|
-
e.stopPropagation();
|
|
150
|
-
e.preventDefault();
|
|
151
|
-
}
|
|
152
|
-
}, [item.disabled]);
|
|
153
|
-
|
|
154
|
-
// Ignored via go/ees005
|
|
155
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
156
|
-
const isAriaChecked = item => {
|
|
157
|
-
const {
|
|
158
|
-
selected,
|
|
159
|
-
domItemOptions
|
|
160
|
-
} = item;
|
|
161
|
-
return (domItemOptions === null || domItemOptions === void 0 ? void 0 : domItemOptions.type) === 'item-checkbox' ? selected : undefined;
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
// Ignored via go/ees005
|
|
165
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
166
|
-
const hasRole = item => {
|
|
167
|
-
var _item$domItemOptions;
|
|
168
|
-
return ((_item$domItemOptions = item.domItemOptions) === null || _item$domItemOptions === void 0 ? void 0 : _item$domItemOptions.type) === 'item-checkbox' ? 'menuitemcheckbox' : undefined;
|
|
169
|
-
};
|
|
170
|
-
useEffect(() => {
|
|
171
|
-
const labelRefCurrent = labelRef.current;
|
|
172
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
173
|
-
labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
|
|
174
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
175
|
-
labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
|
|
176
|
-
return () => {
|
|
177
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
178
|
-
labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
|
|
179
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
180
|
-
labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
|
|
181
|
-
};
|
|
182
|
-
});
|
|
183
|
-
const itemContent = jsx(DropdownButtonItem, {
|
|
184
|
-
isSelected: itemSelected,
|
|
185
|
-
iconBefore: iconBefore,
|
|
186
|
-
iconAfter: item.elemAfter,
|
|
187
|
-
onClick: handleItemClick,
|
|
188
|
-
"data-testid": item.testId,
|
|
189
|
-
isDisabled: item.disabled,
|
|
190
|
-
onMouseDown: handleItemMouseDown,
|
|
191
|
-
onMouseOver: handleItemMouseOver,
|
|
192
|
-
onMouseEnter: handleItemMouseEnter,
|
|
193
|
-
onMouseLeave: handleItemMouseLeave,
|
|
194
|
-
onMouseOut: handleItemMouseOut,
|
|
195
|
-
onFocus: handleItemOnFocus,
|
|
196
|
-
onBlur: handleItemOnBlur,
|
|
197
|
-
role: hasRole(item),
|
|
198
|
-
"aria-checked": isAriaChecked(item)
|
|
199
|
-
}, jsx("span", {
|
|
200
|
-
ref: labelRef,
|
|
201
|
-
css: labelStyles
|
|
202
|
-
}, item.title));
|
|
203
|
-
if (tooltipContent) {
|
|
204
|
-
return jsx(Tooltip, {
|
|
205
|
-
content: tooltipContent
|
|
206
|
-
}, itemContent);
|
|
207
|
-
}
|
|
208
|
-
return itemContent;
|
|
209
|
-
};
|
|
210
|
-
const SelectedIconBefore = ({
|
|
211
|
-
itemSelected,
|
|
212
|
-
intl,
|
|
213
|
-
showSelected
|
|
214
|
-
}) => {
|
|
215
|
-
if (showSelected && itemSelected) {
|
|
216
|
-
return jsx("span", {
|
|
217
|
-
"aria-hidden": "true"
|
|
218
|
-
}, jsx(EditorDoneIcon, {
|
|
219
|
-
LEGACY_primaryColor: `var(--ds-icon-selected, ${B400})`,
|
|
220
|
-
LEGACY_size: "small",
|
|
221
|
-
label: intl.formatMessage(messages.confirmModalOK),
|
|
222
|
-
spacing: "none"
|
|
223
|
-
}));
|
|
224
|
-
}
|
|
225
|
-
return jsx("span", {
|
|
226
|
-
css: spacerStyles
|
|
227
|
-
});
|
|
228
|
-
};
|
|
229
51
|
const Dropdown = /*#__PURE__*/memo(props => {
|
|
230
52
|
const {
|
|
231
53
|
hide,
|
|
@@ -267,6 +89,16 @@ const Dropdown = /*#__PURE__*/memo(props => {
|
|
|
267
89
|
css: headingStyles
|
|
268
90
|
}, jsx(HeadingItem, null, item.title));
|
|
269
91
|
}
|
|
92
|
+
if (item.type === 'custom') {
|
|
93
|
+
const dropdownMenuOptions = {
|
|
94
|
+
hide,
|
|
95
|
+
dispatchCommand,
|
|
96
|
+
editorView,
|
|
97
|
+
showSelected,
|
|
98
|
+
intl
|
|
99
|
+
};
|
|
100
|
+
return item.render(editorView, dropdownMenuOptions);
|
|
101
|
+
}
|
|
270
102
|
}));
|
|
271
103
|
}
|
|
272
104
|
return jsx("div", {
|
|
@@ -1,32 +1,23 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
1
|
/**
|
|
3
2
|
* @jsxRuntime classic
|
|
4
3
|
* @jsx jsx
|
|
5
4
|
*/
|
|
6
|
-
import { memo
|
|
5
|
+
import { memo } from 'react';
|
|
7
6
|
|
|
8
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
8
|
import { css, jsx } from '@emotion/react';
|
|
10
9
|
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
11
10
|
|
|
12
11
|
import { injectIntl } from 'react-intl-next';
|
|
13
|
-
import {
|
|
14
|
-
import
|
|
15
|
-
import { ButtonItem, HeadingItem } from '@atlaskit/menu';
|
|
16
|
-
import { B400 } from '@atlaskit/theme/colors';
|
|
12
|
+
import { DropdownMenuItem } from '@atlaskit/editor-common/floating-toolbar';
|
|
13
|
+
import { HeadingItem } from '@atlaskit/menu';
|
|
17
14
|
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
|
|
18
15
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
19
16
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
20
|
-
import Tooltip from '@atlaskit/tooltip';
|
|
21
17
|
export var menuItemDimensions = {
|
|
22
18
|
width: 175,
|
|
23
19
|
height: 32
|
|
24
20
|
};
|
|
25
|
-
var spacerStyles = css({
|
|
26
|
-
display: 'flex',
|
|
27
|
-
flex: 1,
|
|
28
|
-
padding: "var(--ds-space-100, 8px)"
|
|
29
|
-
});
|
|
30
21
|
var separatorStyles = css({
|
|
31
22
|
background: "var(--ds-border, #091E4224)",
|
|
32
23
|
height: "var(--ds-space-025, 1px)"
|
|
@@ -50,10 +41,6 @@ var menuContainerStyles = css({
|
|
|
50
41
|
}
|
|
51
42
|
}
|
|
52
43
|
});
|
|
53
|
-
var labelStyles = css({
|
|
54
|
-
display: 'inline-block',
|
|
55
|
-
width: '100%'
|
|
56
|
-
});
|
|
57
44
|
|
|
58
45
|
// TODO: ED-26959 - Migrate away from gridSize
|
|
59
46
|
// Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
|
|
@@ -61,170 +48,6 @@ export var itemSpacing = gridSize() / 2;
|
|
|
61
48
|
|
|
62
49
|
// Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check
|
|
63
50
|
|
|
64
|
-
var DropdownButtonItem = ButtonItem;
|
|
65
|
-
var DropdownMenuItem = function DropdownMenuItem(props) {
|
|
66
|
-
var item = props.item,
|
|
67
|
-
hide = props.hide,
|
|
68
|
-
dispatchCommand = props.dispatchCommand,
|
|
69
|
-
editorView = props.editorView,
|
|
70
|
-
showSelected = props.showSelected,
|
|
71
|
-
intl = props.intl;
|
|
72
|
-
var itemSelected = item.selected;
|
|
73
|
-
var iconBefore = useMemo(function () {
|
|
74
|
-
if (item.icon) {
|
|
75
|
-
return item.icon;
|
|
76
|
-
} else {
|
|
77
|
-
return jsx(SelectedIconBefore, {
|
|
78
|
-
itemSelected: itemSelected,
|
|
79
|
-
showSelected: showSelected,
|
|
80
|
-
intl: intl
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
}, [itemSelected, showSelected, intl, item.icon]);
|
|
84
|
-
var _useState = useState(item.tooltip || ''),
|
|
85
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
86
|
-
tooltipContent = _useState2[0],
|
|
87
|
-
setTooltipContent = _useState2[1];
|
|
88
|
-
var handleItemMouseOut = useCallback(function () {
|
|
89
|
-
setTooltipContent('');
|
|
90
|
-
if (item.onMouseOut) {
|
|
91
|
-
dispatchCommand(item.onMouseOut);
|
|
92
|
-
}
|
|
93
|
-
}, [item.onMouseOut, dispatchCommand]);
|
|
94
|
-
var handleItemMouseDown = useCallback(function (e) {
|
|
95
|
-
e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
|
|
96
|
-
if (item.onMouseDown) {
|
|
97
|
-
dispatchCommand(item.onMouseDown);
|
|
98
|
-
}
|
|
99
|
-
}, [item.onMouseDown, dispatchCommand]);
|
|
100
|
-
var handleItemMouseOver = useCallback(function () {
|
|
101
|
-
setTooltipContent(item.tooltip || '');
|
|
102
|
-
if (item.onMouseOver) {
|
|
103
|
-
dispatchCommand(item.onMouseOver);
|
|
104
|
-
}
|
|
105
|
-
}, [item.tooltip, item.onMouseOver, dispatchCommand]);
|
|
106
|
-
var handleItemMouseEnter = useCallback(function (e) {
|
|
107
|
-
if (item.onMouseEnter) {
|
|
108
|
-
e.preventDefault();
|
|
109
|
-
dispatchCommand(item.onMouseEnter);
|
|
110
|
-
}
|
|
111
|
-
}, [item.onMouseEnter, dispatchCommand]);
|
|
112
|
-
var handleItemMouseLeave = useCallback(function (e) {
|
|
113
|
-
if (item.onMouseLeave) {
|
|
114
|
-
e.preventDefault();
|
|
115
|
-
dispatchCommand(item.onMouseLeave);
|
|
116
|
-
}
|
|
117
|
-
}, [item.onMouseLeave, dispatchCommand]);
|
|
118
|
-
var handleItemOnFocus = useCallback(function (e) {
|
|
119
|
-
if (item.onFocus) {
|
|
120
|
-
e.preventDefault();
|
|
121
|
-
dispatchCommand(item.onFocus);
|
|
122
|
-
}
|
|
123
|
-
}, [item.onFocus, dispatchCommand]);
|
|
124
|
-
var handleItemOnBlur = useCallback(function (e) {
|
|
125
|
-
if (item.onBlur) {
|
|
126
|
-
e.preventDefault();
|
|
127
|
-
dispatchCommand(item.onBlur);
|
|
128
|
-
}
|
|
129
|
-
}, [item.onBlur, dispatchCommand]);
|
|
130
|
-
var handleItemClick = useCallback(function () {
|
|
131
|
-
/**
|
|
132
|
-
* The order of dispatching the event and hide() is important, because
|
|
133
|
-
* the ClickAreaBlock will be relying on the element to calculate the
|
|
134
|
-
* click coordinate.
|
|
135
|
-
* For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
|
|
136
|
-
*/
|
|
137
|
-
dispatchCommand(item.onClick);
|
|
138
|
-
hide();
|
|
139
|
-
if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
|
|
140
|
-
editorView === null || editorView === void 0 || editorView.focus();
|
|
141
|
-
}
|
|
142
|
-
}, [dispatchCommand, item.onClick, hide, editorView]);
|
|
143
|
-
|
|
144
|
-
/* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
|
|
145
|
-
var labelRef = useRef(null);
|
|
146
|
-
var handleTitleWrapperMouseEvent = useCallback(
|
|
147
|
-
// Ignored via go/ees005
|
|
148
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
149
|
-
function (e) {
|
|
150
|
-
if (item.disabled) {
|
|
151
|
-
e.stopPropagation();
|
|
152
|
-
e.preventDefault();
|
|
153
|
-
}
|
|
154
|
-
}, [item.disabled]);
|
|
155
|
-
|
|
156
|
-
// Ignored via go/ees005
|
|
157
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
158
|
-
var isAriaChecked = function isAriaChecked(item) {
|
|
159
|
-
var selected = item.selected,
|
|
160
|
-
domItemOptions = item.domItemOptions;
|
|
161
|
-
return (domItemOptions === null || domItemOptions === void 0 ? void 0 : domItemOptions.type) === 'item-checkbox' ? selected : undefined;
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
// Ignored via go/ees005
|
|
165
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
166
|
-
var hasRole = function hasRole(item) {
|
|
167
|
-
var _item$domItemOptions;
|
|
168
|
-
return ((_item$domItemOptions = item.domItemOptions) === null || _item$domItemOptions === void 0 ? void 0 : _item$domItemOptions.type) === 'item-checkbox' ? 'menuitemcheckbox' : undefined;
|
|
169
|
-
};
|
|
170
|
-
useEffect(function () {
|
|
171
|
-
var labelRefCurrent = labelRef.current;
|
|
172
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
173
|
-
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
|
|
174
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
175
|
-
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
|
|
176
|
-
return function () {
|
|
177
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
178
|
-
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
|
|
179
|
-
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
180
|
-
labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
|
|
181
|
-
};
|
|
182
|
-
});
|
|
183
|
-
var itemContent = jsx(DropdownButtonItem, {
|
|
184
|
-
isSelected: itemSelected,
|
|
185
|
-
iconBefore: iconBefore,
|
|
186
|
-
iconAfter: item.elemAfter,
|
|
187
|
-
onClick: handleItemClick,
|
|
188
|
-
"data-testid": item.testId,
|
|
189
|
-
isDisabled: item.disabled,
|
|
190
|
-
onMouseDown: handleItemMouseDown,
|
|
191
|
-
onMouseOver: handleItemMouseOver,
|
|
192
|
-
onMouseEnter: handleItemMouseEnter,
|
|
193
|
-
onMouseLeave: handleItemMouseLeave,
|
|
194
|
-
onMouseOut: handleItemMouseOut,
|
|
195
|
-
onFocus: handleItemOnFocus,
|
|
196
|
-
onBlur: handleItemOnBlur,
|
|
197
|
-
role: hasRole(item),
|
|
198
|
-
"aria-checked": isAriaChecked(item)
|
|
199
|
-
}, jsx("span", {
|
|
200
|
-
ref: labelRef,
|
|
201
|
-
css: labelStyles
|
|
202
|
-
}, item.title));
|
|
203
|
-
if (tooltipContent) {
|
|
204
|
-
return jsx(Tooltip, {
|
|
205
|
-
content: tooltipContent
|
|
206
|
-
}, itemContent);
|
|
207
|
-
}
|
|
208
|
-
return itemContent;
|
|
209
|
-
};
|
|
210
|
-
var SelectedIconBefore = function SelectedIconBefore(_ref) {
|
|
211
|
-
var itemSelected = _ref.itemSelected,
|
|
212
|
-
intl = _ref.intl,
|
|
213
|
-
showSelected = _ref.showSelected;
|
|
214
|
-
if (showSelected && itemSelected) {
|
|
215
|
-
return jsx("span", {
|
|
216
|
-
"aria-hidden": "true"
|
|
217
|
-
}, jsx(EditorDoneIcon, {
|
|
218
|
-
LEGACY_primaryColor: "var(--ds-icon-selected, ".concat(B400, ")"),
|
|
219
|
-
LEGACY_size: "small",
|
|
220
|
-
label: intl.formatMessage(messages.confirmModalOK),
|
|
221
|
-
spacing: "none"
|
|
222
|
-
}));
|
|
223
|
-
}
|
|
224
|
-
return jsx("span", {
|
|
225
|
-
css: spacerStyles
|
|
226
|
-
});
|
|
227
|
-
};
|
|
228
51
|
var Dropdown = /*#__PURE__*/memo(function (props) {
|
|
229
52
|
var hide = props.hide,
|
|
230
53
|
dispatchCommand = props.dispatchCommand,
|
|
@@ -267,6 +90,16 @@ var Dropdown = /*#__PURE__*/memo(function (props) {
|
|
|
267
90
|
css: headingStyles
|
|
268
91
|
}, jsx(HeadingItem, null, item.title));
|
|
269
92
|
}
|
|
93
|
+
if (item.type === 'custom') {
|
|
94
|
+
var dropdownMenuOptions = {
|
|
95
|
+
hide: hide,
|
|
96
|
+
dispatchCommand: dispatchCommand,
|
|
97
|
+
editorView: editorView,
|
|
98
|
+
showSelected: showSelected,
|
|
99
|
+
intl: intl
|
|
100
|
+
};
|
|
101
|
+
return item.render(editorView, dropdownMenuOptions);
|
|
102
|
+
}
|
|
270
103
|
}));
|
|
271
104
|
}
|
|
272
105
|
return jsx("div", {
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import type { ReactElement } from 'react';
|
|
7
7
|
import React, { Component } from 'react';
|
|
8
8
|
import { jsx } from '@emotion/react';
|
|
9
|
-
import type { CommandDispatch, DropdownOptions,
|
|
9
|
+
import type { CommandDispatch, DropdownOptions, ExtensionDropdownOptions, FloatingToolbarButtonSpotlightConfig, FloatingToolbarOverflowDropdownOptions } from '@atlaskit/editor-common/types';
|
|
10
10
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
11
11
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
12
12
|
export interface Props {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
3
|
+
import type { ExtensionAPI, ExtensionProvider } from '@atlaskit/editor-common/extensions';
|
|
3
4
|
import type { DropdownOptionT, FloatingToolbarOverflowDropdownOptions } from '@atlaskit/editor-common/types';
|
|
4
5
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
6
|
import type { ButtonItemProps } from '@atlaskit/menu';
|
|
@@ -15,6 +16,10 @@ export interface Props {
|
|
|
15
16
|
showSelected?: boolean;
|
|
16
17
|
editorView?: EditorView;
|
|
17
18
|
}
|
|
19
|
+
export type ExtensionProps = {
|
|
20
|
+
extensionApi?: ExtensionAPI;
|
|
21
|
+
extensionProvider?: Promise<ExtensionProvider>;
|
|
22
|
+
};
|
|
18
23
|
export interface DropdownButtonItemProps extends ButtonItemProps {
|
|
19
24
|
onMouseEnter?: (event: React.MouseEvent | React.KeyboardEvent) => void;
|
|
20
25
|
onMouseOver?: (event: React.MouseEvent | React.KeyboardEvent) => void;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import type { ReactElement } from 'react';
|
|
7
7
|
import React, { Component } from 'react';
|
|
8
8
|
import { jsx } from '@emotion/react';
|
|
9
|
-
import type { CommandDispatch, DropdownOptions,
|
|
9
|
+
import type { CommandDispatch, DropdownOptions, ExtensionDropdownOptions, FloatingToolbarButtonSpotlightConfig, FloatingToolbarOverflowDropdownOptions } from '@atlaskit/editor-common/types';
|
|
10
10
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
11
11
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
12
12
|
export interface Props {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
3
|
+
import type { ExtensionAPI, ExtensionProvider } from '@atlaskit/editor-common/extensions';
|
|
3
4
|
import type { DropdownOptionT, FloatingToolbarOverflowDropdownOptions } from '@atlaskit/editor-common/types';
|
|
4
5
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
6
|
import type { ButtonItemProps } from '@atlaskit/menu';
|
|
@@ -15,6 +16,10 @@ export interface Props {
|
|
|
15
16
|
showSelected?: boolean;
|
|
16
17
|
editorView?: EditorView;
|
|
17
18
|
}
|
|
19
|
+
export type ExtensionProps = {
|
|
20
|
+
extensionApi?: ExtensionAPI;
|
|
21
|
+
extensionProvider?: Promise<ExtensionProvider>;
|
|
22
|
+
};
|
|
18
23
|
export interface DropdownButtonItemProps extends ButtonItemProps {
|
|
19
24
|
onMouseEnter?: (event: React.MouseEvent | React.KeyboardEvent) => void;
|
|
20
25
|
onMouseOver?: (event: React.MouseEvent | React.KeyboardEvent) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-floating-toolbar",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.0",
|
|
4
4
|
"description": "Floating toolbar plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@atlaskit/adf-utils": "^19.19.0",
|
|
29
29
|
"@atlaskit/button": "^21.1.0",
|
|
30
30
|
"@atlaskit/checkbox": "^17.0.0",
|
|
31
|
-
"@atlaskit/editor-common": "^102.
|
|
31
|
+
"@atlaskit/editor-common": "^102.11.0",
|
|
32
32
|
"@atlaskit/editor-palette": "^2.1.0",
|
|
33
33
|
"@atlaskit/editor-plugin-block-controls": "^3.3.0",
|
|
34
34
|
"@atlaskit/editor-plugin-context-panel": "^4.0.0",
|