@atlaskit/editor-plugin-media 2.2.3 → 2.2.5

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 +20 -0
  2. package/dist/cjs/ui/toolbar/index.js +135 -47
  3. package/dist/cjs/ui/toolbar/mediaInline.js +94 -57
  4. package/dist/es2019/ui/toolbar/index.js +139 -53
  5. package/dist/es2019/ui/toolbar/mediaInline.js +98 -63
  6. package/dist/esm/ui/toolbar/index.js +135 -47
  7. package/dist/esm/ui/toolbar/mediaInline.js +94 -57
  8. package/package.json +2 -2
package/dist/es2019/ui/toolbar/index.js CHANGED
@@ -8,7 +8,9 @@ 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 CopyIcon from '@atlaskit/icon/core/copy';
11
12
  import DeleteIcon from '@atlaskit/icon/core/delete';
13
+ import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
12
14
  import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
13
15
  import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
14
16
  import MaximizeIcon from '@atlaskit/icon/core/maximize';
@@ -267,42 +269,90 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
267
269
  var _selectedNode$node$fi;
268
270
  // mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
269
271
  if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
270
- var _pluginInjectionApi$a4;
271
272
  const hasCaption = contains(selectedNode.node, state.schema.nodes.caption);
272
273
  const inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
273
274
  const floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
274
- toolbarButtons.push({
275
- type: 'button',
276
- id: 'editor.media.image.view.switcher.inline',
277
- title: inlineSwitcherTitle,
278
- icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
279
- color: "currentColor",
280
- spacing: "spacious",
281
- label: inlineSwitcherTitle,
282
- LEGACY_size: "medium",
283
- LEGACY_fallbackIcon: IconInline
284
- }),
285
- onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
286
- testId: 'image-inline-appearance'
287
- }, {
288
- type: 'button',
289
- id: 'editor.media.image.view.switcher.floating',
290
- title: floatingSwitcherTitle,
291
- icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
292
- color: "currentColor",
293
- spacing: "spacious",
294
- label: floatingSwitcherTitle,
295
- LEGACY_size: "medium",
296
- LEGACY_fallbackIcon: IconEmbed
297
- }),
298
- onClick: () => {
299
- return true;
300
- },
301
- testId: 'image-floating-appearance',
302
- selected: true
303
- }, {
304
- type: 'separator'
305
- });
275
+ if (editorExperiment('platform_editor_controls', 'control')) {
276
+ var _pluginInjectionApi$a4;
277
+ toolbarButtons.push({
278
+ type: 'button',
279
+ id: 'editor.media.image.view.switcher.inline',
280
+ title: inlineSwitcherTitle,
281
+ icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
282
+ color: "currentColor",
283
+ spacing: "spacious",
284
+ label: inlineSwitcherTitle,
285
+ LEGACY_size: "medium",
286
+ LEGACY_fallbackIcon: IconInline
287
+ }),
288
+ onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
289
+ testId: 'image-inline-appearance'
290
+ }, {
291
+ type: 'button',
292
+ id: 'editor.media.image.view.switcher.floating',
293
+ title: floatingSwitcherTitle,
294
+ icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
295
+ color: "currentColor",
296
+ spacing: "spacious",
297
+ label: floatingSwitcherTitle,
298
+ LEGACY_size: "medium",
299
+ LEGACY_fallbackIcon: IconEmbed
300
+ }),
301
+ onClick: () => {
302
+ return true;
303
+ },
304
+ testId: 'image-floating-appearance',
305
+ selected: true
306
+ }, {
307
+ type: 'separator'
308
+ });
309
+ } else {
310
+ var _pluginInjectionApi$a5;
311
+ const options = [{
312
+ id: 'editor.media.convert.mediainline',
313
+ title: inlineSwitcherTitle,
314
+ onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
315
+ icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
316
+ color: "currentColor",
317
+ spacing: "spacious",
318
+ label: inlineSwitcherTitle,
319
+ LEGACY_size: "medium",
320
+ LEGACY_fallbackIcon: IconInline
321
+ })
322
+ }, {
323
+ id: 'editor.media.convert.mediasingle',
324
+ title: floatingSwitcherTitle,
325
+ selected: true,
326
+ onClick: () => {
327
+ return true;
328
+ },
329
+ icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
330
+ color: "currentColor",
331
+ spacing: "spacious",
332
+ label: floatingSwitcherTitle,
333
+ LEGACY_size: "medium",
334
+ LEGACY_fallbackIcon: IconEmbed
335
+ })
336
+ }];
337
+ const switchFromBlockToInline = {
338
+ id: 'media-block-to-inline-toolbar-item',
339
+ testId: 'media-inline-to-block-dropdown',
340
+ type: 'dropdown',
341
+ options: options,
342
+ title: intl.formatMessage(messages.sizeOptions),
343
+ icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
344
+ color: "currentColor",
345
+ spacing: "spacious",
346
+ label: intl.formatMessage(messages.sizeOptions),
347
+ LEGACY_size: "medium",
348
+ LEGACY_fallbackIcon: IconEmbed
349
+ })
350
+ };
351
+ toolbarButtons.push(switchFromBlockToInline, {
352
+ type: 'separator',
353
+ fullHeight: true
354
+ });
355
+ }
306
356
  }
307
357
  }
308
358
 
@@ -370,9 +420,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
370
420
  width,
371
421
  validation
372
422
  }) => {
373
- var _pluginInjectionApi$a5;
423
+ var _pluginInjectionApi$a6;
374
424
  const newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
375
- updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
425
+ updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
376
426
  },
377
427
  onMigrate: () => {
378
428
  const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
@@ -439,14 +489,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
439
489
  };
440
490
  const openLink = () => {
441
491
  if (editorView) {
442
- var _pluginInjectionApi$a6;
492
+ var _pluginInjectionApi$a7;
443
493
  const {
444
494
  state: {
445
495
  tr
446
496
  },
447
497
  dispatch
448
498
  } = editorView;
449
- pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
499
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
450
500
  eventType: EVENT_TYPE.TRACK,
451
501
  action: ACTION.VISITED,
452
502
  actionSubject: ACTION_SUBJECT.MEDIA,
@@ -518,9 +568,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
518
568
  });
519
569
  }
520
570
  if (allowAltTextOnImages) {
521
- var _pluginInjectionApi$a7;
522
- toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
523
- type: 'separator'
571
+ var _pluginInjectionApi$a8;
572
+ toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
573
+ type: 'separator',
574
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
524
575
  });
525
576
  }
526
577
  const removeButton = {
@@ -539,13 +590,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
539
590
  testId: 'media-toolbar-remove-button',
540
591
  supportsViewMode: false
541
592
  };
542
- if (!editorExperiment('platform_editor_controls', 'control')) {
543
- toolbarButtons.push(removeButton);
544
- toolbarButtons.push({
545
- type: 'separator',
546
- supportsViewMode: false
547
- });
548
-
593
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
549
594
  // Preview Support
550
595
  if (allowAdvancedToolBarOptions && allowImagePreview) {
551
596
  var _mediaNode$attrs2;
@@ -569,11 +614,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
569
614
  supportsViewMode: true
570
615
  }, {
571
616
  type: 'separator',
572
- supportsViewMode: true
617
+ supportsViewMode: true,
618
+ fullHeight: true
573
619
  });
574
620
  }
575
621
  }
576
- toolbarButtons.push({
622
+ isViewOnly && toolbarButtons.push({
577
623
  type: 'copy-button',
578
624
  items: [{
579
625
  state,
@@ -581,8 +627,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
581
627
  nodeType: mediaSingle
582
628
  }],
583
629
  supportsViewMode: true
584
- });
585
- toolbarButtons.push({
630
+ }, {
586
631
  type: 'separator',
587
632
  supportsViewMode: true
588
633
  });
@@ -666,7 +711,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
666
711
  selectedNodeType = state.selection.node.type;
667
712
  }
668
713
  if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
669
- var _pluginInjectionApi$a8, _pluginInjectionApi$f3, _pluginInjectionApi$f4;
714
+ var _pluginInjectionApi$a9, _pluginInjectionApi$f3, _pluginInjectionApi$f4;
670
715
  const mediaOffset = state.selection.$from.parentOffset + 1;
671
716
  baseToolbar.getDomRef = () => {
672
717
  var _mediaPluginState$ele;
@@ -675,7 +720,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
675
720
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
676
721
  return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
677
722
  };
678
- items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector, isViewOnly);
723
+ items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector, isViewOnly);
679
724
  } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
