@atlaskit/editor-plugin-media 2.2.3 → 2.2.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-media
 
+## 2.2.5
+
+### Patch Changes
+
+- [#121092](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121092)
+  [`8cd08b738070d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8cd08b738070d) -
+  [ux] Implemented full height separator as per design for media and card
+
+## 2.2.4
+
+### Patch Changes
+
+- [#120999](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120999)
+  [`3d280e8a1e183`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d280e8a1e183) -
+  [ux] Moves media floating toolbar options to convert image from block to inline and back to a
+  dropdown.
+- [#120575](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120575)
+  [`0da64a47689b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0da64a47689b5) -
+  [ux] Add overflow menu on editor floating toolbar for media and card plugin
+
 ## 2.2.3
 
 ### Patch Changes

package/dist/cjs/ui/toolbar/index.js

@@ -18,7 +18,9 @@ var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/message
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
+var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
 var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
 var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
 var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
@@ -273,46 +275,96 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       var _selectedNode$node$fi;
       // mediaInlne doesn't suppprt external images, so hiding buttons to prevent conversion from mediaSingle to mediaInline
       if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
-        var _pluginInjectionApi$a4;
         var hasCaption = (0, _utils.contains)(selectedNode.node, state.schema.nodes.caption);
         var inlineSwitcherTitle = intl.formatMessage(hasCaption ? _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
         var floatingSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
-        toolbarButtons.push({
-          type: 'button',
-          id: 'editor.media.image.view.switcher.inline',
-          title: inlineSwitcherTitle,
-          icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+        if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+          var _pluginInjectionApi$a4;
+          toolbarButtons.push({
+            type: 'button',
+            id: 'editor.media.image.view.switcher.inline',
+            title: inlineSwitcherTitle,
+            icon: function icon() {
+              return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+                color: "currentColor",
+                spacing: "spacious",
+                label: inlineSwitcherTitle,
+                LEGACY_size: "medium",
+                LEGACY_fallbackIcon: _card.IconInline
+              });
+            },
+            onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
+            testId: 'image-inline-appearance'
+          }, {
+            type: 'button',
+            id: 'editor.media.image.view.switcher.floating',
+            title: floatingSwitcherTitle,
+            icon: function icon() {
+              return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
+                color: "currentColor",
+                spacing: "spacious",
+                label: floatingSwitcherTitle,
+                LEGACY_size: "medium",
+                LEGACY_fallbackIcon: _card.IconEmbed
+              });
+            },
+            onClick: function onClick() {
+              return true;
+            },
+            testId: 'image-floating-appearance',
+            selected: true
+          }, {
+            type: 'separator'
+          });
+        } else {
+          var _pluginInjectionApi$a5;
+          var _options2 = [{
+            id: 'editor.media.convert.mediainline',
+            title: inlineSwitcherTitle,
+            onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
+            icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
               color: "currentColor",
               spacing: "spacious",
               label: inlineSwitcherTitle,
               LEGACY_size: "medium",
               LEGACY_fallbackIcon: _card.IconInline
-            });
-          },
-          onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
-          testId: 'image-inline-appearance'
-        }, {
-          type: 'button',
-          id: 'editor.media.image.view.switcher.floating',
-          title: floatingSwitcherTitle,
-          icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
+            })
+          }, {
+            id: 'editor.media.convert.mediasingle',
+            title: floatingSwitcherTitle,
+            selected: true,
+            onClick: function onClick() {
+              return true;
+            },
+            icon: /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
               color: "currentColor",
               spacing: "spacious",
               label: floatingSwitcherTitle,
               LEGACY_size: "medium",
               LEGACY_fallbackIcon: _card.IconEmbed
-            });
-          },
-          onClick: function onClick() {
-            return true;
-          },
-          testId: 'image-floating-appearance',
-          selected: true
-        }, {
-          type: 'separator'
-        });
+            })
+          }];
+          var switchFromBlockToInline = {
+            id: 'media-block-to-inline-toolbar-item',
+            testId: 'media-inline-to-block-dropdown',
+            type: 'dropdown',
+            options: _options2,
+            title: intl.formatMessage(_mediaUi.messages.sizeOptions),
+            icon: function icon() {
+              return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
+                color: "currentColor",
+                spacing: "spacious",
+                label: intl.formatMessage(_mediaUi.messages.sizeOptions),
+                LEGACY_size: "medium",
+                LEGACY_fallbackIcon: _card.IconEmbed
+              });
+            }
+          };
+          toolbarButtons.push(switchFromBlockToInline, {
+            type: 'separator',
+            fullHeight: true
+          });
+        }
       }
     }
 
