@atlaskit/editor-plugin-media 2.3.9 → 2.3.11

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

@@ -1,6 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -81,41 +81,10 @@ export var handleShowMediaViewer = function handleShowMediaViewer(_ref) {
 };
 var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
   var _mediaPluginState$med, _pluginInjectionApi$c;
-  if (isViewOnly) {
-    return [];
-  }
   var enforceMediaDataSecurityPolicy = mediaPluginState === null || mediaPluginState === void 0 || (_mediaPluginState$med = mediaPluginState.mediaClientConfig) === null || _mediaPluginState$med === void 0 ? void 0 : _mediaPluginState$med.enforceDataSecurityPolicy;
   var disableDownloadButton = typeof enforceMediaDataSecurityPolicy === 'boolean' ? enforceMediaDataSecurityPolicy : false;
-  var mediaGroup = state.schema.nodes.mediaGroup;
-  var items = [{
-    id: 'editor.media.view.switcher.inline',
-    type: 'button',
-    icon: ImageInlineIcon,
-    iconFallback: IconInline,
-    selected: false,
-    focusEditoronEnter: true,
-    disabled: false,
-    onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
-    title: intl.formatMessage(cardMessages.inlineTitle),
-    testId: 'inline-appearance',
-    className: 'inline-appearance' // a11y. uses to force focus on item
-  }, {
-    id: 'editor.media.view.switcher.thumbnail',
-    type: 'button',
-    icon: SmartLinkCardIcon,
-    iconFallback: IconCard,
-    selected: true,
-    disabled: false,
-    focusEditoronEnter: true,
-    onClick: function onClick() {
-      return true;
-    },
-    title: intl.formatMessage(cardMessages.blockTitle),
-    testId: 'thumbnail-appearance',
-    className: 'thumbnail-appearance' // a11y. uses to force focus on item
-  }, {
-    type: 'separator'
-  }, {
+  var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+  var preview = {
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
@@ -131,9 +100,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     },
     disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.mode) === 'offline',
     supportsViewMode: true
-  }, {
-    type: 'separator'
-  }, {
+  };
+  var download = _objectSpread({
     id: 'editor.media.card.download',
     type: 'button',
     icon: DownloadIcon,
@@ -143,33 +111,118 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     },
     title: intl.formatMessage(messages.download),
     disabled: disableDownloadButton
-  }, {
-    type: 'separator'
-  }, {
-    type: 'copy-button',
-    supportsViewMode: true,
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaGroup
-    }]
-  }, {
-    type: 'separator'
-  }, {
-    id: 'editor.media.delete',
-    type: 'button',
-    appearance: 'danger',
-    focusEditoronEnter: true,
-    icon: DeleteIcon,
-    iconFallback: RemoveIcon,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
-    title: intl.formatMessage(commonMessages.remove),
-    onClick: handleRemoveMediaGroup,
-    testId: 'media-toolbar-remove-button'
-  }];
+  }, isEditorControlsEnabled && {
+    supportsViewMode: true
+  });
+  if (isViewOnly && !isEditorControlsEnabled) {
+    return [];
+  }
+  var mediaGroup = state.schema.nodes.mediaGroup;
+  var items = [];
+  if (!isEditorControlsEnabled) {
+    items.push({
+      id: 'editor.media.view.switcher.inline',
+      type: 'button',
+      icon: ImageInlineIcon,
+      iconFallback: IconInline,
+      selected: false,
+      focusEditoronEnter: true,
+      disabled: false,
+      onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
+      title: intl.formatMessage(cardMessages.inlineTitle),
+      testId: 'inline-appearance',
+      className: 'inline-appearance' // a11y. uses to force focus on item
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      type: 'button',
+      icon: SmartLinkCardIcon,
+      iconFallback: IconCard,
+      selected: true,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: function onClick() {
+        return true;
+      },
+      title: intl.formatMessage(cardMessages.blockTitle),
+      testId: 'thumbnail-appearance',
+      className: 'thumbnail-appearance' // a11y. uses to force focus on item
+    }, {
+      type: 'separator'
+    }, preview, {
+      type: 'separator'
+    }, download, {
+      type: 'separator'
+    }, {
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state: state,
+        formatMessage: intl.formatMessage,
+        nodeType: mediaGroup
+      }]
+    }, {
+      type: 'separator'
+    }, {
+      id: 'editor.media.delete',
+      type: 'button',
+      appearance: 'danger',
+      focusEditoronEnter: true,
+      icon: DeleteIcon,
+      iconFallback: RemoveIcon,
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
+      title: intl.formatMessage(commonMessages.remove),
+      onClick: handleRemoveMediaGroup,
+      testId: 'media-toolbar-remove-button'
+    });
+  } else {
+    var options = [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(cardMessages.inlineTitle),
+      onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
+      icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
+        label: "",
+        spacing: "spacious"
+      })
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(cardMessages.blockTitle),
+      selected: true,
+      onClick: function onClick() {
+        return true;
+      },
+      icon: /*#__PURE__*/React.createElement(SmartLinkCardIcon, {
+        label: "",
+        spacing: "spacious"
+      })
+    }];
+    var switcherDropdown = {
+      title: intl.formatMessage(messages.fileDisplayOptions),
+      id: 'media-group-inline-switcher-toolbar-item',
+      testId: 'media-group-inline-switcher-dropdown',
+      type: 'dropdown',
+      options: options,
+      icon: function icon() {
+        return /*#__PURE__*/React.createElement(SmartLinkCardIcon, {
+          label: "",
+          spacing: "spacious"
+        });
+      }
+    };
+    items.push(switcherDropdown, {
+      type: 'separator',
+      fullHeight: true
+    }, download, {
+      type: 'separator',
+      fullHeight: true,
+      supportsViewMode: true
+    }, preview, {
+      type: 'separator',
+      fullHeight: true
+    });
+  }
   return items;
 };
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi) {

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

@@ -110,7 +110,9 @@ export var getLinkingDropdownOptions = function getLinkingDropdownOptions(editor
     var selectedNodeTypeSingle = mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.attrs.__fileMimeType;
     mediaType = getMediaType(selectedNodeTypeSingle);
   }
-  if (mediaType !== 'external' && mediaType !== 'image') {
+
+  // Only show link dropdown option for images and external media (shown as images)
+  if (mediaType !== 'image' && (mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.attrs.type) !== 'external') {
     return [];
   }
   if (mediaLinkingState && mediaLinkingState.editable) {

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

@@ -1,9 +1,13 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import DeleteIcon from '@atlaskit/icon/core/delete';
+import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
 import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
 import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
 import MaximizeIcon from '@atlaskit/icon/core/maximize';
@@ -36,39 +40,13 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
   if (mediaPluginState.allowInlineImages && isImage(mediaType)) {
     return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
   }
-  var items = [{
-    id: 'editor.media.view.switcher.inline',
-    type: 'button',
-    icon: ImageInlineIcon,
-    iconFallback: IconInline,
-    selected: true,
-    disabled: false,
-    focusEditoronEnter: true,
-    onClick: function onClick() {
-      return true;
-    },
-    title: intl.formatMessage(cardMessages.inlineTitle),
-    testId: 'inline-appearance',
-    className: 'inline-appearance' // a11y. uses to force focus on item
-  }, {
-    id: 'editor.media.view.switcher.thumbnail',
-    type: 'button',
-    icon: SmartLinkCardIcon,
-    iconFallback: IconCard,
-    selected: false,
-    disabled: false,
-    focusEditoronEnter: true,
-    onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
-    title: intl.formatMessage(cardMessages.blockTitle),
-    testId: 'thumbnail-appearance',
-    className: 'thumbnail-appearance' // a11y. uses to force focus on item
-  }, {
-    type: 'separator'
-  }, {
+  var items = [];
+  var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+  var preview = _objectSpread({
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
-    icon: MaximizeIcon,
+    icon: editorExperiment('platform_editor_controls', 'variant1') ? GrowDiagonalIcon : MaximizeIcon,
     iconFallback: FilePreviewIcon,
     title: intl.formatMessage(messages.preview),
     onClick: function onClick() {
@@ -78,10 +56,10 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
         api: pluginInjectionApi
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
     }
-  }, {
-    type: 'separator',
-    fullHeight: editorExperiment('platform_editor_controls', 'variant1')
-  }, {
+  }, isEditorControlsEnabled && {
+    supportsViewMode: true
+  });
+  var download = _objectSpread({
     id: 'editor.media.card.download',
     type: 'button',
     icon: DownloadIcon,
@@ -90,33 +68,113 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
       return true;
     },
     title: intl.formatMessage(messages.download)
-  }, {
-    type: 'separator'
-  }, {
-    type: 'copy-button',
-    supportsViewMode: true,
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaInline
-    }]
-  }, {
-    type: 'separator'
-  }, {
-    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'
-  }];
+  }, isEditorControlsEnabled && {
+    supportsViewMode: true
+  });
+  if (!isEditorControlsEnabled) {
+    items.push({
+      id: 'editor.media.view.switcher.inline',
+      type: 'button',
+      icon: ImageInlineIcon,
+      iconFallback: IconInline,
+      selected: true,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: function onClick() {
+        return true;
+      },
+      title: intl.formatMessage(cardMessages.inlineTitle),
+      testId: 'inline-appearance',
+      className: 'inline-appearance' // a11y. uses to force focus on item
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      type: 'button',
+      icon: SmartLinkCardIcon,
+      iconFallback: IconCard,
+      selected: false,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
+      title: intl.formatMessage(cardMessages.blockTitle),
+      testId: 'thumbnail-appearance',
+      className: 'thumbnail-appearance' // a11y. uses to force focus on item
+    }, {
+      type: 'separator'
+    }, preview, {
+      type: 'separator'
+    }, download, {
+      type: 'separator'
+    }, {
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state: state,
+        formatMessage: intl.formatMessage,
+        nodeType: mediaInline
+      }]
+    }, {
+      type: 'separator'
+    }, {
+      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'
+    });
+  } else {
+    var _options = [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(cardMessages.inlineTitle),
+      onClick: function onClick() {
+        return true;
+      },
+      selected: true,
+      icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
+        label: "",
+        spacing: "spacious"
+      })
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(cardMessages.blockTitle),
+      onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
+      icon: /*#__PURE__*/React.createElement(SmartLinkCardIcon, {
+        label: "",
+        spacing: "spacious"
+      })
+    }];
+    var switcherDropdown = {
+      title: intl.formatMessage(messages.fileDisplayOptions),
+      id: 'media-group-inline-switcher-toolbar-item',
+      testId: 'media-group-inline-switcher-dropdown',
+      type: 'dropdown',
+      options: _options,
+      icon: function icon() {
+        return /*#__PURE__*/React.createElement(ImageInlineIcon, {
+          label: "",
+          spacing: "spacious"
+        });
+      }
+    };
+    items.push(switcherDropdown, {
+      type: 'separator',
+      fullHeight: true
+    }, download, {
+      type: 'separator',
+      fullHeight: true,
+      supportsViewMode: true
+    }, preview, {
+      type: 'separator',
+      fullHeight: true
+    });
+  }
   return items;
 };
 var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState) {
@@ -194,7 +252,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       type: 'separator'
     });
   } else {
-    var _options = [{
+    var _options2 = [{
       id: 'editor.media.convert.mediainline',
       title: mediaInlineImageTitle,
       onClick: function onClick() {
@@ -225,7 +283,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       id: 'media-inline-to-block-toolbar-item',
       testId: 'media-inline-to-block-dropdown',
       type: 'dropdown',
-      options: _options,
+      options: _options2,
       title: intl.formatMessage(messages.sizeOptions),
       icon: function icon() {
         return /*#__PURE__*/React.createElement(ImageInlineIcon, {

package/dist/types/pm-plugins/pixel-resizing/reducer.d.ts

@@ -1,4 +1,4 @@
-type mediaPixelResizingState = {
+type MediaPixelResizingState = {
     isPixelEditorOpen: boolean;
 };
 type OpenPixelEditor = {
@@ -8,5 +8,5 @@ type ClosePixelEditor = {
     type: 'closePixelEditor';
 };
 type MediaPixelResizingAction = OpenPixelEditor | ClosePixelEditor;
-declare const _default: (state: mediaPixelResizingState, action: MediaPixelResizingAction) => mediaPixelResizingState;
+declare const _default: (state: MediaPixelResizingState, action: MediaPixelResizingAction) => MediaPixelResizingState;
 export default _default;

package/dist/types-ts4.5/pm-plugins/pixel-resizing/reducer.d.ts

@@ -1,4 +1,4 @@
-type mediaPixelResizingState = {
+type MediaPixelResizingState = {
     isPixelEditorOpen: boolean;
 };
 type OpenPixelEditor = {
@@ -8,5 +8,5 @@ type ClosePixelEditor = {
     type: 'closePixelEditor';
 };
 type MediaPixelResizingAction = OpenPixelEditor | ClosePixelEditor;
-declare const _default: (state: mediaPixelResizingState, action: MediaPixelResizingAction) => mediaPixelResizingState;
+declare const _default: (state: MediaPixelResizingState, action: MediaPixelResizingAction) => MediaPixelResizingState;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "2.3.9",
+	"version": "2.3.11",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^21.1.0",
-		"@atlaskit/editor-common": "^102.11.0",
+		"@atlaskit/editor-common": "^102.12.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-annotation": "^2.1.0",
@@ -63,7 +63,7 @@
 		"@atlaskit/media-common": "^12.0.0",
 		"@atlaskit/media-filmstrip": "^49.0.0",
 		"@atlaskit/media-picker": "^68.0.0",
-		"@atlaskit/media-ui": "^28.0.0",
+		"@atlaskit/media-ui": "^28.1.0",
 		"@atlaskit/media-viewer": "^52.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.2.0",
@@ -164,6 +164,9 @@
 		},
 		"platform_editor_safari_media_clipboard_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_render_media_viewer_as_inline": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {