@atlaskit/editor-plugin-media 2.2.3 → 2.2.5

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

@@ -12,7 +12,9 @@ import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atl
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
+import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
 import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
 import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
 import MaximizeIcon from '@atlaskit/icon/core/maximize';
@@ -263,46 +265,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 = contains(selectedNode.node, state.schema.nodes.caption);
         var inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
         var floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
-        toolbarButtons.push({
-          type: 'button',
-          id: 'editor.media.image.view.switcher.inline',
-          title: inlineSwitcherTitle,
-          icon: function icon() {
-            return /*#__PURE__*/React.createElement(ImageInlineIcon, {
+        if (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.createElement(ImageInlineIcon, {
+                color: "currentColor",
+                spacing: "spacious",
+                label: inlineSwitcherTitle,
+                LEGACY_size: "medium",
+                LEGACY_fallbackIcon: IconInline
+              });
+            },
+            onClick: 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.createElement(ImageFullscreenIcon, {
+                color: "currentColor",
+                spacing: "spacious",
+                label: floatingSwitcherTitle,
+                LEGACY_size: "medium",
+                LEGACY_fallbackIcon: 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: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
+            icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
               color: "currentColor",
               spacing: "spacious",
               label: inlineSwitcherTitle,
               LEGACY_size: "medium",
               LEGACY_fallbackIcon: IconInline
-            });
-          },
-          onClick: 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.createElement(ImageFullscreenIcon, {
+            })
+          }, {
+            id: 'editor.media.convert.mediasingle',
+            title: floatingSwitcherTitle,
+            selected: true,
+            onClick: function onClick() {
+              return true;
+            },
+            icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
               color: "currentColor",
               spacing: "spacious",
               label: floatingSwitcherTitle,
               LEGACY_size: "medium",
               LEGACY_fallbackIcon: 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(messages.sizeOptions),
+            icon: function icon() {
+              return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
+                color: "currentColor",
+                spacing: "spacious",
+                label: intl.formatMessage(messages.sizeOptions),
+                LEGACY_size: "medium",
+                LEGACY_fallbackIcon: IconEmbed
+              });
+            }
+          };
+          toolbarButtons.push(switchFromBlockToInline, {
+            type: 'separator',
+            fullHeight: true
+          });
+        }
       }
     }
 
@@ -363,11 +415,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               }
             },
             onSubmit: function onSubmit(_ref3) {
-              var _pluginInjectionApi$a5;
+              var _pluginInjectionApi$a6;
               var width = _ref3.width,
                 validation = _ref3.validation;
               var newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              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);
+              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), {}, {
@@ -429,10 +481,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: EVENT_TYPE.TRACK,
                     action: ACTION.VISITED,
                     actionSubject: ACTION_SUBJECT.MEDIA,
@@ -504,9 +556,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a7;
-    toolbarButtons.push(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(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: editorExperiment('platform_editor_controls', 'variant1')
     });
   }
   var removeButton = {
@@ -525,13 +578,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     testId: 'media-toolbar-remove-button',
     supportsViewMode: false
   };
-  if (!editorExperiment('platform_editor_controls', 'control')) {
-    toolbarButtons.push(removeButton);
-    toolbarButtons.push({
-      type: 'separator',
-      supportsViewMode: false
-    });
-
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
     // Preview Support
     if (allowAdvancedToolBarOptions && allowImagePreview) {
       var _mediaNode$attrs2;
@@ -555,11 +602,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,
@@ -567,8 +615,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         nodeType: mediaSingle
       }],
       supportsViewMode: true
-    });
-    toolbarButtons.push({
+    }, {
       type: 'separator',
       supportsViewMode: true
     });
@@ -654,7 +701,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     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;
@@ -663,7 +710,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       // 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 = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
@@ -676,6 +723,47 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
   }
+  if (items.length > 0 && 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.createElement(GrowHorizontalIcon, {
+          label: "Resize"
+        })
+      }, {
+        type: 'separator'
+      }, {
+        title: 'Copy',
+        onClick: function onClick() {
+          // TODO replace with copy-button plugin
+          return true;
+        },
+        icon: /*#__PURE__*/React.createElement(CopyIcon, {
+          label: "Copy"
+        })
+      }, {
+        title: 'Delete',
+        onClick: remove,
+        icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+          label: "Delete"
+        })
+      }]
+    });
+  }
 
   // Ignored via go/ees005
   // eslint-disable-next-line no-var

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