@@ -373,11 +425,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               }
             },
             onSubmit: function onSubmit(_ref3) {
-              var _pluginInjectionApi$a5;
+              var _pluginInjectionApi$a6;
               var width = _ref3.width,
                 validation = _ref3.validation;
               var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
+              (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
             },
             onMigrate: function onMigrate() {
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
@@ -439,10 +491,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               };
               var openLink = function openLink() {
                 if (editorView) {
-                  var _pluginInjectionApi$a6;
+                  var _pluginInjectionApi$a7;
                   var tr = editorView.state.tr,
                     dispatch = editorView.dispatch;
-                  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 || _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
+                  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 || _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
                     eventType: _analytics.EVENT_TYPE.TRACK,
                     action: _analytics.ACTION.VISITED,
                     actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
@@ -514,9 +566,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a7;
-    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
-      type: 'separator'
+    var _pluginInjectionApi$a8;
+    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
+      type: 'separator',
+      fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
     });
   }
   var removeButton = {
@@ -535,13 +588,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     testId: 'media-toolbar-remove-button',
     supportsViewMode: false
   };
-  if (!(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
-    toolbarButtons.push(removeButton);
-    toolbarButtons.push({
-      type: 'separator',
-      supportsViewMode: false
-    });
-
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     // Preview Support
     if (allowAdvancedToolBarOptions && allowImagePreview) {
       var _mediaNode$attrs2;
@@ -565,11 +612,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           supportsViewMode: true
         }, {
           type: 'separator',
-          supportsViewMode: true
+          supportsViewMode: true,
+          fullHeight: true
         });
       }
     }
-    toolbarButtons.push({
+    isViewOnly && toolbarButtons.push({
       type: 'copy-button',
       items: [{
         state: state,
@@ -577,8 +625,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         nodeType: mediaSingle
       }],
       supportsViewMode: true
-    });
-    toolbarButtons.push({
+    }, {
       type: 'separator',
       supportsViewMode: true
     });
@@ -664,7 +711,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a8, _pluginInjectionApi$f2;
+    var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
@@ -673,7 +720,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     items = (0, _mediaInline2.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
@@ -686,6 +733,47 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
   }
+  if (items.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    if (items[items.length - 1].type === 'separator') {
+      var separatorItem = items[items.length - 1];
+      separatorItem.fullHeight = true;
+    } else {
+      items.push({
+        type: 'separator',
+        fullHeight: true
+      });
+    }
+    items.push({
+      type: 'overflow-dropdown',
+      options: [{
+        title: 'Resize',
+        onClick: function onClick() {
+          // TODO open resize dialog?
+          return true;
+        },
+        icon: /*#__PURE__*/_react.default.createElement(_growHorizontal.default, {
+          label: "Resize"
+        })
+      }, {
+        type: 'separator'
+      }, {
+        title: 'Copy',
+        onClick: function onClick() {
+          // TODO replace with copy-button plugin
+          return true;
+        },
+        icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
+          label: "Copy"
+        })
+      }, {
+        title: 'Delete',
+        onClick: remove,
+        icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
+          label: "Delete"
+        })
+      }]
+    });
+  }
 
   // Ignored via go/ees005
   // eslint-disable-next-line no-var

package/dist/cjs/ui/toolbar/mediaInline.js

@@ -88,7 +88,8 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
     }
   }, {
-    type: 'separator'
+    type: 'separator',
+    fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
   }, {
     id: 'editor.media.card.download',
     type: 'button',
@@ -164,40 +165,92 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       type: 'separator'
     });
   }