680
725
  items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
681
726
  } else {
@@ -688,6 +733,47 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
688
733
  };
689
734
  items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
690
735
  }
736
+ if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
737
+ if (items[items.length - 1].type === 'separator') {
738
+ const separatorItem = items[items.length - 1];
739
+ separatorItem.fullHeight = true;
740
+ } else {
741
+ items.push({
742
+ type: 'separator',
743
+ fullHeight: true
744
+ });
745
+ }
746
+ items.push({
747
+ type: 'overflow-dropdown',
748
+ options: [{
749
+ title: 'Resize',
750
+ onClick: () => {
751
+ // TODO open resize dialog?
752
+ return true;
753
+ },
754
+ icon: /*#__PURE__*/React.createElement(GrowHorizontalIcon, {
755
+ label: "Resize"
756
+ })
757
+ }, {
758
+ type: 'separator'
759
+ }, {
760
+ title: 'Copy',
761
+ onClick: () => {
762
+ // TODO replace with copy-button plugin
763
+ return true;
764
+ },
765
+ icon: /*#__PURE__*/React.createElement(CopyIcon, {
766
+ label: "Copy"
767
+ })
768
+ }, {
769
+ title: 'Delete',
770
+ onClick: remove,
771
+ icon: /*#__PURE__*/React.createElement(DeleteIcon, {
772
+ label: "Delete"
773
+ })
774
+ }]
775
+ });
776
+ }
691
777
 
692
778
  // Ignored via go/ees005
693
779
  // eslint-disable-next-line no-var
package/dist/es2019/ui/toolbar/mediaInline.js CHANGED
@@ -77,7 +77,8 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
77
77
  })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
78
78
  }
79
79
  }, {
80
- type: 'separator'
80
+ type: 'separator',
81
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
81
82
  }, {
82
83
  id: 'editor.media.card.download',
83
84
  type: 'button',
@@ -156,36 +157,86 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
156
157
  type: 'separator'
157
158
  });
158
159
  }
159
- inlineImageItems.push({
160
- id: 'editor.media.convert.mediainline',
161
- type: 'button',
162
- title: mediaInlineImageTitle,
163
- icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
164
- color: "currentColor",
165
- spacing: "spacious",
166
- label: mediaInlineImageTitle,
167
- LEGACY_size: "medium",
168
- LEGACY_fallbackIcon: IconInline
169
- }),
170
- onClick: () => {
171
- return true;
172
- },
173
- selected: true
174
- }, {
175
- id: 'editor.media.convert.mediasingle',
176
- type: 'button',
177
- title: mediaSingleTitle,
178
- icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
179
- color: "currentColor",
180
- spacing: "spacious",
181
- label: mediaSingleTitle,
182
- LEGACY_size: "medium",
183
- LEGACY_fallbackIcon: IconEmbed
184
- }),
185
- onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
186
- }, {
187
- type: 'separator'
188
- });
160
+
161
+ // For Editor Controls: show options to convert from 'Inline' to 'Original size' via dropdown
162
+ if (editorExperiment('platform_editor_controls', 'control')) {
163
+ inlineImageItems.push({
164
+ id: 'editor.media.convert.mediainline',
165
+ type: 'button',
166
+ title: mediaInlineImageTitle,
167
+ icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
168
+ color: "currentColor",
169
+ spacing: "spacious",
170
+ label: mediaInlineImageTitle,
171
+ LEGACY_size: "medium",
172
+ LEGACY_fallbackIcon: IconInline
173
+ }),
174
+ onClick: () => {
175
+ return true;
176
+ },
177
+ selected: true
178
+ }, {
179
+ id: 'editor.media.convert.mediasingle',
180
+ type: 'button',
181
+ title: mediaSingleTitle,
182
+ icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
183
+ color: "currentColor",
184
+ spacing: "spacious",
185
+ label: mediaSingleTitle,
186
+ LEGACY_size: "medium",
187
+ LEGACY_fallbackIcon: IconEmbed
188
+ }),
189
+ onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
190
+ }, {
191
+ type: 'separator'
192
+ });
193
+ } else {
194
+ const options = [{
195
+ id: 'editor.media.convert.mediainline',
196
+ title: mediaInlineImageTitle,
197
+ onClick: () => {
198
+ return true;
199
+ },
200
+ selected: true,
201
+ disabled: false,
202
+ icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
203
+ color: "currentColor",
204
+ spacing: "spacious",
205
+ label: mediaInlineImageTitle,
206
+ LEGACY_size: "medium",
207
+ LEGACY_fallbackIcon: IconInline
208
+ })
209
+ }, {
210
+ id: 'editor.media.convert.mediasingle',
211
+ title: mediaSingleTitle,
212
+ onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState),
213
+ icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
214
+ color: "currentColor",
215
+ spacing: "spacious",
216
+ label: mediaSingleTitle,
217
+ LEGACY_size: "medium",
218
+ LEGACY_fallbackIcon: IconEmbed
219
+ })
220
+ }];
221
+ const switchFromInlineToBlock = {
222
+ id: 'media-inline-to-block-toolbar-item',
223
+ testId: 'media-inline-to-block-dropdown',
224
+ type: 'dropdown',
225
+ options: options,
226
+ title: intl.formatMessage(messages.sizeOptions),
227
+ icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
228
+ color: "currentColor",
229
+ spacing: "spacious",
230
+ label: mediaInlineImageTitle,
231
+ LEGACY_size: "medium",
232
+ LEGACY_fallbackIcon: IconInline
233
+ })
234
+ };
235
+ inlineImageItems.push(switchFromInlineToBlock, {
236
+ type: 'separator',
237
+ fullHeight: true
238
+ });
239
+ }
189
240
 
