@atlaskit/editor-plugin-media 1.36.2 → 1.36.3

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/nodeviews/mediaNodeView/media.js +3 -1
  3. package/dist/cjs/toolbar/mediaInline.js +25 -11
  4. package/dist/es2019/nodeviews/mediaNodeView/media.js +3 -1
  5. package/dist/es2019/toolbar/mediaInline.js +25 -11
  6. package/dist/esm/nodeviews/mediaNodeView/media.js +3 -1
  7. package/dist/esm/toolbar/mediaInline.js +25 -11
  8. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 1.36.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#152851](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152851)
8
+ [`caba4b5434f99`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/caba4b5434f99) -
9
+ Injects a custom interaction name to CardLoading component. This will individualise the experience
10
+ in Performance Portal
11
+ - [#152823](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152823)
12
+ [`0ec705650807f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0ec705650807f) -
13
+ [ux] ED-25090: ED-25090: Migrated link toolbar and panel toolbar to use the new icons
14
+ - Updated dependencies
15
+
3
16
  ## 1.36.2
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/nodeviews/mediaNodeView/media.js CHANGED
@@ -242,7 +242,9 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
242
242
  if (isLoading || type !== 'external' && !viewMediaClientConfig) {
243
243
  return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
244
244
  dimensions: originalDimensions
245
- }, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, null));
245
+ }, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
246
+ interactionName: "editor-media-card-loading"
247
+ }));
246
248
  }
247
249
  var contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
248
250
  var identifier = type === 'external' ? {
package/dist/cjs/toolbar/mediaInline.js CHANGED
@@ -11,7 +11,11 @@ var _analytics = require("@atlaskit/editor-common/analytics");
11
11
  var _card = require("@atlaskit/editor-common/card");
12
12
  var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
13
13
  var _state2 = require("@atlaskit/editor-prosemirror/state");
14
- var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
14
+ var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
15
+ var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
16
+ var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
17
+ var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
18
+ var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
15
19
  var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
16
20
  var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
17
21
  var _mediaUi = require("@atlaskit/media-ui");
@@ -44,7 +48,8 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
44
48
  var items = [{
45
49
  id: 'editor.media.view.switcher.inline',
46
50
  type: 'button',
47
- icon: _card.IconInline,
51
+ icon: _imageInline.default,
52
+ iconFallback: _card.IconInline,
48
53
  selected: true,
49
54
  disabled: false,
50
55
  focusEditoronEnter: true,
@@ -57,7 +62,8 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
57
62
  }, {
58
63
  id: 'editor.media.view.switcher.thumbnail',
59
64
  type: 'button',
60
- icon: _card.IconCard,
65
+ icon: _smartLinkCard.default,
66
+ iconFallback: _card.IconCard,
61
67
  selected: false,
62
68
  disabled: false,
63
69
  focusEditoronEnter: true,
@@ -105,7 +111,8 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
105
111
  type: 'button',
106
112
  appearance: 'danger',
107
113
  focusEditoronEnter: true,
108
- icon: _remove.default,
114
+ icon: _delete.default,
115
+ iconFallback: _remove.default,
109
116
  onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
110
117
  onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
111
118
  onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
@@ -159,9 +166,12 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
159
166
  type: 'button',
160
167
  title: mediaInlineImageTitle,
161
168
  icon: function icon() {
162
- return /*#__PURE__*/_react.default.createElement(_card.IconInline, {
163
- size: "medium",
164
- label: mediaInlineImageTitle
169
+ return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
170
+ color: "currentColor",
171
+ spacing: "spacious",
172
+ label: mediaInlineImageTitle,
173
+ LEGACY_size: "medium",
174
+ LEGACY_fallbackIcon: _card.IconInline
165
175
  });
166
176
  },
167
177
  onClick: function onClick() {
@@ -173,9 +183,12 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
173
183
  type: 'button',
174
184
  title: mediaSingleTitle,
175
185
  icon: function icon() {
176
- return /*#__PURE__*/_react.default.createElement(_card.IconEmbed, {
177
- size: "medium",
178
- label: mediaSingleTitle
186
+ return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
187
+ color: "currentColor",
188
+ spacing: "spacious",
189
+ label: mediaSingleTitle,
190
+ LEGACY_size: "medium",
191
+ LEGACY_fallbackIcon: _card.IconEmbed
179
192
  });
180
193
  },
181
194
  onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState, isNestingInQuoteSupported)
@@ -284,7 +297,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
284
297
  type: 'button',
285
298
  appearance: 'danger',
286
299
  focusEditoronEnter: true,
287
- icon: _remove.default,
300
+ icon: _delete.default,
301
+ iconFallback: _remove.default,
288
302
  onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
289
303
  onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
290
304
  onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
package/dist/es2019/nodeviews/mediaNodeView/media.js CHANGED
@@ -181,7 +181,9 @@ export class MediaNode extends Component {
181
181
  if (isLoading || type !== 'external' && !viewMediaClientConfig) {
182
182
  return /*#__PURE__*/React.createElement(MediaCardWrapper, {
183
183
  dimensions: originalDimensions
184
- }, /*#__PURE__*/React.createElement(CardLoading, null));
184
+ }, /*#__PURE__*/React.createElement(CardLoading, {
185
+ interactionName: "editor-media-card-loading"
186
+ }));
185
187
  }
186
188
  const contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
187
189
  const identifier = type === 'external' ? {
package/dist/es2019/toolbar/mediaInline.js CHANGED
@@ -3,7 +3,11 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
3
3
  import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
4
4
  import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
5
5
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
6
- import DownloadIcon from '@atlaskit/icon/glyph/download';
6
+ import DeleteIcon from '@atlaskit/icon/core/delete';
7
+ import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
8
+ import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
9
+ import DownloadIcon from '@atlaskit/icon/core/migration/download';
10
+ import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
7
11
  import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
8
12
  import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
9
13
  import { messages } from '@atlaskit/media-ui';
@@ -35,7 +39,8 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
35
39
  const items = [{
36
40
  id: 'editor.media.view.switcher.inline',
37
41
  type: 'button',
38
- icon: IconInline,
42
+ icon: ImageInlineIcon,
43
+ iconFallback: IconInline,
39
44
  selected: true,
40
45
  disabled: false,
41
46
  focusEditoronEnter: true,
@@ -46,7 +51,8 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
46
51
  }, {
47
52
  id: 'editor.media.view.switcher.thumbnail',
48
53
  type: 'button',
49
- icon: IconCard,
54
+ icon: SmartLinkCardIcon,
55
+ iconFallback: IconCard,
50
56
  selected: false,
51
57
  disabled: false,
52
58
  focusEditoronEnter: true,
@@ -94,7 +100,8 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
94
100
  type: 'button',
95
101
  appearance: 'danger',
96
102
  focusEditoronEnter: true,
97
- icon: RemoveIcon,
103
+ icon: DeleteIcon,
104
+ iconFallback: RemoveIcon,
98
105
  onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
99
106
  onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
100
107
  onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
@@ -150,9 +157,12 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
150
157
  id: 'editor.media.convert.mediainline',
151
158
  type: 'button',
152
159
  title: mediaInlineImageTitle,
153
- icon: () => /*#__PURE__*/React.createElement(IconInline, {
154
- size: "medium",
155
- label: mediaInlineImageTitle
160
+ icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
161
+ color: "currentColor",
162
+ spacing: "spacious",
163
+ label: mediaInlineImageTitle,
164
+ LEGACY_size: "medium",
165
+ LEGACY_fallbackIcon: IconInline
156
166
  }),
157
167
  onClick: () => {
158
168
  return true;
@@ -162,9 +172,12 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
162
172
  id: 'editor.media.convert.mediasingle',
163
173
  type: 'button',
164
174
  title: mediaSingleTitle,
165
- icon: () => /*#__PURE__*/React.createElement(IconEmbed, {
166
- size: "medium",
167
- label: mediaSingleTitle
175
+ icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
176
+ color: "currentColor",
177
+ spacing: "spacious",
178
+ label: mediaSingleTitle,
179
+ LEGACY_size: "medium",
180
+ LEGACY_fallbackIcon: IconEmbed
168
181
  }),
169
182
  onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState, isNestingInQuoteSupported)
170
183
  }, {
@@ -278,7 +291,8 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
278
291
  type: 'button',
279
292
  appearance: 'danger',
280
293
  focusEditoronEnter: true,
281
- icon: RemoveIcon,
294
+ icon: DeleteIcon,
295
+ iconFallback: RemoveIcon,
282
296
  onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
283
297
  onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
284
298
  onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
package/dist/esm/nodeviews/mediaNodeView/media.js CHANGED
@@ -233,7 +233,9 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
233
233
  if (isLoading || type !== 'external' && !viewMediaClientConfig) {
234
234
  return /*#__PURE__*/React.createElement(MediaCardWrapper, {
235
235
  dimensions: originalDimensions
236
- }, /*#__PURE__*/React.createElement(CardLoading, null));
236
+ }, /*#__PURE__*/React.createElement(CardLoading, {
237
+ interactionName: "editor-media-card-loading"
238
+ }));
237
239
  }
238
240
  var contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
239
241
  var identifier = type === 'external' ? {
package/dist/esm/toolbar/mediaInline.js CHANGED
@@ -3,7 +3,11 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
3
3
  import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
4
4
  import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
5
5
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
6
- import DownloadIcon from '@atlaskit/icon/glyph/download';
6
+ import DeleteIcon from '@atlaskit/icon/core/delete';
7
+ import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
8
+ import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
9
+ import DownloadIcon from '@atlaskit/icon/core/migration/download';
10
+ import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
7
11
  import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
8
12
  import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
9
13
  import { messages } from '@atlaskit/media-ui';
@@ -34,7 +38,8 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
34
38
  var items = [{
35
39
  id: 'editor.media.view.switcher.inline',
36
40
  type: 'button',
37
- icon: IconInline,
41
+ icon: ImageInlineIcon,
42
+ iconFallback: IconInline,
38
43
  selected: true,
39
44
  disabled: false,
40
45
  focusEditoronEnter: true,
@@ -47,7 +52,8 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
47
52
  }, {
48
53
  id: 'editor.media.view.switcher.thumbnail',
49
54
  type: 'button',
50
- icon: IconCard,
55
+ icon: SmartLinkCardIcon,
56
+ iconFallback: IconCard,
51
57
  selected: false,
52
58
  disabled: false,
53
59
  focusEditoronEnter: true,
@@ -95,7 +101,8 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
95
101
  type: 'button',
96
102
  appearance: 'danger',
97
103
  focusEditoronEnter: true,
98
- icon: RemoveIcon,
104
+ icon: DeleteIcon,
105
+ iconFallback: RemoveIcon,
99
106
  onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
100
107
  onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
101
108
  onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
@@ -149,9 +156,12 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
149
156
  type: 'button',
150
157
  title: mediaInlineImageTitle,
151
158
  icon: function icon() {
152
- return /*#__PURE__*/React.createElement(IconInline, {
153
- size: "medium",
154
- label: mediaInlineImageTitle
159
+ return /*#__PURE__*/React.createElement(ImageInlineIcon, {
160
+ color: "currentColor",
161
+ spacing: "spacious",
162
+ label: mediaInlineImageTitle,
163
+ LEGACY_size: "medium",
164
+ LEGACY_fallbackIcon: IconInline
155
165
  });
156
166
  },
157
167
  onClick: function onClick() {
@@ -163,9 +173,12 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
163
173
  type: 'button',
164
174
  title: mediaSingleTitle,
165
175
  icon: function icon() {
166
- return /*#__PURE__*/React.createElement(IconEmbed, {
167
- size: "medium",
168
- label: mediaSingleTitle
176
+ return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
177
+ color: "currentColor",
178
+ spacing: "spacious",
179
+ label: mediaSingleTitle,
180
+ LEGACY_size: "medium",
181
+ LEGACY_fallbackIcon: IconEmbed
169
182
  });
170
183
  },
171
184
  onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState, isNestingInQuoteSupported)
@@ -274,7 +287,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
274
287
  type: 'button',
275
288
  appearance: 'danger',
276
289
  focusEditoronEnter: true,
277
- icon: RemoveIcon,
290
+ icon: DeleteIcon,
291
+ iconFallback: RemoveIcon,
278
292
  onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
279
293
  onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
280
294
  onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "1.36.2",
3
+ "version": "1.36.3",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -39,7 +39,7 @@
39
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.21.0",
42
+ "@atlaskit/editor-plugin-annotation": "1.21.1",
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",
@@ -54,14 +54,14 @@
54
54
  "@atlaskit/editor-tables": "^2.8.0",
55
55
  "@atlaskit/form": "^10.5.0",
56
56
  "@atlaskit/icon": "^22.22.0",
57
- "@atlaskit/media-card": "^78.6.0",
57
+ "@atlaskit/media-card": "^78.7.0",
58
58
  "@atlaskit/media-client": "^28.0.0",
59
59
  "@atlaskit/media-client-react": "^2.2.0",
60
60
  "@atlaskit/media-common": "^11.6.0",
61
61
  "@atlaskit/media-filmstrip": "^47.4.0",
62
62
  "@atlaskit/media-picker": "^66.7.0",
63
- "@atlaskit/media-ui": "^25.15.0",
64
- "@atlaskit/media-viewer": "^49.1.0",
63
+ "@atlaskit/media-ui": "^25.16.0",
64
+ "@atlaskit/media-viewer": "^49.2.0",
65
65
  "@atlaskit/platform-feature-flags": "^0.3.0",
66
66
  "@atlaskit/primitives": "^12.2.0",
67
67
  "@atlaskit/textfield": "^6.5.0",