-  inlineImageItems.push({
-    id: 'editor.media.convert.mediainline',
-    type: 'button',
-    title: mediaInlineImageTitle,
-    icon: function icon() {
-      return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+
+  // For Editor Controls: show options to convert from 'Inline' to 'Original size' via dropdown
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+    inlineImageItems.push({
+      id: 'editor.media.convert.mediainline',
+      type: 'button',
+      title: mediaInlineImageTitle,
+      icon: function icon() {
+        return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: mediaInlineImageTitle,
+          LEGACY_size: "medium",
+          LEGACY_fallbackIcon: _card.IconInline
+        });
+      },
+      onClick: function onClick() {
+        return true;
+      },
+      selected: true
+    }, {
+      id: 'editor.media.convert.mediasingle',
+      type: 'button',
+      title: mediaSingleTitle,
+      icon: function icon() {
+        return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: mediaSingleTitle,
+          LEGACY_size: "medium",
+          LEGACY_fallbackIcon: _card.IconEmbed
+        });
+      },
+      onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState)
+    }, {
+      type: 'separator'
+    });
+  } else {
+    var _options = [{
+      id: 'editor.media.convert.mediainline',
+      title: mediaInlineImageTitle,
+      onClick: function onClick() {
+        return true;
+      },
+      selected: true,
+      disabled: false,
+      icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
         color: "currentColor",
         spacing: "spacious",
         label: mediaInlineImageTitle,
         LEGACY_size: "medium",
         LEGACY_fallbackIcon: _card.IconInline
-      });
-    },
-    onClick: function onClick() {
-      return true;
-    },
-    selected: true
-  }, {
-    id: 'editor.media.convert.mediasingle',
-    type: 'button',
-    title: mediaSingleTitle,
-    icon: function icon() {
-      return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
+      })
+    }, {
+      id: 'editor.media.convert.mediasingle',
+      title: mediaSingleTitle,
+      onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState),
+      icon: /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
         color: "currentColor",
         spacing: "spacious",
         label: mediaSingleTitle,
         LEGACY_size: "medium",
         LEGACY_fallbackIcon: _card.IconEmbed
-      });
-    },
-    onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState)
-  }, {
-    type: 'separator'
-  });
+      })
+    }];
+    var switchFromInlineToBlock = {
+      id: 'media-inline-to-block-toolbar-item',
+      testId: 'media-inline-to-block-dropdown',
+      type: 'dropdown',
+      options: _options,
+      title: intl.formatMessage(_mediaUi.messages.sizeOptions),
+      icon: function icon() {
+        return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: mediaInlineImageTitle,
+          LEGACY_size: "medium",
+          LEGACY_fallbackIcon: _card.IconInline
+        });
+      }
+    };
+    inlineImageItems.push(switchFromInlineToBlock, {
+      type: 'separator',
+      fullHeight: true
+    });
+  }
 
   // TODO: editor controls move to overflow menu
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
@@ -245,30 +298,11 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       supportsViewMode: true
     });
   }
-  if (options.allowAltTextOnImages && !(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+  if (options.allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     var _pluginInjectionApi$a5;
     inlineImageItems.push((0, _altText.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
-      type: 'separator'
-    });
-  }
-  if (!(0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
-    inlineImageItems.push({
-      id: 'editor.media.delete',
-      type: 'button',
-      appearance: 'danger',
-      focusEditoronEnter: true,
-      icon: _delete.default,
-      iconFallback: _remove.default,
-      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-      title: intl.formatMessage(_messages.default.remove),
-      onClick: _commands.removeInlineCard,
-      testId: 'media-toolbar-remove-button'
-    });
-    inlineImageItems.push({
-      type: 'separator'
+      type: 'separator',
+      fullHeight: true
     });
   }
 
@@ -291,7 +325,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       supportsViewMode: true
     }, {
       type: 'separator',
-      supportsViewMode: true
+      supportsViewMode: true,
+      fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
     });
   }
   if (options.isViewOnly) {
@@ -316,15 +351,17 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       type: 'separator'
     });
   }
-  inlineImageItems.push({
-    type: 'copy-button',
-    supportsViewMode: true,
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaInline
-    }]
-  });
+  if (options.isViewOnly || (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+    inlineImageItems.push({
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state: state,
+        formatMessage: intl.formatMessage,
+        nodeType: mediaInline
+      }]
+    });
+  }
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
     inlineImageItems.push({
       type: 'separator'