190
241
  // TODO: editor controls move to overflow menu
191
242
  if (editorExperiment('platform_editor_controls', 'control')) {
@@ -239,30 +290,11 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
239
290
  supportsViewMode: true
240
291
  });
241
292
  }
242
- if (options.allowAltTextOnImages && !editorExperiment('platform_editor_controls', 'control')) {
293
+ if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'variant1')) {
243
294
  var _pluginInjectionApi$a5;
244
295
  inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
245
- type: 'separator'
246
- });
247
- }
248
- if (!editorExperiment('platform_editor_controls', 'control')) {
249
- inlineImageItems.push({
250
- id: 'editor.media.delete',
251
- type: 'button',
252
- appearance: 'danger',
253
- focusEditoronEnter: true,
254
- icon: DeleteIcon,
255
- iconFallback: RemoveIcon,
256
- onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
257
- onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
258
- onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
259
- onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
260
- title: intl.formatMessage(commonMessages.remove),
261
- onClick: removeInlineCard,
262
- testId: 'media-toolbar-remove-button'
263
- });
264
- inlineImageItems.push({
265
- type: 'separator'
296
+ type: 'separator',
297
+ fullHeight: true
266
298
  });
267
299
  }
268
300
 
@@ -285,7 +317,8 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
285
317
  supportsViewMode: true
286
318
  }, {
287
319
  type: 'separator',
288
- supportsViewMode: true
320
+ supportsViewMode: true,
321
+ fullHeight: editorExperiment('platform_editor_controls', 'variant1')
289
322
  });
290
323
  }
291
324
  if (options.isViewOnly) {
@@ -310,15 +343,17 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
310
343
  type: 'separator'
311
344
  });
312
345
  }
313
- inlineImageItems.push({
314
- type: 'copy-button',
315
- supportsViewMode: true,
316
- items: [{
317
- state,
318
- formatMessage: intl.formatMessage,
319
- nodeType: mediaInline
320
- }]
321
- });
346
+ if (options.isViewOnly || editorExperiment('platform_editor_controls', 'control')) {
347
+ inlineImageItems.push({
348
+ type: 'copy-button',
349
+ supportsViewMode: true,
350
+ items: [{
351
+ state,
352
+ formatMessage: intl.formatMessage,
353
+ nodeType: mediaInline
354
+ }]
355
+ });
356
+ }
322
357
  if (editorExperiment('platform_editor_controls', 'control')) {
323
358
  inlineImageItems.push({
324
359
  type: 'separator'