@atlaskit/editor-plugin-media 1.36.0 → 1.36.2
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 +17 -0
- package/dist/cjs/toolbar/comments.js +4 -2
- package/dist/cjs/toolbar/filePreviewItem.js +6 -2
- package/dist/cjs/toolbar/index.js +23 -10
- package/dist/cjs/toolbar/linking-toolbar-appearance.js +8 -3
- package/dist/cjs/ui/ImageBorder/index.js +36 -10
- package/dist/es2019/toolbar/comments.js +4 -2
- package/dist/es2019/toolbar/filePreviewItem.js +6 -2
- package/dist/es2019/toolbar/index.js +23 -10
- package/dist/es2019/toolbar/linking-toolbar-appearance.js +8 -3
- package/dist/es2019/ui/ImageBorder/index.js +67 -41
- package/dist/esm/toolbar/comments.js +4 -2
- package/dist/esm/toolbar/filePreviewItem.js +6 -2
- package/dist/esm/toolbar/index.js +23 -10
- package/dist/esm/toolbar/linking-toolbar-appearance.js +8 -3
- package/dist/esm/ui/ImageBorder/index.js +36 -10
- package/package.json +9 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 1.36.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#152594](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152594)
|
|
8
|
+
[`4f17733c95c94`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4f17733c95c94) -
|
|
9
|
+
[ux] ED-25093: Migrated media toolbar to use the new icons
|
|
10
|
+
|
|
11
|
+
## 1.36.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#152510](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152510)
|
|
16
|
+
[`dcf9edde7ac7b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dcf9edde7ac7b) -
|
|
17
|
+
bump adf-schema to 42.0.1
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 1.36.0
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
|
@@ -9,7 +9,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
10
10
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
11
11
|
var _media = require("@atlaskit/editor-common/media");
|
|
12
|
-
var _comment = _interopRequireDefault(require("@atlaskit/icon/
|
|
12
|
+
var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
|
|
13
|
+
var _comment2 = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
|
|
13
14
|
var _commentWithDotIcon = require("./assets/commentWithDotIcon");
|
|
14
15
|
var _utils = require("./utils");
|
|
15
16
|
var commentButton = exports.commentButton = function commentButton(intl, state, api) {
|
|
@@ -40,7 +41,8 @@ var commentButton = exports.commentButton = function commentButton(intl, state,
|
|
|
40
41
|
return {
|
|
41
42
|
type: 'button',
|
|
42
43
|
testId: 'add-comment-media-button',
|
|
43
|
-
icon:
|
|
44
|
+
icon: _comment.default,
|
|
45
|
+
iconFallback: hasActiveComments ? _commentWithDotIcon.CommentWithDotIcon : _comment2.default,
|
|
44
46
|
title: title,
|
|
45
47
|
onClick: onClickHandler,
|
|
46
48
|
tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
|
|
@@ -9,6 +9,7 @@ exports.FilePreviewItem = void 0;
|
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
12
|
+
var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
|
|
12
13
|
var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
|
|
13
14
|
var _mediaUi = require("@atlaskit/media-ui");
|
|
14
15
|
var _PortalWrapper = require("../ui/MediaViewer/PortalWrapper");
|
|
@@ -36,8 +37,11 @@ var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
|
|
|
36
37
|
testId: "file-preview-toolbar-button",
|
|
37
38
|
key: "editor.media.card.preview",
|
|
38
39
|
onClick: showMediaViewer,
|
|
39
|
-
icon: /*#__PURE__*/_react.default.createElement(
|
|
40
|
-
|
|
40
|
+
icon: /*#__PURE__*/_react.default.createElement(_maximize.default, {
|
|
41
|
+
color: "currentColor",
|
|
42
|
+
spacing: "spacious",
|
|
43
|
+
label: "file preview",
|
|
44
|
+
LEGACY_fallbackIcon: _filePreview.default
|
|
41
45
|
}),
|
|
42
46
|
tooltipContent: tooltipContent
|
|
43
47
|
}), shouldRenderMediaViewer && /*#__PURE__*/_react.default.createElement(_PortalWrapper.RenderMediaViewer, {
|
|
@@ -18,7 +18,11 @@ var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/message
|
|
|
18
18
|
var _state2 = require("@atlaskit/editor-prosemirror/state");
|
|
19
19
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
20
20
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
21
|
-
var
|
|
21
|
+
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
|
|
22
|
+
var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
|
|
23
|
+
var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
|
|
24
|
+
var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
|
|
25
|
+
var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
|
|
22
26
|
var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
|
|
23
27
|
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
|
|
24
28
|
var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
|
|
@@ -125,7 +129,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
|
|
|
125
129
|
}, (0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
|
|
126
130
|
id: 'editor.media.viewer',
|
|
127
131
|
type: 'button',
|
|
128
|
-
icon:
|
|
132
|
+
icon: _maximize.default,
|
|
133
|
+
iconFallback: _filePreview.default,
|
|
129
134
|
title: intl.formatMessage(_mediaUi.messages.preview),
|
|
130
135
|
onClick: function onClick() {
|
|
131
136
|
var _handleShowMediaViewe;
|
|
@@ -162,7 +167,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
|
|
|
162
167
|
type: 'button',
|
|
163
168
|
appearance: 'danger',
|
|
164
169
|
focusEditoronEnter: true,
|
|
165
|
-
icon:
|
|
170
|
+
icon: _delete.default,
|
|
171
|
+
iconFallback: _remove.default,
|
|
166
172
|
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
|
|
167
173
|
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
|
|
168
174
|
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
|
|
@@ -281,9 +287,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
281
287
|
id: 'editor.media.image.view.switcher.inline',
|
|
282
288
|
title: inlineSwitcherTitle,
|
|
283
289
|
icon: function icon() {
|
|
284
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
285
|
-
|
|
286
|
-
|
|
290
|
+
return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
|
|
291
|
+
color: "currentColor",
|
|
292
|
+
spacing: "spacious",
|
|
293
|
+
label: inlineSwitcherTitle,
|
|
294
|
+
LEGACY_size: "medium",
|
|
295
|
+
LEGACY_fallbackIcon: _card.IconInline
|
|
287
296
|
});
|
|
288
297
|
},
|
|
289
298
|
onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
|
|
@@ -293,9 +302,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
293
302
|
id: 'editor.media.image.view.switcher.floating',
|
|
294
303
|
title: floatingSwitcherTitle,
|
|
295
304
|
icon: function icon() {
|
|
296
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
297
|
-
|
|
298
|
-
|
|
305
|
+
return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
|
|
306
|
+
color: "currentColor",
|
|
307
|
+
spacing: "spacious",
|
|
308
|
+
label: floatingSwitcherTitle,
|
|
309
|
+
LEGACY_size: "medium",
|
|
310
|
+
LEGACY_fallbackIcon: _card.IconEmbed
|
|
299
311
|
});
|
|
300
312
|
},
|
|
301
313
|
onClick: function onClick() {
|
|
@@ -469,7 +481,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
469
481
|
toolbarButtons.push((0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
|
|
470
482
|
id: 'editor.media.viewer',
|
|
471
483
|
type: 'button',
|
|
472
|
-
icon:
|
|
484
|
+
icon: _maximize.default,
|
|
485
|
+
iconFallback: _filePreview.default,
|
|
473
486
|
title: intl.formatMessage(_mediaUi.messages.preview),
|
|
474
487
|
onClick: function onClick() {
|
|
475
488
|
var _handleShowMediaViewe2;
|
|
@@ -13,7 +13,8 @@ var _adfSchema = require("@atlaskit/adf-schema");
|
|
|
13
13
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
14
14
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
15
15
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
16
|
-
var
|
|
16
|
+
var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
|
|
17
|
+
var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
|
|
17
18
|
var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
|
|
18
19
|
var _pluginKey = require("../pm-plugins/plugin-key");
|
|
19
20
|
var _checkMediaType = require("../utils/check-media-type");
|
|
@@ -83,8 +84,11 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
|
|
|
83
84
|
disabled: !isValidUrl,
|
|
84
85
|
onClick: onOpenLink,
|
|
85
86
|
title: linkTitle,
|
|
86
|
-
icon: (0, _react2.jsx)(
|
|
87
|
-
|
|
87
|
+
icon: (0, _react2.jsx)(_linkExternal.default, {
|
|
88
|
+
color: "currentColor",
|
|
89
|
+
spacing: "spacious",
|
|
90
|
+
label: linkTitle,
|
|
91
|
+
LEGACY_fallbackIcon: _shortcut.default
|
|
88
92
|
})
|
|
89
93
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
90
94
|
,
|
|
@@ -101,6 +105,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
|
|
|
101
105
|
keymap: _keymaps.addLink
|
|
102
106
|
}),
|
|
103
107
|
icon: (0, _react2.jsx)(_link.default, {
|
|
108
|
+
color: "currentColor",
|
|
104
109
|
label: _title
|
|
105
110
|
})
|
|
106
111
|
}), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)) : null;
|
|
@@ -15,7 +15,13 @@ var _ui = require("@atlaskit/editor-common/ui");
|
|
|
15
15
|
var _uiColor = require("@atlaskit/editor-common/ui-color");
|
|
16
16
|
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
|
|
17
17
|
var _editorPalette = require("@atlaskit/editor-palette");
|
|
18
|
+
var _border = _interopRequireDefault(require("@atlaskit/icon/core/border"));
|
|
19
|
+
var _borderWeightMedium = _interopRequireDefault(require("@atlaskit/icon/core/border-weight-medium"));
|
|
20
|
+
var _borderWeightThick = _interopRequireDefault(require("@atlaskit/icon/core/border-weight-thick"));
|
|
21
|
+
var _borderWeightThin = _interopRequireDefault(require("@atlaskit/icon/core/border-weight-thin"));
|
|
18
22
|
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
|
|
23
|
+
var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
|
|
24
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
25
|
var _primitives = require("@atlaskit/primitives");
|
|
20
26
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
21
27
|
var _styles2 = require("./styles");
|
|
@@ -107,14 +113,20 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
107
113
|
}, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
|
|
108
114
|
var borderSizeOptions = [{
|
|
109
115
|
name: formatMessage(_media.imageBorderMessages.borderSizeSubtle),
|
|
110
|
-
value: 1
|
|
116
|
+
value: 1,
|
|
117
|
+
icon: _borderWeightThin.default
|
|
111
118
|
}, {
|
|
112
119
|
name: formatMessage(_media.imageBorderMessages.borderSizeMedium),
|
|
113
|
-
value: 2
|
|
120
|
+
value: 2,
|
|
121
|
+
icon: _borderWeightMedium.default
|
|
114
122
|
}, {
|
|
115
123
|
name: formatMessage(_media.imageBorderMessages.borderSizeBold),
|
|
116
|
-
value: 3
|
|
124
|
+
value: 3,
|
|
125
|
+
icon: _borderWeightThick.default
|
|
117
126
|
}];
|
|
127
|
+
var borderColorSelectStyles = function borderColorSelectStyles() {
|
|
128
|
+
return !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color)) : _styles2.contextualMenuArrow;
|
|
129
|
+
};
|
|
118
130
|
var items = [{
|
|
119
131
|
content: (0, _react2.jsx)("div", null, (0, _react2.jsx)("button", {
|
|
120
132
|
ref: dropDownColorOptionButton,
|
|
@@ -131,7 +143,7 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
131
143
|
});
|
|
132
144
|
}
|
|
133
145
|
}, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_media.imageBorderMessages.borderColor)), (0, _react2.jsx)("div", {
|
|
134
|
-
css:
|
|
146
|
+
css: borderColorSelectStyles
|
|
135
147
|
})), (0, _react2.jsx)("div", {
|
|
136
148
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
137
149
|
className: _styles.DropdownMenuSharedCssClassName.SUBMENU,
|
|
@@ -215,7 +227,9 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
215
227
|
ref: handleSubMenuRef
|
|
216
228
|
}, borderSizeOptions.map(function (_ref2, idx) {
|
|
217
229
|
var name = _ref2.name,
|
|
218
|
-
value = _ref2.value
|
|
230
|
+
value = _ref2.value,
|
|
231
|
+
icon = _ref2.icon;
|
|
232
|
+
var ButtonIcon = icon;
|
|
219
233
|
return (0, _react2.jsx)(_tooltip.default, {
|
|
220
234
|
key: idx,
|
|
221
235
|
content: name
|
|
@@ -249,9 +263,15 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
249
263
|
onMouseDown: function onMouseDown(e) {
|
|
250
264
|
e.preventDefault();
|
|
251
265
|
}
|
|
252
|
-
}, (0,
|
|
266
|
+
}, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
|
|
267
|
+
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
268
|
+
(0, _react2.jsx)("div", {
|
|
253
269
|
css: (0, _styles2.line)(value, value === size),
|
|
254
270
|
role: "presentation"
|
|
271
|
+
}) : (0, _react2.jsx)(ButtonIcon, {
|
|
272
|
+
color: value === size ? "var(--ds-icon-inverse, #FFFFFF)" : 'currentColor',
|
|
273
|
+
spacing: "spacious",
|
|
274
|
+
label: name
|
|
255
275
|
}))));
|
|
256
276
|
}))))),
|
|
257
277
|
'data-testid': 'dropdown-item__Size',
|
|
@@ -285,8 +305,11 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
285
305
|
onClick: toggleBorder,
|
|
286
306
|
spacing: "compact",
|
|
287
307
|
"aria-label": enabled ? formatMessage(_media.imageBorderMessages.removeBorder) : formatMessage(_media.imageBorderMessages.addBorder),
|
|
288
|
-
iconBefore: (0, _react2.jsx)(
|
|
289
|
-
|
|
308
|
+
iconBefore: (0, _react2.jsx)(_border.default, {
|
|
309
|
+
color: "currentColor",
|
|
310
|
+
label: "",
|
|
311
|
+
spacing: "spacious",
|
|
312
|
+
LEGACY_fallbackIcon: _icons.BorderIcon
|
|
290
313
|
}),
|
|
291
314
|
title: enabled ? formatMessage(_media.imageBorderMessages.removeBorder) : formatMessage(_media.imageBorderMessages.addBorder)
|
|
292
315
|
}), (0, _react2.jsx)("div", {
|
|
@@ -301,8 +324,11 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
301
324
|
"aria-label": formatMessage(_media.imageBorderMessages.borderOptions),
|
|
302
325
|
title: formatMessage(_media.imageBorderMessages.borderOptions),
|
|
303
326
|
spacing: "compact",
|
|
304
|
-
iconBefore: (0, _react2.jsx)(
|
|
305
|
-
|
|
327
|
+
iconBefore: (0, _react2.jsx)(_chevronDown2.default, {
|
|
328
|
+
color: "currentColor",
|
|
329
|
+
spacing: "spacious",
|
|
330
|
+
label: "",
|
|
331
|
+
LEGACY_fallbackIcon: _chevronDown.default
|
|
306
332
|
}),
|
|
307
333
|
onClick: function onClick() {
|
|
308
334
|
setIsOpen(!isOpen);
|
|
@@ -2,7 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { INPUT_METHOD, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
4
4
|
import { commentMessages as messages } from '@atlaskit/editor-common/media';
|
|
5
|
-
import CommentIcon from '@atlaskit/icon/
|
|
5
|
+
import CommentIcon from '@atlaskit/icon/core/comment';
|
|
6
|
+
import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
|
|
6
7
|
import { CommentWithDotIcon } from './assets/commentWithDotIcon';
|
|
7
8
|
import { getSelectedMediaSingle } from './utils';
|
|
8
9
|
export const commentButton = (intl, state, api) => {
|
|
@@ -32,7 +33,8 @@ export const commentButton = (intl, state, api) => {
|
|
|
32
33
|
return {
|
|
33
34
|
type: 'button',
|
|
34
35
|
testId: 'add-comment-media-button',
|
|
35
|
-
icon:
|
|
36
|
+
icon: CommentIcon,
|
|
37
|
+
iconFallback: hasActiveComments ? CommentWithDotIcon : LegacyCommentIcon,
|
|
36
38
|
title,
|
|
37
39
|
onClick: onClickHandler,
|
|
38
40
|
tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
|
|
3
|
+
import MaximizeIcon from '@atlaskit/icon/core/maximize';
|
|
3
4
|
import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
|
|
4
5
|
import { messages } from '@atlaskit/media-ui';
|
|
5
6
|
import { RenderMediaViewer } from '../ui/MediaViewer/PortalWrapper';
|
|
@@ -23,8 +24,11 @@ export const FilePreviewItem = ({
|
|
|
23
24
|
testId: "file-preview-toolbar-button",
|
|
24
25
|
key: "editor.media.card.preview",
|
|
25
26
|
onClick: showMediaViewer,
|
|
26
|
-
icon: /*#__PURE__*/React.createElement(
|
|
27
|
-
|
|
27
|
+
icon: /*#__PURE__*/React.createElement(MaximizeIcon, {
|
|
28
|
+
color: "currentColor",
|
|
29
|
+
spacing: "spacious",
|
|
30
|
+
label: "file preview",
|
|
31
|
+
LEGACY_fallbackIcon: FilePreviewIcon
|
|
28
32
|
}),
|
|
29
33
|
tooltipContent: tooltipContent
|
|
30
34
|
}), shouldRenderMediaViewer && /*#__PURE__*/React.createElement(RenderMediaViewer, {
|
|
@@ -8,7 +8,11 @@ import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atl
|
|
|
8
8
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
9
9
|
import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
|
|
10
10
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
11
|
-
import
|
|
11
|
+
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
12
|
+
import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
|
|
13
|
+
import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
|
|
14
|
+
import MaximizeIcon from '@atlaskit/icon/core/maximize';
|
|
15
|
+
import DownloadIcon from '@atlaskit/icon/core/migration/download';
|
|
12
16
|
import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
|
|
13
17
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
14
18
|
import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
|
|
@@ -112,7 +116,8 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
|
|
|
112
116
|
}, fg('platform_editor_media_previewer_bugfix') ? {
|
|
113
117
|
id: 'editor.media.viewer',
|
|
114
118
|
type: 'button',
|
|
115
|
-
icon:
|
|
119
|
+
icon: MaximizeIcon,
|
|
120
|
+
iconFallback: FilePreviewIcon,
|
|
116
121
|
title: intl.formatMessage(messages.preview),
|
|
117
122
|
onClick: () => {
|
|
118
123
|
var _handleShowMediaViewe;
|
|
@@ -149,7 +154,8 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
|
|
|
149
154
|
type: 'button',
|
|
150
155
|
appearance: 'danger',
|
|
151
156
|
focusEditoronEnter: true,
|
|
152
|
-
icon:
|
|
157
|
+
icon: DeleteIcon,
|
|
158
|
+
iconFallback: RemoveIcon,
|
|
153
159
|
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
|
|
154
160
|
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
|
|
155
161
|
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
|
|
@@ -274,9 +280,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
274
280
|
type: 'button',
|
|
275
281
|
id: 'editor.media.image.view.switcher.inline',
|
|
276
282
|
title: inlineSwitcherTitle,
|
|
277
|
-
icon: () => /*#__PURE__*/React.createElement(
|
|
278
|
-
|
|
279
|
-
|
|
283
|
+
icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
284
|
+
color: "currentColor",
|
|
285
|
+
spacing: "spacious",
|
|
286
|
+
label: inlineSwitcherTitle,
|
|
287
|
+
LEGACY_size: "medium",
|
|
288
|
+
LEGACY_fallbackIcon: IconInline
|
|
280
289
|
}),
|
|
281
290
|
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
|
|
282
291
|
testId: 'image-inline-appearance'
|
|
@@ -284,9 +293,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
284
293
|
type: 'button',
|
|
285
294
|
id: 'editor.media.image.view.switcher.floating',
|
|
286
295
|
title: floatingSwitcherTitle,
|
|
287
|
-
icon: () => /*#__PURE__*/React.createElement(
|
|
288
|
-
|
|
289
|
-
|
|
296
|
+
icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
297
|
+
color: "currentColor",
|
|
298
|
+
spacing: "spacious",
|
|
299
|
+
label: floatingSwitcherTitle,
|
|
300
|
+
LEGACY_size: "medium",
|
|
301
|
+
LEGACY_fallbackIcon: IconEmbed
|
|
290
302
|
}),
|
|
291
303
|
onClick: () => {
|
|
292
304
|
return true;
|
|
@@ -473,7 +485,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
473
485
|
toolbarButtons.push(fg('platform_editor_media_previewer_bugfix') ? {
|
|
474
486
|
id: 'editor.media.viewer',
|
|
475
487
|
type: 'button',
|
|
476
|
-
icon:
|
|
488
|
+
icon: MaximizeIcon,
|
|
489
|
+
iconFallback: FilePreviewIcon,
|
|
477
490
|
title: intl.formatMessage(messages.preview),
|
|
478
491
|
onClick: () => {
|
|
479
492
|
var _handleShowMediaViewe2;
|
|
@@ -10,7 +10,8 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
|
|
|
10
10
|
import { addLink, ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
11
11
|
import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
|
|
12
12
|
import { FloatingToolbarSeparator as Separator, FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
|
|
13
|
-
import
|
|
13
|
+
import LinkExternalIcon from '@atlaskit/icon/core/link-external';
|
|
14
|
+
import LinkIcon from '@atlaskit/icon/core/migration/link';
|
|
14
15
|
import OpenIcon from '@atlaskit/icon/glyph/shortcut';
|
|
15
16
|
import { stateKey } from '../pm-plugins/plugin-key';
|
|
16
17
|
import { checkMediaType } from '../utils/check-media-type';
|
|
@@ -69,8 +70,11 @@ export const LinkToolbarAppearance = ({
|
|
|
69
70
|
disabled: !isValidUrl,
|
|
70
71
|
onClick: onOpenLink,
|
|
71
72
|
title: linkTitle,
|
|
72
|
-
icon: jsx(
|
|
73
|
-
|
|
73
|
+
icon: jsx(LinkExternalIcon, {
|
|
74
|
+
color: "currentColor",
|
|
75
|
+
spacing: "spacious",
|
|
76
|
+
label: linkTitle,
|
|
77
|
+
LEGACY_fallbackIcon: OpenIcon
|
|
74
78
|
})
|
|
75
79
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
76
80
|
,
|
|
@@ -87,6 +91,7 @@ export const LinkToolbarAppearance = ({
|
|
|
87
91
|
keymap: addLink
|
|
88
92
|
}),
|
|
89
93
|
icon: jsx(LinkIcon, {
|
|
94
|
+
color: "currentColor",
|
|
90
95
|
label: title
|
|
91
96
|
})
|
|
92
97
|
}), jsx(Separator, null)) : null;
|
|
@@ -6,14 +6,20 @@ import { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
6
6
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { jsx } from '@emotion/react';
|
|
9
|
-
import { BorderIcon } from '@atlaskit/editor-common/icons';
|
|
9
|
+
import { BorderIcon as LegacyBorderIcon } from '@atlaskit/editor-common/icons';
|
|
10
10
|
import { imageBorderMessages as messages } from '@atlaskit/editor-common/media';
|
|
11
11
|
import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
12
12
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
13
13
|
import { borderColorPalette, borderPaletteTooltipMessages, ColorPalette } from '@atlaskit/editor-common/ui-color';
|
|
14
14
|
import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
15
15
|
import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
|
|
16
|
+
import BorderIcon from '@atlaskit/icon/core/border';
|
|
17
|
+
import BorderWeightMediumIcon from '@atlaskit/icon/core/border-weight-medium';
|
|
18
|
+
import BorderWeightThickIcon from '@atlaskit/icon/core/border-weight-thick';
|
|
19
|
+
import BorderWeightThinIcon from '@atlaskit/icon/core/border-weight-thin';
|
|
16
20
|
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
21
|
+
import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
|
|
22
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
23
|
import { Text } from '@atlaskit/primitives';
|
|
18
24
|
import Tooltip from '@atlaskit/tooltip';
|
|
19
25
|
import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
|
|
@@ -89,14 +95,18 @@ const ImageBorder = ({
|
|
|
89
95
|
}, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
|
|
90
96
|
const borderSizeOptions = [{
|
|
91
97
|
name: formatMessage(messages.borderSizeSubtle),
|
|
92
|
-
value: 1
|
|
98
|
+
value: 1,
|
|
99
|
+
icon: BorderWeightThinIcon
|
|
93
100
|
}, {
|
|
94
101
|
name: formatMessage(messages.borderSizeMedium),
|
|
95
|
-
value: 2
|
|
102
|
+
value: 2,
|
|
103
|
+
icon: BorderWeightMediumIcon
|
|
96
104
|
}, {
|
|
97
105
|
name: formatMessage(messages.borderSizeBold),
|
|
98
|
-
value: 3
|
|
106
|
+
value: 3,
|
|
107
|
+
icon: BorderWeightThickIcon
|
|
99
108
|
}];
|
|
109
|
+
const borderColorSelectStyles = () => !fg('platform-visual-refresh-icons') ? contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color)) : contextualMenuArrow;
|
|
100
110
|
const items = [{
|
|
101
111
|
content: jsx("div", null, jsx("button", {
|
|
102
112
|
ref: dropDownColorOptionButton,
|
|
@@ -109,7 +119,7 @@ const ImageBorder = ({
|
|
|
109
119
|
"aria-expanded": isColorSubmenuOpen,
|
|
110
120
|
onKeyDown: e => handleTriggerByKeyboard(e, () => setIsColorSubmenuOpen(!isColorSubmenuOpen))
|
|
111
121
|
}, jsx(Text, null, formatMessage(messages.borderColor)), jsx("div", {
|
|
112
|
-
css:
|
|
122
|
+
css: borderColorSelectStyles
|
|
113
123
|
})), jsx("div", {
|
|
114
124
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
115
125
|
className: DropdownMenuSharedCssClassName.SUBMENU,
|
|
@@ -189,44 +199,54 @@ const ImageBorder = ({
|
|
|
189
199
|
ref: handleSubMenuRef
|
|
190
200
|
}, borderSizeOptions.map(({
|
|
191
201
|
name,
|
|
192
|
-
value
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
setIsOpen(false);
|
|
210
|
-
},
|
|
211
|
-
onKeyDown: event => {
|
|
212
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
213
|
-
var _openDropdownButtonRe2;
|
|
202
|
+
value,
|
|
203
|
+
icon
|
|
204
|
+
}, idx) => {
|
|
205
|
+
const ButtonIcon = icon;
|
|
206
|
+
return jsx(Tooltip, {
|
|
207
|
+
key: idx,
|
|
208
|
+
content: name
|
|
209
|
+
}, jsx("span", {
|
|
210
|
+
css: buttonWrapperStyle
|
|
211
|
+
}, jsx("button", {
|
|
212
|
+
type: "button"
|
|
213
|
+
/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
|
|
214
|
+
css: buttonStyle(value === size),
|
|
215
|
+
"aria-label": name,
|
|
216
|
+
role: "radio",
|
|
217
|
+
"aria-checked": value === size,
|
|
218
|
+
onClick: () => {
|
|
214
219
|
setBorder({
|
|
215
220
|
size: value
|
|
216
221
|
});
|
|
217
222
|
setIsOpen(false);
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
(
|
|
223
|
+
},
|
|
224
|
+
onKeyDown: event => {
|
|
225
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
226
|
+
var _openDropdownButtonRe2;
|
|
227
|
+
setBorder({
|
|
228
|
+
size: value
|
|
229
|
+
});
|
|
230
|
+
setIsOpen(false);
|
|
231
|
+
setIsColorSubmenuOpen(false);
|
|
232
|
+
setIsSizeSubmenuOpen(false);
|
|
233
|
+
(_openDropdownButtonRe2 = openDropdownButtonRef.current) === null || _openDropdownButtonRe2 === void 0 ? void 0 : _openDropdownButtonRe2.focus();
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
onMouseDown: e => {
|
|
237
|
+
e.preventDefault();
|
|
221
238
|
}
|
|
222
|
-
},
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
239
|
+
}, !fg('platform-visual-refresh-icons') ?
|
|
240
|
+
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
241
|
+
jsx("div", {
|
|
242
|
+
css: line(value, value === size),
|
|
243
|
+
role: "presentation"
|
|
244
|
+
}) : jsx(ButtonIcon, {
|
|
245
|
+
color: value === size ? "var(--ds-icon-inverse, #FFFFFF)" : 'currentColor',
|
|
246
|
+
spacing: "spacious",
|
|
247
|
+
label: name
|
|
248
|
+
}))));
|
|
249
|
+
}))))),
|
|
230
250
|
'data-testid': 'dropdown-item__Size',
|
|
231
251
|
key: 'dropdown-menu-image-border-size-button',
|
|
232
252
|
value: {
|
|
@@ -259,7 +279,10 @@ const ImageBorder = ({
|
|
|
259
279
|
spacing: "compact",
|
|
260
280
|
"aria-label": enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder),
|
|
261
281
|
iconBefore: jsx(BorderIcon, {
|
|
262
|
-
|
|
282
|
+
color: "currentColor",
|
|
283
|
+
label: "",
|
|
284
|
+
spacing: "spacious",
|
|
285
|
+
LEGACY_fallbackIcon: LegacyBorderIcon
|
|
263
286
|
}),
|
|
264
287
|
title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
|
|
265
288
|
}), jsx("div", {
|
|
@@ -274,8 +297,11 @@ const ImageBorder = ({
|
|
|
274
297
|
"aria-label": formatMessage(messages.borderOptions),
|
|
275
298
|
title: formatMessage(messages.borderOptions),
|
|
276
299
|
spacing: "compact",
|
|
277
|
-
iconBefore: jsx(
|
|
278
|
-
|
|
300
|
+
iconBefore: jsx(ChevronDownIcon, {
|
|
301
|
+
color: "currentColor",
|
|
302
|
+
spacing: "spacious",
|
|
303
|
+
label: "",
|
|
304
|
+
LEGACY_fallbackIcon: ExpandIcon
|
|
279
305
|
}),
|
|
280
306
|
onClick: () => {
|
|
281
307
|
setIsOpen(!isOpen);
|
|
@@ -2,7 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { INPUT_METHOD, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
4
4
|
import { commentMessages as messages } from '@atlaskit/editor-common/media';
|
|
5
|
-
import CommentIcon from '@atlaskit/icon/
|
|
5
|
+
import CommentIcon from '@atlaskit/icon/core/comment';
|
|
6
|
+
import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
|
|
6
7
|
import { CommentWithDotIcon } from './assets/commentWithDotIcon';
|
|
7
8
|
import { getSelectedMediaSingle } from './utils';
|
|
8
9
|
export var commentButton = function commentButton(intl, state, api) {
|
|
@@ -33,7 +34,8 @@ export var commentButton = function commentButton(intl, state, api) {
|
|
|
33
34
|
return {
|
|
34
35
|
type: 'button',
|
|
35
36
|
testId: 'add-comment-media-button',
|
|
36
|
-
icon:
|
|
37
|
+
icon: CommentIcon,
|
|
38
|
+
iconFallback: hasActiveComments ? CommentWithDotIcon : LegacyCommentIcon,
|
|
37
39
|
title: title,
|
|
38
40
|
onClick: onClickHandler,
|
|
39
41
|
tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import React, { useState } from 'react';
|
|
3
3
|
import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
|
|
4
|
+
import MaximizeIcon from '@atlaskit/icon/core/maximize';
|
|
4
5
|
import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
|
|
5
6
|
import { messages } from '@atlaskit/media-ui';
|
|
6
7
|
import { RenderMediaViewer } from '../ui/MediaViewer/PortalWrapper';
|
|
@@ -26,8 +27,11 @@ export var FilePreviewItem = function FilePreviewItem(_ref) {
|
|
|
26
27
|
testId: "file-preview-toolbar-button",
|
|
27
28
|
key: "editor.media.card.preview",
|
|
28
29
|
onClick: showMediaViewer,
|
|
29
|
-
icon: /*#__PURE__*/React.createElement(
|
|
30
|
-
|
|
30
|
+
icon: /*#__PURE__*/React.createElement(MaximizeIcon, {
|
|
31
|
+
color: "currentColor",
|
|
32
|
+
spacing: "spacious",
|
|
33
|
+
label: "file preview",
|
|
34
|
+
LEGACY_fallbackIcon: FilePreviewIcon
|
|
31
35
|
}),
|
|
32
36
|
tooltipContent: tooltipContent
|
|
33
37
|
}), shouldRenderMediaViewer && /*#__PURE__*/React.createElement(RenderMediaViewer, {
|
|
@@ -12,7 +12,11 @@ import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atl
|
|
|
12
12
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
13
13
|
import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
|
|
14
14
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
15
|
-
import
|
|
15
|
+
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
16
|
+
import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
|
|
17
|
+
import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
|
|
18
|
+
import MaximizeIcon from '@atlaskit/icon/core/maximize';
|
|
19
|
+
import DownloadIcon from '@atlaskit/icon/core/migration/download';
|
|
16
20
|
import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
|
|
17
21
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
18
22
|
import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
|
|
@@ -115,7 +119,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
|
|
|
115
119
|
}, fg('platform_editor_media_previewer_bugfix') ? {
|
|
116
120
|
id: 'editor.media.viewer',
|
|
117
121
|
type: 'button',
|
|
118
|
-
icon:
|
|
122
|
+
icon: MaximizeIcon,
|
|
123
|
+
iconFallback: FilePreviewIcon,
|
|
119
124
|
title: intl.formatMessage(messages.preview),
|
|
120
125
|
onClick: function onClick() {
|
|
121
126
|
var _handleShowMediaViewe;
|
|
@@ -152,7 +157,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
|
|
|
152
157
|
type: 'button',
|
|
153
158
|
appearance: 'danger',
|
|
154
159
|
focusEditoronEnter: true,
|
|
155
|
-
icon:
|
|
160
|
+
icon: DeleteIcon,
|
|
161
|
+
iconFallback: RemoveIcon,
|
|
156
162
|
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
|
|
157
163
|
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
|
|
158
164
|
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
|
|
@@ -271,9 +277,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
271
277
|
id: 'editor.media.image.view.switcher.inline',
|
|
272
278
|
title: inlineSwitcherTitle,
|
|
273
279
|
icon: function icon() {
|
|
274
|
-
return /*#__PURE__*/React.createElement(
|
|
275
|
-
|
|
276
|
-
|
|
280
|
+
return /*#__PURE__*/React.createElement(ImageInlineIcon, {
|
|
281
|
+
color: "currentColor",
|
|
282
|
+
spacing: "spacious",
|
|
283
|
+
label: inlineSwitcherTitle,
|
|
284
|
+
LEGACY_size: "medium",
|
|
285
|
+
LEGACY_fallbackIcon: IconInline
|
|
277
286
|
});
|
|
278
287
|
},
|
|
279
288
|
onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
|
|
@@ -283,9 +292,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
283
292
|
id: 'editor.media.image.view.switcher.floating',
|
|
284
293
|
title: floatingSwitcherTitle,
|
|
285
294
|
icon: function icon() {
|
|
286
|
-
return /*#__PURE__*/React.createElement(
|
|
287
|
-
|
|
288
|
-
|
|
295
|
+
return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
|
|
296
|
+
color: "currentColor",
|
|
297
|
+
spacing: "spacious",
|
|
298
|
+
label: floatingSwitcherTitle,
|
|
299
|
+
LEGACY_size: "medium",
|
|
300
|
+
LEGACY_fallbackIcon: IconEmbed
|
|
289
301
|
});
|
|
290
302
|
},
|
|
291
303
|
onClick: function onClick() {
|
|
@@ -459,7 +471,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
459
471
|
toolbarButtons.push(fg('platform_editor_media_previewer_bugfix') ? {
|
|
460
472
|
id: 'editor.media.viewer',
|
|
461
473
|
type: 'button',
|
|
462
|
-
icon:
|
|
474
|
+
icon: MaximizeIcon,
|
|
475
|
+
iconFallback: FilePreviewIcon,
|
|
463
476
|
title: intl.formatMessage(messages.preview),
|
|
464
477
|
onClick: function onClick() {
|
|
465
478
|
var _handleShowMediaViewe2;
|
|
@@ -11,7 +11,8 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
|
|
|
11
11
|
import { addLink, ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
12
12
|
import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
|
|
13
13
|
import { FloatingToolbarSeparator as Separator, FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
|
|
14
|
-
import
|
|
14
|
+
import LinkExternalIcon from '@atlaskit/icon/core/link-external';
|
|
15
|
+
import LinkIcon from '@atlaskit/icon/core/migration/link';
|
|
15
16
|
import OpenIcon from '@atlaskit/icon/glyph/shortcut';
|
|
16
17
|
import { stateKey } from '../pm-plugins/plugin-key';
|
|
17
18
|
import { checkMediaType } from '../utils/check-media-type';
|
|
@@ -72,8 +73,11 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
|
|
|
72
73
|
disabled: !isValidUrl,
|
|
73
74
|
onClick: onOpenLink,
|
|
74
75
|
title: linkTitle,
|
|
75
|
-
icon: jsx(
|
|
76
|
-
|
|
76
|
+
icon: jsx(LinkExternalIcon, {
|
|
77
|
+
color: "currentColor",
|
|
78
|
+
spacing: "spacious",
|
|
79
|
+
label: linkTitle,
|
|
80
|
+
LEGACY_fallbackIcon: OpenIcon
|
|
77
81
|
})
|
|
78
82
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
79
83
|
,
|
|
@@ -90,6 +94,7 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
|
|
|
90
94
|
keymap: addLink
|
|
91
95
|
}),
|
|
92
96
|
icon: jsx(LinkIcon, {
|
|
97
|
+
color: "currentColor",
|
|
93
98
|
label: _title
|
|
94
99
|
})
|
|
95
100
|
}), jsx(Separator, null)) : null;
|
|
@@ -7,14 +7,20 @@ import { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
7
7
|
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
9
|
import { jsx } from '@emotion/react';
|
|
10
|
-
import { BorderIcon } from '@atlaskit/editor-common/icons';
|
|
10
|
+
import { BorderIcon as LegacyBorderIcon } from '@atlaskit/editor-common/icons';
|
|
11
11
|
import { imageBorderMessages as messages } from '@atlaskit/editor-common/media';
|
|
12
12
|
import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
13
13
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
14
14
|
import { borderColorPalette, borderPaletteTooltipMessages, ColorPalette } from '@atlaskit/editor-common/ui-color';
|
|
15
15
|
import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
16
16
|
import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
|
|
17
|
+
import BorderIcon from '@atlaskit/icon/core/border';
|
|
18
|
+
import BorderWeightMediumIcon from '@atlaskit/icon/core/border-weight-medium';
|
|
19
|
+
import BorderWeightThickIcon from '@atlaskit/icon/core/border-weight-thick';
|
|
20
|
+
import BorderWeightThinIcon from '@atlaskit/icon/core/border-weight-thin';
|
|
17
21
|
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
22
|
+
import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
|
|
23
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
18
24
|
import { Text } from '@atlaskit/primitives';
|
|
19
25
|
import Tooltip from '@atlaskit/tooltip';
|
|
20
26
|
import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
|
|
@@ -99,14 +105,20 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
99
105
|
}, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
|
|
100
106
|
var borderSizeOptions = [{
|
|
101
107
|
name: formatMessage(messages.borderSizeSubtle),
|
|
102
|
-
value: 1
|
|
108
|
+
value: 1,
|
|
109
|
+
icon: BorderWeightThinIcon
|
|
103
110
|
}, {
|
|
104
111
|
name: formatMessage(messages.borderSizeMedium),
|
|
105
|
-
value: 2
|
|
112
|
+
value: 2,
|
|
113
|
+
icon: BorderWeightMediumIcon
|
|
106
114
|
}, {
|
|
107
115
|
name: formatMessage(messages.borderSizeBold),
|
|
108
|
-
value: 3
|
|
116
|
+
value: 3,
|
|
117
|
+
icon: BorderWeightThickIcon
|
|
109
118
|
}];
|
|
119
|
+
var borderColorSelectStyles = function borderColorSelectStyles() {
|
|
120
|
+
return !fg('platform-visual-refresh-icons') ? contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color)) : contextualMenuArrow;
|
|
121
|
+
};
|
|
110
122
|
var items = [{
|
|
111
123
|
content: jsx("div", null, jsx("button", {
|
|
112
124
|
ref: dropDownColorOptionButton,
|
|
@@ -123,7 +135,7 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
123
135
|
});
|
|
124
136
|
}
|
|
125
137
|
}, jsx(Text, null, formatMessage(messages.borderColor)), jsx("div", {
|
|
126
|
-
css:
|
|
138
|
+
css: borderColorSelectStyles
|
|
127
139
|
})), jsx("div", {
|
|
128
140
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
129
141
|
className: DropdownMenuSharedCssClassName.SUBMENU,
|
|
@@ -207,7 +219,9 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
207
219
|
ref: handleSubMenuRef
|
|
208
220
|
}, borderSizeOptions.map(function (_ref2, idx) {
|
|
209
221
|
var name = _ref2.name,
|
|
210
|
-
value = _ref2.value
|
|
222
|
+
value = _ref2.value,
|
|
223
|
+
icon = _ref2.icon;
|
|
224
|
+
var ButtonIcon = icon;
|
|
211
225
|
return jsx(Tooltip, {
|
|
212
226
|
key: idx,
|
|
213
227
|
content: name
|
|
@@ -241,9 +255,15 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
241
255
|
onMouseDown: function onMouseDown(e) {
|
|
242
256
|
e.preventDefault();
|
|
243
257
|
}
|
|
244
|
-
},
|
|
258
|
+
}, !fg('platform-visual-refresh-icons') ?
|
|
259
|
+
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
260
|
+
jsx("div", {
|
|
245
261
|
css: line(value, value === size),
|
|
246
262
|
role: "presentation"
|
|
263
|
+
}) : jsx(ButtonIcon, {
|
|
264
|
+
color: value === size ? "var(--ds-icon-inverse, #FFFFFF)" : 'currentColor',
|
|
265
|
+
spacing: "spacious",
|
|
266
|
+
label: name
|
|
247
267
|
}))));
|
|
248
268
|
}))))),
|
|
249
269
|
'data-testid': 'dropdown-item__Size',
|
|
@@ -278,7 +298,10 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
278
298
|
spacing: "compact",
|
|
279
299
|
"aria-label": enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder),
|
|
280
300
|
iconBefore: jsx(BorderIcon, {
|
|
281
|
-
|
|
301
|
+
color: "currentColor",
|
|
302
|
+
label: "",
|
|
303
|
+
spacing: "spacious",
|
|
304
|
+
LEGACY_fallbackIcon: LegacyBorderIcon
|
|
282
305
|
}),
|
|
283
306
|
title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
|
|
284
307
|
}), jsx("div", {
|
|
@@ -293,8 +316,11 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
293
316
|
"aria-label": formatMessage(messages.borderOptions),
|
|
294
317
|
title: formatMessage(messages.borderOptions),
|
|
295
318
|
spacing: "compact",
|
|
296
|
-
iconBefore: jsx(
|
|
297
|
-
|
|
319
|
+
iconBefore: jsx(ChevronDownIcon, {
|
|
320
|
+
color: "currentColor",
|
|
321
|
+
spacing: "spacious",
|
|
322
|
+
label: "",
|
|
323
|
+
LEGACY_fallbackIcon: ExpandIcon
|
|
298
324
|
}),
|
|
299
325
|
onClick: function onClick() {
|
|
300
326
|
setIsOpen(!isOpen);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-media",
|
|
3
|
-
"version": "1.36.
|
|
3
|
+
"version": "1.36.2",
|
|
4
4
|
"description": "Media plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -32,14 +32,14 @@
|
|
|
32
32
|
"./types": "./src/types.ts"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@atlaskit/adf-schema": "^
|
|
35
|
+
"@atlaskit/adf-schema": "^42.0.2",
|
|
36
36
|
"@atlaskit/analytics-namespaced-context": "^6.12.0",
|
|
37
37
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
38
38
|
"@atlaskit/button": "^20.2.0",
|
|
39
|
-
"@atlaskit/editor-common": "^93.
|
|
39
|
+
"@atlaskit/editor-common": "^93.5.0",
|
|
40
40
|
"@atlaskit/editor-palette": "1.6.1",
|
|
41
41
|
"@atlaskit/editor-plugin-analytics": "^1.10.0",
|
|
42
|
-
"@atlaskit/editor-plugin-annotation": "1.
|
|
42
|
+
"@atlaskit/editor-plugin-annotation": "1.21.0",
|
|
43
43
|
"@atlaskit/editor-plugin-decorations": "^1.3.0",
|
|
44
44
|
"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
|
|
45
45
|
"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"@atlaskit/editor-plugin-focus": "^1.4.0",
|
|
48
48
|
"@atlaskit/editor-plugin-grid": "^1.2.0",
|
|
49
49
|
"@atlaskit/editor-plugin-guideline": "^1.2.0",
|
|
50
|
-
"@atlaskit/editor-plugin-selection": "^1.
|
|
50
|
+
"@atlaskit/editor-plugin-selection": "^1.5.0",
|
|
51
51
|
"@atlaskit/editor-plugin-width": "^1.3.0",
|
|
52
52
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
53
53
|
"@atlaskit/editor-shared-styles": "^3.0.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"@atlaskit/primitives": "^12.2.0",
|
|
67
67
|
"@atlaskit/textfield": "^6.5.0",
|
|
68
68
|
"@atlaskit/theme": "^13.1.0",
|
|
69
|
-
"@atlaskit/tmp-editor-statsig": "^2.
|
|
69
|
+
"@atlaskit/tmp-editor-statsig": "^2.5.0",
|
|
70
70
|
"@atlaskit/tokens": "^2.0.0",
|
|
71
71
|
"@atlaskit/tooltip": "^18.8.0",
|
|
72
72
|
"@babel/runtime": "^7.0.0",
|
|
@@ -139,6 +139,9 @@
|
|
|
139
139
|
},
|
|
140
140
|
"editor_nest_media_and_codeblock_in_quotes_jira": {
|
|
141
141
|
"type": "boolean"
|
|
142
|
+
},
|
|
143
|
+
"platform-visual-refresh-icons": {
|
|
144
|
+
"type": "boolean"
|
|
142
145
|
}
|
|
143
146
|
},
|
|
144
147
|
"stricter": {
|