@@ -78,7 +78,8 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
     }
   }, {
-    type: 'separator'
+    type: 'separator',
+    fullHeight: editorExperiment('platform_editor_controls', 'variant1')
   }, {
     id: 'editor.media.card.download',
     type: 'button',
@@ -154,40 +155,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.createElement(ImageInlineIcon, {
+
+  // For Editor Controls: show options to convert from 'Inline' to 'Original size' via dropdown
+  if (editorExperiment('platform_editor_controls', 'control')) {
+    inlineImageItems.push({
+      id: 'editor.media.convert.mediainline',
+      type: 'button',
+      title: mediaInlineImageTitle,
+      icon: function icon() {
+        return /*#__PURE__*/React.createElement(ImageInlineIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: mediaInlineImageTitle,
+          LEGACY_size: "medium",
+          LEGACY_fallbackIcon: IconInline
+        });
+      },
+      onClick: function onClick() {
+        return true;
+      },
+      selected: true
+    }, {
+      id: 'editor.media.convert.mediasingle',
+      type: 'button',
+      title: mediaSingleTitle,
+      icon: function icon() {
+        return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: mediaSingleTitle,
+          LEGACY_size: "medium",
+          LEGACY_fallbackIcon: IconEmbed
+        });
+      },
+      onClick: 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.createElement(ImageInlineIcon, {
         color: "currentColor",
         spacing: "spacious",
         label: mediaInlineImageTitle,
         LEGACY_size: "medium",
         LEGACY_fallbackIcon: IconInline
-      });
-    },
-    onClick: function onClick() {
-      return true;
-    },
-    selected: true
-  }, {
-    id: 'editor.media.convert.mediasingle',
-    type: 'button',
-    title: mediaSingleTitle,
-    icon: function icon() {
-      return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
+      })
+    }, {
+      id: 'editor.media.convert.mediasingle',
+      title: mediaSingleTitle,
+      onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState),
+      icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
         color: "currentColor",
         spacing: "spacious",
         label: mediaSingleTitle,
         LEGACY_size: "medium",
         LEGACY_fallbackIcon: IconEmbed
-      });
-    },
-    onClick: 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(messages.sizeOptions),
+      icon: function icon() {
+        return /*#__PURE__*/React.createElement(ImageInlineIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: mediaInlineImageTitle,
+          LEGACY_size: "medium",
+          LEGACY_fallbackIcon: IconInline
+        });
+      }
+    };
+    inlineImageItems.push(switchFromInlineToBlock, {
+      type: 'separator',
+      fullHeight: true
+    });
+  }
 
   // TODO: editor controls move to overflow menu
   if (editorExperiment('platform_editor_controls', 'control')) {
@@ -235,30 +288,11 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       supportsViewMode: true
     });
   }
-  if (options.allowAltTextOnImages && !editorExperiment('platform_editor_controls', 'control')) {
+  if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'variant1')) {
     var _pluginInjectionApi$a5;
     inlineImageItems.push(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 (!editorExperiment('platform_editor_controls', 'control')) {
-    inlineImageItems.push({
-      id: 'editor.media.delete',
-      type: 'button',
-      appearance: 'danger',
-      focusEditoronEnter: true,
-      icon: DeleteIcon,
-      iconFallback: RemoveIcon,
-      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(commonMessages.remove),
-      onClick: removeInlineCard,
-      testId: 'media-toolbar-remove-button'
-    });
-    inlineImageItems.push({
-      type: 'separator'
+      type: 'separator',
+      fullHeight: true
     });
   }
 
@@ -281,7 +315,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       supportsViewMode: true
     }, {
       type: 'separator',
-      supportsViewMode: true
+      supportsViewMode: true,
+      fullHeight: editorExperiment('platform_editor_controls', 'variant1')
     });
   }
   if (options.isViewOnly) {
@@ -306,15 +341,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 || editorExperiment('platform_editor_controls', 'control')) {
+    inlineImageItems.push({
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state: state,
+        formatMessage: intl.formatMessage,
+        nodeType: mediaInline
+      }]
+    });
+  }
   if (editorExperiment('platform_editor_controls', 'control')) {
     inlineImageItems.push({
       type: 'separator'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "2.2.3",
+	"version": "2.2.5",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -70,7 +70,7 @@
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^17.0.0",
 		"@atlaskit/tmp-editor-statsig": "^3.3.0",
-		"@atlaskit/tokens": "^4.2.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",